/* Confidere — desktop web app. Light rendition of the Recall design system
   (portal precedent): calm, premium, generous whitespace, one rationed mint
   accent. Serif = Newsreader for titles + reading; Inter UI; JetBrains Mono
   for precise facts (kickers, addresses, timestamps). */

:root {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --raised: #F0F2F5;
  --hairline: #E6E8EC;
  --ink-strong: #0B0F14;
  --ink: #1C2530;
  --ink-soft: #5A6473;
  --ink-faint: #8A93A0;
  --accent: #16E0C8;
  --accent-pressed: #0FB8A6;
  --accent-deep: #0A8C7E;
  --accent-soft: rgba(22, 224, 200, 0.12);
  --citation: #2F6FD0;
  --citation-border: #3B82F6;
  --success: #1B8A5A;
  --success-soft: #E4F4EC;
  --danger: #B3261E;
  --danger-soft: #F8E7E6;
  --warn: #B26A00;
  --warn-soft: #FBF0DC;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-1: 0 1px 2px rgba(11, 15, 20, 0.04), 0 1px 3px rgba(11, 15, 20, 0.06);
  --shadow-2: 0 4px 12px rgba(11, 15, 20, 0.06), 0 2px 6px rgba(11, 15, 20, 0.04);
  --shadow-3: 0 18px 48px rgba(11, 15, 20, 0.16), 0 6px 16px rgba(11, 15, 20, 0.10);
}

* { box-sizing: border-box; }
/* Default icon box: any svg() span without a container-specific size renders at
   16px instead of exploding to 100% of the parent. */
.icon { width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; }
.icon svg { display: block; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(22, 224, 200, 0.28); }
a { color: var(--accent-deep); text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); }

/* ------------------------------------------------------------------ shell */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
/* The lockup is a link on every surface: back to the overview when signed in,
   to the public site when signed out. */
