/* CeciKnows v2 tokens (docs/web-ui-v2-manifest.md V2). Shared by the web app and the Mini App.
   Dark is the default; light by html[data-theme="light"]. From web/app/index.html :root, with the
   Redesign v1 changes: --warn defined, --f raised to pass 4.5:1. */
:root{
  --ground:#0E1218; --surface:#131922; --raised:#1A212B; --line:#252D38; --hairline:#1F2731;
  --glass:rgba(255,255,255,.07); --glassline:rgba(255,255,255,.13); --glasshi:rgba(255,255,255,.14); --block:#182029; --input:#131922;
  --i:#F4F4F1; --m:#B3B1A8; --f:#8C8B92;
  --ac:#DDCB9B; --acw:rgba(221,203,155,.09); --acb:rgba(221,203,155,.42); --ontext:#14171E;
  --good:#62D4A3; --bad:#EE7F73; --warn:#F0A24B; --lock:#8FB4E8; --hold:#6E7E92;
  --actext:#DDCB9B;   /* gold as TEXT (W10: 4.5:1 on every dark surface) */
  /* item 23 · tiles and fields (operator, 21 Sep 2026). A tile is a raised surface one step above the
     pane in dark; a field is a recessed surface a shade lighter than the pane in dark. The hairline is
     3:1 against the pane surface (WCAG non-text): #61656B is 3.01:1 on #131922. Captions (--f) are
     4.68:1 on the tile; placeholders use --m (7.0:1 on the field). */
  --tile-bg:#1B2330; --tile-line:#343C48; --tile-hi:rgba(255,255,255,.05);
  --input-bg:#1E2733; --input-bg-in:#141B26; --ring:rgba(221,203,155,.25);
  --btntext:var(--i);
  --chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238C8B92' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --ui:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --msg:"Open Sans","Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mark:url("/assets/mark-dark.png");
  --wordmark:url("/assets/wordmark-dark.png");
  color-scheme:dark;
}
html[data-theme="light"]{
  --ground:#F3F2ED; --surface:#FBFAF6; --raised:#ECEAE2; --line:#DAD7CC; --hairline:#E3E0D5;
  --glass:rgba(0,0,0,.045); --glassline:rgba(0,0,0,.10); --glasshi:rgba(0,0,0,.09); --block:#EDEBE4; --input:#FBFAF6;
  --i:#0F1216; --m:#5B6470; --f:#6B7280;
  --ac:#957B3C; --acw:rgba(149,123,60,.08); --acb:rgba(149,123,60,.38); --ontext:#FBFAF6;
  --good:#1A7651; --bad:#C24A3E; --warn:#9D5410; --lock:#2F63B5;
  --actext:#7A6431;   /* gold as TEXT: #957B3C is 3.9:1 on the light surface, this is 5.4:1 */
  /* light: the tile a step BELOW the pane, the field a shade darker still; the hairline #8F9096 is
     3.0:1 on #FBFAF6. Captions on a light tile use --m (5.3:1): --f would be 4.3:1 there. */
  --tile-bg:#F4F3ED; --tile-line:#D6D3C9; --tile-hi:transparent;
  --input-bg:#F1EFE8; --input-bg-in:#FBFAF6; --ring:rgba(149,123,60,.25);
  --btntext:#33415A;   /* button text in light: a dark slate, 8.6:1 on the surface, apart from the black of body text (operator, 2026-09-21) */
  --chev:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --mark:url("/assets/mark-light.png");
  --wordmark:url("/assets/wordmark-light.png");
  color-scheme:light;
}

/* the screen-reader-only text utility (labels, the checkpoint strip's words). Moved here from app.css on
   2026-09-21 because the Monitor's Life panes use it inside the Mini App too, which loads no app.css. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================================
   item 23 · ONE tile rule and ONE field rule, from the tokens above, used by the
   Monitor's Wealth/Desk/Knows tiles (.tile), the Life tiles (.ltile), the info
   cards of both control panels (.pblk), and every input or select in Life, the
   Alerts pane, the Spent cash form, the rule form and the two control panels.
   Lives here because the web app and the Mini App both load this sheet.
   ============================================================================ */
.tile,.ltile,.pblk{background:var(--tile-bg);border:1px solid var(--tile-line);border-radius:10px;padding:12px 14px;
  box-shadow:inset 0 1px 0 var(--tile-hi)}
