/* Loudly Cloud web view. Values mirror tauri/src/styles/tokens.css (the app's only token source);
   this page ships alone, so it carries the subset it uses. */
:root {
  color-scheme: light;
  --paper: #fffaf1;
  --surface: #fffdf9;
  --surface-sunken: #f5efe5;
  --surface-hover: #efe8dc;
  --ink: #252a2c;
  --ink-2: #5d636a;
  --line: #e9e2d6;
  --line-strong: #d8cfc1;
  --blue: #2457cc;
  --blue-hover: #1c47ab;
  --blue-text: #2457cc;
  --blue-soft: #e8eefb;
  --on-blue: #ffffff;
  --red: #b23a32;
  --red-soft: #f8e5e2;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-serif: ui-serif, "New York", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-xs: 11px; --t-sm: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 22px; --t-2xl: 30px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --r-1: 6px; --r-2: 10px; --r-pill: 999px;
  --focus: 0 0 0 3px rgba(36, 87, 204, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #1d1c1a; --surface: #262522; --surface-sunken: #161513; --surface-hover: #302e2b;
    --ink: #f3f0e9; --ink-2: #b8b3a9; --line: #34322e; --line-strong: #46433d;
    --blue: #3a6ae0; --blue-hover: #4a78ea; --blue-text: #93b2ff; --blue-soft: #232c40;
    --red: #f0948b; --red-soft: #3a2421;
    --focus: 0 0 0 3px rgba(147, 178, 255, 0.45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: var(--t-md)/1.5 var(--font); }
main { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s-4) var(--s-4) var(--s-6); flex: 1; }
h1 { margin: var(--s-4) 0 var(--s-2); font: 400 var(--t-2xl)/1.15 var(--font-serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
h2 { margin: var(--s-5) 0 var(--s-2); font-size: var(--t-lg); }
h3 { margin: var(--s-4) 0 var(--s-1); font-size: var(--t-md); }
p { margin: 0 0 var(--s-3); }
.muted { color: var(--ink-2); font-size: var(--t-sm); }
[hidden] { display: none !important; }

.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); max-width: 760px; width: 100%; margin: 0 auto; padding: var(--s-3) var(--s-4); }
.wordmark { color: var(--ink); text-decoration: none; font: 700 var(--t-xl)/1 var(--font); letter-spacing: -0.06em; }
.wordmark span { color: var(--blue); }
.who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; font-size: var(--t-sm); color: var(--ink-2); }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who button { white-space: nowrap; flex-shrink: 0; }
.foot { max-width: 760px; width: 100%; margin: 0 auto; padding: var(--s-4); text-align: center; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); }
.narrow { max-width: 440px; margin: var(--s-6) auto 0; display: grid; gap: var(--s-3); }
.narrow h1 { margin-top: 0; }
.stack { display: grid; gap: var(--s-2); }
.inline { display: flex; gap: var(--s-2); }
.inline input { flex: 1; min-width: 0; }
label { font-size: var(--t-sm); font-weight: 600; }
input { font: inherit; padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-1); background: var(--surface-sunken); color: var(--ink); min-height: 40px; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); }
button { font: inherit; font-weight: 600; font-size: var(--t-sm); min-height: 40px; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
button:hover { background: var(--surface-hover); }
button:disabled { opacity: 0.6; cursor: default; }
.integration img { flex: 0 0 16px; }
@media (prefers-color-scheme: dark) { .integration img { filter: invert(1); } }
.integration { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); }
.text-button { border: 0; background: none; color: var(--blue-text); padding: var(--s-1) 0; min-height: 0; justify-self: start; }
.text-button:hover { background: none; text-decoration: underline; }

.notice { margin: var(--s-3) 0 0; padding: var(--s-3); border-radius: var(--r-1); background: var(--blue-soft); font-size: var(--t-sm); }
.notice[data-kind="error"] { background: var(--red-soft); color: var(--red); }

.meetings { list-style: none; margin: var(--s-3) 0 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.meetings li + li { border-top: 1px solid var(--line); }
.meeting-link { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); color: var(--ink); text-decoration: none; }
.meeting-link:hover { background: var(--surface-hover); }
.meeting-title { font-weight: 600; overflow-wrap: anywhere; }
.meeting-meta { font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: anywhere; }

.back { display: inline-block; margin-top: var(--s-2); color: var(--blue-text); text-decoration: none; font-size: var(--t-sm); font-weight: 600; }
.segmented { display: inline-flex; gap: 2px; padding: 2px; margin: var(--s-2) 0 var(--s-3); border-radius: var(--r-pill); background: var(--surface-sunken); max-width: 100%; overflow-x: auto; }
.segmented button { border: 0; background: none; min-height: 32px; padding: var(--s-1) var(--s-4); }
.segmented button[aria-selected="true"] { background: var(--surface); box-shadow: 0 1px 2px rgba(37, 42, 44, 0.12); }
.prose { overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose ul { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-1); }
.prose li.done { color: var(--ink-2); text-decoration: line-through; }
.prose blockquote { margin: 0 0 var(--s-3); padding-left: var(--s-3); border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.prose .full-transcript { margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.prose .full-transcript a { color: var(--blue-text); font-weight: 600; text-decoration: none; }
.prose.transcript p { font: var(--t-sm)/1.55 var(--font-mono); }

@media (max-width: 480px) {
  .inline { flex-direction: column; }
  h1 { font-size: var(--t-xl); }
  .narrow { margin-top: var(--s-4); }
}