.brand-link { color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.brand-link:hover .brand-name { color: var(--accent-deep); }
.brand-link:focus-visible { outline: 2px solid var(--accent-pressed); outline-offset: 2px; }
.login-brand { text-decoration: none; color: inherit; }
.login-brand:hover .login-name { color: var(--accent-deep); }
.brand-glyph {
  width: 30px; height: 30px; border-radius: 9px; background: var(--ink-strong);
  display: grid; place-items: center; flex: none;
}
.brand-glyph svg { width: 20px; height: 20px; }
.brand-name { font: 600 15px/1 var(--sans); letter-spacing: -0.03em; color: var(--ink-strong); }
.brand-ws { font: 500 10.5px/1.3 var(--mono); color: var(--ink-faint); letter-spacing: 0.04em; margin-top: 3px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--r-sm); color: var(--ink); font-weight: 500; cursor: pointer;
}
.nav a .icon { width: 17px; height: 17px; color: var(--ink-soft); }
.nav a:hover { background: var(--raised); }
.nav a.active { background: var(--accent-soft); color: var(--ink-strong); }
.nav a.active .icon { color: var(--accent-deep); }
.side-record {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px 0 4px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--ink-strong); border: 0;
  font-weight: 600; transition: background 0.12s ease;
}
.side-record:hover { background: var(--accent-pressed); }
.side-record .icon { width: 16px; height: 16px; }
.side-doc {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px;
  border-radius: var(--r-sm); color: var(--ink-soft); font-size: 13px; font-weight: 500;
}
.side-doc:hover { background: var(--raised); color: var(--ink-strong); }
.side-doc .icon { width: 16px; height: 16px; }
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline); }
.account-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; }
.account-row:hover { background: var(--raised); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--raised); border: 1px solid var(--hairline);
  display: grid; place-items: center; overflow: hidden;
  font: 500 14px/1 var(--serif); color: var(--ink-soft);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-name { font-weight: 500; color: var(--ink-strong); font-size: 13px; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-email { font: 400 11px/1.3 var(--mono); color: var(--ink-faint); max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main { min-width: 0; padding: 32px 36px 72px; }
.page { max-width: 1160px; margin: 0 auto; }
.page-narrow { max-width: 760px; margin: 0 auto; }

/* mobile chrome */
.mobile-topbar { display: none; }
.tabbar { display: none; }

/* ------------------------------------------------------------------ type */
.kicker {
  font: 500 11px/1.4 var(--mono); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-faint);
}
.kicker.accent { color: var(--accent-deep); }
h1.title { font: 500 30px/1.15 var(--serif); letter-spacing: -0.01em; color: var(--ink-strong); margin: 0; }
h2.section { font: 500 20px/1.25 var(--serif); color: var(--ink-strong); margin: 0; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.reading { font: 400 16px/1.7 var(--serif); color: var(--ink); }

/* ------------------------------------------------------------------ cards */
.panel {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-md); box-shadow: var(--shadow-1);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.panel-body { padding: 20px; }
.panel-body.flush { padding: 0; }
.card-click { cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease; }
.card-click:hover { box-shadow: var(--shadow-2); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 600; font-size: 13.5px; transition: background 0.12s ease;
  color: var(--ink);
}
.btn .icon { width: 15px; height: 15px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-primary { background: var(--accent); color: var(--ink-strong); }
.btn-primary:hover:not(:disabled) { background: var(--accent-pressed); }
.btn-ghost { background: var(--surface); border-color: var(--hairline); }
.btn-ghost:hover:not(:disabled) { background: var(--raised); }
.btn-soft { background: #DDF7F2; color: #0A7A6E; }
.btn-soft:hover:not(:disabled) { background: #C9F2EA; }
.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn-text { background: transparent; color: var(--ink-soft); border: 0; padding: 6px 8px; }
.btn-text:hover:not(:disabled) { color: var(--ink-strong); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------ forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 500; font-size: 12.5px; color: var(--ink-soft); }
.input, select.input, textarea.input {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: 14px; width: 100%; outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input:focus { border-color: var(--accent-pressed); box-shadow: 0 0 0 3px rgba(22, 224, 200, 0.18); }
textarea.input { resize: vertical; min-height: 60px; line-height: 1.5; }
.hint { font-size: 11.5px; color: var(--ink-faint); }

.segmented { display: inline-flex; background: var(--raised); border-radius: 999px; padding: 3px; gap: 2px; }
.segmented button {
  border: 0; background: transparent; padding: 6px 14px; border-radius: 999px;
  font-weight: 500; font-size: 12.5px; color: var(--ink-soft);
}
.segmented button.on { background: var(--surface); color: var(--ink-strong); box-shadow: var(--shadow-1); }

/* ------------------------------------------------------------------ pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; font-weight: 600; font-size: 12px;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.plain::before { display: none; }
.pill-neutral { background: var(--raised); color: var(--ink-soft); }
.pill-success { background: var(--success-soft); color: var(--success); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.badge { font: 500 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 6px; background: var(--raised); color: var(--ink-soft); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: 999px; background: var(--raised); color: var(--ink); font-size: 12.5px; font-weight: 500;
}
.cite-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin: 0 2px;
  border-radius: 999px; background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--citation-border); color: var(--citation);
  font: 500 10.5px/1 var(--mono); vertical-align: 2px; cursor: pointer;
}

/* ------------------------------------------------------------------ rows */
.row-list { display: flex; flex-direction: column; }
.row-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--hairline);
}
.row-item:last-child { border-bottom: 0; }
.row-item.clickable { cursor: pointer; }
.row-item.clickable:hover { background: var(--raised); }
.row-primary { font-weight: 500; color: var(--ink-strong); }
.row-meta { font-size: 12px; color: var(--ink-faint); }

/* ------------------------------------------------------------------ misc */
.loading { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); padding: 28px 0; justify-content: center; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--hairline); border-top-color: var(--accent-pressed);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.note { border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }
.note-error { background: var(--danger-soft); color: var(--danger); }
.note-info { background: var(--accent-soft); color: var(--accent-deep); }
.empty { text-align: center; padding: 42px 20px; color: var(--ink-faint); }
.empty .big { font: 500 18px/1.4 var(--serif); color: var(--ink-soft); margin-bottom: 6px; }
.hairline-h { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px);
  background: var(--ink-strong); color: #F4F7FA; padding: 10px 20px; border-radius: 999px;
  font-weight: 500; font-size: 13px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; z-index: 90; box-shadow: var(--shadow-3);
  max-width: 82vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.scrim {
  position: fixed; inset: 0; background: rgba(11, 15, 20, 0.34);
  backdrop-filter: blur(2px); z-index: 80; display: grid; place-items: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  width: 100%; max-width: 460px; max-height: 86vh; display: flex; flex-direction: column;
}
.modal.wide { max-width: 620px; }
.modal-head { padding: 22px 24px 6px; }
.modal-head h2 { font: 500 22px/1.2 var(--serif); color: var(--ink-strong); margin: 0 0 4px; }
.modal-head p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.modal-body { padding: 14px 24px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 24px 20px; }

/* ------------------------------------------------------------------ login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 36px 34px 30px;
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 8px; }
.login-brand .brand-glyph { width: 46px; height: 46px; border-radius: 13px; }
.login-brand .brand-glyph svg { width: 30px; height: 30px; }
.login-name { font: 600 22px/1 var(--sans); letter-spacing: -0.03em; color: var(--ink-strong); }
.login-promise { font: 400 16px/1.4 var(--serif); color: var(--ink-soft); margin: 2px 0 20px; text-align: center; }
.login-foot { margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-faint); line-height: 1.6; }

/* ------------------------------------------------------------------ home */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.continue-card { position: relative; overflow: hidden; }
.continue-quote { font: 400 17px/1.55 var(--serif); color: var(--ink); font-style: italic; }
.stat-num { font: 500 40px/1 var(--serif); color: var(--ink-strong); }

/* ------------------------------------------------------------------ clients */
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.client-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.client-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.client-logo { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1px solid var(--hairline); }
.client-name { font: 500 19px/1.25 var(--serif); color: var(--ink-strong); }

/* ------------------------------------------------------------------ client detail */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.rail { display: flex; flex-direction: column; gap: 16px; }
.accent-bar-card { border-left: 3px solid var(--accent); }
.insight-card { padding: 16px 20px; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.insight-card:hover { background: var(--raised); }
.insight-card:last-child { border-bottom: 0; }
.insight-text { font: 400 15px/1.6 var(--serif); color: var(--ink); margin: 6px 0; }
.conf-track { height: 3px; border-radius: 2px; background: var(--raised); overflow: hidden; margin-top: 10px; }
.conf-fill { height: 100%; background: var(--accent-pressed); border-radius: 2px; }
.addr {
  font: 500 12.5px/1.4 var(--mono); background: var(--bg); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 9px 12px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; user-select: all;
}

/* ------------------------------------------------------------------ capture */
.rec-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 48px 0 32px; }
.rec-btn {
  width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--accent);
  color: var(--ink-strong); display: grid; place-items: center; box-shadow: var(--shadow-2);
  transition: background 0.12s ease, transform 0.12s ease;
}
.rec-btn .icon { width: 34px; height: 34px; }
.rec-btn:hover { background: var(--accent-pressed); }
.rec-btn.recording { background: var(--danger); color: #fff; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .rec-btn.recording { animation: none; } }
.rec-timer { font: 500 18px/1 var(--mono); color: var(--ink-soft); min-height: 22px; }
.draft-task-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 150px 150px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.draft-task-row.excluded { opacity: 0.5; }

/* ------------------------------------------------------------------ brief */
.brief-section { margin-bottom: 26px; animation: rise 0.24s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .brief-section { animation: none; } }
.brief-body { font: 400 16px/1.75 var(--serif); color: var(--ink); }
.brief-body p { margin: 0 0 10px; }

/* ------------------------------------------------------------------ tasks */
.task-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--hairline); }
.task-row:last-child { border-bottom: 0; }
.task-check {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-faint);
  background: transparent; flex: none; margin-top: 1px; display: grid; place-items: center; color: transparent;
}
.task-check .icon { width: 11px; height: 11px; }
.task-check.done { background: var(--accent-pressed); border-color: var(--accent-pressed); color: var(--ink-strong); }
.task-title { font-weight: 500; color: var(--ink-strong); cursor: pointer; }
.task-title.done { text-decoration: line-through; color: var(--ink-faint); font-weight: 400; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.due-overdue { color: var(--danger); font-weight: 600; }
.due-today { color: var(--accent-deep); font-weight: 600; }


/* ------------------------------------------------- photographic screens (story + auth) */
/* Full-bleed photograph + scrim. Always dark regardless of the app's light surfaces:
   copy here is explicitly white over a gradient we control, which is the only way to
   guarantee contrast over arbitrary image content. */
.photo-screen {
  position: fixed; inset: 0; overflow: hidden; background: #06090C;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer; user-select: none;
}
.photo-bg { position: absolute; inset: 0; background-position: center; background-size: cover; }
.photo-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(6,9,12,0.45) 0%, rgba(6,9,12,0.04) 20%, rgba(6,9,12,0.08) 42%,
    rgba(6,9,12,0.58) 68%, rgba(6,9,12,0.86) 100%);
}
/* Screens carrying form controls need a near-solid base or fields and buttons
   disappear into busy image detail. */
