/* Light is a white base with dark grey and orange details. Dark is a black
   base with white and orange. Measured, not eyeballed:

     light  ink #2B2B2B 14.2:1, muted #6E6E6E 5.1:1 on white
     dark   white 21:1, muted #9A9A9A 7.5:1, orange #FF7A3D 8.1:1 on black

   Orange is #FF6B2B, straight off the logo. On white it is 2.84:1, so it is
   never body text there - rules, marks, fills and icons only. On black it
   clears 8:1, so it may carry text.

   The two child colours are not decoration, they say which child a row is
   about, so they have to stay clearly apart from the orange. On black the old
   ochre landed at 1.25:1 against the accent, close enough to read as the same
   colour, so Amari moves to a true yellow: 26 degrees of hue separation and
   14:1 on black. */

:root {
  --paper:   #FFFFFF;
  --card:    #FFFFFF;
  --raised:  #FAFAFA;
  --ink:     #2B2B2B;
  --muted:   #6E6E6E;
  --line:    #E4E4E4;
  --freya:   #7A3E70;
  --freya-t: #F3EAF2;
  --amari:   #8A5410;
  --amari-t: #FBF0DC;
  --shadow:  rgba(0, 0, 0, 0.05);

  --brand:      #FF6B2B;
  --brand-soft: rgba(255, 107, 43, 0.10);
  --brand-line: rgba(255, 107, 43, 0.35);
  --on-brand:   #1C1C1C;   /* 6.0:1 on orange; white would be 2.84:1 */
  --accent:     #FF6B2B;   /* marks, rules, fills */
  --brand-text: #C2410C;   /* orange that is legible as words: 5.18:1 on white */
  --good:       #2B2B2B;   /* a done tick reads as ink, no stray green */
  --on-child:   #FFFFFF;   /* child colours are dark here */
  --on-good:    #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #000000;
    --card:    #101010;
    --raised:  #171717;
    --ink:     #FFFFFF;
    --muted:   #9A9A9A;
    --line:    #2C2C2C;
    --freya:   #D6A8CE;
    --freya-t: #2A1F28;
    --amari:   #F2D06B;
    --amari-t: #2A2415;
    --shadow:  rgba(0, 0, 0, 0.6);

    --brand:      #FF7A3D;
    --brand-soft: rgba(255, 122, 61, 0.14);
    --brand-line: rgba(255, 122, 61, 0.38);
    --on-brand:   #1C1C1C;
    --accent:     #FF7A3D;
    --brand-text: #FF7A3D;   /* 8.1:1 on black, no need to darken */
    --good:       #FFFFFF;
    --on-child:   #1C1C1C;   /* child colours are light here */
    --on-good:    #000000;
  }
}

:root[data-theme="dark"] {
  --paper:   #000000;
  --card:    #101010;
  --raised:  #171717;
  --ink:     #FFFFFF;
  --muted:   #9A9A9A;
  --line:    #2C2C2C;
  --freya:   #D6A8CE;
  --freya-t: #2A1F28;
  --amari:   #F2D06B;
  --amari-t: #2A2415;
  --shadow:  rgba(0, 0, 0, 0.6);

  --brand:      #FF7A3D;
  --brand-soft: rgba(255, 122, 61, 0.14);
  --brand-line: rgba(255, 122, 61, 0.38);
  --on-brand:   #1C1C1C;
  --accent:     #FF7A3D;
  --brand-text: #FF7A3D;
  --good:       #FFFFFF;
  --on-child:   #1C1C1C;
  --on-good:    #000000;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.disp { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.01em; }
h1.disp { font-size: 26px; line-height: 1.1; margin: 0; }
h2.disp { font-size: 19px; margin: 0; }
.sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.err { font-size: 13px; color: var(--brand-text); margin-top: 10px; min-height: 18px; }

/* ---------------------------------------------------------------- gate */

/* The landing page is the brand: the logo's own orange edge to edge, the mark
   centred on it. The logo asset carries the same orange as its plate, so the
   seam between artwork and page disappears and it reads as one lockup. */
#gate {
  position: fixed; inset: 0; background: var(--brand);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px; z-index: 50; text-align: center;
}
.gatebox { max-width: 320px; width: 100%; }
.gatelogo { width: 190px; height: 190px; display: block; margin: 0 auto 22px; }
.gatebox h1 { font-size: 30px; color: var(--on-brand); }
.gatebox .sub { margin-bottom: 20px; color: rgba(28, 28, 28, 0.72); }
.gatebox .err { color: var(--on-brand); font-weight: 600; }

