/* Shell chrome for this app: header, tabs, cards, tables and the marks that carry
   the app's one real obligation — never letting a guess look like a fact.
   Dark is the default, per the fleet rule; the token sheets handle light and dim. */

:root { --lead: 1.05rem; }
body { margin:0; background:var(--paper,#111315); color:var(--ink,#e8eaec); }
#app { max-width:62rem; margin:0 auto; padding:0 1rem 4rem;
       padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)); }

.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:.5rem; position:fixed; z-index:50; padding:.6rem 1rem;
              background:var(--key,#1b1d1f); color:var(--ink,#fff); border-radius:.5rem; }

.shell-head { position:sticky; top:0; z-index:20; background:var(--paper,#111315);
              padding:.75rem 0 .5rem; border-bottom:1px solid var(--soft,#2e3338); }
.brand { margin:0 0 .5rem; font-weight:800; letter-spacing:.02em; }
.brand span { color:var(--accent,#7fc7a4); }
.brand-sub { font-weight:600; color:var(--muted,#a7aeb4); letter-spacing:.08em;
             text-transform:uppercase; font-size:.72rem; }

.tabs { display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; min-height:44px; padding:.5rem .85rem; border:1px solid transparent;
       border-radius:.6rem; background:transparent; color:var(--muted,#a7aeb4);
       font:inherit; font-weight:600; cursor:pointer; }
.tab:hover { color:var(--ink,#e8eaec); }
.tab-on { background:var(--key,#22262a); color:var(--ink,#e8eaec); border-color:var(--soft,#2e3338); }
.tab:focus-visible { outline:2px solid var(--focus,#6aa9d6); outline-offset:2px; }

.disclaimer { margin:.85rem 0; padding:.6rem .8rem; border-left:3px solid var(--accent,#7fc7a4);
              background:var(--key,#191c1f); border-radius:0 .5rem .5rem 0;
              font-size:.82rem; color:var(--muted,#a7aeb4); }
.disclaimer b { color:var(--ink,#e8eaec); }
.alarm { margin:.85rem 0; padding:.7rem .9rem; border:1px solid var(--bad,#e06c5c);
         border-radius:.5rem; background:color-mix(in srgb,var(--bad,#e06c5c) 12%,transparent); }

.workspace h1 { font-size:1.4rem; margin:1rem 0 .15rem; }
.lead { margin:0 0 1rem; }
.card { background:var(--surface,#191c1f); border:1px solid var(--soft,#2e3338);
        border-radius:.75rem; padding:.9rem 1rem; margin:0 0 .85rem; }
.card-lead { border-color:var(--accent,#7fc7a4); }
.card-warn { border-left:3px solid var(--warn,#d9a13b); }
.card-due-overdue { border-left:3px solid var(--bad,#e06c5c); }
.card-due-today   { border-left:3px solid var(--warn,#d9a13b); }
.card-due-soon    { border-left:3px solid var(--accent,#7fc7a4); }
.card h2 { margin:.1rem 0 .3rem; font-size:1.15rem; }
.card h3 { margin:.1rem 0 .3rem; font-size:1rem; }
.eyebrow { margin:0 0 .35rem; font-size:.7rem; font-weight:700; letter-spacing:.11em;
           text-transform:uppercase; color:var(--muted,#767d84); }
.big { font-size:1.9rem; font-weight:750; margin:.1rem 0 .2rem; }
.muted { color:var(--muted,#a7aeb4); }
.small { font-size:.8rem; }
.block { display:block; }
.note { border-left:2px solid var(--soft,#2e3338); padding-left:.6rem; }
.tight { margin:.3rem 0 0; padding-left:1.1rem; }
.tight li { margin:.2rem 0; }

.week-now { border-color:var(--accent,#7fc7a4); }

/* Marks. mark-inferred is the important one: it is how the app admits a guess. */
.mark { display:inline-block; margin-left:.35rem; padding:.05rem .4rem; border-radius:.35rem;
        font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
        border:1px solid currentColor; vertical-align:baseline; }
.mark-inferred { color:var(--warn,#d9a13b); }
.mark-overdue  { color:var(--bad,#e06c5c); }
.mark-today    { color:var(--warn,#d9a13b); }
.mark-soon     { color:var(--accent,#7fc7a4); }
.mark-done     { color:var(--ok,#5cb87a); }
.mark-nocoupon { color:var(--bad,#e06c5c); }
.mark-extended { color:var(--info,#6aa9d6); }
.mark-drop     { color:var(--info,#6aa9d6); }
.mark-authored { color:var(--ok,#5cb87a); }
.mark-scaffold { color:var(--muted,#767d84); }

.grid { width:100%; border-collapse:collapse; font-size:.88rem; }
.grid th, .grid td { text-align:left; padding:.45rem .4rem; border-bottom:1px solid var(--soft,#2e3338);
                     vertical-align:top; }
.grid thead th { font-size:.68rem; letter-spacing:.09em; text-transform:uppercase;
                 color:var(--muted,#767d84); font-weight:700; }
.grid tbody th { font-weight:600; }
.row-done .cell-title { text-decoration:line-through; color:var(--muted,#767d84); }
.row-sub td { border-bottom:0; padding-top:0; }
.cell-title { display:block; }

input[type=checkbox] { width:22px; height:22px; accent-color:var(--accent,#7fc7a4); }
.score { width:4.2rem; min-height:38px; padding:.25rem .4rem; font:inherit;
         background:var(--paper,#111315); color:var(--ink,#e8eaec);
         border:1px solid var(--soft,#2e3338); border-radius:.4rem; }
select { min-height:38px; font:inherit; background:var(--paper,#111315); color:var(--ink,#e8eaec);
         border:1px solid var(--soft,#2e3338); border-radius:.4rem; padding:.25rem .4rem; }
.action { min-height:44px; padding:.55rem 1rem; font:inherit; font-weight:650; cursor:pointer;
          background:var(--key,#22262a); color:var(--ink,#e8eaec);
          border:1px solid var(--soft,#2e3338); border-radius:.55rem; }
.action:hover { border-color:var(--accent,#7fc7a4); }
.link { background:none; border:0; padding:.2rem 0; font:inherit; font-size:.8rem;
        color:var(--info,#6aa9d6); text-decoration:underline; cursor:pointer; display:block; }
:focus-visible { outline:2px solid var(--focus,#6aa9d6); outline-offset:2px; }

.shell-foot { margin-top:2rem; padding-top:.9rem; border-top:1px solid var(--soft,#2e3338);
              font-size:.78rem; color:var(--muted,#767d84); }
.shell-foot a { color:var(--info,#6aa9d6); }

@media (max-width:560px) {
  .grid { font-size:.82rem; }
  .grid th, .grid td { padding:.4rem .25rem; }
  .big { font-size:1.6rem; }
}

/* base.css lays out for a fixed left sidebar (.workspace{margin-left:248px}).
   This app navigates from a top tab bar instead, so that gutter is reclaimed. */
.workspace { margin-left:0 !important; margin-right:0 !important; }

/* Study */
.chips { display:flex; flex-wrap:wrap; gap:.35rem; margin:.3rem 0; }
.chip { min-width:44px; min-height:40px; padding:.35rem .6rem; font:inherit; font-weight:650;
        cursor:pointer; background:var(--key,#22262a); color:var(--muted,#a7aeb4);
        border:1px solid var(--soft,#2e3338); border-radius:.5rem; }
.chip-on { background:var(--accent,#7fc7a4); color:#12231c; border-color:var(--accent,#7fc7a4); }
.chip-dot { opacity:.6; }
.cite { display:inline-block; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
        color:var(--muted,#767d84); }
.terms { margin:.2rem 0; }
.terms dt { font-weight:700; margin-top:.55rem; }
.terms dd { margin:.15rem 0 0; color:var(--muted,#a7aeb4); }
.stem { font-size:1.05rem; font-weight:640; margin:.2rem 0 .7rem; }
.opts { display:flex; flex-direction:column; gap:.4rem; }
.opt { min-height:52px; text-align:left; padding:.7rem .85rem; font:inherit; cursor:pointer;
       background:var(--paper,#111315); color:var(--ink,#e8eaec);
       border:1px solid var(--soft,#2e3338); border-radius:.55rem; }
.opt:hover:not(:disabled) { border-color:var(--accent,#7fc7a4); }
.opt-right { border-color:var(--ok,#5cb87a); background:color-mix(in srgb,var(--ok,#5cb87a) 14%,transparent); }
.opt-wrong { border-color:var(--bad,#e06c5c); background:color-mix(in srgb,var(--bad,#e06c5c) 12%,transparent); }
.feedback { margin-top:.8rem; padding:.7rem .85rem; border-radius:.55rem;
            border:1px solid var(--soft,#2e3338); }
.feedback.right { border-color:var(--ok,#5cb87a); }
.feedback.wrong { border-color:var(--bad,#e06c5c); }
.prompt { padding:.5rem 0; border-top:1px solid var(--soft,#2e3338); }
.prompt:first-of-type { border-top:0; }
.policy { font-size:.78rem; color:var(--muted,#767d84); border-left:2px solid var(--accent,#7fc7a4);
          padding-left:.6rem; margin-top:.5rem; }

/* Diary */
.bar { height:6px; border-radius:3px; background:var(--key,#22262a); overflow:hidden; margin:.35rem 0 .5rem; }
.bar span { display:block; height:100%; background:var(--accent,#7fc7a4); transition:width .22s ease; }
.warn { border-left-color:var(--warn,#d9a13b); }
.entry { display:flex; flex-direction:column; gap:.5rem; }
.entry label { display:flex; flex-direction:column; gap:.2rem; font-size:.82rem;
               color:var(--muted,#a7aeb4); }
.entry label.check { flex-direction:row; align-items:center; gap:.5rem; }
.entry input[type=text], .entry input:not([type]), .entry input[type=date] {
  min-height:44px; padding:.4rem .55rem; font:inherit;
  background:var(--paper,#111315); color:var(--ink,#e8eaec);
  border:1px solid var(--soft,#2e3338); border-radius:.45rem; }
.entries { list-style:none; margin:.2rem 0 0; padding:0; }
.entries li { padding:.45rem 0; border-bottom:1px solid var(--soft,#2e3338);
              display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline; }
.problem { flex-basis:100%; font-size:.78rem; color:var(--bad,#e06c5c); }
.problem-warn { color:var(--warn,#d9a13b); }
.day-ok { border-left:3px solid var(--ok,#5cb87a); }
.noscript { padding:1rem; }
.mark-canvas { color:var(--ok,#5cb87a); }