/* The rail's Basic / Advanced menus (owner 2026-10-31, designs 1 + 4 – kg-rail-menu.js). Phones too since 2026-11-01 (overrides at the end). */
@media all {
  /* the switch under KG is the rail's Level row and its fly-out since rail design E (kg-simple-side.css, .kgtop / .kgfo) */

  /* shared bits */
  .kgrm-n { flex:none; font:700 12px system-ui, sans-serif; color:#5b6670; background:#f1f3f5; border-radius:999px; padding:2px 8px; }
  .kgrm-r { display:flex; justify-content:space-between; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer; }
  .kgrm-r > span { display:flex; flex-direction:column; min-width:0; } .kgrm-r b { font-weight:600; } .kgrm-r small { color:#6b7680; font-size:12.5px; }
  .kgrm-r input { appearance:none; -webkit-appearance:none; flex:none; width:40px; height:24px; border-radius:13px; background:#c9ced3; position:relative; cursor:pointer; margin:0; }
  .kgrm-r input::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; }
  .kgrm-r input:checked { background:#e0a91f; } .kgrm-r input:checked::after { left:19px; }
  .kgrm-r input:focus-visible { outline:2px solid #e0a91f; outline-offset:2px; }
  .kgrm-r input:disabled { cursor:default; opacity:.6; }
  .kgrm-seg { display:flex; flex-wrap:wrap; border:1px solid #d9d5cc; border-radius:10px; overflow:hidden; margin:2px 0 8px; }
  .kgrm-seg button { flex:1 1 auto; min-height:36px; border:0; border-left:1px solid #d9d5cc; background:#fff; font:600 13px system-ui, sans-serif; color:#17222c; cursor:pointer; padding:0 10px; }
  .kgrm-seg button:first-child { border-left:0; }
  .kgrm-seg button[aria-pressed="true"] { background:#e0a91f; }
  .kgrm-seg button:disabled { cursor:default; opacity:.6; }

  /* Basic: the row at the end of the answer */
  #kgq .kgrm-all { display:flex; align-items:center; gap:10px; width:100%; min-height:58px; text-align:left; border:1px solid #d9d5cc; border-radius:10px;
    background:#f7f5ef; color:#17222c; padding:8px 12px; cursor:pointer; font:14px/1.3 system-ui, sans-serif; }
  #kgq .kgrm-all:hover { border-color:#e0a91f; }
  #kgq .kgrm-all > span:first-child { display:flex; flex-direction:column; flex:1; min-width:0; }
  #kgq .kgrm-all small { color:#6b7680; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #kgq .kgrm-all i, #kgrm i { font-style:normal; font-size:22px; color:#9aa5b0; line-height:1; }

  /* Advanced: every section open under the answer */
  #kgq .kgrm-h { display:flex; align-items:center; justify-content:space-between; font:700 15px system-ui, sans-serif; padding-top:4px; }
  #kgq .kgrm-adv-list { display:flex; flex-direction:column; gap:6px; }
  #kgq .kgrm-sec { border:1px solid #e3e6ea; border-radius:10px; overflow:hidden; }
  #kgq .kgrm-sec > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 12px; background:#f4f6f8; cursor:pointer; list-style:none; }
  #kgq .kgrm-sec > summary::-webkit-details-marker { display:none; }
  #kgq .kgrm-sec > summary b::before { content:"▸ "; color:#8a939c; } #kgq .kgrm-sec[open] > summary b::before { content:"▾ "; }
  #kgq .kgrm-row { padding:6px 12px; border-top:1px solid #eef0f2; }
  #kgq .kgrm-row .kgrm-r { min-height:40px; }
  #kgq .kgrm-chips { display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 6px; }
  #kgq .kgrm-chip { min-height:32px; padding:0 12px; border-radius:999px; border:1px solid #d9d5cc; background:#fff; font:600 12.5px system-ui, sans-serif; color:#17222c; cursor:pointer; }
  #kgq .kgrm-chip.on { background:#e0a91f; border-color:#e0a91f; }
  #kgq .kgrm-chip:disabled { cursor:default; opacity:.6; }

  /* Basic: the drill-down panel, in the answer panel's place */
  body.kgrm-drill #kgq { display:none !important; }
  #kgrm { order:-2; width:350px; flex:0 0 350px; background:#fff; color:#17222c; border-right:1px solid #d9d5cc; display:flex; flex-direction:column;
    gap:10px; padding:14px 16px; overflow:auto; font:14px/1.45 system-ui, sans-serif; }
  #kgrm[hidden] { display:none; }
  #kgrm .kgrm-top { display:flex; justify-content:space-between; align-items:center; }
  #kgrm .kgrm-back { min-height:40px; padding:0 14px; border:1px solid #d9d5cc; border-radius:8px; background:#f4f6f8; font:700 14px system-ui, sans-serif; color:#17222c; cursor:pointer; }
  #kgrm .kgrm-x { border:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' stroke='%23fff' stroke-width='2.4' stroke-linecap='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); }
  #kgrm .kgrm-x:hover, #kgrm .kgrm-x:focus-visible { background-color:#a8851f; outline:2px solid #7a5600; outline-offset:2px; }
  #kgrm h2 { font-size:19px; line-height:1.2; margin:0; }
  #kgrm .kgrm-trail { color:#6b7680; font-size:13px; }
  #kgrm .kgrm-lvl { font:800 10.5px system-ui, sans-serif; color:#fff; background:#4b5a75; border-radius:5px; padding:1px 6px; margin-left:4px; text-transform:uppercase; white-space:nowrap; display:inline-block; }
  #kgrm .kgrm-list { display:flex; flex-direction:column; border-top:1px solid #e3e6ea; }
  #kgrm .kgrm-go { display:flex; align-items:center; gap:10px; min-height:58px; text-align:left; border:0; border-bottom:1px solid #e3e6ea; background:#fff; padding:8px 2px; cursor:pointer; font:14px/1.3 system-ui, sans-serif; color:#17222c; }
  #kgrm .kgrm-go:hover, #kgrm .kgrm-more:hover { background:#fbf8ef; }
  #kgrm .kgrm-go > span:first-child { display:flex; flex-direction:column; flex:1; min-width:0; }
  #kgrm .kgrm-go small { color:#6b7680; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #kgrm .kgrm-line { display:flex; align-items:center; gap:6px; min-height:58px; border-bottom:1px solid #e3e6ea; padding:6px 2px; }
  #kgrm .kgrm-more { flex:none; display:flex; align-items:center; gap:4px; min-width:44px; min-height:44px; justify-content:flex-end; border:0; border-left:1px solid #eef0f2;
    background:none; cursor:pointer; font:700 12px system-ui, sans-serif; color:#5b6670; padding:0 4px 0 10px; }
  #kgrm .kgrm-lab { font:700 12px system-ui, sans-serif; color:#6b7680; text-transform:uppercase; letter-spacing:.04em; margin-top:10px; }
  #kgrm .kgrm-lock { margin:0; color:#7a5600; font-weight:600; font-size:13px; }
  #kgrm .kgrm-foot { margin-top:auto; color:#6b7680; font-size:12.5px; border-top:1px solid #e3e6ea; padding-top:10px; }

  /* stage 2 – the view's own tools in the rail (design 8, kg-rail-menu.js): since rail design E a small gold heading ("3D tools")
     and rows like the rail's own, under Ask */
  #rail #kgvt { display:flex; flex-direction:column; align-items:stretch; gap:1px; flex:none; margin:2px 0 0; }
  #rail #kgvt[hidden] { display:none; }
  #rail #kgvt .kgvt-t { font:700 9px system-ui, sans-serif; letter-spacing:.08em; color:#e0a91f; text-transform:uppercase; margin:4px 12px 1px; }
  #rail #kgvt .kgvt-b.on { color:var(--gold); background:rgba(255,255,255,.08); }
  /* the bars it copies go (3D: the line bar, Cuts, the bottom tool row). The Depth strip on the right stays in 3D and 2D as well
     as its rail copy (owner 2026-10-31, "The debth line disapeared" → "Yes, bring it back") */
  body.kgvt.v3d #linebar, body.kgvt.v3d #cuts, body.kgvt.v3d .kg3t { display:none !important; }
  /* its white panel, in the answer panel's place */
  body.kgvt-open #kgq, body.kgvt-open #kgrm { display:none !important; }
  #kgvtp { order:-2; width:350px; flex:0 0 350px; background:#fff; color:#17222c; border-right:1px solid #d9d5cc; display:flex; flex-direction:column;
    gap:8px; padding:14px 16px; overflow:auto; font:14px/1.45 system-ui, sans-serif; }
  #kgvtp[hidden] { display:none; }
  #kgvtp .kgvt-h { display:flex; justify-content:space-between; align-items:center; }
  #kgvtp h2 { font-size:19px; line-height:1.2; margin:0; }
  #kgvtp .kgrm-x { 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); }
  #kgvtp .kgrm-x:hover, #kgvtp .kgrm-x:focus-visible { background-color:#a8851f; outline:2px solid #7a5600; outline-offset:2px; }
  #kgvtp .kgrm-trail { color:#6b7680; font-size:13px; }
  #kgvtp .kgvt-sec { display:flex; flex-direction:column; gap:4px; border-top:1px solid #e3e6ea; padding-top:8px; }
  #kgvtp .kgvt-sh { font:800 12px system-ui, sans-serif; color:#6b7680; text-transform:uppercase; letter-spacing:.04em; }
  #kgvtp .kgvt-lab { display:flex; justify-content:space-between; font:600 13px system-ui, sans-serif; color:#33404b; margin-top:4px; }
  #kgvtp .kgvt-lab output { color:#7a5600; }
  #kgvtp .kgvt-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; width:100%; text-align:left; border:0;
    border-bottom:1px solid #eef0f2; background:#fff; padding:6px 2px; cursor:pointer; font:14px/1.3 system-ui, sans-serif; color:#17222c; }
  #kgvtp button.kgvt-row:hover { background:#fbf8ef; }
  #kgvtp .kgvt-row > span { display:flex; flex-direction:column; min-width:0; } #kgvtp .kgvt-row b { font-weight:600; } #kgvtp .kgvt-row small { color:#6b7680; font-size:12.5px; }
  #kgvtp .kgvt-row i { font-style:normal; font-size:22px; color:#9aa5b0; }
  #kgvtp .kgvt-range { width:100%; accent-color:#e0a91f; height:28px; margin:0; }
  #kgvtp .kgvt-stops { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  #kgvtp .kgvt-stops button { min-height:52px; border:1px solid #d9d5cc; border-radius:10px; background:#fff; font:700 14px system-ui, sans-serif; color:#17222c; cursor:pointer; }
  #kgvtp .kgvt-stops button[aria-pressed="true"] { background:#fff6d6; border-color:#e0a91f; box-shadow:inset 0 0 0 1px #e0a91f; }
  #kgvtp .kgvt-val { display:flex; align-items:center; gap:8px; }
  #kgvtp .kgvt-val span { flex:1; text-align:center; font:700 17px system-ui, sans-serif; border:1px solid #d9d5cc; border-radius:10px; min-height:44px; display:grid; place-items:center; }
  #kgvtp .kgvt-pn { width:48px; min-height:44px; border:1px solid #d9d5cc; border-radius:10px; background:#f4f6f8; font:700 20px system-ui, sans-serif; cursor:pointer; color:#17222c; }
}
/* ★ Recommended defaults in a rail button's answer (kg-simple-side.js, owner 2026-10-31): its own row, gold outline; on = "Back to my layers".
   Outside the width rule above, so a narrow window doesn't squeeze it beside Ask / All layers. */
#kgq .qf:has(.qdef) { flex-wrap:wrap; }
#kgq .qf .qdefrow { flex:1 1 100%; display:flex; gap:6px; }
#kgq .qf .qdef { flex:1 1 90%; min-height:44px; border:2px solid #e0a91f; background:#fff8e1; color:#5a3d00; font-weight:700; }
#kgq .qf .qdef.on { background:#fff; border-style:dashed; }
/* Save as my defaults / Reset to ours (an investor) or Save as our default / Back to the tour stop (an Admin) – owner 2026-11-01 */
#kgq .qf .qsave { flex:1 1 100%; display:flex; gap:6px; }
#kgq .qf .qsave button { flex:1 1 0; min-height:44px; border:1px solid #d9d5cc; border-radius:10px; background:#fff; color:#3d4852; font:600 13px system-ui, sans-serif; cursor:pointer; }
#kgq .qf .qsave button:hover { border-color:#e0a91f; color:#5a3d00; }
/* the Save icon (a gold bookmark +) beside ★ Recommended defaults (owner 2026-11-01: 90% / 10%) */
#kgq .qf .qsv { flex:0 0 10%; min-width:44px; min-height:44px; padding:0; border:1px solid #d9d5cc; border-radius:10px; background:#fff; color:#b97c0b; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#kgq .qf .qsv:hover { border-color:#e0a91f; background:#fff8e1; color:#5a3d00; }
/* Clear (every layer off) beside Save (owner 2026-11-01) */
#kgq .qf .qclr { flex:0 0 10%; min-width:44px; min-height:44px; padding:0; border:1px solid #d9d5cc; border-radius:10px; background:#fff; color:#6b7680; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#kgq .qf .qclr:hover { border-color:#c0392b; color:#c0392b; }
/* the same row on the drill-down pages, above their foot line (owner 2026-11-01, "Need save, default buttons") */
#kgrm .kgrm-qf { display:flex; flex-direction:column; gap:6px; margin-top:auto; }
#kgrm .kgrm-qf:empty { display:none; }
#kgrm .kgrm-qf ~ .kgrm-foot { margin-top:0; }
#kgrm .kgrm-qf .qdefrow, #kgrm .kgrm-qf .qsave { display:flex; gap:6px; }
#kgrm .kgrm-qf button { min-height:44px; border:1px solid #d9d5cc; border-radius:10px; background:#fff; cursor:pointer; font:600 13px system-ui, sans-serif; color:#3d4852; }
#kgrm .kgrm-qf .qdef { flex:1 1 90%; border:2px solid #e0a91f; background:#fff8e1; color:#5a3d00; font-weight:700; }
#kgrm .kgrm-qf .qdef.on { background:#fff; border-style:dashed; }
#kgrm .kgrm-qf .qsave button { flex:1 1 0; }
#kgrm .kgrm-qf .qsv, #kgrm .kgrm-qf .qclr { flex:0 0 10%; min-width:44px; padding:0; display:flex; align-items:center; justify-content:center; }
#kgrm .kgrm-qf .qsv { color:#b97c0b; }
#kgrm .kgrm-qf .qclr { color:#6b7680; }
#kgrm .kgrm-qf button:hover { border-color:#e0a91f; }
#kgrm .kgrm-qf .qclr:hover { border-color:#c0392b; color:#c0392b; }

/* phones (owner 2026-11-01, "do them all"): the Basic | Advanced switch in the sheet, and the drill-down as a sheet like the answer */
@media (max-width:760px) {
  .kgrm-ph { display:flex; align-items:center; gap:6px; margin:2px 0 8px; }
  .kgrm-ph span { font:700 12px system-ui, sans-serif; color:#6b7680; margin-right:2px; }
  .kgrm-ph button { flex:1; min-height:40px; border:1px solid #d9d5cc; border-radius:10px; background:#fff; font:600 14px system-ui, sans-serif; color:#17222c; }
  .kgrm-ph button[aria-pressed="true"] { background:#e0a91f; border-color:#e0a91f; }
  #kgrm { position:fixed; left:0; right:0; bottom:var(--railh, 58px); z-index:470; width:auto; flex:none; max-height:62vh; border-right:0;
    border-top:1px solid #d9d5cc; border-radius:14px 14px 0 0; box-shadow:0 -6px 20px rgba(0,0,0,.18); }
  #kgrm .kgrm-go, #kgrm .kgrm-line { min-height:52px; }
}