/* the state colour is a 6px dot before the small-caps label and the caption's word — never a border */
.ltile{--c:var(--lock);border-top-width:1px;border-top-color:var(--tile-line)}
.ltile .lbl,.pblk .lab{display:flex;align-items:center;gap:7px;font:600 10.5px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--f)}
.ltile .lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);flex:none}
.ltile .sub,.tile .s,.pblk .pcap{font:400 11.5px/1.45 var(--ui);color:var(--f)}
html[data-theme="light"] .ltile .sub,html[data-theme="light"] .tile .s,html[data-theme="light"] .pblk .pcap{color:var(--m)}
.pblk .lab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--f);flex:none}
.pblk:has(.st.good) .lab::before{background:var(--good)} .pblk:has(.st.warn) .lab::before{background:var(--warn)}
.pblk:has(.st.bad) .lab::before{background:var(--bad)} .pblk:has(.st.off) .lab::before{background:var(--f)}
.pblk:not(:has(.st)) .lab::before{display:none}

.field,.pf input,.pf select,.pf .pin,.lfields input,.lfields select,.lfield input,.lfield select,.ladd input,.lamt input,
.lsheetbox .pillin,.spentform .amt,.spentform .cat,.lswitch.row select,.menu.attach .rcpt input,.lsetting .lin,
.ed input,.ed select,.ed textarea,.hset input,.icard .ifields input,.icard .ifields select,.srow select.rcur{
  background:var(--input-bg);border:1px solid var(--line);border-radius:7px;color:var(--i);
  font:400 12.5px var(--mono);font-variant-numeric:tabular-nums;padding:4px 9px;min-height:28px;box-sizing:border-box;box-shadow:none}
.pf .pin input{border:0;background:transparent;min-height:26px;padding:0 2px 0 0;box-shadow:none}
.pf .pin i{font:400 10.5px var(--mono);color:var(--f);font-style:normal}
.field:focus,.pf input:focus,.pf select:focus,.pf .pin:focus-within,.lfields input:focus,.lfields select:focus,.lfield input:focus,.lfield select:focus,
.ladd input:focus,.lamt input:focus,.lsheetbox .pillin:focus,.spentform .amt:focus,.spentform .cat:focus,.lswitch.row select:focus,
.menu.attach .rcpt input:focus,.lsetting .lin:focus,.ed input:focus,.ed select:focus,.ed textarea:focus,.hset input:focus,.icard .ifields input:focus{
  outline:0;border-color:var(--ac);box-shadow:0 0 0 2px var(--ring)}
.pf .pin input:focus{box-shadow:none;border:0;outline:none}
.pf input::placeholder,.lfields input::placeholder,.ladd input::placeholder,.lamt input::placeholder,.spentform input::placeholder,
.menu.attach .rcpt input::placeholder,.lsetting .lin::placeholder,.ed input::placeholder,.icard input::placeholder{color:var(--m);opacity:1}   /* --m: 7.0:1 dark, 5.2:1 light on the field; --f would be 4.5 and 4.2 */
.pf select,.lfields select,.lfield select,.lswitch.row select,.ed select,.icard .ifields select,.srow select.rcur{
  appearance:none;-webkit-appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 9px center;padding-right:26px}
/* one field height at every width (operator, 2026-09-21) */

/* one focus ring, the outer one (operator, 2026-09-21); number spinners hidden, the unit suffix sits there */
.pf input:focus-visible,.lfields input:focus-visible,.lfield input:focus-visible,.ladd input:focus-visible,.lamt input:focus-visible,.spentform .amt:focus-visible,.lsetting .lin:focus-visible,.hset input:focus-visible,.ed input:focus-visible,.icard .ifields input:focus-visible,.pf select:focus-visible,.lfields select:focus-visible,.lfield select:focus-visible,.ed select:focus-visible{outline:none}
.pf input[type=number]::-webkit-inner-spin-button,.pf input[type=number]::-webkit-outer-spin-button,.lfields input[type=number]::-webkit-inner-spin-button,.hset input[type=number]::-webkit-inner-spin-button,.spentform .amt::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pf input[type=number],.lfields input[type=number],.hset input[type=number],.spentform .amt{-moz-appearance:textfield;appearance:textfield}

/* a field inside a raised tile steps the other way from its container: darker
   than the tile in dark, lighter than the tile in light (operator, 2026-09-21);
   the tile's hairline blends rather than cuts */
.tile input,.tile select,.ltile input,.ltile select,.pblk input,.pblk select,.pblk .pin,.hset input,.hset select,.hset .pin,
.lform input,.lform select,.lform .pin,.icard input,.icard select,.lcard input,.lcard select,.lca input,.rform input,.rform select,.lsheetbox input,.lsheetbox select{background:var(--input-bg-in)}