/* On orange, the field is white and the button near-black: 6:1, where white
   on orange would have been 2.84:1. */
#gate input[type=password] {
  background: #FFFFFF; border-color: rgba(28, 28, 28, 0.25); color: #1C1C1C;
  text-align: center; font-size: 17px; letter-spacing: 0.04em;
}
#gate input[type=password]::placeholder { color: #8A8A8A; letter-spacing: 0; }
#gate button.act, #gate button.act.brand { background: #1C1C1C; color: #FFFFFF; }
#gate :focus-visible { outline: 2px solid #1C1C1C; outline-offset: 3px; }

input[type=password], input[type=text], input[type=search] {
  width: 100%; font-family: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink);
}

button.act {
  width: 100%; margin-top: 10px; padding: 13px 14px; border-radius: 9px; border: none;
  background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
button.act[disabled] { opacity: 0.5; }
button.act.brand { background: var(--brand); color: var(--on-brand); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --------------------------------------------------------------- shell */

#shell { max-width: 680px; margin: 0 auto; padding: 0 16px; }

#topbar {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 18px 0 12px; position: sticky; top: 0; background: var(--paper); z-index: 10;
}
#topbar .titles { flex: 1; min-width: 0; }
.brandmark { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; margin-top: 3px; }

/* The full width of the brand, one hairline thick. Enough to register, not
   enough to compete with the two child colours. */
#brandrule { height: 2px; background: var(--brand); opacity: 0.85; }

.iconbtn {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 19px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 17px; cursor: pointer; font-family: inherit;
}

#view { padding-bottom: 96px; min-height: 60vh; }

#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbtn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--muted); min-height: 48px;
}
.tabbtn .ico { font-size: 17px; line-height: 1; }
.tabbtn { letter-spacing: -0.01em; }
.tabbtn[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tabbtn[aria-current="page"] .ico { color: var(--brand); }

/* ------------------------------------------------------------ sections */

section.block { margin-bottom: 26px; }
.blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--brand-line); padding-bottom: 6px; margin-bottom: 10px; }
.blockhead .count { font-size: 12px; color: var(--muted); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 13px; margin-bottom: 8px;
}
.card.row { display: flex; gap: 12px; align-items: flex-start; }
/* Selected activity. The original tracker marked the whole card, not just the
   round button; the port applied the class but never defined it. */
.card.on { border-color: var(--ink); }
.card.done { opacity: 0.45; }
.card .name { font-size: 15px; font-weight: 600; line-height: 1.32; }
.card .meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.card .note { font-size: 12px; color: var(--brand-text); margin-top: 5px; line-height: 1.4; }

.pill { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 5px; font-weight: 600; white-space: nowrap; }
.pill.freya { background: var(--freya-t); color: var(--freya); }
.pill.amari { background: var(--amari-t); color: var(--amari); }
.pill.both  { background: var(--line); color: var(--muted); }
.pill.due   { background: var(--accent); color: var(--on-brand); }

.grow { flex: 1; min-width: 0; }
.right { margin-left: auto; text-align: right; flex-shrink: 0; }

/* Known unknowns. Deliberately loud: the app should say what it does not
   know rather than look complete. */
.unknown {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 9px; padding: 11px 13px; margin-bottom: 8px; font-size: 13px; line-height: 1.5;
}
.unknown strong { font-weight: 600; }

.empty { font-size: 13px; color: var(--muted); padding: 10px 0; }

