/* Ledger: flat paper surfaces, hairline rules, one ink-blue accent. Every
   text/background pair below measures at least 5:1 (WCAG AA). The old names
   (--primary, --glass-*, --text-main...) stay as aliases so older rules keep
   working; new rules use the short names. */
:root {
    --bg: #f5f4f0;
    --surface-solid: #ffffff;
    --surface-alt: #edece7;
    --border: #d9d7d0;
    --text: #17171a;
    --text-2: #5a5953;
    --accent: #1f3f99;
    --accent-hover: #17307a;
    --on-accent: #ffffff;
    --danger: #a32616;
    --warn: #8a5a00;
    --success: #2d6a2e;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --bg-gradient: var(--bg);
    --glass-bg: var(--surface-solid);
    --glass-border: var(--border);
    --surface: var(--surface-solid);
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);
    --text-main: var(--text);
    --text-muted: var(--text-2);
}
[data-theme="dark"] {
    --bg: #121212;
    --surface-solid: #1a1a19;
    --surface-alt: #222220;
    --border: #35352f;
    --text: #ecebe6;
    --text-2: #a6a297;
    --accent: #7f9df0;
    --accent-hover: #9ab2f5;
    --on-accent: #0d1b45;
    --danger: #f0968a;
    --warn: #e0b25a;
    --success: #8ccf8e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.app-container { width: 100%; max-width: 960px; }
#auth-section { max-width: 420px; margin: 4rem auto; }

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

main { display: flex; flex-direction: column; gap: 1.5rem; }

h1, h2, h3 { margin-bottom: 0.75rem; font-weight: 600; }
h1 { font-weight: 600; letter-spacing: -0.01em; }

.hidden { display: none !important; }

input, textarea, select {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea { resize: vertical; }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--accent);
}

#auth-section input { margin-bottom: 1rem; }

button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0.75rem 1.4rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}
button:hover { background: var(--primary-hover); }
button:active { transform: translateY(1px); }
button.full { width: 100%; }

button.btn-outline { background: transparent; border: 1px solid var(--glass-border); color: var(--text-main); }
button.btn-outline:hover { background: rgba(139, 92, 246, 0.12); }
.btn-small { padding: 0.45rem 0.85rem; font-size: 0.85rem; }

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem !important;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 0; }

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.field input, .field select { padding: 0.7rem 0.8rem; }

.task-form-section input, .task-form-section textarea { margin-bottom: 0.6rem; }
/* Desktop has room for the form above the list; the toggle is phone-only. */
.new-task-toggle { display: none; }

/* ----- view tabs ----- */
.list-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.view-tabs { display: inline-flex; background: var(--surface); border: 1px solid var(--glass-border); border-radius: 10px; padding: 3px; }
.tab { background: transparent; color: var(--text-muted); padding: 0.4rem 1.1rem; border-radius: 7px; font-size: 0.9rem; }
.tab:hover { background: transparent; color: var(--text-main); }
.tab.active { background: var(--primary); color: #fff; }

.filter-row { margin: 0.8rem 0; }

/* ----- task list ----- */
.task-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.task-item {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    transition: border-color 0.2s ease, transform 0.1s ease;
}
.task-item:hover { border-color: var(--primary); }
.task-info { flex: 1; min-width: 0; }
.task-info h4 { margin: 0; font-size: 1.05rem; }
.task-item.is-done h4 { text-decoration: line-through; opacity: 0.55; }

.task-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.task-title-row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--primary); cursor: pointer; }

.desc { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.35rem; white-space: pre-wrap; }
.meta-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.55rem; }
.meta-chip { font-size: 0.75rem; padding: 2px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--glass-border); color: var(--text-muted); }
.chip-due { color: #c4b5fd; }
.chip-overdue { color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); }
.label-chip { font-size: 0.72rem; padding: 2px 8px; border-radius: 6px; background: rgba(139, 92, 246, 0.16); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.35); }

