/* Transitional translation of the pre-redesign Pico markup to the 32bits UI look
   (documentation/UI_REDESIGN_PLAN.md, F3). Screen only.
   Rules: zero specificity -- every selector wrapped in :where(), so any class from
   base.css / musis.css always wins and a refined screen drops out of this file by
   itself; each rule tagged with its origin as  pico: <what it replaces>  so F5 can
   grep and prune what is no longer used.
   Scope: the page content (#main-content); the shell is styled by base.css. */

/* pico: --pico-* variables read by inline styles in routes/ */
:where(#app){--pico-muted-color:var(--muted); --pico-muted-border-color:var(--line); --pico-del-color:var(--crit);
  --pico-primary:var(--accent);}

/* ---------------------------------------------------------------- text */
/* pico: typography (body 14px, headings, links) */
:where(#main-content){font-size:14px; line-height:1.45;}
:where(#main-content) :where(h2){font-size:15px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted); margin:22px 0 10px;}
:where(#main-content) :where(h3){font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); margin:20px 0 8px;}
:where(#main-content) :where(h4, h5, h6){font-size:13px; font-weight:600; margin:16px 0 6px;}
:where(#main-content) :where(p){margin:0 0 10px;}
:where(#main-content) :where(small, .field-hint){color:var(--faint); font-size:12px; font-weight:500;}
:where(#main-content) :where(a:not([role=button])){color:var(--accent-bright); text-decoration:none;}
:where(#main-content) :where(a:not([role=button]):hover){color:var(--text); text-decoration:underline;}
:where(#main-content) :where(hr){border:0; border-top:1px solid var(--line-soft); margin:18px 0;}
:where(#main-content) :where(code, kbd, pre){font-family:var(--mono); font-size:12.5px; background:var(--elev);
  border-radius:6px; padding:1px 5px;}
:where(#main-content) :where(pre){padding:10px 12px; overflow:auto;}
:where(#main-content) :where(mark){background:color-mix(in srgb, var(--warn) 25%, transparent); color:var(--text);}
:where(#main-content) :where(ul, ol){margin:0 0 10px; padding-left:20px;}

/* ---------------------------------------------------------------- buttons */
/* pico: button / [role=button] (default = primary, .secondary, .contrast, .outline)
   -> .btn; only the unclassed / .primary one gets the filled primary look */
:where(#main-content) :where(button:not(.btn, .icon-btn), a[role=button], input[type=submit], input[type=button], input[type=reset]){
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; border-radius:11px;
  font:inherit; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:normal; line-height:1.2;
  border:1px solid var(--btn-line); background:var(--btn-bg); color:var(--text); text-decoration:none;
  cursor:pointer; vertical-align:middle; white-space:nowrap;}
:where(#main-content) :where(button, a[role=button], input[type=submit], input[type=button]):where(:hover){
  background:var(--btn-bg-hover); color:var(--text); text-decoration:none;}
:where(#main-content) :where(button:not([class]), button.primary, input[type=submit]:not([class]), a[role=button].primary){
  background:var(--btn-primary); border-color:var(--btn-primary); color:#000;}
:where(#main-content) :where(button:not([class]), button.primary, input[type=submit]:not([class]), a[role=button].primary):where(:hover){
  background:var(--btn-primary-hover); color:#000;}
:where(#main-content) :where(.outline.secondary, .secondary.outline){color:var(--muted); border-color:var(--line-soft);}
:where(#main-content) :where(button:disabled, [role=button][aria-disabled=true]){opacity:.45; cursor:not-allowed;}
/* pico: buttons inside table cells -> .btn.sm */
:where(#main-content) :where(td) :where(button, a[role=button]){padding:6px 10px; font-size:11px; border-radius:9px;}

/* pico: div.submenu (page actions row, right-aligned, height 3em kept) */
:where(#main-content) :where(div.submenu){display:flex; justify-content:flex-end; align-items:center; gap:9px; flex-wrap:wrap;
  margin:4px 0 14px; height:auto; min-height:3em;}
:where(#main-content) :where(div.submenu a){display:inline-flex; align-items:center; justify-content:center; padding:9px 14px;
  border-radius:11px; font-size:12px; font-weight:500; text-transform:uppercase; border:1px solid var(--btn-line);
  background:var(--btn-bg); color:var(--text); text-decoration:none;}
:where(#main-content) :where(div.submenu a:hover){background:var(--btn-bg-hover); text-decoration:none;}
:where(#main-content) :where(div.menuitem){display:contents;}

/* pico: action links in table rows (table.py: a[role=link].action-link inside fieldset[role=group]) */
:where(#main-content) :where(a[role=link]){font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted);}
:where(#main-content) :where(a[role=link]:hover){color:var(--text); text-decoration:none;}
:where(#main-content) :where(fieldset[role=group]){display:inline-flex; align-items:center; gap:14px; border:0; padding:0;
  margin:0; min-width:0;}
:where(#main-content) :where(fieldset[role=group]) :where(input, select){margin:0;}

/* ---------------------------------------------------------------- forms */
/* pico: inputs full width with a bottom gap; label above */
/* guide .field / .inl-field controls (refined screens) keep their own look */
:where(#main-content) :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=submit], [type=button], [type=reset], [type=range]), select, textarea):where(:not(.field *, .inl-field *)){
  width:100%; background:var(--elev); border:1px solid var(--line); color:var(--text); border-radius:9px;
  padding:8px 11px; font:inherit; font-size:13.5px; margin:0 0 14px; min-height:38px;}
:where(#main-content) :where(input, select, textarea):where(:focus){outline:none; border-color:var(--accent);}
:where(#main-content) :where(input, textarea)::placeholder{color:var(--faint);}
:where(#main-content) :where(input:disabled, select:disabled, textarea:disabled, input[readonly]){opacity:.6;}
:where(#main-content) :where(select){color-scheme:dark;}
:where(#main-content) :where(input[type=checkbox], input[type=radio]){width:16px; height:16px; margin:0 6px 0 0;
  vertical-align:middle; accent-color:var(--accent);}
:where(#main-content) :where(label:not(.field, .inl-field, .check)){display:block; font-size:12px; font-weight:600; color:var(--muted); margin:0 0 6px;}
:where(#main-content) :where(label:has(> input[type=checkbox], > input[type=radio])){display:flex; align-items:center;
  gap:2px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer;}
/* inputs inside table cells: compact, no gap */
:where(#main-content) :where(td) :where(input, select, textarea){margin:0; padding:5px 8px; min-height:30px; font-size:13px;}
:where(#main-content) :where(fieldset:not([role])){border:1px solid var(--line-soft); border-radius:12px; padding:12px 16px 4px;
  margin:0 0 16px;}
:where(#main-content) :where(legend){font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); padding:0 6px;}
:where(#main-content) :where(form){margin:0;}
/* pico: details / summary */
:where(#main-content) :where(details){border-bottom:1px solid var(--line-soft); margin:0 0 12px; padding-bottom:8px;}
:where(#main-content) :where(summary){cursor:pointer; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; color:var(--muted);}
:where(#main-content) :where(summary:hover){color:var(--text);}

/* ---------------------------------------------------------------- tables */
/* pico: table / table.striped -> .atable (tgrid tables get the same look in musis.css) */
:where(#main-content) :where(table){width:100%; border-collapse:collapse; font-size:13px; margin:4px 0 18px;}
:where(#main-content) :where(th){text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint);
  font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
:where(#main-content) :where(th a){color:inherit; display:block;}
:where(#main-content) :where(th a:hover){color:var(--text); text-decoration:none;}
:where(#main-content) :where(td){padding:8px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
:where(#main-content) :where(tfoot td, tr.total td, tr.subtotal td){font-weight:600;}
:where(#main-content) :where(tr[hx-get]){cursor:pointer;}
:where(#main-content) :where(tr[hx-get]:hover td){background:var(--elev);}
/* the wide listings scroll in their own wrapper below 1280px (D5) */
:where(#main-content) :where(.content){min-width:0; overflow-x:auto;}

/* ---------------------------------------------------------------- panels and modals */
/* pico: article -> .panel */
:where(#main-content) :where(article){background:var(--surface); border:1px solid var(--line-soft); border-radius:14px;
  padding:16px; margin:0 0 14px;}
:where(#main-content) :where(article > header, article > footer){margin:0;}
:where(#main-content) :where(.card){background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; padding:16px;}
/* pico: <dialog><article> -> .overlay + .dlg (dialog stays a native showModal()) */
:where(#main-content) :where(dialog){background:transparent; border:0; padding:0; color:var(--text); max-width:none;
  width:min(460px, calc(100vw - 40px)); overflow:visible;}
:where(#main-content) :where(dialog)::backdrop{background:color-mix(in srgb, var(--backdrop) 62%, transparent);}
:where(#main-content) :where(dialog > article){background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:22px; margin:0; max-height:calc(100vh - 40px); overflow:auto; text-align:left;}
:where(#main-content) :where(dialog > article > header){display:flex; flex-direction:row-reverse; align-items:center;
  justify-content:space-between; gap:12px; margin:0 0 4px;}
:where(#main-content) :where(dialog h2, dialog h3){font-size:17px; font-weight:600; text-transform:none; letter-spacing:normal;
  color:var(--text); margin:0;}
:where(#main-content) :where(dialog p){font-size:14px; color:var(--muted); margin:10px 0 0;}
:where(#main-content) :where(dialog > article > footer){margin:20px 0 0;}
/* pico: button.close (the x in the dialog header) -> .icon-btn */
:where(#main-content) :where(button.close, a.close){display:inline-grid; place-items:center; width:30px; height:30px; padding:0;
  border:1px solid var(--btn-line); background:var(--btn-bg); color:var(--muted); border-radius:9px; font-size:18px; line-height:1;}
:where(#main-content) :where(button.close:hover){background:var(--btn-bg-hover); color:var(--text);}

/* ---------------------------------------------------------------- Musis badges */
/* pendencias INTERNA / EXTERNA: the guide's pill, the type marked by the outline */
:where(#main-content) :where(.badge-interna){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent); color:var(--text);}
:where(#main-content) :where(.badge-externa){box-shadow:inset 0 0 0 1px var(--line); color:var(--muted);}
:where(#main-content) :where(.badge){padding:3px 9px; font-size:11px;}