/* Left panel — Cast form and Library list in the right panel's idiom (owner 2026-10-10: "improve font and match on left
 * panel library/cast area to match the program").
 *
 * The Cast / Library sections were drawn in an older glass idiom (Cinzel small-caps section titles, 8-9 px spaced captions,
 * 6 px glass fields). They now read like the right panel's Display boxes and report pills:
 *   - section titles   = .rb-box-title / .o-panel-title  : sans-serif (--o-font) 700, Title Case, theme ink
 *   - field captions   = .o-stepper-label / .rb-display-field : 600 10.5 px, muted ink (--td-ui)
 *   - fields           = right-panel-glass.css fields     : --rp-field well, 1 px --bd line, --o-radius, 28 px, 500 12 px
 *   - segments / pills = .o-seg / .o-pill (osiris-controls.css, mapped by osiris-legacy-skin.css); only sizes are aligned here
 *   - group boxes      = .rb-box                           : 1 px --bd line, 10 px radius, no glass gradient
 * Colours are theme tokens only, so every theme and its day / night twin (and the glass skin) recolour live.
 *
 * Specificity: `html:not(#o)` + classes, kept BELOW the touch-layout.css rules (html.nw:not(#_) :is(#sidebar …) input…), so the
 * 44 px / 16 px touch floor still wins on phones and tablets, and loaded BEFORE panel-min-width.css so its compact (≤ 280 px)
 * ellipsis rules keep the last word. Field ids that the older sheets style with two ids get one id + `html:not(#o)`. */

/* ── Section titles: When / Where / Atlas · saved places / Add a place / Recent / combo groups ───────────────────── */
html:not(#o) #sidebar .cast-t{display:flex;align-items:center;gap:6px;margin:0 0 9px;font:700 12px/1.3 var(--o-font);letter-spacing:.01em;
  text-transform:none;color:var(--tx)}
html:not(#o) #sidebar :is(.cast-atlas>summary,.atlas-add-det>summary){font:700 11px/1.3 var(--o-font);letter-spacing:.01em;text-transform:none;
  color:var(--tx)}
