/* ABOUTME: calsync's single stylesheet: tokens, layout, and components. */
/* ABOUTME: Light and dark palettes meet WCAG 2.1 AA; motion respects prefers-reduced-motion. */
:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --text: #1c1f1e;
  --muted: #4f5653;
  --border: #c9c6bd;
  --accent: #1d5c4c;
  --accent-hover: #164a3d;
  --on-accent: #ffffff;
  --accent-soft: #e3efe9;
  --error: #9e1c1c;
  --error-soft: #fbeceb;
  --error-hover: #7f1414;
  --on-error: #ffffff;
  --warn-text: #5a4100;
  --warn-soft: #fff3d1;
  --focus: #1d5c4c;
  --radius: 0.625rem;
  --space: 1rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141716;
    --surface: #1d2120;
    --text: #ecebe6;
    --muted: #b4bab7;
    --border: #48504d;
    --accent: #84d3bc;
    --accent-hover: #a3e0ce;
    --on-accent: #0c1f19;
    --accent-soft: #1f3530;
    --error: #ff9d9d;
    --error-soft: #3a1d1d;
    --error-hover: #ffbdbd;
    --on-error: #2a0b0b;
    --warn-text: #ffd97a;
    --warn-soft: #3a3014;
    --focus: #84d3bc;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 3px solid var(--focus); }
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }
.skip-link {
  position: absolute; left: var(--space); top: -4rem; display: inline-flex; align-items: center; min-height: 44px;
  background: var(--surface); padding: 0.5rem 0.75rem; z-index: 10;
}
.skip-link:focus { top: var(--space); }
.site-header {
  padding: var(--space);
  max-width: 38rem; margin: 0 auto;
}
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.wordmark span { color: var(--accent); }
main { max-width: 38rem; margin: 0 auto; padding: 0 var(--space) 4rem; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); line-height: 1.2; margin: 0.25rem 0 0.75rem; letter-spacing: -0.015em; }
h2 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }
p { margin: 0 0 var(--space); overflow-wrap: anywhere; }
/* Account names can be 40 characters with no spaces (#22 rename). */
h1, h2, h3 { overflow-wrap: anywhere; }
.lede { font-size: 1.1875rem; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.625rem 1.25rem;
  font: inherit; font-weight: 600; text-decoration: none;
  border-radius: var(--radius); border: 2px solid var(--accent);
  background: var(--accent); color: var(--on-accent); cursor: pointer;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.secondary { background: transparent; color: var(--accent); }
.button.secondary:hover { background: var(--accent-soft); }
.button.block { width: 100%; }
/* Destructive confirm: error red with text that keeps 4.5:1 in both palettes. */
.button.danger { background: var(--error); border-color: var(--error); color: var(--on-error); }
.button.danger:hover { background: var(--error-hover); border-color: var(--error-hover); }
/* Google sign-in button, per Google's branding guidelines: neutral fill, 1px outline, G mark. */
.button.google { background: #ffffff; color: #1f1f1f; border: 1px solid #747775; font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 500; }
.button.google:hover { background: #f2f2f2; border-color: #747775; }
.g-mark { flex: none; }
.consent-note { margin-top: 0.75rem; }
.notice form { margin-top: 0.75rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: flex-end; margin-top: 1.5rem; }
.actions .back { margin-right: auto; margin-inline-start: -0.5rem; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 0.5rem; }

/* Wizard progress */
.progress { margin: 0.5rem 0 1.25rem; }
.progress-label { font-size: 0.9375rem; color: var(--muted); margin: 0 0 0.375rem; }
.progress ol { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.375rem; }
.progress li { font-size: 0.8125rem; color: var(--muted); border-top: 4px solid var(--border); padding-top: 0.25rem; overflow-wrap: anywhere; }
.progress li.done { border-color: var(--accent); }
.progress li[aria-current="step"] { border-color: var(--accent); color: var(--text); font-weight: 600; }

/* Forms */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
legend h1 { margin-bottom: 0.5rem; }
.hint { color: var(--muted); margin: 0 0 1rem; }
.choices { display: grid; gap: 0.625rem; }
.choice {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;
  padding: 0.875rem 1rem; min-height: 44px;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { width: 1.375rem; height: 1.375rem; margin: 0.125rem 0 0; accent-color: var(--accent); }
.choice-title { font-weight: 600; overflow-wrap: anywhere; }
.choice-detail { display: block; color: var(--muted); font-size: 0.9375rem; font-weight: 400; }
.swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: 0.375rem; vertical-align: 0.05em; border: 1px solid rgb(0 0 0 / 0.2); }
.field-error .choices .choice { border-color: var(--error); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }

/* Pair rows (step 3) */
.pair-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.pair { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem 1rem; }
.pair-legend { font-weight: 700; font-size: 1.0625rem; padding: 0 0.25rem; margin-inline-start: -0.25rem; overflow-wrap: anywhere; }
.pair-hint { color: var(--warn-text); background: var(--warn-soft); border-radius: 0.375rem; padding: 0.5rem 0.75rem; margin: 0.25rem 0 0.75rem; font-size: 0.9375rem; }
.pair-options { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
@media (min-width: 40rem) { .pair-options { grid-template-columns: 1fr 1fr; } }
.pair-option { padding: 0.625rem 0.875rem; }
.pair-glyph { display: inline-block; min-width: 1.5em; color: var(--accent); font-weight: 700; }
.pair.field-error { border-color: var(--error); }
.home-connections + .home-connect { margin-top: 1.5rem; }

/* Messages */
.notice { padding: 0.875rem 1rem; border-radius: var(--radius); margin: 0 0 1.25rem; border-left: 5px solid; }
.notice p:last-child { margin-bottom: 0; }
.notice strong { display: block; }
.notice.error { background: var(--error-soft); border-color: var(--error); }
.notice.error strong { color: var(--error); }
.notice.info { background: var(--accent-soft); border-color: var(--accent); }
.notice.warn { background: var(--warn-soft); border-color: var(--warn-text); color: var(--text); }
.error-text { color: var(--error); font-weight: 600; margin: 0 0 0.75rem; }
.account-line { margin: -0.5rem 0 1rem; }
.account-line .email, .action-line .email { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.action-line { font-weight: 600; margin: 0.75rem 0 0; }
.hint.action-line { color: var(--text); margin-bottom: 0.75rem; }
.account { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.25rem; }
.account .email { font-weight: 600; overflow-wrap: anywhere; }

/* Landing */
.hero { padding-top: 2rem; }
.hero h1 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem); }
.points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.75rem; }
.points li { padding-left: 1.75rem; position: relative; }
.points li::before { content: ""; position: absolute; left: 0.25rem; top: 0.55em; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--accent); }

/* Preview */
.trust { font-weight: 600; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem; }
.day { margin-top: 1.5rem; }
.day h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.block {
  display: grid; grid-template-columns: 9rem minmax(12rem, 1fr) minmax(0, max-content); align-items: baseline; gap: 0.25rem 0.75rem;
  padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.block .when { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9375rem; }
.block .what { overflow-wrap: anywhere; min-width: 0; }
.block .title { font-weight: 600; }
.block .private { display: block; color: var(--muted); font-size: 0.875rem; }
.block .arrow { color: var(--muted); }
.block .seen { font-size: 0.9375rem; overflow-wrap: anywhere; }
.block .side { color: var(--muted); }
.block .from { display: block; color: var(--muted); font-size: 0.875rem; }
.seen-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; justify-items: end; }
.block .seen-list { display: grid; }
@media (max-width: 34rem) {
  .block { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
  .block .arrow { display: none; }
  .seen-list { justify-items: start; margin-top: 0.25rem; }
  .block .seen::before { content: "→ " / ""; color: var(--muted); }
}
.tag { display: inline-block; font-size: 0.8125rem; font-weight: 600; padding: 0.0625rem 0.5rem; border-radius: 999px; background: var(--accent-soft); color: var(--text); border: 1px solid var(--accent); }
details.skipped { margin-top: 1.5rem; }
details.skipped summary { cursor: pointer; display: list-item; padding-block: 0.625rem; color: var(--accent); font-weight: 600; }
.preview-summary { margin: 1rem 0 0; }
.skipped-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.skipped-list li { padding: 0.625rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius); overflow-wrap: anywhere; }
.skipped-list .when, .skipped-list .from { display: block; color: var(--muted); font-size: 0.875rem; }

/* Home */
.status-hero { display: flex; gap: 0.75rem; align-items: center; margin: 1.5rem 0 1rem; }
.status-dot { flex: none; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--accent); }
.status-dot.paused { background: transparent; border: 3px solid var(--muted); }
.status-dot.stopped { background: transparent; border: 3px solid var(--warn-text); }
/* Not fully protected: a half-filled ring, between the full dot and the empty ring. */
.status-dot.partial { background: linear-gradient(90deg, var(--warn-text) 50%, transparent 50%); border: 3px solid var(--warn-text); }
@media (forced-colors: active) {
  .status-dot { forced-color-adjust: none; background: CanvasText; }
  .status-dot.paused, .status-dot.stopped { background: Canvas; border-color: CanvasText; }
  .status-dot.partial { background: linear-gradient(90deg, CanvasText 50%, Canvas 50%); border-color: CanvasText; }
}
.status-hero h1 { margin: 0; min-width: 0; }
.pairings { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; }
.pairing { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.pairing-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: center; }
.pairing h2 { margin: 0; font-size: 1.0625rem; min-width: 0; flex: 1 1 8rem; }
.pairing .status { margin: 0.5rem 0; }
.pairing dl { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.75rem; margin: 0; font-size: 0.9375rem; }
.pairing dt { color: var(--muted); }
.pairing dd { margin: 0; }
.pairing.paused { background: var(--bg); border-style: dashed; border-color: var(--muted); }
.pairing.stopped { border-left: 5px solid var(--warn-text); }
/* Partly stopped still blocks some sources: a double edge, where stopped is solid. Dashed means paused (#22). */
.pairing.partly { border-left: 6px double var(--warn-text); }
.pairing .email, .account-rows .email, .account-item .email { overflow-wrap: anywhere; }
.accounts-heading { margin-top: 2rem; }
.home-connect, .home-connections { margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.quiet-link { display: inline-flex; align-items: center; min-height: 44px; }
.account-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.account-rows li { display: flex; flex-wrap: wrap; gap: 0 0.75rem; align-items: baseline; }
.account-row-name { font-weight: 600; }

/* Work accounts list */
.account-list { list-style: none; padding: 0; margin: 0 0 0.5rem; display: grid; gap: 0.625rem; }
.account-item { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: center; padding: 0.875rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.account-item-text { min-width: 0; flex: 1 1 14rem; }
.account-item-text p { margin: 0; }
.item-note { margin: 0.25rem 0 0; font-weight: 600; color: var(--warn-text); }
.account-item-name { font-weight: 600; font-size: 1rem; margin: 0; overflow-wrap: anywhere; }

/* Text field */
.field { margin-top: 1.5rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field .hint { margin-bottom: 0.5rem; }
.field input[type="text"] { font: inherit; width: 100%; min-height: 44px; padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 2px solid var(--muted); background: var(--surface); color: var(--text); }
.field.field-error input { border-color: var(--error); }
.pairing-sub { margin: 0.125rem 0 0; }
.accounts { overflow-wrap: anywhere; }

/* Switch */
/* Light: no pill outline, a small track and a regular label; the 44px target comes from min-height. */
.switch {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.25rem;
  font: inherit; font-size: 0.9375rem; font-weight: 400; color: var(--text); background: transparent;
  border: 0; border-radius: 0.375rem; cursor: pointer;
}
.switch .track { width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--muted); position: relative; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--surface); transition: transform 150ms ease; }
.switch[aria-checked="true"] .track { background: var(--accent); }
.switch:disabled { cursor: not-allowed; color: var(--muted); }
.switch[aria-checked="true"] .track::after { transform: translateX(1rem); }
.switch[aria-disabled="true"] { cursor: not-allowed; color: var(--muted); }
.switch[aria-disabled="true"] .track { background: var(--border); }
/* Forced colours drop backgrounds, so the track gets an outline and the thumb a system colour. */
@media (forced-colors: active) {
  .switch .track { forced-color-adjust: none; background: Canvas; border: 2px solid ButtonText; }
  .switch .track::after { background: ButtonText; top: 0.0625rem; left: 0.0625rem; }
  .switch[aria-checked="true"] .track { background: Highlight; border-color: Highlight; }
  .switch[aria-checked="true"] .track::after { background: HighlightText; }
  .switch[aria-disabled="true"] .track { background: Canvas; border-color: GrayText; }
  .switch[aria-disabled="true"] .track::after { background: GrayText; }
}
.card-switch { margin: 0; }
.card-options { list-style: none; margin: 0.75rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--border); display: grid; gap: 0.5rem; }
.switch-small { text-align: left; }

