/* Simbo Pack. Simbo Design Language 1.0 (approved Oct 22, 2026): one shell, one action color. */
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root, [data-theme="light"] {
  --ground: #fbfbfd; --surface: #ffffff; --sunken: #f3f3f7; --line: #e6e5ee;
  --ink: #15131f; --ink-2: #4b4860; --ink-3: #6e6b82;
  --violet: #5c48f0; --violet-hover: #4433cc; --violet-link: #5c48f0; --violet-soft: #e9e6ff; --violet-ink: #4433cc;
  --tan: #c98342; --tan-soft: #fbf1e7; --tan-ink: #8a5520;
  --pack: #c2456b;
  --good: #17774a; --good-soft: #e7f5ee; --attention: #8a5509; --attention-soft: #fbf0df; --critical: #a8302a; --critical-soft: #fcebea;
  --on-violet: #ffffff; --shadow-raise: 0 1px 2px rgba(21,19,31,0.06); --scrim: rgba(21,19,31,0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f0e16; --surface: #17161f; --sunken: #1f1e2a; --line: #2b2a38;
    --ink: #f3f2f8; --ink-2: #b9b6c9; --ink-3: #8e8aa3;
    --violet-link: #a99cff; --violet-soft: #2a2650; --violet-ink: #c9c1ff;
    --tan: #e0a56a; --tan-soft: #33261a; --tan-ink: #f2c79a; --pack: #e0708f;
    --good: #6fdca4; --good-soft: #17302a; --attention: #f0be5c; --attention-soft: #3a2e17; --critical: #ff8f87; --critical-soft: #3a1f22;
    --shadow-raise: none; --scrim: rgba(0,0,0,0.6); color-scheme: dark;
  }
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-control: 10px; --radius-card: 16px; --radius-sheet: 22px; --radius-pill: 999px;
  --control-height: 44px; --sidebar-width: 240px; --header-height: 64px; --identity-line: 3px;
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ground); color: var(--ink); font: 400 15px/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--violet-link); text-decoration: none; }
a:hover { color: var(--violet-hover); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- type ---------- */
.title { font: 700 26px/1.15 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.window-title { font: 700 22px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.display { font: 700 44px/1.05 var(--font-display); letter-spacing: -0.035em; margin: 0; }
.heading { font-weight: 600; font-size: 17px; line-height: 1.35; margin: 0; }
.label { font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.small { font-size: 13px; line-height: 1.45; }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }

/* ---------- the shell ---------- */
.identity { position: fixed; inset: 0 0 auto 0; height: var(--identity-line); background: var(--pack); z-index: 5; }
.shell { display: flex; min-height: 100vh; padding-top: var(--identity-line); }
.sidebar { width: var(--sidebar-width); flex-shrink: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); gap: var(--space-4); position: sticky; top: var(--identity-line); height: calc(100vh - var(--identity-line)); }
.switcher { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-control); }
.switcher img { width: 36px; height: 36px; }
.switcher b { display: block; font: 700 17px/1.1 var(--font-display); letter-spacing: -0.01em; }
.switcher span { font-size: 12px; color: var(--ink-3); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav button { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3); border: 0; background: transparent; border-radius: var(--radius-control); color: var(--ink-2); font-weight: 500; cursor: pointer; text-align: left; }
.nav button:hover { background: var(--sunken); color: var(--ink); }
.nav button[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-raise); border: 1px solid var(--line); }
.nav button[aria-current="page"] svg { color: var(--violet); }
.nav .count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.sidebar .grow { flex: 1; }
.me { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-control); border: 0; background: transparent; cursor: pointer; text-align: left; width: 100%; }
.me:hover { background: var(--sunken); }
.me .who { min-width: 0; }
.me .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who span { font-size: 12px; color: var(--ink-3); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.header { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-6); border-bottom: 1px solid var(--line); position: sticky; top: var(--identity-line); background: var(--ground); z-index: 2; }
.header .actions { display: flex; gap: var(--space-2); align-items: center; }
.content { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); max-width: 1040px; width: 100%; }

