/* Rockstart 3.0 prototype — visual language lifted from Rockstart's own 3.0 material */
@import url('fonts/fonts.css');

:root {
  --bg: #FEF9F0;
  --card: #FFFFFF;
  --ink: #000000;
  --ink-rgb: 0, 0, 0;
  --border: #D6D6CC;
  --indigo: #7A5DFF;
  --indigo-soft: rgba(122, 93, 255, 0.12);
  --green: #3CB97A;
  --green-soft: rgba(60, 185, 122, 0.12);
  --orange: #E8874A;
  --orange-soft: rgba(232, 135, 74, 0.12);
  --rose: #E85A8A;
  --rose-soft: rgba(232, 90, 138, 0.12);
  --amber: #D4A535;
  --amber-soft: rgba(212, 165, 53, 0.16);
  --teal: #4FBFA8;
  --teal-soft: rgba(79, 191, 168, 0.14);
  --cyan: #26C6DA;
  --sand: #F3E5CD;
  --mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Syne', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --numeric: 'Krona One', 'Syne', 'Avenir Next', sans-serif;
  --violet: #7A5DFF;
  --radius: 3px;
  --banner-h: 0px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--indigo); text-decoration: none; }
a:hover { color: #5E43E0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── type helpers ── */
.eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.4; }
.small   { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.4; }
.mono    { font-family: var(--mono); font-size: 12px; }
.muted   { opacity: 0.55; }
.display { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
h1.page-title { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 0; }

/* ── simulation banner ── */
.banner { position: fixed; top: 0; left: 0; right: 0; height: var(--banner-h); z-index: 50; background: #1A1918; color: #F4F0EA; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-bottom: 2px solid var(--amber); }
.banner .tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.banner .tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.banner .note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner .switch { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.banner select { font-family: var(--mono); font-size: 11px; background: #2A2826; color: #F4F0EA; border: 1px solid rgba(244,240,234,0.2); border-radius: 6px; padding: 4px 8px; }
.banner .link { color: var(--amber); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ── login: Rockstart's hero composition (video, sand panel offset right, sawtooth edge) ── */
.login { min-height: calc(100vh - var(--banner-h)); display: flex; flex-direction: column; }
.login .hero { position: relative; flex: 1; min-height: 560px; overflow: hidden; display: flex; align-items: center; padding: 96px 64px 120px; }
.login .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.login .bg-wash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.06) 30%, rgba(0,0,0,0.10) 100%); }
.login .top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 26px 40px; color: #FFFFFF; }
.login .top .logo { width: 132px; color: #FFFFFF; }
.login .top .logo svg { width: 100%; height: auto; display: block; }
.login .top .eyebrow { color: #FFFFFF; opacity: 0.8; }
.login .panel { position: relative; z-index: 2; margin-left: auto; width: 560px; max-width: 100%; background: var(--sand); padding: 52px 52px 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.login h1 { font-family: var(--display); font-size: 56px; font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; }
.login p { font-size: 18px; line-height: 1.6; margin: 0 0 32px; max-width: 34ch; }
.btn-google { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 30px 0 22px; border-radius: 0; background: var(--violet); color: #FFFFFF; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.btn-google:hover { background: #5E43E0; }
.btn-google .g { width: 30px; height: 30px; border-radius: 2px; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.login .hint { margin-top: 16px; opacity: 0.55; }
.login .foot { position: relative; background: var(--bg); padding: 44px 40px 28px; display: flex; justify-content: space-between; align-items: center; }
.login .foot::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' preserveAspectRatio='none'><polygon points='0,24 24,0 48,24' fill='%23FEF9F0'/></svg>") repeat-x left bottom / 48px 24px; }
@media (prefers-reduced-motion: reduce) { .login .bg-video { display: none; } .login .hero { background: var(--bg) url('media/rockstart-poster.jpg') center / cover no-repeat; } }

/* ── modal ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { width: 440px; max-width: 100%; background: #FFFFFF; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,0.25); overflow: hidden; }
.modal .sim { background: var(--amber-soft); border-bottom: 1px solid var(--border); padding: 10px 24px; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.modal .sim .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.modal .head { padding: 28px 24px 8px; text-align: center; }
.modal .head h2 { font-family: var(--sans); font-weight: 500; font-size: 22px; margin: 12px 0 6px; letter-spacing: -0.01em; }
.modal .head p { margin: 0; opacity: 0.6; font-size: 13px; }
.modal .accounts { padding: 12px 8px 8px; }
.modal .account { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; border-radius: var(--radius); text-align: left; }
.modal .account:hover { background: rgba(0,0,0,0.05); }
.modal .account .name { font-weight: 500; }
.modal .account .mail { font-size: 12px; opacity: 0.55; }
.modal .account .role { margin-left: auto; }
.modal .foot { padding: 14px 24px 20px; border-top: 1px solid rgba(0,0,0,0.06); font-size: 12px; opacity: 0.6; line-height: 1.5; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.avatar.indigo { background: var(--indigo); }
.avatar.green { background: var(--green); }
.avatar.orange { background: var(--orange); }
.avatar.rose { background: var(--rose); }
.avatar.teal { background: var(--teal); }
.avatar.amber { background: var(--amber); }

/* ── app shell ── */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - var(--banner-h)); }
.sidebar { border-right: 1px solid var(--border); padding: 24px 12px 20px; display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: var(--banner-h); height: calc(100vh - var(--banner-h)); overflow-y: auto; }
.app { --app: var(--indigo); --app-deep: #5E43E0; }
.sidebar { border-top: 4px solid var(--app); background: color-mix(in srgb, var(--app) 8%, var(--bg)); border-right-color: color-mix(in srgb, var(--app) 30%, var(--border)); }
.app-switch { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 0; background: var(--app-deep); color: #FFFFFF; margin-bottom: 14px; text-align: left; box-shadow: 0 6px 18px color-mix(in srgb, var(--app) 35%, transparent); }
.app-switch:hover { filter: brightness(1.08); }
.app-switch .app-dot { width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; opacity: 0.9; flex-shrink: 0; }
.app-switch .app-name { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-switch svg { opacity: 0.85; }
.brand-small { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; margin-bottom: 14px; }
.brand-small svg { width: 84px; height: auto; display: block; color: var(--ink); opacity: 0.8; }
.brand-small .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-items.app-menu { display: flex; flex-direction: column; gap: 2px; }
.nav-item.active { background: color-mix(in srgb, var(--app) 18%, transparent); color: var(--app-deep); }
.nav-item.active svg { color: var(--app-deep); }
.nav-item .badge { background: var(--app-deep); }
.app .main a { color: var(--app-deep); }
.app .main a.btn { color: #FFFFFF; }
.app .main a.btn.ghost { color: var(--ink); }
.app .main a:hover { color: var(--ink); }
.app .askbar svg { color: var(--app-deep); }
.app .askbar { border-color: color-mix(in srgb, var(--app) 40%, var(--border)); }
.app .ask-chips .chip:hover { border-color: var(--app-deep); color: var(--app-deep); }
.app .ai-panel { border-color: var(--app-deep); }
.app .chip.indigo { background: color-mix(in srgb, var(--app) 14%, transparent); color: var(--app-deep); }
.app .progress div { background: var(--app); }
.app .bar .track div { background: var(--app); }
.app .btn { background: var(--app-deep); }
.app .btn:hover { background: var(--ink); }
.app .stat .value { color: var(--ink); }
.app .btn.ghost { background: transparent; }
.app .btn.ghost:hover { border-color: var(--app-deep); background: transparent; }
.app .mobile-bar { background: color-mix(in srgb, var(--app) 10%, var(--bg)); }
.app .mobile-bar .mb-app { color: var(--app-deep); }
.app .mobile-bar .app-dot { background: var(--app-deep); }
.app .sidebar .user .avatar { background: var(--app-deep); }
.nav-toggle { margin-top: 10px; opacity: 0.45; border-top: 1px solid rgba(0,0,0,0.06); border-radius: 0; padding-top: 12px; height: 44px; }
.nav-toggle:hover { opacity: 0.9; background: none; }
.modal.apps { width: 520px; }
.app-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.app-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: var(--radius); text-align: left; border: 1px solid transparent; }
.app-card:hover { background: rgba(0,0,0,0.04); }
.app-card.current { border-color: var(--app-deep); background: color-mix(in srgb, var(--app) 12%, transparent); }
.app-card .app-icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--app-deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-card .app-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-card .app-title { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.app-card .app-tag { font-size: 12px; opacity: 0.6; }
.nav-group { margin-bottom: 6px; }
.nav-group-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px 6px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.4; }
.nav-group-head:hover { opacity: 0.7; }
.nav-group-head svg { transition: transform 0.15s; }
.nav-group.open .nav-group-head svg { transform: rotate(90deg); }
.nav-group .nav-items { display: none; flex-direction: column; gap: 2px; }
.nav-group.open .nav-items { display: flex; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 12px; border-radius: var(--radius); font-size: 13px; font-weight: 500; opacity: 0.6; text-align: left; }
.nav-item:hover { opacity: 1; background: rgba(0,0,0,0.04); }
.nav-item.active { opacity: 1; font-weight: 600; background: rgba(0,0,0,0.06); }
.nav-item .lock { margin-left: auto; opacity: 0.5; display: inline-flex; }
.nav-item .lock + .badge { margin-left: 6px; }
.nav-legend { display: flex; align-items: center; gap: 6px; padding: 10px 12px 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.4; }
.ro-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; background: var(--sand); border-radius: var(--radius); font-size: 13px; }
.ro-note svg { color: #8A6A16; }
.nav-item .badge { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 600; background: var(--indigo); color: #fff; border-radius: 100px; padding: 2px 7px; }
.sidebar .user { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.sidebar .user .name { font-size: 13px; font-weight: 500; }
.sidebar .user .role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.4; }

.main { padding: 0 32px 48px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.app-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 -32px 8px; padding: 0 32px; height: 40px; background: var(--app-deep); color: #FFFFFF; }
.app-band .band-name { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.app-band .band-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar { display: flex; align-items: center; gap: 16px; }
.askbar { flex: 1; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); }
.askbar svg { color: var(--indigo); flex-shrink: 0; }
.askbar input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; }
.askbar input::placeholder { color: var(--ink); opacity: 0.45; }
.askbar .kbd { font-family: var(--mono); font-size: 10px; opacity: 0.35; letter-spacing: 0.08em; }
.ask-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ask-chips .chip { cursor: pointer; }
.ask-chips .chip:hover { border-color: var(--indigo); color: var(--indigo); }

.ai-panel { background: var(--sand); border: 0; border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.ai-panel .ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-panel .q { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.ai-panel pre { font-family: var(--sans); font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin: 0; padding: 14px 16px; background: rgba(255,255,255,0.6); border-radius: var(--radius); }
.ai-panel .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── layout blocks ── */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stat { gap: 8px; }
.stat .value { font-family: var(--numeric); font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; }
.stat .sub { font-size: 13px; opacity: 0.55; }
.stat .warn { color: var(--rose); opacity: 1; }
.progress { height: 4px; border-radius: 2px; background: rgba(0,0,0,0.06); overflow: hidden; }
.progress div { height: 4px; border-radius: 2px; background: var(--indigo); }

.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.05); border: 1px solid transparent; border-radius: var(--radius); padding: 3px 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; line-height: 1.5; }
.chip.indigo { background: var(--indigo-soft); color: #5E43E0; }
.chip.green { background: var(--green-soft); color: #2C8F5C; }
.chip.orange { background: var(--orange-soft); color: #C46A2E; }
.chip.rose { background: var(--rose-soft); color: #C7396B; }
.chip.amber { background: var(--amber-soft); color: #8A6A16; }
.chip.teal { background: var(--teal-soft); color: #2E8F7B; }
.chip.outline { background: transparent; border-color: var(--border); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 0; background: var(--violet); color: #FFFFFF; font-size: 12px; font-weight: 500; white-space: nowrap; }
.btn:hover { background: #2A2826; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #FFFFFF; }
.btn.sm { height: 26px; padding: 0 10px; font-size: 11px; }

.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.row:first-child { border-top: 0; }
.row .l { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.row .r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.row .t { font-size: 13px; }
.row .time { font-family: var(--mono); font-size: 12px; width: 44px; flex-shrink: 0; }
.row.overdue .t { color: #C7396B; }

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { display: flex; align-items: center; gap: 12px; }
.bar .lbl { font-size: 13px; width: 112px; opacity: 0.7; flex-shrink: 0; }
.bar .track { flex: 1; height: 10px; border-radius: 0 4px 4px 0; background: rgba(0,0,0,0.05); overflow: hidden; }
.bar .track div { height: 10px; border-radius: 0 4px 4px 0; background: var(--indigo); }
.bar .segs { flex: 1; display: flex; gap: 2px; align-items: center; }
.bar .segs div { height: 10px; border-radius: 2px; flex-shrink: 0; }
.bar .val { font-family: var(--mono); font-size: 12px; width: 28px; text-align: right; flex-shrink: 0; }
.legend { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.legend span.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; }
.legend .item { display: flex; align-items: center; font-size: 13px; opacity: 0.8; gap: 6px; }

table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.4; padding: 6px 10px 10px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.table td { padding: 10px 10px 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); vertical-align: middle; }
table.table tr:last-child td { border-bottom: 0; }
table.table td.mono { font-family: var(--mono); font-size: 12px; }
table.table a.rowlink { color: inherit; font-weight: 500; }
table.table a.rowlink:hover { color: var(--indigo); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters .chip { cursor: pointer; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.tl-item:first-child { border-top: 0; }
.tl-item .date { font-family: var(--mono); font-size: 12px; opacity: 0.6; padding-top: 2px; }
.tl-item .subject { font-weight: 500; margin-bottom: 4px; }
.tl-item .thread { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.tl-item .note { font-size: 13px; opacity: 0.7; }
.tl-item .by { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; opacity: 0.4; text-transform: uppercase; margin-top: 4px; }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.field .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.4; margin-bottom: 2px; }
.field .v { font-size: 13px; }

.stub { max-width: 640px; padding: 48px 0; display: flex; flex-direction: column; gap: 14px; }
.stub h1 { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; margin: 0; }
.stub p { font-size: 16px; line-height: 1.6; opacity: 0.7; margin: 0; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 70; background: #1A1918; color: #F4F0EA; border-left: 3px solid var(--amber); padding: 12px 18px; border-radius: 0; font-size: 13px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); max-width: 560px; }
.toast .small { color: var(--amber); opacity: 1; display: block; margin-bottom: 4px; }

.warn-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); margin-right: 6px; }
.ok-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; }

/* Installed as an app: the window's own title bar carries the colour, so the band steps aside. */
@media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: minimal-ui) {
  .app-band { display: none; }
  .topbar { margin-top: 24px; }
}

/* ── in-app back button: only when the browser's own controls are hidden (installed app) ── */
.nav-back { display: none; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--ink); flex-shrink: 0; }
.nav-back:hover { border-color: var(--app-deep); color: var(--app-deep); }
.mobile-bar .nav-back { width: 40px; height: 40px; }
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: window-controls-overlay) { .nav-back { display: inline-flex; } }

/* ── mobile bar + drawer ── */
.mobile-bar { display: none; }
.drawer-backdrop { display: none; }
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .login h1 { font-size: 56px; }
}

@media (max-width: 900px) {
  :root { --banner-h: 44px; }
  .banner { gap: 8px; padding: 0 10px; }
  .banner .note { display: none; }
  .banner .switch label { display: none; }
  .banner select { max-width: 150px; }
  .app { display: block; }
  .mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: var(--banner-h); z-index: 40; border-top: 3px solid var(--app); }
  .mobile-bar .mb-app { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; flex: 1; min-width: 0; }
  .mobile-bar .app-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--app); }
  .mobile-bar .mb-menu { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; background: var(--card); }
  .sidebar { position: fixed; top: var(--banner-h); left: 0; bottom: 0; width: 280px; max-width: 85vw; height: auto; background: var(--bg); z-index: 56; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 0 0 0 rgba(0,0,0,0); }
  .app.drawer-open .sidebar { transform: none; box-shadow: 12px 0 40px rgba(0,0,0,0.18); }
  .app.drawer-open .drawer-backdrop { display: block; position: fixed; inset: 0; top: var(--banner-h); background: rgba(0,0,0,0.35); z-index: 55; }
  .main { padding: 0 14px 40px; gap: 12px; }
  .app-band { display: none; }
  .topbar { margin-top: 12px; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .askbar { height: 46px; padding: 0 14px; flex-basis: 100%; }
  .askbar input { font-size: 14px; }
  .askbar .kbd { display: none; }
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .ask-chips .chip { flex-shrink: 0; }
  .grid-4, .grid-3, .grid-2, .grid-2-1 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card { padding: 14px 16px; overflow-x: auto; }
  .card table.table { min-width: 560px; }
  .stat .value { font-size: 28px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  h1.page-title { font-size: 24px; }
  .row { flex-wrap: wrap; }
  .row .r { flex-wrap: wrap; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
  .bar .lbl { width: 84px; font-size: 12px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .login .hero { padding: 88px 16px 56px; min-height: 0; align-items: flex-end; }
  .login .top { padding: 18px 16px; }
  .login .top .logo { width: 110px; }
  .login .top .eyebrow { display: none; }
  .login .panel { width: 100%; padding: 28px 22px 26px; }
  .login h1 { font-size: 36px; }
  .login p { font-size: 15px; margin-bottom: 22px; }
  .btn-google { height: 52px; width: 100%; justify-content: center; font-size: 16px; }
  .login .foot { padding: 32px 16px 20px; }
  .modal { width: 100%; }
  .modal.apps { width: 100%; }
  .modal .foot { flex-direction: column; align-items: flex-start !important; }
  .toast { left: 12px; right: 12px; transform: none; max-width: none; }
}


/* ═══════════════ prototype 2: app frame, topbar, palette, sheet, board, chip ═══════════════ */
html, body { height: 100%; }
body.app-mode { overflow: hidden; }
.app { height: 100vh; min-height: 0; }
.sidebar { position: static; top: 0; height: 100vh; }
.main { height: 100vh; overflow-y: auto; padding: 0 24px 48px; gap: 0; display: block; scrollbar-width: thin; }
.app-band { margin: 0 -24px 0; height: 28px; padding: 0 24px; }
.app-band .band-name { font-size: 12px; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 56px; margin: 0 -24px 14px; padding: 0 24px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.tb-title { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tb-spacer { flex: 1; }
.tb-ask { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--border); background: var(--card); color: var(--ink); width: 300px; font-size: 13px; border-radius: var(--radius); }
.tb-ask:hover { border-color: var(--app-deep); }
.tb-ask svg { color: var(--app-deep); }
.tb-ask span { flex: 1; text-align: left; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { font-family: var(--mono); font-size: 10px; line-height: 1; border: 1px solid var(--border); padding: 3px 5px; border-radius: 3px; background: var(--card); color: var(--ink); opacity: 0.8; }
.tb-actions { display: flex; gap: 8px; }
.tb-user { display: inline-flex; }
.tb-user .avatar { width: 30px; height: 30px; font-size: 10px; }
.content { display: flex; flex-direction: column; gap: 12px; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.view-enter { animation: fadein 0.16s ease-out; }
@media (prefers-reduced-motion: reduce) { .view-enter { animation: none; } }
.page-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-meta .keys { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0; }
.page-meta .filters { display: flex; gap: 8px; }
.grid-4, .grid-3, .grid-2, .grid-2-1 { gap: 12px; }
.card { padding: 14px 16px; gap: 10px; }
.stat .value { font-size: 24px; }
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
h1.page-title { font-size: 20px; }
.ai-panel { padding: 16px 18px; }
.nav-back { width: 36px; height: 36px; }
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: window-controls-overlay) { .topbar { margin-top: 0; } }

/* command palette */
.palette-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(26,25,24,0.35); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.palette { width: 640px; max-width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,0.3); overflow: hidden; }
.pal-input { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 54px; border-bottom: 1px solid var(--border); }
.pal-input svg { color: var(--app-deep, var(--indigo)); }
.pal-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; }
.pal-list { max-height: 50vh; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; }
.pal-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; border-radius: var(--radius); }
.pal-item:hover, .pal-item.sel { background: color-mix(in srgb, var(--app, var(--indigo)) 12%, transparent); }
.pal-item svg { opacity: 0.6; }
.pal-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pal-text > span:first-child { font-size: 14px; }
.pal-kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.45; }
.pal-foot { padding: 8px 16px 10px; border-top: 1px solid var(--border); }
.pal-foot .small { text-transform: none; letter-spacing: 0; display: inline-flex; gap: 6px; align-items: center; }

/* side sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(26,25,24,0.25); }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 600px; max-width: 100%; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -24px 0 60px rgba(0,0,0,0.18); display: flex; flex-direction: column; animation: slidein 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes slidein { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--card); }
.sheet-head h2 { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sheet-body { overflow-y: auto; padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 12px; }

/* kanban */
.board { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 10px; align-items: flex-start; }
.col { width: 236px; flex-shrink: 0; background: rgba(0,0,0,0.035); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; transition: outline-color 0.1s; outline: 2px dashed transparent; outline-offset: -2px; }
.col.over { outline-color: var(--app-deep); background: color-mix(in srgb, var(--app) 10%, transparent); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
.col-head .eyebrow { flex: 1; }
.col-count { font-family: var(--numeric); font-size: 13px; }
.col-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; cursor: grab; }
.kcard[draggable="false"] { cursor: default; }
.kcard:hover { border-color: var(--app-deep); }
.kcard.dragging { opacity: 0.45; }
.kc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.kc-top .rowlink { font-weight: 600; }
.kc-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.kc-meta .chip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.kc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kc-foot .small { text-transform: none; letter-spacing: 0; opacity: 0.55; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-move { font-family: var(--mono); font-size: 10px; border: 1px solid var(--border); background: var(--card); color: var(--ink); padding: 2px 4px; border-radius: var(--radius); max-width: 120px; }

/* inbox keyboard selection */
.inbox .row { padding-left: 12px; padding-right: 12px; }
.inbox .row.selected { background: color-mix(in srgb, var(--app) 10%, transparent); box-shadow: inset 3px 0 0 var(--app-deep); border-top-color: transparent; }
.rows.inbox { overflow-x: hidden; }
.inbox .row.selected + .row { border-top-color: transparent; }

/* simulation chip */
.sim-chip { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sim-toggle { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: #1A1918; color: #F4F0EA; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border-left: 3px solid var(--amber); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.sim-toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.sim-toggle svg { transform: rotate(-90deg); opacity: 0.7; }
.sim-chip.open .sim-toggle svg { transform: rotate(90deg); }
.sim-panel { width: 320px; background: #1A1918; color: #F4F0EA; padding: 14px 16px; border-left: 3px solid var(--amber); box-shadow: 0 16px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.5; }
.sim-panel p { margin: 0; opacity: 0.8; }
.sim-title { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.sim-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.sim-panel label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.sim-panel select { font-family: var(--mono); font-size: 11px; background: #2A2826; color: #F4F0EA; border: 1px solid rgba(244,240,234,0.2); border-radius: var(--radius); padding: 6px 8px; }
.sim-row { display: flex; gap: 8px; justify-content: space-between; }
.sim-panel .btn.ghost { color: #F4F0EA; border-color: rgba(244,240,234,0.35); }
.sim-panel .btn.ghost:hover { background: #F4F0EA; color: #1A1918; }
.sim-panel .btn { background: var(--amber); color: #1A1918; }

/* mobile */
.mb-ask { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; background: var(--card); }
@media (max-width: 900px) {
  .app { display: flex; flex-direction: column; height: 100vh; }
  .sidebar { position: fixed; top: 0; bottom: 0; height: auto; }
  .mobile-bar { position: static; flex-shrink: 0; }
  .main { flex: 1; height: auto; padding: 0 14px 40px; }
  .app-band { display: none; }
  .topbar { margin: 0 -14px 12px; padding: 0 14px; height: 48px; gap: 8px; }
  .tb-title { font-size: 17px; }
  .tb-ask, .tb-user { display: none; }
  .sheet { width: 100%; }
  .palette-backdrop { padding: 8px; }
  .col { width: 220px; }
  .sim-chip { right: 10px; bottom: 10px; }
  .sim-panel { width: min(320px, calc(100vw - 20px)); }
}


/* ═══════════════ prototype 2b: fixed frame, no page scroll, lists scroll inside their cards ═══════════════ */
.main { display: flex; flex-direction: column; padding: 24px 24px 18px; overflow: hidden; border-top: 4px solid var(--app); height: 100vh; }
.app-band { display: none; }
.topbar { position: static; flex-shrink: 0; height: 46px; margin: 0 0 14px; padding: 0; background: transparent; backdrop-filter: none; border-bottom: 0; }
.tb-title { font-size: 22px; }
.sidebar .app-switch { min-height: 46px; }
.content { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.content > .page-meta, .content > .ro-note, .content > .small { flex-shrink: 0; }
.content > .ai-panel { flex-shrink: 0; max-height: 42%; overflow: auto; }
.content > .grid-2, .content > .grid-3, .content > .grid-2-1 { flex: 1 1 0; min-height: 0; }
.content > .grid-4 { flex-shrink: 0; }
.content > .card.fill, .content > .board { flex: 1 1 0; min-height: 0; }
.card { min-height: 0; overflow: hidden; }
.card > .rows, .card > .table-wrap, .card > .timeline, .card > .bars, .card > .fields, .card > div[style*="overflow-x"] { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.card > .rows { display: flex; flex-direction: column; }
.table-wrap { overflow: auto; }
.table-wrap thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.stack { min-height: 0; overflow: auto; scrollbar-width: thin; }
.grid-2-1 > .stack { height: 100%; }
.board { min-height: 0; align-items: stretch; }
.col { min-height: 0; max-height: 100%; }
.col-body { flex: 1 1 auto; min-height: 40px; overflow: auto; scrollbar-width: thin; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: rgba(0,0,0,0.05); border-radius: var(--radius); }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--ink); opacity: 0.65; border-radius: var(--radius); }
.tab:hover { opacity: 1; }
.tab.active { background: var(--card); opacity: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.tab-count { font-family: var(--mono); font-size: 10px; opacity: 0.6; }
.stub { overflow: auto; }
@media (max-width: 900px) {
  .main { display: block; overflow-y: auto; height: auto; padding: 0 14px 40px; border-top: 0; }
  .topbar { height: 48px; margin: 0 -14px 12px; padding: 0 14px; border-bottom: 1px solid var(--border); }
  .content { display: block; overflow: visible; }
  .content > .grid-2, .content > .grid-3, .content > .grid-2-1, .content > .card.fill, .content > .board { flex: none; }
  .content > * { margin-bottom: 12px; }
  .card { overflow: visible; }
  .card > .rows, .card > .table-wrap, .card > .timeline, .card > .bars, .card > .fields { overflow: visible; }
  .card > .table-wrap { overflow-x: auto; }
  .stack { overflow: visible; }
  .col { max-height: none; }
  .col-body { overflow: visible; }
}

/* cards inside a scrolling column keep their natural height; the column scrolls */
.stack > .card, .sheet-body > .card { flex-shrink: 0; overflow: visible; }
.stack .card > .rows, .stack .card > .table-wrap, .stack .card > .timeline, .stack .card > .fields,
.sheet-body .card > .rows, .sheet-body .card > .table-wrap, .sheet-body .card > .timeline, .sheet-body .card > .fields { overflow: visible; }
.stack .card > .table-wrap, .sheet-body .card > .table-wrap { overflow-x: auto; }


/* ═══════════════ prototype 2c: text-size setting, control heights, profile ═══════════════ */
:root { --fs: 14px; --fs-sm: 13px; --fs-mono: 11px; --ctl: 38px; --nav: 38px; --title: 22px; --cell: 12px; }
html[data-size="s"] { --fs: 13px; --fs-sm: 12px; --fs-mono: 10px; --ctl: 34px; --nav: 34px; --title: 20px; --cell: 10px; }
html[data-size="l"] { --fs: 16px; --fs-sm: 15px; --fs-mono: 12px; --ctl: 44px; --nav: 44px; --title: 26px; --cell: 14px; }
body { font-size: var(--fs); }
.eyebrow, .small, .nav-group-head, .nav-legend, .pal-kind, .tab-count, .kc-move { font-size: var(--fs-mono); }
.chip { font-size: var(--fs-mono); padding: 4px 10px; }
.mono { font-size: calc(var(--fs) - 1px); }
.nav-item { height: var(--nav); font-size: var(--fs); }
.nav-item .badge { font-size: var(--fs-mono); }
.app-switch .app-name { font-size: calc(var(--fs) + 1px); }
.btn { height: var(--ctl); padding: 0 16px; font-size: var(--fs-sm); }
.btn.sm { height: calc(var(--ctl) - 6px); padding: 0 12px; font-size: calc(var(--fs-sm) - 1px); }
.tb-ask { height: var(--ctl); font-size: var(--fs-sm); width: 320px; }
.tb-title { font-size: var(--title); }
.tb-user .avatar { width: var(--ctl); height: var(--ctl); font-size: var(--fs-mono); }
.tb-actions .btn { height: var(--ctl); }
.topbar { height: calc(var(--ctl) + 8px); }
.sidebar .app-switch { min-height: calc(var(--ctl) + 8px); }
table.table { font-size: var(--fs); }
table.table th { font-size: var(--fs-mono); }
table.table td { padding: var(--cell) 10px var(--cell) 0; }
.row .t, .stat .sub, .tl-item .note, .field .v, .kc-top, .pal-text > span:first-child { font-size: var(--fs); }
.row { padding: calc(var(--cell) - 2px) 0; }
.stat .value { font-size: calc(var(--fs) + 10px); }
.kc-move { height: 30px; padding: 0 6px; }
.pal-input input { font-size: calc(var(--fs) + 2px); }
.ctl { height: var(--ctl); font-family: var(--sans); font-size: var(--fs-sm); border: 1px solid var(--border); background: var(--card); color: var(--ink); padding: 0 12px; border-radius: var(--radius); min-width: 220px; }
.seg { display: inline-flex; padding: 3px; background: rgba(0,0,0,0.05); border-radius: var(--radius); gap: 2px; }
.seg-btn { height: calc(var(--ctl) - 6px); padding: 0 14px; font-size: var(--fs-sm); font-weight: 500; opacity: 0.65; border-radius: var(--radius); }
.seg-btn:hover { opacity: 1; }
.seg-btn.active { background: var(--card); opacity: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.setting-l { min-width: 0; }
.setting-t { font-weight: 600; }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-name { font-family: var(--display); font-size: calc(var(--title) - 2px); font-weight: 700; letter-spacing: -0.02em; }
.avatar.big { width: 56px; height: 56px; font-size: 16px; }
.grid-2.top { flex: none; align-items: start; }
.grid-2.top > .card { overflow: visible; }
.grid-2.top .card > .fields { overflow: visible; }
.seg-btn { white-space: nowrap; }
.setting { flex-wrap: wrap; }
.brand-small .eyebrow { font-size: 10px; }
.col { width: auto; flex: 1 1 200px; min-width: 200px; max-width: 280px; }
html[data-size="l"] .col { min-width: 220px; }
.kc-move { max-width: 128px; }
.setting-l { flex: 1 1 260px; }
.setting > .seg, .setting > .ctl { flex: 0 0 auto; }
.nav-item > span, .nav-item .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand-small .eyebrow { letter-spacing: 0.08em; }

/* app model: no 'More…' — a screen outside the app's menu gets a context line instead */
.ctx-note { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--sand); border-radius: var(--radius); font-size: var(--fs-sm); }
.ctx-note span { flex: 1; }
.ctx-note .btn.ghost { border-color: rgba(0,0,0,0.25); }

.brand-small svg { width: 84px !important; flex: 0 0 84px; }


/* ═══════════════ prototype 2d: quiet brand row, waffle, clickable user, photos, window-controls-overlay ═══════════════ */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: calc(var(--ctl) + 8px); padding: 0 4px 0 12px; margin-bottom: 14px; }
.brand-row > svg { width: 96px !important; height: auto; display: block; color: var(--ink); }
.apps-btn { width: var(--ctl); height: var(--ctl); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--app-deep); opacity: 0.85; }
.apps-btn:hover { background: color-mix(in srgb, var(--app) 14%, transparent); opacity: 1; }
.apps-btn svg { display: block; }
.sidebar .user { border-radius: var(--radius); color: inherit; text-decoration: none; padding: 8px 10px; margin: 0 -2px; }
.sidebar .user > div { flex: 1; min-width: 0; }
.sidebar .user > svg { opacity: 0.35; }
.sidebar .user:hover { background: color-mix(in srgb, var(--app) 12%, transparent); }
.sidebar .user:hover > svg { opacity: 0.8; }
.sidebar .user .name { font-size: var(--fs); }
.sidebar .user .role { font-size: var(--fs-mono); }
.sidebar .user .avatar { width: var(--ctl); height: var(--ctl); }
.avatar.photo { background: var(--sand); overflow: hidden; }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Our own title bar in installed apps with the window-controls overlay on. Chrome remembers the toggle per app.
   The strip takes the app colour, the same colour Chrome paints behind the window controls, so it reads as one bar. */
.wco { display: none; }
@media (display-mode: window-controls-overlay) {
  body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(titlebar-area-height, 33px); background: var(--app, var(--indigo)); z-index: 59; }
  .wco { display: flex; position: fixed; top: env(titlebar-area-y, 0px); left: env(titlebar-area-x, 0px); width: env(titlebar-area-width, 100%); height: env(titlebar-area-height, 33px); align-items: center; padding: 0 14px; -webkit-app-region: drag; app-region: drag; font-family: var(--display); font-weight: 700; font-size: var(--fs); letter-spacing: -0.01em; color: var(--app-fg, var(--ink)); z-index: 60; white-space: nowrap; overflow: hidden; }
  .app { padding-top: env(titlebar-area-height, 33px); }
  .sidebar, .main { height: calc(100vh - env(titlebar-area-height, 33px)); border-top: 0; }
  .topbar .nav-back { -webkit-app-region: no-drag; app-region: no-drag; }
}
}
.apps-btn svg { width: 20px; height: 20px; }
.sidebar .user .role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* kanban: position-aware drag & drop */
.kcard.drag-hidden { display: none; }
.drop-slot { flex-shrink: 0; border: 2px dashed var(--app-deep); border-radius: var(--radius); background: color-mix(in srgb, var(--app) 12%, transparent); box-sizing: border-box; }
.col.over { outline-color: transparent; background: color-mix(in srgb, var(--app) 7%, transparent); }
.col-body { overscroll-behavior: contain; }

/* card sheet form */
.drop-slot { pointer-events: none; }
.kcard:focus-visible { outline: 2px solid var(--app-deep); outline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.f .k { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; }
.f .ctl { width: 100%; min-width: 0; }
.ctl.area { height: auto; min-height: 76px; padding: 8px 12px; resize: vertical; line-height: 1.45; }
.ctl:focus { outline: 2px solid var(--app-deep); outline-offset: -1px; }
.ctl:disabled { opacity: 0.6; }
.sheet-foot { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

body.is-dragging { cursor: grabbing; }

/* Button hover: text and background always move together. Ghost buttons stay dark-on-light with an app-coloured
   border and tint; filled buttons go ink with white text, also when they are links. */
.app .btn.ghost:hover, .app .main a.btn.ghost:hover { background: color-mix(in srgb, var(--app) 10%, transparent); border-color: var(--app-deep); color: var(--ink); }
.app .btn:not(.ghost):hover, .app .main a.btn:not(.ghost):hover { background: var(--ink); color: #FFFFFF; }
.sim-panel .btn.ghost:hover { background: #F4F0EA; color: #1A1918; border-color: #F4F0EA; }
.ctx-note .btn.ghost:hover { background: rgba(255,255,255,0.6); }
.sim-panel .btn.ghost { background: transparent; }

/* Mobile drawer: a side panel that slides in from the left and back out. The backdrop fades instead of popping. */
@media (max-width: 900px) {
  .sidebar { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease; will-change: transform; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 55; opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0s linear 0.28s; }
  .app.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; transition: opacity 0.28s ease; }
  .app:not(.drawer-open) .sidebar { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .drawer-backdrop { transition: none !important; } }
/* With the window-controls overlay on, the drawer starts under the title strip and runs to the bottom edge. */
@media (display-mode: window-controls-overlay) and (max-width: 900px) {
  /* Panel and backdrop run from the very top and sit under the opaque title strip (higher z-index), so subpixel
     rounding of the strip height can never leave a hairline. The panel's content is pushed down by the strip height. */
  .sidebar { top: 0; bottom: 0; height: auto; padding-top: calc(24px + env(titlebar-area-height, 33px)); }
  .drawer-backdrop { top: 0; }
}

/* Ask field: two lines tall, Enter runs, Shift+Enter breaks the line. On mobile the palette sits clear of the title strip. */
.pal-input { align-items: flex-start; height: auto; padding: 12px 16px; }
.pal-input svg { margin-top: 4px; flex-shrink: 0; }
.pal-input kbd { margin-top: 4px; }
.pal-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; resize: none; font-family: var(--sans); font-size: calc(var(--fs) + 2px); line-height: 1.4; min-height: calc(2 * 1.4em); padding: 0; margin: 0; }
@media (max-width: 900px) { .palette-backdrop { padding: 20px 8px 8px; align-items: flex-start; } }
@media (display-mode: window-controls-overlay) { .palette-backdrop { padding-top: calc(env(titlebar-area-height, 33px) + 20px); } }

/* Login screen under the window-controls overlay: keep the logo row clear of the title strip. */
@media (display-mode: window-controls-overlay) { .login .top { margin-top: env(titlebar-area-height, 33px); } }

/* ═══════════════ Windows and small laptops ═══════════════ */
/* Quiet scrollbars where the OS draws them (Windows). */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.22) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.22); border-radius: 4px; }
/* Below ~680px of height (a 1366×768 laptop at 125 % scaling) the fixed frame gives up and the page scrolls,
   exactly like on mobile; lists show their full height instead of collapsing. */
@media (min-width: 901px) and (max-height: 680px) {
  .main { display: block; overflow-y: auto; }
  .content { display: block; overflow: visible; }
  .content > .grid-2, .content > .grid-3, .content > .grid-2-1, .content > .card.fill, .content > .board { flex: none; }
  .content > * { margin-bottom: 12px; }
  .card { overflow: visible; }
  .card > .rows, .card > .table-wrap, .card > .timeline, .card > .bars, .card > .fields { overflow: visible; }
  .card > .table-wrap { overflow-x: auto; }
  .stack { overflow: visible; }
  .col { max-height: none; }
  .col-body { overflow: visible; }
  .grid-2, .grid-3, .grid-2-1 { min-height: 0; }
}

/* Side sheet: always full height, from the title strip to the bottom edge. Long records scroll inside. */
.sheet-body { flex: 1 1 auto; min-height: 0; }
@media (display-mode: window-controls-overlay) {
  /* The sheet runs from the very top, under the opaque title strip, and pushes its own content down: no rounding seam. */
  .sheet { top: 0; padding-top: env(titlebar-area-height, 33px); }
  /* The title strip is never dimmed: it sits above every backdrop, sheet, palette, modal and chip. */
  body::before { z-index: 120; }
  .wco { z-index: 121; }
}

/* Side sheet leaves the way it came: slides back out to the right while the backdrop fades. */
@keyframes slideout { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
.sheet.closing { animation: slideout 0.2s ease-in forwards; pointer-events: none; }
.sheet-backdrop.closing { animation: fadeout 0.2s ease-in forwards; pointer-events: none; }

/* Settings page */
.settings-form { display: flex; flex-direction: column; }
.settings-form .setting { padding: 16px 0; }
.settings-form .setting:first-child { border-top: 0; padding-top: 6px; }
.setting-meta { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.04em; opacity: 0.5; margin-top: 6px; }
.ctl.short { min-width: 160px; }
.stack-h { display: flex; gap: 8px; flex-wrap: wrap; }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 520px; justify-content: flex-end; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-family: var(--mono); font-size: var(--fs-mono); }
.tag-x { display: inline-flex; opacity: 0.5; padding: 2px; border-radius: 2px; }
.tag-x:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.addrow { display: inline-flex; gap: 6px; align-items: center; }
.addrow .ctl.short { min-width: 200px; }
.settings-card > .settings-form { flex: 1 1 auto; min-height: 0; overflow: auto; }
@media (max-width: 900px) { .taglist { justify-content: flex-start; max-width: none; } }

/* Toast: one short confirmation, same everywhere */
.toast { font-weight: 500; padding: 10px 16px; }

/* Audit log */
.filters-row { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
.chip.toggle { cursor: pointer; opacity: 0.45; user-select: none; }
.chip.toggle.on { opacity: 1; border-color: var(--app-deep); }
.chip.toggle:hover { opacity: 1; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-shrink: 0; }
.ctl.date { min-width: 150px; }
.ctl.search { min-width: 240px; flex: 1 1 240px; }
table.audit td.change { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.02em; }
table.audit td.nowrap { white-space: nowrap; }
.empty { padding: 24px 0; opacity: 0.6; }
@media (max-width: 900px) { .ctl.search { flex-basis: 100%; } }

/* Full page = the panel unfolded. Expanding grows the panel to the content edge; closing a full page shows the
   record as a panel that shrinks back to panel width and then slides out like any panel. */
.sheet { transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sheet.expanding { animation: none; }
.sheet.expanded { animation: none; }
.sheet.collapsing { animation: none; }
.sheet.expanding .sheet-body, .sheet.expanded .sheet-body, .sheet.collapsing .sheet-body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

/* Record actions live inside the record: a small Log button in the Golden Thread head */
.card-head .small .btn { font-family: var(--sans); text-transform: none; letter-spacing: 0; height: 26px; padding: 0 8px; margin-left: 4px; vertical-align: middle; }
.sheet.expanded.closing { animation: slideout 0.32s cubic-bezier(0.4, 0, 0.8, 0.4) forwards; pointer-events: none; }

/* Comments, flags and mentions */
.thread { display: flex; flex-direction: column; }
.cm { padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.cm:first-child { border-top: 0; padding-top: 0; }
.cm.for-me { box-shadow: inset 3px 0 0 var(--app-deep); padding-left: 10px; }
.cm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.cm-head .to { text-transform: none; letter-spacing: 0; }
.cm-text { line-height: 1.5; }
.mention { color: var(--app-deep, var(--indigo)); font-weight: 600; }
.stamp { font-family: var(--mono); font-size: var(--fs-mono); opacity: 0.55; letter-spacing: 0.02em; cursor: help; border-bottom: 1px dotted rgba(0,0,0,0.3); }
.cm-status { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-family: var(--mono); font-size: var(--fs-mono); }
.cm-status.inline { margin: 0; justify-content: flex-end; }
.rs.done { color: var(--green); } .rs.seen { opacity: 0.8; } .rs.unseen { opacity: 0.6; }
.cm-actions { margin-top: 8px; }
.composer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.composer .ctl.area { min-height: 60px; width: 100%; }
.compose-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inbox-sec { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; padding: 14px 12px 4px; }
.inbox-sec:first-child { padding-top: 0; }
.dot-new { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--app-deep); margin-left: 6px; vertical-align: middle; }
.sent-row .r { max-width: 46%; }

/* Inbox rows: pointer and touch select a row, the buttons act on it. Touch targets stay at least 40px tall. */
#inbox .inbox-row { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
#inbox .inbox-row .btn { user-select: none; }
#inbox .inbox-row:not(.selected):hover { background: color-mix(in srgb, var(--app) 5%, transparent); }
@media (pointer: coarse) { #inbox .inbox-row { min-height: 56px; } #inbox .inbox-row .btn.sm { height: 40px; padding: 0 14px; } #inbox .inbox-row .r { gap: 8px; } }

/* Record forms */
.chips-select { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.warn { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--sand); border-radius: var(--radius); font-size: var(--fs-sm); margin-bottom: 4px; }
.warn.err { background: color-mix(in srgb, var(--rose) 14%, transparent); }
.warn svg { flex-shrink: 0; margin-top: 2px; }
.sheet-foot .small { text-transform: none; letter-spacing: 0; max-width: 55%; }

/* Installed app without the overlay: Chrome paints its own title bar in the app colour, so the 4px colour line under it
   is redundant, and a dimmed 4px line under a sheet backdrop read as a dark seam. Browser tabs keep the line. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  .sidebar, .main { border-top: 0; }
}

/* Form sections and read-only derived fields */
.form-sec { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.form-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.form-sec .small { text-transform: none; letter-spacing: 0; opacity: 0.8; }
.ctl.ro { display: flex; align-items: center; background: rgba(0,0,0,0.03); color: rgba(0,0,0,0.6); border-style: dashed; }
.chip.tiny { font-size: 9px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.06em; }
.f .k { display: flex; align-items: center; }

/* Records: tabs row with save status, inline details */
.rec-tabs { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-bottom: 4px; }
.rec-status { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55; }
.inline-form .ctl { height: 34px; }
.inline-form .ctl.area { height: auto; min-height: 64px; }
.inline-form .ctl:focus { outline: 2px solid var(--app-deep); outline-offset: -1px; background: var(--card); }
.card > .form-grid { margin-top: 4px; }
.content > .grid-2-1 { flex: 1 1 0; min-height: 0; }

/* ═══════════════ Real tabs: a strip on a line, the active tab opens into the panel below ═══════════════ */
:root { --panel: var(--card); }
.tabs-row { display: flex; align-items: flex-end; gap: 12px; flex-shrink: 0; border-bottom: 1px solid var(--border); margin-top: 2px; }
.tabs-row > .small, .tabs-row > span { margin-left: auto; padding-bottom: 8px; }
.tabs { display: flex; gap: 2px; padding: 0; background: transparent; border-radius: 0; margin-bottom: -1px; }
.tab { position: relative; height: 38px; padding: 0 18px; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; background: transparent; box-shadow: none; opacity: 0.6; font-weight: 500; color: var(--ink); }
.tab:hover { opacity: 0.9; background: color-mix(in srgb, var(--app, var(--indigo)) 6%, transparent); }
.tab.active { opacity: 1; font-weight: 600; background: var(--panel); border-color: var(--border); box-shadow: 0 1px 0 var(--panel); }
.tab.active::after { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; background: var(--app-deep, var(--indigo)); }
.tab-panel { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 3px 3px; background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 0; min-height: 0; }
.tab-panel > .card:only-child { border: 0; padding: 0; background: transparent; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.tab-panel > .card:only-child > .form-grid, .tab-panel > .card:only-child > .settings-form, .tab-panel > .card:only-child > .table-wrap, .tab-panel > .card:only-child > .fields { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tab-panel > .card:only-child > .form-grid { padding-right: 4px; }
.tab-panel > .grid-2-1, .tab-panel > .grid-2 { flex: 1 1 0; min-height: 0; }
.tab-panel .card { background: var(--card); }
.sheet-body .tab-panel { flex: none; }
.sheet-body .tab-panel > .card:only-child, .sheet-body .tab-panel > .card:only-child > .form-grid { overflow: visible; }
.sheet.no-anim { animation: none; }
.rec-status { margin-left: auto; }
.rec-status.ok { color: var(--green); opacity: 1; }
@media (max-width: 900px) { .tab-panel { padding: 10px; } .tab { padding: 0 12px; } .tab-panel > .card:only-child, .tab-panel > .card:only-child > .form-grid { overflow: visible; } }
.tab { white-space: nowrap; }
.tabs { flex-shrink: 0; }
.tabs-row > .small { flex: 1 1 auto; text-align: right; }

/* Tabs, round 2: white panel that the active tab opens into; content inside scrolls where it must */
.tab-panel { padding: 12px; }
.tab-panel .card { border-color: rgba(0,0,0,0.1); }
/* Side panel: Overview in one column with the summary cards first, natural height */
.sheet-body .tab-panel > .grid-2-1, .sheet-body .tab-panel > .grid-2 { display: flex; flex-direction: column; gap: 12px; flex: none; min-height: auto; }
.sheet-body .tab-panel > .grid-2-1 > .stack:first-child { order: 2; }
.sheet-body .tab-panel > .grid-2-1 > .stack { overflow: visible; }
/* Fixed frame: any card whose body is a form, a thread or a settings list scrolls inside itself */
.card > .form-grid, .card > .settings-form, .card > .thread { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tab-panel > .card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.tab-panel > .card + .card { flex: 0 1 auto; max-height: 32%; }
.tab-panel > .card + .card > .timeline { flex: 1 1 auto; min-height: 0; overflow: auto; }
.sheet-body .tab-panel > .card, .sheet-body .tab-panel > .card + .card { flex: none; max-height: none; overflow: visible; }
.sheet-body .card > .form-grid, .sheet-body .card > .settings-form, .sheet-body .card > .thread, .sheet-body .tab-panel > .card + .card > .timeline { overflow: visible; }
@media (max-width: 900px) { .card > .form-grid, .card > .settings-form, .card > .thread, .tab-panel > .card + .card > .timeline { overflow: visible; } .tab-panel > .card, .tab-panel > .card + .card { flex: none; max-height: none; } }
.sheet-body .tab-panel > .grid-2-1 > .stack, .sheet-body .tab-panel > .grid-2 > * { flex: none; min-height: auto; }
.sheet-body .tab-panel > .grid-2-1 > .stack { height: auto; }

/* ═══════════════ Live side panel: no backdrop, the page behind stays usable ═══════════════ */
.sheet-backdrop { display: none; }
.sheet { box-shadow: -18px 0 48px rgba(0,0,0,0.14); border-left: 1px solid var(--border); }
/* Wide screens: the panel sits beside the content, which reflows. Narrower: it overlays without dimming. Mobile: full width. */
:root { --sheet-w: 600px; }
@media (min-width: 1280px) and (max-width: 1439px) { :root { --sheet-w: 520px; } .sheet { width: var(--sheet-w); } }
@media (min-width: 1440px) { .sheet { width: var(--sheet-w); } }
.main { transition: padding-right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (min-width: 1280px) { body.sheet-open .main { padding-right: calc(var(--sheet-w) + 24px); } body.sheet-open .sheet { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .main { transition: none; } }
/* What the panel shows is marked behind it */
table.table tr.selected td { background: color-mix(in srgb, var(--app, var(--indigo)) 10%, transparent); }
table.table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--app-deep, var(--indigo)); }
.kcard.selected { border-color: var(--app-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--app) 35%, transparent); }

/* Selected row: the marker gets clearance from the text */
table.table td:first-child, table.table th:first-child { padding-left: 10px; }
/* Board panning with the mouse */
.board, .col, .col-body { cursor: grab; }
.board.panning, .board.panning * { cursor: grabbing !important; user-select: none; }