.task-actions { display: flex; gap: 0.35rem; flex: 0 0 auto; }
.btn-icon { background: var(--surface); border: 1px solid var(--glass-border); color: var(--text-main); padding: 0.45rem 0.6rem; font-size: 0.95rem; line-height: 1; }
.btn-icon:hover { background: rgba(139, 92, 246, 0.18); }
.btn-icon.danger:hover { background: var(--danger); color: #fff; }

.pill { padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.pri-low    { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
.pri-medium { background: rgba(139, 92, 246, 0.25); color: #c4b5fd; }
.pri-high   { background: rgba(249, 115, 22, 0.25); color: #fdba74; }
.pri-urgent { background: rgba(239, 68, 68, 0.3); color: #fca5a5; }

#task-count { margin-top: 0.9rem; }

/* ----- calendar ----- */
.cal-header { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 1rem; }
.cal-header h3 { margin: 0; flex: 1; text-align: center; font-size: 1.15rem; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-weekdays div { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    min-height: 96px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.cal-cell:hover { border-color: var(--primary); }
.cal-cell-muted { opacity: 0.4; }
.cal-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cal-daynum { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.cal-today .cal-daynum { color: var(--primary); }
.cal-chip {
    font-size: 0.68rem;
    padding: 2px 5px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-chip.chip-done { text-decoration: line-through; opacity: 0.55; }
.cal-more { font-size: 0.66rem; color: var(--text-muted); padding-left: 3px; }

/* ----- modals ----- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1rem;
}
.modal-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    max-width: 460px;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.day-modal { max-width: 560px; max-height: 85vh; overflow-y: auto; }

.quick-add { display: flex; gap: 0.5rem; align-items: center; }
.quick-add input[type="time"] { width: auto; flex: 0 0 auto; }
.quick-add input[type="text"] { flex: 1; }

.day-agenda { display: flex; flex-direction: column; gap: 0.6rem; }
.agenda-row { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--glass-border); border-radius: 10px; padding: 0.7rem 0.85rem; }
.agenda-row.is-done strong { text-decoration: line-through; opacity: 0.55; }
.agenda-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primary); flex: 0 0 auto; min-width: 56px; padding-top: 0.1rem; }
.agenda-body { flex: 1; min-width: 0; }

/* ----- misc ----- */
.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }
.activity-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.activity-list li { font-size: 0.9rem; }

.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    background: var(--text);
    color: var(--bg);
    border: 1px solid var(--glass-border);
    z-index: 2000;
    font-size: 0.9rem;
}
.toast-success { border-color: var(--success); }
.toast-error   { border-color: var(--danger); }

@media (max-width: 640px) {
    body { padding: 1rem; }
    .cal-cell { min-height: 70px; }
    /* A month grid on a phone gives each day about 45px. A title cannot fit —
       it truncated to "1…", which told the user nothing at all. Show a dot per
       task instead: the day still carries how much is on, and tapping it opens
       the agenda, which is where the titles belong. */
    .cal-chip {
        font-size: 0; padding: 0; margin: 1px;
        width: 7px; height: 7px; border-radius: 50%;
        display: inline-block; vertical-align: middle;
    }
    .cal-chip.chip-done { text-decoration: none; }
    .cal-more { font-size: 0.55rem; }
    .task-actions { justify-content: flex-end; }
    button, input, select { min-height: 44px; }
    .list-header { flex-wrap: wrap; }
}

/* ======================================================================
   Play Store / mobile release additions
   ====================================================================== */

/* The SPA now uses the `hidden` attribute rather than a .hidden class, so the
   rule has to beat component rules that set an explicit display (.modal). */
[hidden] { display: none !important; }

/* Paint under the Android gesture bar and notch, then pad content back out. */
body {
    padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
             max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overscroll-behavior-y: contain;   /* no rubber-band bounce inside the TWA */
    -webkit-tap-highlight-color: transparent;
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.offline-banner {
    position: fixed; inset: 0 0 auto 0; z-index: 3000;
    background: var(--danger); color: #fff;
    padding: calc(0.6rem + env(safe-area-inset-top)) 1rem 0.6rem;
    text-align: center; font-size: 0.85rem; font-weight: 600;
}

/* Reading a saved copy is not an error, it is a degraded but working state,
   so it gets amber rather than the red used for "offline, nothing works". */
.offline-banner-cached { background: var(--warn); }

/* The banner is fixed, so without this it sits ON TOP of the page and hides
   whatever is underneath — on a phone the message wraps to two lines and
   covers most of the first card. Pushing the content down instead costs
   nothing and keeps the page readable while offline, which is exactly when
   the user needs to read it. */
body.has-banner { padding-top: 4.5rem; }
@media (max-width: 640px) { body.has-banner { padding-top: 6rem; } }

/* ----- auth ----- */
.brand { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.25rem; }
.brand h1 { margin-bottom: 0.15rem; }
.brand-mark { border-radius: 12px; flex: 0 0 auto; }
.auth-tabs { width: 100%; margin-bottom: 1.25rem; }
.auth-tabs .tab { flex: 1; }
.auth-form { display: flex; flex-direction: column; gap: 0.9rem; }
#auth-section .auth-form input { margin-bottom: 0; }
.field-hint { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.checkbox-row { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.85rem; color: var(--text-muted); }
.checkbox-row input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--primary); }
.checkbox-row a { color: var(--primary); }
.private-row { margin: 0.25rem 0 0.75rem; }
.chip-private { border-color: var(--text-muted); font-weight: 600; }
.chip-private::before { content: "\1F512\FE0E  "; }
.linklike {
    background: none; border: none; color: var(--primary); padding: 0;
    font-size: 0.85rem; text-decoration: underline; align-self: center; min-height: 0;
}
.linklike:hover { background: none; color: var(--primary-hover); }
.legal-footer { text-align: center; margin-top: 1.5rem; }
.legal-footer a { color: var(--text-muted); }

/* ----- header identity ----- */
.app-header { align-items: flex-start; }
.identity { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.avatar {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.9rem;
}
.avatar.small { width: 32px; height: 32px; border-radius: 9px; font-size: 0.72rem; }
.app-header h2 { margin-bottom: 0.1rem; font-size: 1.15rem; }
.section-tabs { margin-bottom: 1.5rem; width: 100%; }
.section-tabs .tab { flex: 1; }

/* ----- teams ----- */
.team-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.team-card {
    background: var(--surface); border: 1px solid var(--glass-border); color: var(--text-main);
    border-radius: 12px; padding: 1rem; text-align: left;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
}
.team-card:hover { background: rgba(139, 92, 246, 0.12); border-color: var(--primary); }
.team-card-name { font-weight: 600; font-size: 1rem; }
.team-members { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1.25rem; }
.member-row {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: 10px; padding: 0.6rem 0.85rem;
}
.member-id { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.invite-box { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; }
.invite-box input { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; }

/* Billing: the plan in the Company section, and the sponsored card. The card
   sits in the flow under the list, never over it, so it covers no task. */
.billing-box { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--glass-border); }
.billing-tiers { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0; }
.billing-tiers button { flex: 1 1 10rem; }
.sponsor-card {
  display: flex; align-items: baseline; gap: 0.5rem; justify-content: flex-end;
  margin: 0.75rem 0 0 auto; max-width: 22rem; padding: 0.45rem 0.7rem;
  border: 1px solid var(--glass-border); border-radius: 8px;
  font-size: 0.78rem; color: var(--text-muted);
}
.sponsor-card a { color: var(--text-muted); text-decoration: underline; overflow-wrap: anywhere; }
.sponsor-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.assign-box { gap: 0.4rem; align-items: center; }
.assign-box select { min-width: 120px; padding: 0.45rem 0.6rem; font-size: 0.85rem; }
.danger-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--glass-border); }

/* A button that reads as a link: used to swap the delegate dialog between
   picking a connection and typing an address, where a full-weight button
   would compete with the actual Send action. */
.btn-link {
    background: none; border: none; padding: 0.2rem 0; width: auto;
    color: var(--primary); font-size: 0.82rem; font-weight: 600;
    text-decoration: underline; cursor: pointer;
}
.btn-link:hover { opacity: 0.8; }

/* A standing risk rather than an error: amber, not red, and it stays put
   instead of appearing and vanishing like a toast. */
.warn-note {
    background: rgba(180, 83, 9, 0.12);
    border: 1px solid rgba(180, 83, 9, 0.45);
    border-radius: 10px; padding: 0.7rem 0.85rem;
    font-size: 0.85rem; margin: 0.75rem 0;
}

/* ----- two-step sign-in ----- */
.code-list {
    list-style: none; padding: 0; margin: 0.5rem 0 1rem;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem;
}
.code-list li {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85rem; letter-spacing: 0.04em;
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: 8px; padding: 0.45rem 0.6rem; text-align: center;
}
#twofa-secret, #twofa-code, #mfa-code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.12em;
}
@media (max-width: 640px) { .code-list { grid-template-columns: 1fr; } }

/* ----- connections ----- */
.conn-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0 1rem; padding: 0; }
.conn-item {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: 10px; padding: 0.6rem 0.85rem;
}
.conn-who { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
/* Someone on an email who cannot be sent a task: shown, with the reason, but
   visibly not an option. */
.conn-item.is-inactive { opacity: 0.6; border-style: dashed; }
#email-raw { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8rem; }
#email-description { white-space: pre-wrap; max-height: 8rem; overflow-y: auto; }
.conn-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
#my-handle, #connect-handle {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.05em; text-transform: uppercase;
}

/* ----- account ----- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; margin-top: 0.5rem; }
.kv dt { color: var(--text-muted); font-size: 0.85rem; }
.kv dd { font-weight: 600; word-break: break-word; }
.danger-zone { border-color: rgba(239, 68, 68, 0.4); }
.danger-zone h3 { color: #fca5a5; }
button.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
button.danger:hover { background: #dc2626; }
button.btn-outline.danger { background: transparent; color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); }
button.btn-outline.danger:hover { background: var(--danger); color: #fff; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:disabled:hover { background: var(--primary); }

.breakable { word-break: break-all; font-size: 0.78rem; display: inline-block; margin-top: 0.35rem; }

/* ----- calendar cells are <button> now, so neutralise the button defaults ----- */
.cal-cell { background: var(--surface); color: var(--text-main); font-family: inherit; text-align: left; align-items: stretch; }
.cal-cell:hover { background: var(--surface); }
.cal-chip { display: block; }

@media (max-width: 640px) {
    /* The header used to take most of the first screen on a phone: a tall
       greeting card with four full-size buttons wrapping onto two rows. It is
       now one compact row, so the task list starts near the top. */
    .app-header { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 0.9rem; }
    .app-header .identity { flex: 1; min-width: 0; }
    .app-header h2 { font-size: 1rem; }
    .app-header #current-user-email { display: none; }
    .app-header .avatar { width: 34px; height: 34px; font-size: 0.8rem; }
    .app-header .task-actions { justify-content: flex-end; flex-wrap: wrap; gap: 0.3rem; }
    .app-header .task-actions button { min-height: 36px; padding: 0.3rem 0.55rem; font-size: 0.75rem; }
    .section-tabs { margin-bottom: 0.75rem; }
    .task-form-section:not(.is-open) { padding: 0.6rem; margin-bottom: 0.75rem; }
    .team-list { grid-template-columns: 1fr; }
    .member-row { align-items: flex-start; }
    .conn-item { align-items: flex-start; }
    /* On a phone the form used to fill the whole first screen, so opening the
       app showed a blank form instead of your tasks. People open a to-do list
       to see what is on; the form now waits behind one button. */
    .new-task-toggle { display: block; }
    .task-form-section:not(.is-open) > h3,
    .task-form-section:not(.is-open) > form { display: none; }
    .task-form-section.is-open .new-task-toggle { margin-bottom: 1rem; }
    .toast { left: 1rem; right: 1rem; transform: none; bottom: calc(1.5rem + env(safe-area-inset-bottom)); text-align: center; }
    .modal { align-items: flex-end; padding: 0; }
    .modal-content { max-width: none; border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto;
                     padding-bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----- admin ----- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.stat-tile.stat-warn { border-color: rgba(239, 68, 68, 0.5); }
.stat-tile.stat-warn .stat-value { color: #fca5a5; }
.stat-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.admin-users { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; }
.admin-user {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    display: grid;
    grid-template-columns: minmax(170px, 1.4fr) auto minmax(150px, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
}
.admin-user.is-inactive { opacity: 0.6; border-style: dashed; }
.admin-user-id { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.admin-user-id > div { display: flex; flex-direction: column; min-width: 0; }
.admin-user-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-badges { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.admin-user-meta { line-height: 1.45; }
.admin-user-actions { flex-wrap: wrap; justify-content: flex-end; }

.audit-log { display: flex; flex-direction: column; gap: 2px; margin-top: 0.8rem; max-height: 460px; overflow-y: auto; }
.audit-row {
    display: grid;
    grid-template-columns: 130px 190px 130px 1fr;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: 7px;
    font-size: 0.82rem;
    align-items: baseline;
}
.audit-row:nth-child(odd) { background: var(--surface); }
.audit-time { font-variant-numeric: tabular-nums; }
.audit-action { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; color: var(--primary); word-break: break-all; }
.audit-detail { overflow: hidden; text-overflow: ellipsis; }
#reset-link-value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; }

@media (max-width: 860px) {
    .admin-user { grid-template-columns: 1fr; align-items: stretch; }
    .admin-user-actions { justify-content: flex-start; }
    .audit-row { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.6rem; }
    .audit-row:nth-child(even) { background: var(--surface); }
}

/* ----- delegated and cancelled tasks ----- */
/* A task you handed to someone else: still yours to watch, not yours to edit. */
.task-item.is-handed-over { border-left: 3px solid var(--primary); }
.chip-handed { color: #c4b5fd; border-color: rgba(139, 92, 246, 0.45); }

.pill-cancelled { background: rgba(148, 163, 184, 0.3); color: #cbd5e1; }
.task-item.is-cancelled h4,
.agenda-row.is-cancelled strong { text-decoration: line-through; opacity: 0.5; }
.task-item.is-cancelled { opacity: 0.75; border-style: dashed; }
/* Cancelled is finished, so an overdue date on it is no longer a warning. */
.task-item.is-cancelled .chip-overdue { color: var(--text-muted); border-color: var(--glass-border); }


/* ======================================================================
   Ledger components. Placed last so they win over the earlier rules.
   No gradients, blur, tints or pill shapes; borders instead of shadows.
   ====================================================================== */
body { background: var(--bg); }
.app-container { max-width: 880px; }

.glass {
    background: var(--surface-solid);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 1.5rem;
}
main { gap: 1rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.02rem; }

input, textarea, select {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
}
button {
    border-radius: 4px; font-weight: 500; min-height: 36px;
    padding: 0.5rem 1rem; color: var(--on-accent);
}
button:active { transform: none; }
button.btn-outline { border: 1px solid var(--border); color: var(--text); }
button.btn-outline:hover { background: var(--surface-alt); }
.btn-icon { background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.btn-icon:hover { background: var(--surface-alt); color: var(--text); }
.btn-icon.danger:hover { background: var(--danger); color: var(--surface-solid); }
button.danger { color: var(--surface-solid); }
button.danger:hover { background: var(--danger); filter: brightness(0.9); }
button.btn-outline.danger { color: var(--danger); border-color: var(--danger); }
button.btn-outline.danger:hover { color: var(--surface-solid); }

/* Header: a plain bar, not a greeting card. */
header.app-header {
    padding: 0.6rem 1rem !important; margin-bottom: 0;
    border-bottom: 1px solid var(--border); align-items: center;
}
.app-header .avatar { display: none; }
.app-header h2 { font-size: 0.95rem; font-weight: 600; margin: 0; }

/* Tabs: text with an accent underline, not a segmented pill control. */
.view-tabs, .section-tabs, .auth-tabs {
    background: none; border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0; padding: 0; gap: 0.25rem; overflow-x: auto;
}
.tab {
    background: none; color: var(--text-2); border-radius: 0; font-weight: 500;
    padding: 0.55rem 0.8rem; min-height: 0;
}
.tab:hover { background: none; color: var(--text); }
.tab.active { background: none; color: var(--text); box-shadow: none; border-bottom-color: var(--accent); }

/* Task rows: ruled lines, like a ledger. */
.task-list { gap: 0; }
.task-item {
    background: none; border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0; padding: 0.8rem 0;
}
.task-item:hover { border-color: var(--border); background: var(--surface-alt); }
.task-info h4 { font-size: 1rem; font-weight: 500; }
.task-item.is-handed-over { border-left: 0; box-shadow: inset 3px 0 0 var(--accent); padding-left: 0.75rem; }
.task-item.is-cancelled { border-style: solid; }
.meta-row { gap: 0.75rem; margin-top: 0.3rem; }
.meta-chip {
    background: none; border: 0; padding: 0; border-radius: 0;
    font-size: 0.8rem; color: var(--text-2);
}
.chip-due, .chip-handed { color: var(--text-2); }
.chip-overdue { color: var(--danger); font-weight: 500; }
.label-chip {
    background: none; color: var(--text-2); border: 1px solid var(--border);
    border-radius: 2px; font-size: 0.75rem;
}

/* Priority: a small mono token; only urgent carries colour. */
.pill {
    background: none; border: 1px solid currentColor; border-radius: 2px;
    font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.02em; padding: 0 5px;
}
.pri-low, .pri-medium, .pill-cancelled { background: none; color: var(--text-2); }
.pri-high { background: none; color: var(--warn); }
.pri-urgent { background: none; color: var(--danger); }

/* Numbers and codes line up in mono. */
.agenda-time, .audit-time, .stat-value, .cal-daynum,
.code-list li, #twofa-secret, #twofa-code, #mfa-code, #my-handle, #connect-handle,
#email-raw, #reset-link-value, .invite-box input, .audit-action { font-family: var(--mono); }

.team-card, .member-row, .conn-item, .agenda-row, .stat-tile, .admin-user, .code-list li, .cal-cell {
    background: var(--surface-solid); border: 1px solid var(--border); border-radius: 4px;
}
.team-card:hover { background: var(--surface-alt); border-color: var(--border); }
.cal-cell:hover { border-color: var(--text-2); background: var(--surface-solid); }
.cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stat-tile.stat-warn { border-color: var(--danger); }
.stat-tile.stat-warn .stat-value, .danger-zone h3 { color: var(--danger); }
.danger-zone { border-color: var(--danger); }
.audit-row { border-radius: 0; }
.audit-row:nth-child(odd) { background: var(--surface-alt); }
.warn-note { background: none; border: 1px solid var(--warn); border-left-width: 3px; border-radius: 0; }
.sponsor-card { border-radius: 2px; }

.modal { background: rgba(0, 0, 0, 0.45); }
.modal-content { background: var(--surface-solid); border-radius: 4px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.25); }
.toast { border-radius: 4px; border: 0; }
.toast-success { box-shadow: inset 3px 0 0 var(--success); }
.toast-error { box-shadow: inset 3px 0 0 var(--danger); }

/* Sign-in: a plain page, not a floating card. */
#auth-section { max-width: 380px; margin: 10vh auto; }
#auth-section.glass, #auth-section .glass { background: none; border: 0; padding: 0; }
.brand-mark { display: none; }
.brand h1 { font-size: 1.5rem; }

@media (max-width: 640px) {
    button, input, select { min-height: 44px; }
    .tab { min-height: 40px; }
    .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .filter-row > * { min-width: 0; }
    .filter-row #task-search { grid-column: 1 / -1; }
    .glass { padding: 1rem; }
    .modal-content { border-radius: 4px 4px 0 0; }
}

/* Row actions are words in quiet outline buttons; colour only on hover. */
.task-actions .btn-icon, .agenda-row .btn-icon {
    font-size: 0.8rem; padding: 0.3rem 0.6rem; min-height: 32px;
}
.btn-icon.danger { background: transparent; color: var(--danger); border-color: var(--border); }
.tab { border: 0; }
.list-header button { white-space: nowrap; }
@media (max-width: 640px) {
    /* Name on its own line, the account buttons in a row beneath it. */
    .app-header .identity { flex: 1 1 100%; }
    .app-header .task-actions { width: 100%; justify-content: flex-start; }
    .task-actions .btn-icon { min-height: 40px; }
}

/* Fable review, round 2: one sheet instead of floating cards; the tab
   underline sits on the rule; a task row stays one compact row on phones. */
.tab { border-bottom: 2px solid transparent; }
.view-tabs, .section-tabs, .auth-tabs { overflow-y: hidden; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar, .section-tabs::-webkit-scrollbar { display: none; }
.app-container { background: var(--surface-solid); border: 1px solid var(--border); }
.glass { border-width: 0 0 1px; }
main { gap: 0; }
.section-tabs { margin-bottom: 0; justify-content: flex-start; }
.section-tabs .tab { flex: 0 0 auto; padding: 0.55rem 1.25rem; }
.task-item { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 12px; }
.meta-row { align-items: center; }
#auth-section { background: none; }
@media (max-width: 640px) {
    body { padding-left: 0; padding-right: 0; }
    .app-container { border: 0; }
    .task-form-section:not(.is-open) { border: 0; padding: 0.75rem 1rem; background: none; }
    .task-item .task-actions { flex-direction: column; }
    .section-tabs .tab { padding: 0.55rem 0.9rem; }
}
/* The sign-in page is plain paper, not the app's sheet. */
.app-container:has(> #auth-section:not([hidden])) { background: none; border: 0; }
/* Ticked people: checkbox beside the name, not above it. */
.conn-who.checkbox-row { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
/* The ledger look has no avatar circles anywhere. */
.avatar { display: none; }
/* Phone task rows: tickbox and title on one line, the actions as a single
   row of small buttons underneath, instead of a tall column beside it. */
@media (max-width: 640px) {
    .task-item { grid-template-columns: 1fr; }
    .task-item .task-actions {
        flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
        gap: 0.4rem; margin-top: 0.6rem;
    }
    .task-item .task-actions .btn-icon { min-height: 36px; padding: 0.25rem 0.7rem; }
}
.task-title-row { flex-wrap: nowrap; align-items: flex-start; }
.task-title-row h4 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task-title-row input[type="checkbox"] { margin-top: 3px; }
/* The long setup link wraps instead of running off the screen. */
#twofa-uri-hint { overflow-wrap: anywhere; word-break: break-all; }
/* Tickboxes keep their own size; the 44px touch rule is for buttons/fields. */
input[type="checkbox"] { min-height: 0; }

/* Shown until the account's email address is confirmed. */
.verify-banner { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between;
                 flex-wrap: wrap; margin: 0; border-left-width: 3px; }
.verify-banner[hidden] { display: none; }

/* ======================================================================
   Professional pass (October 2026): a wider working sheet, the composer
   folded behind "+ New task" on every screen, priority as a coloured edge,
   and a Teams/Outlook-style week calendar. Placed last so it wins.
   ====================================================================== */
.app-container { max-width: 1120px; }
body { padding: 1.5rem; }

/* Header: name and company on the left, quiet account buttons on the right. */
header.app-header { padding: 0.75rem 1.25rem !important; gap: 1rem; }
.app-header h2 { font-size: 1rem; letter-spacing: -0.01em; }
.app-header .task-actions button, .app-header button {
    min-height: 32px; padding: 0.3rem 0.75rem; font-size: 0.85rem;
}

/* Tabs sit on one rule with a firm accent underline. */
.section-tabs .tab, .view-tabs .tab { font-size: 0.92rem; }
.tab.active { font-weight: 600; border-bottom-color: var(--accent); }

/* Composer: folded until asked for, on desktop as well as phones. */
.new-task-toggle { display: block; }
.task-form-section:not(.is-open) { padding: 0.9rem 1.5rem; }
.task-form-section:not(.is-open) > h3,
.task-form-section:not(.is-open) > form { display: none; }
.task-form-section.is-open .new-task-toggle { margin-bottom: 1rem; }
.new-task-toggle.btn-outline {
    width: auto; display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
    font-weight: 600; padding: 0.5rem 1.1rem;
}
.new-task-toggle.btn-outline:hover { background: var(--accent-hover); }
.task-form-section.is-open .new-task-toggle.btn-outline {
    background: none; color: var(--text); border-color: var(--border); font-weight: 500;
}
.task-form-section .field-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; }
.field-label { font-size: 0.78rem; font-weight: 600; color: var(--text-2); letter-spacing: 0.01em; }

/* Task rows: a coloured edge says the priority at a glance. */
.task-item { padding: 0.85rem 0.75rem 0.85rem 0.9rem; position: relative; }
.task-item::before {
    content: ""; position: absolute; left: 0; top: 0.7rem; bottom: 0.7rem; width: 3px;
    background: var(--border); border-radius: 2px;
}
.task-item:has(.pri-high)::before { background: var(--warn); }
.task-item:has(.pri-urgent)::before { background: var(--danger); }
.task-item:has(.pri-medium)::before { background: var(--accent); opacity: 0.55; }
.task-item.is-handed-over { box-shadow: none; }
.task-info h4 { font-weight: 600; letter-spacing: -0.005em; }
.task-item.is-done h4 { color: var(--text-2); text-decoration: line-through; }
.chip-private { color: var(--text); }

/* Segmented Week / Month switch. */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.seg-btn {
    background: none; color: var(--text-2); border: 0; border-radius: 0;
    min-height: 32px; padding: 0.3rem 0.85rem; font-size: 0.85rem;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cal-header { gap: 0.5rem; flex-wrap: wrap; }
.cal-header h3 { text-align: left; font-size: 1.1rem; min-width: 12ch; }
.cal-nav { min-width: 36px; padding: 0.3rem 0.5rem; }

/* Week: seven columns, each day's tasks listed under it in time order. */
.cal-week {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.cal-week[hidden] { display: none; }
.wk-day { display: flex; flex-direction: column; min-height: 320px; background: var(--surface-solid); }
.wk-day + .wk-day { border-left: 1px solid var(--border); }
.wk-day.is-today { background: var(--surface-alt); }
.wk-head {
    display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap;
    background: none; color: var(--text); border: 0; border-bottom: 1px solid var(--border);
    border-radius: 0; padding: 0.55rem 0.6rem; min-height: 0; text-align: left;
}
.wk-head:hover { background: var(--surface-alt); }
.wk-dow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); }
.wk-date { font-size: 1.15rem; font-weight: 600; }
.is-today .wk-date {
    background: var(--accent); color: var(--on-accent); border-radius: 999px;
    min-width: 1.8em; text-align: center; padding: 0 0.3em;
}
.wk-count { font-size: 0.72rem; color: var(--text-2); margin-left: auto; }
.wk-list { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; flex: 1; }
.wk-task {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
    width: 100%; text-align: left; min-height: 0;
    background: var(--surface-solid); color: var(--text);
    border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 3px;
    padding: 0.35rem 0.45rem; font-size: 0.8rem; line-height: 1.3;
}
.wk-task:hover { background: var(--surface-alt); }
.wk-task.pri-edge-low { border-left-color: var(--border); }
.wk-task.pri-edge-high { border-left-color: var(--warn); }
.wk-task.pri-edge-urgent { border-left-color: var(--danger); }
.wk-task.is-done { opacity: 0.55; }
.wk-task.is-done .wk-title { text-decoration: line-through; }
.wk-time { font-family: var(--mono); font-size: 0.7rem; color: var(--text-2); }
.wk-title { font-weight: 500; overflow-wrap: anywhere; }
.wk-who { font-size: 0.7rem; color: var(--text-2); }
.wk-empty { font-size: 0.75rem; color: var(--text-2); padding: 0.2rem; }
.wk-add {
    background: none; color: var(--text-2); border: 0; border-top: 1px dashed var(--border);
    border-radius: 0; min-height: 0; padding: 0.4rem; font-size: 0.78rem;
}
.wk-add:hover { color: var(--accent); background: var(--surface-alt); }

/* Phones: the week becomes a day-by-day agenda. */
@media (max-width: 760px) {
    body { padding: 0; }
    .cal-week { grid-template-columns: 1fr; }
    .wk-day { min-height: 0; }
    .wk-day + .wk-day { border-left: 0; border-top: 1px solid var(--border); }
    .wk-list { padding: 0.4rem 0.6rem; }
    .wk-task { font-size: 0.88rem; }
    .task-form-section:not(.is-open) { padding: 0.75rem 1rem; }
}

/* ======================================================================
   Owner dashboard (platform superusers). One series per chart, so one
   colour: the accent. Text stays in text tokens, never the series colour.
   ====================================================================== */
.own-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem; margin: 0.5rem 0 1.25rem; }
.own-tile { display: flex; flex-direction: column; gap: 0.15rem; border: 1px solid var(--border); border-radius: 4px; padding: 0.75rem 0.9rem; background: var(--surface-solid); }
.own-tile-label { font-size: 0.75rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.own-tile-value { font-size: 1.6rem; font-weight: 600; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; }
.own-tile-sub { font-size: 0.78rem; color: var(--text-2); }
.own-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.own-chart { margin: 0; border: 1px solid var(--border); border-radius: 4px; padding: 0.75rem 0.9rem; background: var(--surface-solid); }
.own-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.own-chart-title { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.own-chart-total { font-size: 0.78rem; color: var(--text-2); }
.own-svg-wrap { position: relative; }
.own-svg { display: block; width: 100%; height: auto; }
.own-bar { fill: var(--accent); }
.own-hit { fill: transparent; cursor: default; }
.own-hit:hover { fill: var(--text); fill-opacity: 0.06; }
.own-grid { stroke: var(--border); stroke-width: 1; }
.own-axis { fill: var(--text-2); font-size: 20px; font-family: inherit; }
.own-tip {
    position: absolute; top: -0.25rem; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
    background: var(--surface-solid); color: var(--text); border: 1px solid var(--border); border-radius: 4px;
    padding: 0.15rem 0.45rem; font-size: 0.78rem; box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}
.own-tip[hidden] { display: none; }
.own-details { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-2); }
.own-details summary { cursor: pointer; }
.own-block { margin-bottom: 1.25rem; }
.own-block h4 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.own-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; }
.own-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.own-table th, .own-table td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.own-table th { font-weight: 600; color: var(--text-2); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-alt); }
.own-table td.num, .own-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.own-table tbody tr:last-child td { border-bottom: 0; }
.own-details .own-table { margin-top: 0.4rem; max-width: 240px; }