/* ---------- pieces ---------- */
.btn { height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); white-space: nowrap; }
.btn:hover { background: var(--sunken); }
.btn.primary { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.btn.primary:hover { background: var(--violet-hover); border-color: var(--violet-hover); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--violet-link); }
.btn.quiet:hover { background: var(--violet-soft); }
.btn.danger { color: var(--critical); }
.btn.small { height: 36px; padding: 0 var(--space-3); font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.iconbtn { width: var(--control-height); height: var(--control-height); padding: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.card.pad { padding: var(--space-4) var(--space-5); }
.rows > * + * { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 60px; }
.row.click { cursor: pointer; width: 100%; border: 0; background: transparent; text-align: left; }
.row.click:hover { background: var(--sunken); }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 13px; color: var(--ink-3); display: block; }
.avatar { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--sunken); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.avatar.me { background: var(--violet-soft); color: var(--violet-ink); }
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.tile { width: 40px; height: 40px; border-radius: var(--radius-control); background: var(--sunken); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; flex-shrink: 0; }
.badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--ink-2); background: transparent; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; border: 1px solid var(--line); color: var(--ink-2); }
.pill.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.pill.attention { background: var(--attention-soft); color: var(--attention); border-color: transparent; }
.pill.tan { background: var(--tan-soft); color: var(--tan-ink); border-color: transparent; }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.chip { height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: var(--on-violet); }
.chip.dashed { border-style: dashed; background: transparent; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1100px) { .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quick { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.quick:hover { border-color: var(--violet); }
.quick .k { font-size: 12px; font-weight: 600; color: var(--tan-ink); }
.quick .t { font-weight: 600; line-height: 1.3; }
.section { display: flex; flex-direction: column; gap: var(--space-3); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.check { width: 24px; height: 24px; border-radius: var(--radius-pill); border: 1.8px solid var(--ink-3); background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.check.on { background: var(--good); border-color: var(--good); color: #fff; }
.done-t { text-decoration: line-through; color: var(--ink-3); }

/* warm moments */
.warm { background: var(--tan-soft); border-radius: var(--radius-card); padding: var(--space-5); display: flex; gap: var(--space-4); align-items: center; }
.warm img { width: 56px; height: 56px; flex-shrink: 0; }
.warm .title { font-size: 20px; }
.greet { display: flex; align-items: center; gap: var(--space-2); color: var(--tan-ink); font-size: 13px; font-weight: 600; }
.greet svg { color: var(--tan); }
.empty { text-align: center; padding: var(--space-7) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.empty img { width: 64px; height: 64px; }
.note { background: var(--sunken); border-radius: var(--radius-card); padding: var(--space-4); display: flex; gap: var(--space-3); align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.note svg { flex-shrink: 0; color: var(--violet); margin-top: 1px; }

/* forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.input, select.input, textarea.input { height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); width: 100%; }
textarea.input { height: auto; min-height: 84px; padding: var(--space-3); resize: vertical; }
.search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-3); }
.search input { border: 0; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--ink); }
.optlist { background: var(--sunken); border-radius: var(--radius-card); padding: 2px var(--space-4); }
.opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; cursor: pointer; }
.opt + .opt { border-top: 1px solid var(--line); }
.opt input { width: 20px; height: 20px; accent-color: var(--violet); flex-shrink: 0; }
.opt .s { display: block; font-size: 12px; color: var(--ink-3); }
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.days .chip { padding: 0; }
.segmented { display: inline-grid; grid-auto-flow: column; padding: 3px; background: var(--sunken); border-radius: var(--radius-control); }
.segmented button { height: 34px; padding: 0 var(--space-4); border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 13px; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raise); }
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.formgrid .wide { grid-column: 1 / -1; }

/* sheet */
.scrim { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: var(--space-5); z-index: 10; }
.sheet { background: var(--surface); border-radius: var(--radius-sheet); width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: var(--space-5) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.sheet.wide { width: min(720px, 100%); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sheet-foot { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.sheet-foot .spacer { flex: 1; }
.close { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 0; background: var(--sunken); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.detail { display: flex; flex-direction: column; }
.detail > div { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); }
.detail > div + div { border-top: 1px solid var(--line); }
.detail span:first-child { font-size: 12px; color: var(--ink-3); }
.actions4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3) 0; border-radius: var(--radius-card); border: 0; background: var(--violet-soft); color: var(--violet-ink); font-size: 12px; font-weight: 600; cursor: pointer; }
.action.primary { background: var(--violet); color: var(--on-violet); }
.code { font: 600 15px/1.5 ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; letter-spacing: 0.04em; background: var(--sunken); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4); word-break: break-all; user-select: all; }

/* sign-in */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-4); }
.auth .panel { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-5); }
.auth .brand { display: flex; align-items: center; gap: var(--space-3); }
.auth .brand img { width: 56px; height: 56px; }
.auth .brand b { font: 700 26px/1.1 var(--font-display); letter-spacing: -0.02em; display: block; }
.auth form { display: flex; flex-direction: column; gap: var(--space-3); }

.toast { position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; z-index: 20; max-width: calc(100vw - 32px); }
.toast.bad { background: var(--critical); color: #fff; }

/* narrow windows: the sidebar becomes a top bar */
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .sidebar .grow, .switcher span { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav button span.lbl { display: none; }
  .me .who { display: none; }
  .header { padding: 0 var(--space-4); position: static; }
  .content { padding: var(--space-4); }
  .grid2, .formgrid { grid-template-columns: 1fr; }
}

/* Update offer, desktop app only */
.update-bar { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 50; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 8px 28px rgba(21,19,31,0.12); font-size: 14px; }
@media (max-width: 560px) { .update-bar { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); flex-wrap: wrap; } }
.auth-links { display: grid; gap: 10px; margin-top: calc(-1 * var(--space-2)); }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.auth-row.center { justify-content: center; }
.link { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--violet-link, var(--violet)); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link.muted { color: var(--ink-2); font-weight: 500; }
.auth-row.small .link { font-size: 12.5px; }