/* Fake consent */
.dev-banner { background: var(--warn-soft); color: var(--warn-text); font-weight: 600; text-align: center; padding: 0.5rem var(--space); font-size: 0.9375rem; }
.consent { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-top: 1rem; }
.consent label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.consent input[type="email"] { font: inherit; min-height: 44px; width: 100%; padding: 0.5rem; border-radius: 0.375rem; border: 2px solid var(--muted); background: var(--bg); color: var(--text); margin-bottom: 0.75rem; }
.consent label.check { display: flex; gap: 0.5rem; align-items: center; min-height: 44px; font-weight: 400; }
.consent label.check input { width: 1.375rem; height: 1.375rem; accent-color: var(--accent); }
.consent select { font: inherit; min-height: 44px; width: 100%; padding: 0.5rem; border-radius: 0.375rem; border: 2px solid var(--muted); background: var(--bg); color: var(--text); }

/* Calendars page */
.site-header { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: center; }
.header-form { margin: 0; }
.calendar-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.calendar-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.calendar-item .swatch { margin-right: 0; }
.calendar-text { overflow-wrap: anywhere; }
.calendar-name { font-weight: 600; }
.calendar-primary { font-size: 0.9375rem; }

/* Reconnect banner */
.notice-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.notice-title { font-size: 1.0625rem; margin: 0 0 0.25rem; }

/* Start blocking */
.start-blocking { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.start-blocking p { max-width: 32rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-color-scheme: dark) {
  .button.google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
  .button.google:hover { background: #1f1f20; border-color: #8e918f; }
}