.tickbtn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 15px; cursor: pointer;
  border: 1.5px solid var(--line); background: transparent; color: var(--muted);
  font-size: 14px; font-family: inherit; line-height: 1;
}
.tickbtn.on { background: var(--good); border-color: var(--good); color: var(--on-good); }

/* --------------------------------------------------------------- skeleton */

/* Notion takes up to a second. Every section paints its own skeleton so one
   slow query never blanks the page. */
.skel { background: var(--line); border-radius: 6px; opacity: 0.45; animation: pulse 1.3s ease-in-out infinite; }
.skel.line { height: 12px; margin-bottom: 8px; }
.skel.card { height: 62px; margin-bottom: 8px; border-radius: 10px; }
@keyframes pulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 0.55; } }

.stale { font-size: 11.5px; color: var(--muted); font-style: italic; }

.freshness { font-size: 11.5px; color: var(--muted); padding: 0 0 10px; min-height: 14px; }

.iconbtn.spin { animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .iconbtn.spin { animation: none; }
  .skel { animation: none; }
}

/* Sign-up week only. Loud on purpose and gone by the 7th. */
.signup {
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: 10px; padding: 12px 13px; margin-bottom: 20px;
  font-size: 13.5px; line-height: 1.55;
}
.signup strong { display: block; font-size: 15px; margin-bottom: 2px; }
.signup a { display: inline-block; margin-top: 7px; color: var(--ink); font-weight: 600; }

.rawslot { white-space: pre-wrap; word-break: break-word; }

/* ------------------------------------------------------------- schedule */

.togglebar { display: flex; gap: 6px; margin-bottom: 14px; }
.toggle {
  flex: 1; padding: 9px 8px; border-radius: 9px; border: 1px solid var(--line);
  background: transparent; font-family: inherit; font-size: 13.5px; cursor: pointer; color: var(--muted);
}
.toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }

.daybar { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 5px; margin: 18px 0 8px; }
.daytime { font-size: 12.5px; color: var(--muted); }
.dayctx { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 9px; }
.dayctx strong { color: var(--ink); font-weight: 600; }

.gap {
  border: 1px dashed var(--line); border-radius: 9px; padding: 11px 13px;
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 8px;
}

details.sched { margin: 0 0 10px; }
details.sched summary { font-size: 12.5px; color: var(--muted); cursor: pointer; padding: 4px 0; }
details.sched ul { list-style: none; margin: 8px 0 0; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; }
details.sched li { display: flex; gap: 10px; padding: 3px 0; }
details.sched li span:first-child { color: var(--muted); min-width: 92px; flex-shrink: 0; }

/* ----------------------------------------------------------- activities */

.kidwrap { display: flex; gap: 6px; flex-shrink: 0; }
.kidbtn {
  width: 38px; height: 38px; border-radius: 19px; cursor: pointer;
  border: 1.5px solid var(--line); background: transparent; color: var(--muted);
  font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 600;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tabs { display: flex; gap: 6px; margin: 4px 0 6px; }
.tab { flex: 1; padding: 10px 8px; border-radius: 9px; border: 1px solid var(--line); background: transparent; font-family: inherit; font-size: 14px; cursor: pointer; color: var(--muted); }
.tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; box-shadow: inset 0 -3px 0 var(--brand); }
.savestate { font-size: 12px; color: var(--muted); min-height: 16px; margin-bottom: 12px; }

.totalrow { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }

/* --------------------------------------------------------------- money */

.bignum { font-family: 'Fraunces', Georgia, serif; font-size: 27px; font-weight: 600; }
.moneygrid { display: flex; gap: 8px; margin-bottom: 16px; }
.moneygrid > div { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }

/* ---------------------------------------------------------- everything */

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.chip { padding: 6px 11px; border-radius: 15px; border: 1px solid var(--line); background: transparent; font-family: inherit; font-size: 12.5px; cursor: pointer; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

@media (min-width: 560px) {
  h1.disp { font-size: 30px; }
}