html:not(#o) #sidebar .cast-atlas>summary{padding:7px 10px;min-height:30px;box-sizing:border-box}
html:not(#o) #sidebar .cast-atlas>summary::after{font:600 11px/1 var(--o-font);color:var(--td)}
html:not(#o) #sidebar .cast-atlas>summary:hover,html:not(#o) #sidebar .atlas-add-det>summary:hover{color:var(--tb)}
html:not(#o) #sidebar .atlas-add-det[open]>summary{color:var(--tb)}
html:not(#o) #sidebar .atlas-add-det>summary{padding:7px 10px}
html:not(#o) :is(.lib-recents-t,.combo-h){font:600 var(--fs-caption)/1.3 var(--o-font);letter-spacing:.02em;text-transform:none;color:var(--td)}
html:not(#o) .combo-h{padding:7px 10px 3px}

/* ── Group boxes: Atlas and Add a place sit in .rb-box-style cards ────────────────────────────────────────────── */
html:not(#o) #sidebar :is(.cast-atlas,.atlas-add-det){border:1px solid var(--bd);border-radius:10px;background:transparent}
html:not(#o) #sidebar .cast-atlas>#sb-atlas-body{padding:0 10px 10px}

/* ── Field captions: Year / Month / Day / Hour / Min / Sec / Latitude / Longitude, and the small notes ───────────── */
html:not(#o) #sidebar .cast-f{gap:5px}
html:not(#o) #sidebar .cast-f>span.cap,html:not(#o) .lib-edit-panel label{font:600 var(--fs-caption)/1.2 var(--o-font);letter-spacing:.02em;text-transform:none;
  color:var(--td)}
html:not(#o) .lib-edit-panel label{display:block;margin-top:7px;margin-bottom:3px}
html:not(#o) #sidebar :is(.cast-coord-tools,.cast-off){font:400 var(--fs-caption)/1.3 var(--o-font);color:var(--td);font-variant-numeric:tabular-nums}
html:not(#o) #sidebar .cast-coord-tools>span{font-weight:600}

/* ── Fields: the right panel's glass field ───────────────────────────────────────────────────────────────────── */
html:not(#o) .cast-form :is(input:not([type=checkbox],[type=radio],[type=range]),select),
html:not(#o) #library-search,html:not(#o) #atlas-search,html:not(#o) #atlas-add-inputs input,html:not(#o) .lib-edit-panel input{
  box-sizing:border-box;min-height:var(--o-h,28px);padding:4px 9px;border:1px solid var(--bd);border-radius:var(--o-radius,8px);
  background:var(--rp-field,var(--sf));color:var(--tx);font-size:12px;font-weight:500;letter-spacing:0;
  box-shadow:inset 0 1px 2px color-mix(in srgb,#000 20%,transparent);
  transition:border-color var(--o-dur,.12s) var(--o-ease),box-shadow var(--o-dur,.12s) var(--o-ease)}
html:not(#o) :is(#library-search,#atlas-search){padding-left:27px}
html:not(#o) .cast-form :is(input:not([type=checkbox],[type=radio],[type=range]),select):hover,
html:not(#o) :is(#library-search,#atlas-search,#atlas-add-inputs input,.lib-edit-panel input):hover{border-color:color-mix(in srgb,var(--ac) 55%,var(--bd))}
html:not(#o) .cast-form :is(input,select):focus-visible,
html:not(#o) :is(#library-search,#atlas-search,#atlas-add-inputs input,.lib-edit-panel input):focus-visible{outline:2px solid var(--a2,var(--ac));outline-offset:1px;
  border-color:var(--ac);box-shadow:inset 0 1px 2px color-mix(in srgb,#000 20%,transparent)}
html:not(#o) .cast-form :is(input,select):focus:not(:focus-visible){outline:none;border-color:var(--ac)}
html:not(#o) :is(.cast-form,#sb-library-body,#sb-atlas-body) input::placeholder{color:color-mix(in srgb,var(--td) 75%,transparent);font-weight:400}
/* the decimal coordinates fill their column (the header markup gives them an inline 72 px width) */
html:not(#o) .cast-coords :is(#in-lat,#in-lng){width:100%!important}
html:not(#o) .cast-coords :is(#lat-dms,#lng-dms) :is(input,select){min-height:var(--o-h-sm,24px);padding:2px 5px}
html:not(#o) .cast-coords .cast-f>div{gap:4px;font:500 11px/1.2 var(--o-font);color:var(--td)}

/* ── Rows of controls: one height (28 px) for fields, segment and icon pill ──────────────────────────────────── */
html:not(#o) #sidebar .cast-zone{gap:8px;align-items:stretch;margin-top:10px}
html:not(#o) #sidebar .combo-in{gap:8px;align-items:stretch}
html:not(#o) #sidebar #cast-map-btn,html:not(#o) #sidebar .atlas-tools>button{min-width:var(--o-h,28px);min-height:var(--o-h,28px);padding:0 8px;
  justify-content:center;border-radius:var(--o-radius,8px)}
html:not(#o) #sidebar .cast-grid,html:not(#o) #sidebar .cast-coords{gap:10px 8px}
html:not(#o) #sidebar .cast-coords{margin-top:12px}
html:not(#o) #sidebar .cast-coord-tools{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--o-h,28px)}
html:not(#o) #sidebar .cast-off{margin-top:8px;line-height:1.4}

/* ── Pills: Cast / New / Save / Duplicate / Dec / Pick on map read like the right panel's pills (.rp-btn / .rp-go) ──── */
html:not(#o) #btn-compute.cast-go:not(#o):not(#o){min-height:calc(var(--o-h,28px) + 4px);width:auto;font:700 12px/1.2 var(--o-font);letter-spacing:.04em}
html:not(#o) #sidebar #console-actions button:not(#o):not(#o){letter-spacing:var(--o-tracking,.02em);font-size:12px}
html:not(#o) #sidebar .cast-pick-map{width:100%;margin:0 0 8px}
html:not(#o) #sidebar #btn-dms{min-width:44px}

/* ── Cast form rhythm: 16 px between sections (When / Where / Atlas / buttons), 10 px between field rows, panel gutter on both sides ── */
html:not(#o) #sidebar .cast-form:not(.sb-collapsed){gap:16px;padding:6px 0 4px}
html:not(#o) #sidebar .cast-form>.cast-atlas{margin-top:2px}

/* ── Cast + Save: one row, equal widths, shared control height, Cast primary / Save secondary ────────────────── */
html:not(#o) #sidebar .cast-actions{display:flex;gap:8px;align-items:stretch;margin-top:2px}
html:not(#o) #sidebar .cast-actions>button{flex:1 1 0;min-width:0;width:auto!important;margin:0;padding-block:0;padding-inline:10px;border:1px solid;box-sizing:border-box;display:inline-flex;
  align-items:center;justify-content:center;gap:6px;min-height:calc(var(--o-h,28px) + 4px);font:700 12px/1.2 var(--o-font);letter-spacing:.04em}
html:not(#o) #sidebar .cast-actions>button.cast-save-btn:not(#o):not(#o){background:transparent;color:var(--tx);border:1px solid var(--bd);
  border-radius:var(--o-radius,8px);cursor:pointer}
html:not(#o) #sidebar .cast-actions>button.cast-save-btn:not(#o):not(#o):hover{border-color:var(--ac);color:var(--tb)}
html:not(#o) #sidebar .cast-actions>button.cast-save-btn:not(#o):not(#o):disabled{opacity:.55;cursor:default}
html:not(#o) #sidebar .cast-actions>button svg{flex:none;width:13px;height:13px}

/* ── Library list: folder rows, chart cards, child rows ─────────────────────────────────────────────────────── */
html:not(#o) #sb-library-body .lf-label,html:not(#o) #sb-atlas-body .af-label{font:600 11.5px/1.3 var(--o-font);letter-spacing:.01em;
  text-transform:none;color:var(--tx)}
html:not(#o) #sb-library-body .lib-folder-hdr:hover .lf-label,html:not(#o) #sb-atlas-body .atlas-folder-hdr:hover .af-label{color:var(--tb)}
html:not(#o) #sb-library-body .lib-folder-hdr,html:not(#o) #sb-atlas-body .atlas-folder-hdr{min-height:28px;padding:4px 6px;box-sizing:border-box;
  border-radius:var(--o-radius,8px)}
html:not(#o) #sb-library-body .lib-folder-hdr:hover,html:not(#o) #sb-atlas-body .atlas-folder-hdr:hover{background:var(--o-wash)}
html:not(#o) #sb-library-body .lf-count,html:not(#o) #sb-atlas-body .af-count{min-width:18px;box-sizing:border-box;padding:0 6px;text-align:center;
  border:1px solid var(--bd);border-radius:999px;background:transparent;font:600 var(--fs-caption)/16px var(--num-font,var(--o-font));
  font-variant-numeric:tabular-nums;color:var(--td)}
html:not(#o) #sb-library-body .lib-radix-hdr{padding:6px 8px;gap:8px;border-color:var(--bd);border-radius:10px;background:var(--o-surface)}
html:not(#o) #sb-library-body .lib-radix-hdr:hover{border-color:var(--ac);background:var(--o-surface)}
html:not(#o) #sb-library-body .lib-radix-hdr.is-radix{border-color:var(--ac);box-shadow:inset 3px 0 0 var(--ac)}
html:not(#o) #sb-library-body .lib-radix-hdr.is-transit{border-color:var(--a2);box-shadow:inset 3px 0 0 var(--a2)}
html:not(#o) #sb-library-body :is(.lr-name,.lc-name){font:600 12px/1.3 var(--o-font);color:var(--tx)}
html:not(#o) #sb-library-body .lc-name{font-weight:500}
html:not(#o) #sb-library-body :is(.lr-name,.lc-name):hover{color:var(--tb)}
html:not(#o) #sb-library-body .lr-line2{margin-top:2px;font:400 var(--fs-caption)/1.3 var(--num-font,var(--o-font));font-variant-numeric:tabular-nums;color:var(--td)}
html:not(#o) #sb-library-body .lib-badge{font:600 var(--fs-caption)/15px var(--o-font);letter-spacing:.02em;padding:0 6px;border-radius:999px}
html:not(#o) #sb-library-body .lc-type{font:600 var(--fs-caption)/1.2 var(--o-font);opacity:.85;min-width:16px}
html:not(#o) #sb-library-body .lib-child-item{padding:5px 8px;border-radius:var(--o-radius,8px)}
html:not(#o) #sb-library-body .lib-child-item:hover{border-color:var(--bd);background:var(--o-wash)}
html:not(#o) #sb-library-body .lib-edit-panel{padding:8px 10px;border-color:var(--bd);border-radius:10px;background:var(--o-surface);font:500 11px/1.3 var(--o-font)}
html:not(#o) .lib-empty{font:400 11.5px/1.5 var(--o-font);color:var(--td)}
html:not(#o) .lib-empty b{font-weight:700;color:var(--tx)}
html:not(#o) #sb-atlas-body .atlas-item{border-radius:var(--o-radius,8px);font-family:var(--o-font)}
html:not(#o) #sb-atlas-body .atlas-item .atlas-name{font-weight:500}
html:not(#o) #sb-atlas-body .atlas-item:hover{background:var(--o-wash)}

/* ── Place search results ───────────────────────────────────────────────────────────────────────────────────── */
html:not(#o) .combo-list{border-color:var(--bd);border-radius:12px;background:var(--o-surface);box-shadow:var(--o-shadow-pop);padding:4px}
html:not(#o) .combo-item{border-radius:var(--o-radius,8px);padding:6px 9px}
html:not(#o) .combo-item:is(.hi,:hover){background:color-mix(in srgb,var(--ac) 14%,var(--o-surface))}
html:not(#o) .combo-main{font:500 12px/1.3 var(--o-font);color:var(--tx)}
html:not(#o) .combo-sub{font:400 var(--fs-caption)/1.3 var(--num-font,var(--o-font));color:var(--td);font-variant-numeric:tabular-nums}
html:not(#o) .combo-empty{font:400 11.5px/1.4 var(--o-font);color:var(--td)}

@media (prefers-reduced-motion:reduce){
  html:not(#o) .cast-form :is(input,select),html:not(#o) :is(#library-search,#atlas-search,#atlas-add-inputs input,.lib-edit-panel input){transition:none}
}