.photo-screen.heavy .photo-scrim {
  background: linear-gradient(180deg,
    rgba(6,9,12,0.45) 0%, rgba(6,9,12,0.20) 22%, rgba(6,9,12,0.55) 46%,
    rgba(6,9,12,0.80) 62%, rgba(6,9,12,0.94) 100%);
}
/* Safe-area insets. In the Android app the photo runs edge-to-edge under the status bar,
   so the progress bars and wordmark have to clear it.

   Two signals, because neither alone covers every case: env() is what browsers and iOS
   provide, and --safe-area-inset-* is what the Android shell injects. Taking the larger
   is correct in all three worlds — on the web the variable is unset, and on the older
   Android path (where the shell insets the WebView itself rather than drawing behind the
   bars) both report 0, so nothing is padded twice. */
:root {
  --inset-top: max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px));
  --inset-bottom: max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px));
}
.story-chrome { position: absolute; top: 0; left: 0; right: 0; padding: calc(18px + var(--inset-top)) 22px 0; z-index: 2; }
.story-bars { display: flex; gap: 4px; margin-bottom: 14px; }
.story-bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.34); transition: background 0.25s ease; }
.story-bars i.on { background: #fff; }
.story-top { display: flex; align-items: center; gap: 7px; }
.story-mark { width: 16px; height: 16px; display: block; }
.story-mark svg { width: 16px; height: 16px; display: block; }
.story-word { font: 600 13px/1 var(--sans); letter-spacing: -0.01em; color: #fff; }
.story-skip {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font: 500 13px/1 var(--sans); color: rgba(255,255,255,0.75); padding: 8px 0 8px 16px;
}
.story-copy {
  position: relative; z-index: 2; width: 100%; max-width: 560px;
  margin: 0 auto; padding: 0 28px calc(44px + var(--inset-bottom)); cursor: default;
}
.story-kicker {
  font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: 12px;
}
.story-headline {
  font: 400 30px/1.1 var(--serif); letter-spacing: -0.02em; color: #fff; margin: 0 0 10px;
  text-wrap: balance;
}
.story-body { font: 400 15px/1.55 var(--sans); color: rgba(255,255,255,0.82); margin: 0; }
.story-accent { font-style: normal; color: var(--accent); }
.story-next-row { display: flex; justify-content: flex-end; margin-top: 18px; }
.story-next {
  width: 52px; height: 52px; border-radius: 999px; border: 0; cursor: pointer;
  background: #F4EFE7; color: #06090C; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.32);
}
.story-next svg { width: 22px; height: 22px; }
.story-cta { margin-top: 22px; }

/* Form controls on a photograph */
.photo-form { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.photo-label { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.6); }
.photo-input {
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; border-radius: var(--r-md);
}
.photo-input::placeholder { color: rgba(255,255,255,0.42); }
.photo-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,224,200,0.16); outline: none; }
.photo-quiet {
  background: none; border: 0; cursor: pointer; padding: 8px 0;
  font: 500 13px/1 var(--sans); color: rgba(255,255,255,0.72);
}
.photo-screen .note-error { background: rgba(179,38,30,0.16); border-color: rgba(229,72,77,0.45); color: #FFC9C6; }

/* Sign-in over a photograph */
.login-wrap.photo {
  position: fixed; inset: 0; min-height: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow-y: auto;
}
.login-wrap.photo .login-card {
  position: relative; z-index: 2; background: none; border: 0; box-shadow: none;
  max-width: 560px; margin: 0 auto; padding: 0 28px 44px;
}
.login-wrap.photo .login-brand { align-items: flex-start; flex-direction: row; gap: 9px; margin-bottom: 12px; }
.login-wrap.photo .login-brand .brand-glyph { width: 26px; height: 26px; border-radius: 8px; }
.login-wrap.photo .login-brand .brand-glyph svg { width: 18px; height: 18px; }
.login-wrap.photo .login-name { color: #fff; font-size: 20px; }
.login-wrap.photo .login-promise {
  font: 400 30px/1.1 var(--serif); color: #fff; text-align: left; letter-spacing: -0.02em; margin: 0 0 20px;
}
.login-wrap.photo label { color: rgba(255,255,255,0.6); font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.login-wrap.photo .input {
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18); color: #fff;
}
.login-wrap.photo .input::placeholder { color: rgba(255,255,255,0.42); }
.login-wrap.photo .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,224,200,0.16); outline: none; }
.login-wrap.photo .login-foot { color: rgba(255,255,255,0.58); }
.login-wrap.photo .login-foot a { color: rgba(255,255,255,0.85); }
.login-eu { text-align: center; margin-top: 14px; font: 400 10px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

@media (max-width: 520px) {
  .story-headline, .login-wrap.photo .login-promise { font-size: 26px; }
  .story-copy, .login-wrap.photo .login-card { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-bars i { transition: none; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .home-grid, .detail-grid { grid-template-columns: 1fr; }
  .rail { order: -1; }
  .main { padding: 26px 22px 72px; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 40; padding: 0 16px;
    /* The bar itself stays 54px; the inset is extra height above it, so in the Android
       app the translucent bar sits behind the status bar rather than under it. */
    height: calc(54px + var(--inset-top)); padding-top: var(--inset-top);
    background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
  }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
    border-top: 1px solid var(--hairline); padding: 6px 4px calc(6px + var(--inset-bottom));
  }
  /* nowrap: the bar carries up to 6 items (Settings joined the primary nav), so
     each label gets ~58px at a 360px viewport — enough for "Overview"/"Settings"
     on one line, but only if wrapping is off. */
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; color: var(--ink-faint); font-size: 10.5px; font-weight: 500; white-space: nowrap; }
  .tabbar a .icon { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--accent-pressed); }
  .main { padding: 20px 16px 96px; }
  .draft-task-row { grid-template-columns: auto minmax(0, 1fr); }
  .row-item { padding: 12px 16px; }
  .panel-head { padding: 12px 16px; }
  .panel-body { padding: 16px; }
}

