/* The simpler left side of /map (owner 2026-10-28, "A + H + I"; kg-simple-side.js). Desktop and tablet only – a phone keeps its
   own bottom bar (map-phone.css). */
#rxmore, #rxtools, .rxdiv, #kgfly { display:none; }
#tree .lt .kgp { display:none; }   /* (a phone keeps one-line rows; the plain-word line shows on a wider screen, below) */
@media (min-width:761px) {
  /* A / H – the rail: Layers, Tour, Holes, Saved, More, (Tools for admins), Ask; the rest are pressed from the More / Tools box */
  body.kgsimple #rail #rsearch, body.kgsimple #rail #rarea, body.kgsimple #rail #rnotes, body.kgsimple #rail #rcont,
  body.kgsimple #rail #rdrop, body.kgsimple #rail #rholecsv, body.kgsimple #rail #rreport, body.kgsimple #rail #rsplit,
  body.kgsimple #rail #msettings, body.kgsimple #rail #rkeys, body.kgsimple #rail #radmin, body.kgsimple #rail #rproj,
  body.kgsimple #rail #rmore { display:none !important; }
  body.kgsimple #rail #rxmore, body.kgsimple #rail #rxtools { display:flex; }
  body.kgsimple #rail #rxmore.on, body.kgsimple #rail #rxtools.on { color:var(--gold); background:rgba(255,255,255,.08); }
  body.kgsimple #rail .rxdiv { display:block; width:36px; height:1px; background:#3b4a58; margin:2px 0; }
  body.kgsimple #rail #rask { margin-top:6px; }

  /* the More panel (owner 2026-10-30, "put the toggle items like this" – the Surveys answer panel): full height beside the rail, white,
     a big title and ×, one plain row per item with a thin line between, a switch on the right of each on/off item, › on the rest */
  /* (owner 2026-11-02, "take white space like other buttons"): in the page, not over the map – same place and width as #kgq */
  #kgfly { order:-2; width:350px; flex:0 0 350px; overflow:auto; background:#fff; color:#17222c; border-right:1px solid #d9d5cc;
    padding:14px 16px; font:14px/1.45 system-ui, sans-serif; box-sizing:border-box; }
  /* the Tours box the same way (kg-simple-side.js moves it beside #side and adds .kgpane) */
  #tourbox.kgpane { position:static; order:-2; width:350px; flex:0 0 350px; max-height:none; overflow:auto; background:#fff; color:#17222c;
    border:0; border-right:1px solid #d9d5cc; border-radius:0; box-shadow:none; padding:14px 16px; box-sizing:border-box; font:14px/1.45 system-ui, sans-serif; }
  #tourbox.kgpane[hidden] { display:none; }
  #tourbox.kgpane .ph b { font-size:19px; line-height:1.2; }
  #tourbox.kgpane .tx { color:#5b6670; font-size:22px; }
  #kgfly:not([hidden]) { display:flex; flex-direction:column; gap:10px; }
  #kgfly .kfh { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  #kgfly .kfh h2 { font-size:19px; line-height:1.2; margin:0; }
  #kgfly .kfx { border:0; background:none; font-size:22px; line-height:1; cursor:pointer; color:#5b6670; }
  #kgfly .kfl { display:flex; flex-direction:column; border-top:1px solid #e3e6ea; }
  #kgfly .kfr { display:flex; gap:10px; align-items:center; width:100%; text-align:left; border:0; border-bottom:1px solid #e3e6ea; background:none;
    padding:8px 2px; cursor:pointer; color:inherit; font:inherit; }
  #kgfly .kfr:hover, #kgfly .kfr:focus-visible { background:#faf7ef; outline:none; }
  #kgfly .kfr.locked { opacity:.55; }
  #kgfly .kfi { width:22px; flex:none; text-align:center; font-size:17px; line-height:1.2; }
  #kgfly .kft { display:flex; flex-direction:column; min-width:0; flex:1; } #kgfly .kft b { font-weight:600; }
  #kgfly .kft small { color:#6b7680; font-size:12.5px; }
  #kgfly .kfa { flex:none; color:#8a939b; font-size:18px; line-height:1; padding:0 4px; }
  /* (the answer panel's switch) */
  #kgfly .kfs { flex:none; width:34px; height:20px; border-radius:11px; background:#c9ced3; position:relative; transition:background .15s; }
  #kgfly .kfs::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; }
  #kgfly .kfr.kfon .kfs { background:#e0a91f; } #kgfly .kfr.kfon .kfs::after { left:17px; }

  /* A – the panel: one search box on top; the Layers heading, Clear, open-all and "N layers on" go (Clear is "Turn every layer
     off" under More; groups open one by one) */
  body.kgsimple #side header .lh, body.kgsimple #side #onnow { display:none !important; }
  /* "Ticked properties / Whole camp" sits under the list, small */
  body.kgsimple #side #pf { margin:6px 10px 0; } body.kgsimple #side #pf .seg2 button { font-size:12px; padding:3px 8px; }
  /* rows: the "1 of 2" count and the "2D" tags go (a layer this view lacks is greyed already) */
  body.kgsimple #tree .cnt, body.kgsimple #tree .vw { display:none !important; }
  /* tick boxes become switches (rows; a group's own box in its title stays a tick box) */
  body.kgsimple #tree label.lf > input[type=checkbox], body.kgsimple #tree label.mrg > input[type=checkbox] {
    appearance:none; -webkit-appearance:none; flex:none; width:28px; height:16px; border-radius:9px; background:#c9ced3; position:relative;
    cursor:pointer; margin:2px 6px 0 0; transition:background .15s; vertical-align:middle; }
  body.kgsimple #tree label.lf > input[type=checkbox]::after, body.kgsimple #tree label.mrg > input[type=checkbox]::after {
    content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:#fff; transition:left .15s; }
  body.kgsimple #tree label.lf > input[type=checkbox]:checked, body.kgsimple #tree label.mrg > input[type=checkbox]:checked { background:#e0a91f; }
  body.kgsimple #tree label.lf > input[type=checkbox]:checked::after, body.kgsimple #tree label.mrg > input[type=checkbox]:checked::after { left:14px; }
  body.kgsimple #tree label.mrg > input[type=checkbox]:indeterminate { background:#ecd08a; }
  body.kgsimple #tree label.mrg > input[type=checkbox]:indeterminate::after { left:8px; }
  body.kgsimple #tree label.lf > input[type=checkbox]:focus-visible, body.kgsimple #tree label.mrg > input[type=checkbox]:focus-visible { outline:2px solid #e0a91f; outline-offset:2px; }
  /* I – the plain-word line under a layer's name */
  /* (owner 2026-10-29: title on one line, the plain line on one line under it – both cut with … , the full text on hover) */
  body.kgsimple #tree .lt .kgp { display:block; font-size:11.5px; font-weight:400; color:#6b7680; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; margin-top:1px; }
  body.kgsimple #tree .lt { white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; line-height:1.3; padding:2px 0; }
  body.kgsimple #tree label.lf { align-items:center; }
  /* the ▾ that opens a layer's parts, much bigger (owner 2026-10-29) – its column grows from 14 px to 28 px */
  body.kgsimple #tree label.lf { grid-template-columns:auto 22px minmax(0,1fr) auto 28px 14px 18px 14px; }
  body.kgsimple #tree .fold { font-size:22px; line-height:1; padding:2px 4px; color:#33404b; }
  /* a layer that is off shows its title only; one that is on adds its plain line and, under it, zoom · show only · opacity on one
     line (owner 2026-10-29, "untoggled you could just have title"; no ⋯ pop-up here – layer-tree.js .qo) */
  body.kgsimple #tree label.lf:not(:has(> input:checked)):not(:has(> input:indeterminate)) .lt .kgp { display:none; }
  body.kgsimple #tree .mnu { display:none; }
  body.kgsimple #tree label.lf:has(> input:checked) > .qo, body.kgsimple #tree label.lf:has(> input:indeterminate) > .qo {
    display:flex; align-items:center; gap:4px; grid-row:2; grid-column:3 / -1; padding:1px 0 3px; min-width:0; }
  /* (and the shell-level row's Amplitude / weak–strong control: on row 2 it lay over the strip – "≥ 0.0102%", owner 2026-10-29 "bug") */
  body.kgsimple #tree label.lf > .pills, body.kgsimple #tree label.lf > .ctl { grid-row:3; }
  body.kgsimple #tree .qo button { display:inline-grid; place-items:center; width:26px; height:24px; padding:0; border:1px solid #d9d5cc; border-radius:6px;
    background:#fff; color:#33404b; cursor:pointer; font:14px/1 system-ui, sans-serif; flex:none; }
  body.kgsimple #tree .qo button:hover, body.kgsimple #tree .qo button:focus-visible { border-color:#e0a91f; outline:none; }
  body.kgsimple #tree .qo button.on { background:#e0a91f; border-color:#e0a91f; color:#17222c; }
  body.kgsimple #tree .qo input { flex:1 1 60px; min-width:50px; margin:0 0 0 4px; accent-color:#e0a91f; }
  body.kgsimple #tree .qo span { min-width:34px; text-align:right; font-size:11.5px; color:#6b7680; }
}
@media (min-width:761px) {
  /* step 2 – the questions on the rail, and their white answer panel (same place and width as the layer list) */
  body.kgqs #rail #pholes, body.kgqs #rail #rpins { display:none !important; }
  /* (owner 2026-10-30: All layers off the rail – "its all ready a button"; #lp stays in the page, the "All layers ›" buttons press it) */
  body.kgqs #rail #lp { display:none !important; }
  body.kgqs #rail .kgq.on { color:var(--gold); background:rgba(255,255,255,.08); }
  #kgq { order:-2; width:350px; flex:0 0 350px; background:#fff; color:#17222c; border-right:1px solid #d9d5cc; display:flex; flex-direction:column;
    gap:12px; padding:14px 16px; overflow:auto; font:14px/1.45 system-ui, sans-serif; }
  #kgq[hidden] { display:none; }
  #kgq .qh { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  #kgq h2 { font-size:19px; line-height:1.2; margin:0; text-wrap:balance; }
  #kgq .qx { border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6M11 6l-6 6 6 6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/60% no-repeat, #c9a43a; color:transparent; overflow:hidden; width:30px; height:30px; flex:0 0 30px; border-radius:50%; font-size:0; padding:0; display:inline-grid; place-items:center; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25); }
  #kgq .qx:hover, #kgq .qx:focus-visible { background-color:#a8851f; outline:2px solid #7a5600; outline-offset:2px; }
  #kgq .qa { margin:0; color:#33404b; }
  #kgq .ql { display:flex; flex-direction:column; border-top:1px solid #e3e6ea; }
  #kgq .qr { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid #e3e6ea; cursor:pointer; }
  #kgq .qr span { display:flex; flex-direction:column; min-width:0; } #kgq .qr b { font-weight:600; } #kgq .qr small { color:#6b7680; font-size:12.5px; }
  #kgq .qr input { appearance:none; -webkit-appearance:none; flex:none; width:34px; height:20px; border-radius:11px; background:#c9ced3; position:relative; cursor:pointer; margin:0; }
  #kgq .qr input::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .15s; }
  #kgq .qr input:checked { background:#e0a91f; } #kgq .qr input:checked::after { left:17px; }
  #kgq .qr input:focus-visible { outline:2px solid #e0a91f; outline-offset:2px; }
  #kgq .qr input:disabled { cursor:default; opacity:.6; } #kgq .qr:has(input:disabled) { cursor:default; }
  /* (tick boxes under a switch – Proposed drill holes: AI, Doug Robinson) */
  #kgq .qr.qhas { border-bottom:0; padding-bottom:2px; }
  #kgq .qsub { display:flex; flex-wrap:wrap; gap:4px 16px; padding:0 2px 8px 14px; border-bottom:1px solid #e3e6ea; font-size:13px; color:#3d4650; }
  #kgq .qsub label { display:flex; align-items:center; gap:6px; cursor:pointer; }
  #kgq .qsub input { width:15px; height:15px; margin:0; accent-color:#e0a91f; cursor:pointer; } #kgq .qsub input:disabled { cursor:default; opacity:.6; }
  #kgq .qlock { align-self:flex-start; border:0; background:none; padding:0; color:#7a5600; font:600 13px system-ui, sans-serif; cursor:pointer; text-decoration:underline; }
  #kgq .qf { display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }
  #kgq .qf button { border:1px solid #d9d5cc; background:#fff; border-radius:8px; padding:7px 12px; cursor:pointer; font:600 13px system-ui, sans-serif; color:#17222c; }
  #kgq .qf .qask { background:#e0a91f; border-color:#e0a91f; }
}
@media (min-width:761px) {
  /* step 3 – one top bar: search and the views on the left; Targets in the middle; Save, Share, Make an offer, then the admin pickers */
  /* (Reset, Center and View all sit beside Property – owner 2026-10-29) */
  body.kgbar #presets #pclear, body.kgbar #presets #pcenter, body.kgbar #presets #pview { margin-right:6px; }
  body.kgbar #presets #pview { margin-right:10px; }
  /* (owner 2026-10-29, "make buttons same size": Property, Reset, Center, View all and ‹ Targets ▾ › one height, one font) */
  body.kgbar #pproj, body.kgbar #presets button { box-sizing:border-box; height:34px; border-width:2px; border-radius:9px; font:700 13px system-ui, sans-serif; }
  body.kgbar #pproj, body.kgbar #presets button:not(.tgtstep):not(#tgtsplit) { padding:0 12px; gap:6px; }
  body.kgbar #pproj { margin:0 6px; } body.kgbar #presets #tgtsplit { padding:0 8px; }
  body.kgbar #pquick, body.kgbar #pall, body.kgbar #presets [data-p], body.kgbar #presets button.split:not(#tgtsplit) { display:none !important; }
  /* Targets as one control on the dark bar: ‹ Targets ▾ › joined, the arrows quiet */
  body.kgbar #presets { gap:0 !important; align-items:stretch; }
  body.kgbar #presets button.tgtstep { background:transparent; color:#c9d2db; border:1px solid #4a5a68; margin:0 !important; padding:4px 9px; font-size:16px; }
  body.kgbar #presets #tgtprev { border-radius:9px 0 0 9px; border-right:0; }
  body.kgbar #presets #tgtnext { border-radius:0 9px 9px 0; border-left:0; }
  body.kgbar #presets button.tgtstep:hover { color:#f0b92e; border-color:#e0a91f; }
  body.kgbar #presets #tgt { border-radius:0; margin:0; }
  body.kgbar #presets #tgtsplit { border-radius:0; margin:0 !important; }
  body.kgbar #presets { display:flex !important; position:static !important; background:none !important; box-shadow:none !important; padding:0 !important; }
  body.kgbar #rail .seg { display:none !important; }
  /* (Targets never squeezed away; the phone's chips stay on the phone; a bar too full – the Owner view with the list open on a
     small screen – wraps to a second row instead of cutting the view picker off) */
  body.kgbar #dash { flex-wrap:wrap; row-gap:6px; overflow:visible; }
  body.kgbar #presets, body.kgbar #pproj, body.kgbar #dash .who { flex:none; }
  body.kgbar #dash #phchips { display:none !important; }
  body.kgbar #dash .kgb { display:flex; align-items:center; gap:8px; flex:none; }
  body.kgbar #dash .kgb-r { margin-left:auto; } body.kgbar #dash .who { margin-left:6px; }
  body.kgbar #kgtq { width:clamp(130px,14vw,260px); height:32px; border:1px solid #3b4a58; border-radius:8px; background:#1b2733; color:#fff; padding:0 10px; font:14px system-ui, sans-serif; }
  body.kgbar #kgtq::placeholder { color:#93a1ad; } body.kgbar #kgtq:focus { outline:2px solid #e0a91f; outline-offset:0; }
  body.kgbar .kgv { display:flex; border:1px solid #3b4a58; border-radius:8px; overflow:hidden; }
  body.kgbar .kgv button { border:0; background:none; color:#c9d2db; font:600 13px system-ui, sans-serif; padding:6px 9px; cursor:pointer; }
  body.kgbar .kgv button + button { border-left:1px solid #3b4a58; }
  body.kgbar .kgv button:hover { color:#fff; background:rgba(255,255,255,.08); } body.kgbar .kgv button.on { background:#e0a91f; color:#17222c; }
  body.kgbar .kgv button.locked::after { content:" 🔒"; font-size:9px; }
  body.kgbar #dash .kgbb { border:1px solid #3b4a58; background:none; color:#e9edf0; border-radius:8px; padding:6px 11px; font:600 13px system-ui, sans-serif; cursor:pointer; white-space:nowrap; }
  body.kgbar #dash .kgbb:hover { background:rgba(255,255,255,.08); } body.kgbar #dash .kgbb.locked { opacity:.55; }
  body.kgbar #dash .kgoffer { background:#e0a91f; color:#17222c; border-radius:999px; padding:7px 16px; font:700 13.5px system-ui, sans-serif; text-decoration:none; white-space:nowrap; }
  body.kgbar #dash .kgoffer:hover { background:#ffd54f; }
  body.kgbar .kgv button:focus-visible, body.kgbar #dash .kgbb:focus-visible, body.kgbar #dash .kgoffer:focus-visible { outline:2px solid #e0a91f; outline-offset:2px; }
}
@media (min-width:761px) {
  /* step 4 – one card for whatever is picked, top right of the map, in place of the top bar's chip */
  body.kgcardon #selchip { display:none !important; }
  .views { position:relative; }
  #kgcard { position:absolute; top:10px; right:64px; z-index:450; width:290px; max-height:calc(100% - 20px); overflow:auto; background:#fff; color:#17222c;
    border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.3); padding:12px 14px; font:14px/1.4 system-ui, sans-serif; display:flex; flex-direction:column; gap:7px; }
  #kgcard[hidden] { display:none; }
  #kgcard .kch { display:flex; justify-content:space-between; align-items:center; }
  #kgcard .kct { font:600 11px system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#6b7680; }
  #kgcard .kcx { border:1px solid #c9c6bd; background:#eceae4; width:26px; height:26px; border-radius:50%; font:700 17px/1 system-ui, sans-serif; cursor:pointer; color:#1d1d1b;
    display:flex; align-items:center; justify-content:center; padding:0; }   /* (a clear ×: owner request 2026-10-31, "contrast of the x button is too low") */
  #kgcard .kcx:hover { background:#fac11c; border-color:#fac11c; }
  #kgcard .kch { cursor:grab; touch-action:none; } #kgcard.kcdrag, #kgcard.kcdrag .kch { cursor:grabbing; user-select:none; }   /* (dragged by its top row) */
  #kgcard h3 { margin:0; font-size:17px; line-height:1.25; text-wrap:balance; }
  #kgcard .kcf { margin:0; color:#5b6670; font-size:13px; }
  #kgcard .kck { display:flex; justify-content:space-between; align-items:baseline; background:#fbefcf; border-radius:8px; padding:6px 10px; }
  #kgcard .kck span { color:#7a5600; font-size:12.5px; } #kgcard .kck b { color:#5a3f00; font-size:16px; font-variant-numeric:tabular-nums; }
  #kgcard .kcw { display:flex; flex-direction:column; gap:3px; } #kgcard .kcw > b { font-size:13px; }
  #kgcard .kcr { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; } #kgcard .kcr span:last-child { color:#6b7680; font-variant-numeric:tabular-nums; }
  #kgcard .kcb { height:6px; border-radius:3px; background:#e3e6ea; overflow:hidden; } #kgcard .kcb i { display:block; height:100%; background:#e0a91f; }
  #kgcard.kcwide { width:min(460px, calc(100% - 84px)); }
  /* a target: rank badge, points bar, drill holes as bullets (owner 2026-11-01, one target card) */
  #kgcard .kcrk { display:inline-block; vertical-align:2px; margin-right:7px; background:#e65100; color:#fff; border-radius:10px; padding:1px 7px; font:700 12px/1.4 system-ui, sans-serif; }
  #kgcard .kcs { display:flex; align-items:center; gap:6px; white-space:nowrap; } #kgcard .kcs b { font-size:0; color:#e65100; }
  #kgcard .kcs span { color:#6b7680; font-size:12px; }
  #kgcard .kcsb { flex:1; min-width:60px; height:8px; border-radius:4px; background:#eceef0; overflow:hidden; } #kgcard .kcsb i { display:block; height:100%; background:linear-gradient(90deg,#ffb74d,#e65100); }
  #kgcard .kcdh[hidden] { display:none; } #kgcard .kcdh { border-top:1px solid #e3e6ea; padding-top:6px; }
  #kgcard .kcdh ul { margin:0 0 0 16px; padding:0; font-size:12.5px; line-height:1.4; } #kgcard .kcdh li { margin:0 0 3px; }
  #kgcard .kcai { color:#c2185b; } #kgcard .kcgeo { color:#1b7f3b; } #kgcard .kcoff { color:#c62828; }
  #kgcard .kcmore { align-self:flex-start; border:0; background:none; padding:2px 0; color:#7a5600; font:600 12.5px system-ui, sans-serif; cursor:pointer; }
  #kgcard .kcm[hidden] { display:none; } #kgcard .kcm ul { margin:4px 0 0 16px; padding:0; font-size:12.5px; line-height:1.45; } #kgcard .kcm li { margin:0 0 5px; }
  #kgcard .kcm b { color:#17222c; } #kgcard .kcm .kcp { color:#2e7d32; }
  #kgcard .kca { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
  #kgcard .kca button, #kgcard .kca a { border:1px solid #d9d5cc; background:#fff; color:#17222c; border-radius:8px; padding:5px 10px; font:600 12.5px system-ui, sans-serif; cursor:pointer; text-decoration:none; }
  #kgcard .kca .kcask { background:#e0a91f; border-color:#e0a91f; }
  #kgcard button:focus-visible, #kgcard a:focus-visible { outline:2px solid #e0a91f; outline-offset:2px; }
}
@media (min-width:761px) {
  /* step 5 – the first visit: the property in four facts and two choices, over the map */
  #kgwelcome { position:absolute; inset:0; z-index:700; background:rgba(13,17,22,.45); display:flex; align-items:center; justify-content:center; padding:20px; }
  #kgwelcome .kwb { position:relative; width:min(520px,100%); background:#fff; color:#17222c; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.4);
    padding:24px 26px 22px; display:flex; flex-direction:column; gap:14px; font:15px/1.5 system-ui, sans-serif; }
  #kgwelcome h2 { margin:0; font-size:22px; line-height:1.2; text-wrap:balance; padding-right:24px; }
  #kgwelcome .kwx { position:absolute; top:10px; right:12px; border:0; background:none; font-size:24px; line-height:1; cursor:pointer; color:#5b6670; }
  #kgwelcome .kwf { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  #kgwelcome .kwf div { background:#f3efe4; border-radius:10px; padding:10px 8px; display:flex; flex-direction:column; align-items:center; text-align:center; }
  #kgwelcome .kwf b { font-size:20px; font-variant-numeric:tabular-nums; } #kgwelcome .kwf span { font-size:12px; color:#5b6670; }
  #kgwelcome p { margin:0; color:#33404b; }
  #kgwelcome .kwa { display:flex; gap:10px; flex-wrap:wrap; }
  #kgwelcome .kwa button { border:1px solid #d9d5cc; background:#fff; color:#17222c; border-radius:999px; padding:9px 18px; font:700 14px system-ui, sans-serif; cursor:pointer; }
  #kgwelcome .kwa .kwt { background:#e0a91f; border-color:#e0a91f; }
  #kgwelcome button:focus-visible { outline:2px solid #e0a91f; outline-offset:2px; }
}
/* the final design's 12 – a phone: the questions as a sheet over the map, above the bottom bar */
@media (max-width:760px) {
  #kgq { position:fixed; left:0; right:0; bottom:var(--railh, 58px); z-index:470; max-height:62vh; overflow:auto; background:#fff; color:#17222c;
    border-radius:14px 14px 0 0; box-shadow:0 -8px 24px rgba(0,0,0,.3); padding:12px max(16px, env(safe-area-inset-left, 0px)) 14px; display:flex; flex-direction:column; gap:10px;
    font:15px/1.45 system-ui, sans-serif; }
  #kgq[hidden] { display:none; }
  #kgq .qh { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  #kgq h2 { font-size:18px; line-height:1.2; margin:0; }
  #kgq .qx { border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H6M11 6l-6 6 6 6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/60% no-repeat, #c9a43a; color:transparent; overflow:hidden; width:34px; height:34px; flex:0 0 34px; border-radius:50%; font-size:0; padding:0; display:inline-grid; place-items:center; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.25); }
  #kgq .qx:hover, #kgq .qx:focus-visible { background-color:#a8851f; outline:2px solid #7a5600; outline-offset:2px; }
  #kgq .qback { align-self:flex-start; border:0; background:none; padding:0; color:#7a5600; font:600 14px system-ui, sans-serif; }
  #kgq .qa { margin:0; color:#33404b; }
  #kgq .qq { display:flex; flex-direction:column; gap:8px; }
  #kgq .qq button { display:flex; gap:10px; align-items:center; text-align:left; border:1px solid #d9d5cc; background:#fff; color:#17222c; border-radius:10px; padding:12px; font:600 15px system-ui, sans-serif; }
  #kgq .qq button span { color:#b07d00; width:20px; text-align:center; }
  #kgq .ql { display:flex; flex-direction:column; border-top:1px solid #e3e6ea; }
  #kgq .qr { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid #e3e6ea; }
  #kgq .qr span { display:flex; flex-direction:column; min-width:0; } #kgq .qr b { font-weight:600; } #kgq .qr small { color:#6b7680; font-size:13px; }
  #kgq .qr input { appearance:none; -webkit-appearance:none; flex:none; width:40px; height:24px; border-radius:13px; background:#c9ced3; position:relative; margin:0; }
  #kgq .qr input::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; }
  #kgq .qr input:checked { background:#e0a91f; } #kgq .qr input:checked::after { left:19px; } #kgq .qr input:disabled { opacity:.6; }
  #kgq .qlock { align-self:flex-start; border:0; background:none; padding:0; color:#7a5600; font:600 14px system-ui, sans-serif; text-decoration:underline; }
  #kgq .qf { display:flex; gap:8px; flex-wrap:wrap; }
  #kgq .qf button { border:1px solid #d9d5cc; background:#fff; border-radius:10px; padding:10px 14px; font:600 14px system-ui, sans-serif; color:#17222c; }
  #kgq .qf .qask { background:#e0a91f; border-color:#e0a91f; }
  #rail #rexplore.on { color:var(--gold); }
}
/* the final design's 11 – an admin previewing a lower view: what that view doesn't get */
/* (gold and neutral – the red with a lock read as an error; viewer review 2026-11-01, #7) */
.kghid { flex:none; border:1px solid #fac11c; background:#fac11c; color:#1f2d3a; border-radius:8px; padding:5px 10px; font:700 12.5px system-ui, sans-serif; cursor:pointer; white-space:nowrap; }
#kghidp { position:fixed; z-index:650; width:330px; max-height:70vh; overflow:auto; background:#fff; color:#17222c; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  padding:10px 12px; font:13px/1.35 system-ui, sans-serif; display:flex; flex-direction:column; gap:8px; }
#kghidp[hidden] { display:none; }
#kghidp .khh { display:flex; justify-content:space-between; border-bottom:1px solid #e3e6ea; padding-bottom:6px; } #kghidp .khh span { color:#c62828; font-weight:700; }
#kghidp .khg { display:flex; flex-direction:column; gap:2px; } #kghidp .khg > b { font-size:12px; color:#5b6670; text-transform:uppercase; letter-spacing:.04em; }
#kghidp .khl { display:flex; justify-content:space-between; gap:8px; } #kghidp .khl small { color:#c62828; white-space:nowrap; }
/* the final design's 06 – below the Owner view, the line tools show in the Line view only (More › Line tools brings them back) */
#rail .rxhid { display:none !important; }
@media (min-width:761px) { body.kglinehide:not(.v1d):not(.kglineson) #linebar { display:none !important; } }
/* the final design's 08 – a tour plays as one bar at the bottom of the map (its own docked style), with Ask about this; the item
   card steps aside while a tour plays (the tour says what each stop is) */
@media (min-width:761px) {
  body.kgbar #tourcard.pop { left:50% !important; top:auto !important; bottom:34px; transform:translateX(-50%); width:min(600px, calc(100% - 28px)); }
  body.kgbar #tourcard.pop::before { display:none; }
  body.touring #kgcard { display:none !important; }
  #tourcard .tb .kgtask { width:auto; height:auto; margin-left:6px; border:0; background:#e0a91f; color:#17222c; border-radius:999px; padding:4px 12px; font:700 12px system-ui, sans-serif; cursor:pointer; white-space:nowrap; }
}
/* step 6 – Ctrl+K for admins */
#kgcmd { position:fixed; inset:0; z-index:900; background:rgba(13,17,22,.45); display:flex; justify-content:center; align-items:flex-start; padding-top:12vh; }
#kgcmd[hidden] { display:none; }
#kgcmd .kcp { width:min(620px,92vw); background:#fff; color:#17222c; border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.4); overflow:hidden; font:14px/1.35 system-ui, sans-serif; }
#kgcmd input { width:100%; box-sizing:border-box; border:0; border-bottom:1px solid #e3e6ea; padding:14px 16px; font:16px system-ui, sans-serif; outline:none; }
#kgcmd ul { list-style:none; margin:0; padding:6px; max-height:52vh; overflow:auto; }
#kgcmd li { display:grid; grid-template-columns:76px minmax(0,1fr); column-gap:10px; padding:7px 10px; border-radius:8px; cursor:pointer; }
#kgcmd li small { grid-column:2; color:#6b7680; font-size:12.5px; }
#kgcmd li[aria-selected="true"], #kgcmd li:hover { background:#f3efe4; }
#kgcmd .kk { grid-row:span 2; align-self:start; font:600 11px system-ui, sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#7a5600; padding-top:3px; }
#kgcmd .kne { color:#6b7680; cursor:default; display:block; }
#kgcmd .kch2 { margin:0; padding:7px 16px; border-top:1px solid #e3e6ea; color:#6b7680; font-size:12px; }
@media (prefers-reduced-motion:reduce) { body.kgsimple #tree input[type=checkbox], body.kgsimple #tree input[type=checkbox]::after { transition:none; } }

/* Share without a clipboard: the link in a small box under the button */
#kgsharep { position: fixed; z-index: 3000; display: flex; flex-direction: column; gap: 4px; width: min(360px, calc(100vw - 16px));
  padding: 8px 10px; background: #fff; color: #1b2433; border: 1px solid #c9ced8; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.25); font: 12px/1.3 system-ui, sans-serif; }
#kgsharep input { width: 100%; box-sizing: border-box; padding: 4px 6px; font: 12px ui-monospace, monospace; border: 1px solid #c9ced8; border-radius: 4px; }

/* The answer panel and All layers name each other (owner 2026-10-29): two buttons, half the width each, with margins */
#kgq .qf, #kgsf { display:flex; gap:8px; flex-wrap:nowrap; }
#kgq .qf button, #kgsf button { flex:1 1 0; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#kgsf { order:98; padding:10px 12px; margin:0; border-top:1px solid #e3e0d8; background:#fff; }
#kgsf button { border:1px solid #d9d5cc; background:#fff; border-radius:8px; padding:8px 12px; cursor:pointer; font:600 13px system-ui, sans-serif; color:#17222c; }
#kgsf .qask { background:#e0a91f; border-color:#e0a91f; }
#kgq .qf button:hover, #kgsf button:hover { border-color:#e0a91f; }
#kgq .qf button:focus-visible, #kgsf button:focus-visible { outline:2px solid #e0a91f; outline-offset:2px; }

/* Rail design E (owner 2026-10-31, round-2 mock-up "E", Knowledge Base\mockups\rail-menu-round2-2026-10-31.html): 104 px, icon and
   name on one line; the first two rows, "◧ Level B ▸" and "◫ View 3D ▸", show their choice in gold and open a dark fly-out to the
   right (.kgfo – #kgrmode from kg-rail-menu.js, #kgvs from here). Short enough for the page height, no scrolling. */
.kgfo { display:none; }
@media (min-width:761px) {
  body.kgsimple #rail { width:104px; flex:0 0 104px; align-items:stretch; gap:1px; padding:6px 0; }
  body.kgsimple #rail .ri:not(.fold) { flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; width:auto; min-height:0;
    margin:0 5px; padding:5px 8px 5px 10px; border-radius:7px; font:12.5px/1.35 system-ui, sans-serif; white-space:nowrap; text-align:left; }
  body.kgsimple #rail .ri .ic { width:16px; flex:none; text-align:center; font-size:14px; line-height:1.2; }
  body.kgsimple #rail .ri.on, body.kgsimple #rail .ri[aria-pressed="true"] { background:rgba(255,255,255,.08); }
  body.kgsimple #rail .home { justify-content:flex-start; padding:3px 12px 6px; margin:0 0 2px; }
  body.kgsimple #rail .rxdiv { width:auto; height:1px; background:#33465a; margin:4px 10px; }
  body.kgsimple #rail #rask { margin-top:0; }
  /* the two top rows: a thin frame, the choice right-aligned in gold; gold-framed while their fly-out is open */
  body.kgsimple #rail .kgtop { border:1px solid #3a5065; margin-bottom:2px; }
  body.kgsimple #rail .kgtop .kgtv { margin-left:auto; color:var(--gold); font-size:11px; font-weight:700; }
  body.kgsimple #rail .kgtop.open { border-color:#e0a91f; background:rgba(224,169,31,.12); }
  /* Sign out lives under More now */
  body.kgsimple #rail #rsignout button { display:none !important; }
  /* the « fold button at the foot, under whatever is left of the height */
  body.kgsimple #rail .fold { margin:auto auto 2px; width:40px; }
  /* the fly-out: navy like the rail, a small arrow at its row, the choice in gold */
  .kgfo:not([hidden]) { display:flex; align-items:stretch; position:fixed; z-index:700; background:#16212b; border-radius:10px;
    box-shadow:0 6px 20px rgba(0,0,0,.35); white-space:nowrap; font:600 12.5px system-ui, sans-serif; }
  .kgfo::before { content:""; position:absolute; left:-6px; top:var(--kgfo-y, 50%); margin-top:-6px; border:6px solid transparent; border-right-color:#16212b; border-left:0; }
  .kgfo .kgfo-l { align-self:center; padding:8px 4px 8px 12px; font:700 10px system-ui, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#9fb0c0; }
  .kgfo button { border:0; background:none; color:#e9eef3; font:inherit; padding:8px 13px; cursor:pointer; text-align:left; }
  .kgfo button:last-child { border-radius:0 10px 10px 0; }
  .kgfo button:hover { background:rgba(255,255,255,.08); }
  .kgfo button.on { background:#e0a91f; color:#1d1d1b; }
  .kgfo button:focus-visible { outline:2px solid #e0a91f; outline-offset:-2px; }
  .kgfo button small { display:block; font:400 10.5px system-ui, sans-serif; color:#9fb0c0; }
  .kgfo button.on small { color:#3b2f00; }
  .kgfo button.locked::after { content:" 🔒"; font-size:9px; } .kgfo button.locked { opacity:.6; }
}
#side > .sfoot { order:99; }
/* The answer panel's search line, the same as All layers' own box (owner 2026-10-29) */
#kgq .qs { width:100%; box-sizing:border-box; height:34px; border:1px solid #d9d5cc; border-radius:8px; padding:0 10px; font:14px system-ui, sans-serif; color:#17222c; background:#fff; margin-bottom:4px; }
#kgq .qs:focus { outline:2px solid #e0a91f; outline-offset:0; border-color:#e0a91f; }
/* Rock samples' minimum grade under its switch (owner 2026-10-29, "Need a slider for MIN g/t") */
#kgq .qmin { display:flex; align-items:center; gap:8px; padding:8px 2px 10px; border-bottom:1px solid #e3e6ea; font-size:13px; color:#33404b; flex-wrap:wrap; }
#kgq .qmin input { flex:1 1 90px; min-width:90px; accent-color:#e0a91f; margin:0; }
#kgq .qmin output { min-width:60px; font-weight:600; color:#17222c; }
#kgq .qmin button { border:1px solid #d9d5cc; background:#fff; border-radius:6px; padding:3px 8px; font:600 12px system-ui, sans-serif; color:#17222c; cursor:pointer; }
#kgq .qmin button[aria-pressed="true"] { background:#e0a91f; border-color:#e0a91f; }
#kgq .qmin :disabled { opacity:.6; cursor:default; }
/* Simple view is one white panel (owner 2026-10-29, "this is not simple and dont have two white areas"): while a question's
   answer panel is open, the layer panel – and in Line / Geology its "This view" settings – stays out of sight; "All layers ›"
   closes the answer panel and brings it back */
body.kgqs:has(#kgq:not([hidden])) #side { display:none !important; }
/* the click summary (owner 2026-10-30, "Left panel, small pop-up"): kg-simple-side.js kgSideSum; in the answer panel's place while open */
@media (min-width:761px) {
  /* (owner 2026-10-31, "go with a pop up moved away from target and moveable with a click and drag and an x": it floats over the map
     beside the spot, dragged by its heading; the left panel keeps its layers and questions) */
  #kgsum { position:fixed; z-index:1100; left:0; top:0; width:340px; color:#17222c; font:14px/1.45 system-ui, sans-serif; }
  #kgsum[hidden] { display:none; }
  #kgsum .sh { display:flex; justify-content:space-between; align-items:center; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#6b6a65;
    cursor:move; user-select:none; touch-action:none; margin:-8px -10px 0; padding:8px 10px 2px; }
  #kgsum .sh b::before { content:"⠿ "; color:#c9a43a; }
  #kgsum .sx { border:0; background:none; font-size:22px; line-height:1; cursor:pointer; color:#5b6670; padding:0 2px; }
  #kgsum .sx:hover { color:#1d1d1b; }
  #kgsum .sb { overflow:auto; min-height:0; flex:1 1 auto; }
  #kgsum .sb img { max-width:100%; height:auto; }
  #kgsum .sb a { color:#0b6aa2; }
  /* (round 2 mock-up 10, owner 2026-10-30: the summary in a dotted gold frame; the line from it to the spot is #kgsumln) */
  #kgsum .sf { display:flex; flex-direction:column; gap:8px; border:2px dashed #F2C230; border-radius:8px; padding:8px 10px; background:#FFF6DC;
    max-height:min(70vh, 560px); box-shadow:0 10px 30px rgba(0,0,0,.4); box-sizing:border-box; }
  /* (owner 2026-10-31: squares on every corner and side resize it – kg-simple-side.js .kgrz) */
  #kgsum .kgrz { position:absolute; width:10px; height:10px; background:#F2C230; border:1px solid #7a5200; border-radius:2px; z-index:1; touch-action:none; }
  #kgsum .kgrz:hover { background:#fff; }
  #kgsum .kgrz.n, #kgsum .kgrz.s { left:calc(50% - 5px); cursor:ns-resize; }
  #kgsum .kgrz.e, #kgsum .kgrz.w { top:calc(50% - 5px); cursor:ew-resize; }
  #kgsum .kgrz.n, #kgsum .kgrz.ne, #kgsum .kgrz.nw { top:-5px; }
  #kgsum .kgrz.s, #kgsum .kgrz.se, #kgsum .kgrz.sw { bottom:-5px; }
  #kgsum .kgrz.e, #kgsum .kgrz.ne, #kgsum .kgrz.se { right:-5px; }
  #kgsum .kgrz.w, #kgsum .kgrz.nw, #kgsum .kgrz.sw { left:-5px; }
  #kgsum .kgrz.ne, #kgsum .kgrz.sw { cursor:nesw-resize; }
  #kgsum .kgrz.nw, #kgsum .kgrz.se { cursor:nwse-resize; }
  /* (owner 2026-10-30: the selection card – "Place / Selected item", Show here, See in 3D – "can go … we have the summary now": hidden
     while the Summary is open; 3D, which has no Summary, keeps it) */
  body:has(#kgsum:not([hidden])) #kgcard { display:none !important; }
  #kgsum .sa { display:flex; flex-wrap:wrap; gap:6px; padding-top:8px; border-top:1px solid #f0e2bd; }
  #kgsum .sa button { font:600 12.5px system-ui, sans-serif; padding:5px 12px; border-radius:7px; border:1px solid #c9c4b6; background:#fff; color:#1d1d1b; cursor:pointer; }
  #kgsum .sa .sask2 { background:#E3A921; border-color:#E3A921; }
  #kgsum .sa button:hover { filter:brightness(.96); }
  #kgsum .sa .soff { color:#8a1c1c; border-color:#e3b4b4; }   /* Turn off (owner 2026-11-02) */
  #kgsumln { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:900; overflow:visible; }
}
/* the one-click showing card in the left panel (owner 2026-10-30) – the same look as on the 2D map (area-map-shell.html, ks-css) */
#kgsum .kgshow .ks-ph{position:relative;margin:0 0 8px}#kgsum .kgshow .ks-ph img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:6px;cursor:pointer}
#kgsum .kgshow .ks-ph span{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;padding:1px 7px;border-radius:9px}
#kgsum .kgshow .ks-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}#kgsum .kgshow .ks-h b{font-size:16px;display:block}
#kgsum .kgshow .ks-h small{display:block;font-size:11.5px;color:#6b6a65;margin-top:1px}
#kgsum .kgshow .ks-g{font-size:28px;font-weight:800;color:#9a6200;line-height:1;text-align:right;white-space:nowrap}#kgsum .kgshow .ks-g small{display:block;font-size:10.5px;font-weight:600;color:#8a5a00}
#kgsum .kgshow .ks-s{margin:8px 0 6px;font-size:13.5px;line-height:1.45}#kgsum .kgshow .ks-x{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}
#kgsum .kgshow .ks-d{margin-top:8px;font-size:12.5px}#kgsum .kgshow .ks-d>summary{cursor:pointer;color:#0b6aa2}
#kgsum .ks-also{margin-top:10px;border-top:1px solid #e3e6ea;padding-top:8px;font-size:13px}#kgsum .ks-also ul{margin:4px 0 0 18px;padding:0}#kgsum .ks-also li{margin:3px 0}
/* (owner 2026-11-01, "if not on 3d grey": a panel switch this view doesn't draw – greyed, with where it is; the note when it opens that view) */
#kgq .qr.qaway b { color:#8d969e; font-weight:500; } #kgq .qr.qaway small { color:#9aa2a9; font-style:italic; }
#kgq .qr.qaway input:not(:checked) { background:#dfe2e5; }
/* the All / None switch over a panel's switches (owner 2026-11-01) */
#kgq .qr.qalln b { font-weight:500; color:#5b6670; font-size:13px; }
.qawaynote { position:fixed; left:calc(var(--railw, 104px) + 14px); bottom:calc(var(--railh, 0px) + 14px); z-index:470; max-width:340px; padding:8px 30px 8px 12px;
  background:#1f2d3a; color:#fff; border-left:3px solid #fac11c; border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.35); font:13px/1.4 system-ui, sans-serif; }
.qawaynote button { position:absolute; right:6px; top:4px; border:0; background:none; color:#fff; font-size:16px; cursor:pointer; line-height:1; }