/* ------------------------------------------------------------- stakeholder map */
.stakemap-panel { margin-bottom: 22px; }
.stakemap-body { display: flex; flex-direction: column; gap: 16px; }
.stakemap-summary { margin: 0; max-width: 72ch; }
.stakemap-empty { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.stakemap-empty p { margin: 0; max-width: 64ch; }
.stakemap-svg-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px; background: var(--surface); }
.stakemap-svg { display: block; min-width: 900px; width: 100%; height: auto; font-family: var(--sans); }
.stakemap-groupname { font: 500 10px var(--mono); letter-spacing: 0.14em; fill: var(--ink-faint); }
.stakemap-initials { font: 600 13px var(--sans); fill: var(--ink-strong); }
.stakemap-name { font: 600 12px var(--sans); fill: var(--ink); }
.stakemap-role { font: 400 10.5px var(--sans); fill: var(--ink-soft); }
.stakemap-linklabel { font: 500 9.5px var(--mono); fill: var(--ink-faint); }
.stakemap-competitor-initial { font: 700 10px var(--sans); fill: #fff; }
.stakemap-node { cursor: pointer; }
.stakemap-node:focus-visible circle { outline: none; stroke-width: 4; }
.stakemap-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.stakemap-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.stakemap-legend-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.stakemap-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stakemap-list { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface); }
.stakemap-list-title { font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.stakemap-list-accent .stakemap-list-title { color: var(--accent-deep); }
.stakemap-list-warn .stakemap-list-title { color: var(--warn); }
.stakemap-list ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.stakemap-list li { font-size: 13.5px; line-height: 1.45; }
.stakemap-table-wrap { overflow-x: auto; }
.stakemap-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stakemap-table th { text-align: left; font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 12px; border-bottom: 1px solid var(--hairline); }
.stakemap-table td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.stakemap-table tr:last-child td { border-bottom: 0; }
.stakemap-why { font-size: 12px; max-width: 34ch; margin-top: 2px; }
.stakemap-topics { display: flex; gap: 4px; flex-wrap: wrap; max-width: 220px; }
.stakemap-stance-select { padding: 5px 8px; font-size: 13px; border-width: 2px; border-radius: 8px; }
.stakemap-row-flash td { background: var(--accent-soft); transition: background 1.2s ease; }
.stakemap-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stakemap-mobile-hint { display: none; margin: 0; }
@media (max-width: 900px) {
  .stakemap-svg-wrap, .stakemap-legend { display: none; }
  .stakemap-mobile-hint { display: block; }
  .stakemap-insights { grid-template-columns: 1fr; }
}

/* stakeholder map — project filter, our-team strip, person links */
.stakemap-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.stakemap-chip {
  border: 1px solid var(--hairline); background: var(--surface); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
}
.stakemap-chip:hover { background: var(--raised); }
.stakemap-chip.on { background: var(--accent-soft); border-color: var(--accent-pressed); color: var(--ink-strong); }
.stakemap-ours { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stakemap-ours-chip {
  border: 1px solid var(--hairline); background: var(--raised); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; color: var(--ink);
}
.stakemap-ours-chip:hover { background: var(--accent-soft); }
.stakemap-personlink { font-weight: 600; cursor: pointer; }
.stakemap-personlink:hover { color: var(--accent-deep); text-decoration: underline; }

/* person page */
.person-side { display: flex; gap: 10px; flex-wrap: wrap; }
.person-side-opt {
  border: 1.5px solid var(--hairline); background: var(--surface); border-radius: var(--r-md);
  padding: 10px 16px; text-align: left; min-width: 180px;
}
.person-side-opt:hover:not(:disabled) { background: var(--raised); }
.person-side-opt.on { border-color: var(--accent-pressed); background: var(--accent-soft); }
.person-side-opt:disabled { cursor: default; opacity: 0.75; }
.person-project-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.person-project-row input { accent-color: var(--accent-pressed); }

/* join screen — supporting copy on the photographic card */
.login-join-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }