/* ---------------------------------------------------------------------
   Design tokens.

   Warm paper palette with a deep green accent, adapted from app2.css.
   Every colour is defined once here in the light theme and redefined in a
   single dark block, so a theme change never means editing components.
   --------------------------------------------------------------------- */
:root {
    --bg:            #f4f1ea;
    --surface:       #fffdf8;
    --surface-2:     #f7f4ee;
    --surface-hover: #f0ece4;
    --border:        #e4dfd4;
    --border-strong: #d3ccbe;

    --text:          #24211c;
    --text-muted:    #6f6a61;
    /* Tuned to clear 4.5:1 against every surface it lands on — the card,
       the tinted panels and the page ground — not just the lightest one. */
    --text-faint:    #736d62;

    --accent:        #1b2f4e;
    --accent-hover:  #27436b;
    --accent-soft:   #e6eaf1;
    --accent-text:   #ffffff;

    /* Platinum is the secondary: completed columns, the Owner badge, a
       success toast. Being a neutral it has no hue to collide with any of
       the four priority colours — which is exactly what a gold could not
       avoid. Two values, because the metal itself is ~3.4:1 on cream:
       fine as a fill, unreadable as small text. */
    --metal:         #8c96a3;
    --metal-ink:     #5c6675;
    --metal-soft:    #eceef1;

    /* The primary button is deliberately NOT tied to --accent. On a dark
       ground a navy fill sits at ~1.8:1 against the surface and stops
       reading as a raised control, so the dark theme swaps it for platinum
       rather than washing the accent out to pale blue. */
    --btn-bg:        #1b2f4e;
    --btn-bg-hover:  #27436b;
    --btn-fg:        #ffffff;

    --danger:        #b5443b;
    --danger-soft:   #f8eae8;
    --success:       #2f8a5b;
    --warning:       #e0a23a;

    /* Priority scale, kept inside the warm range so a board of mixed
       priorities still reads as one surface rather than a paint chart.
       Two variants of each: the vivid colour for solid bars and fills,
       where contrast rules do not apply, and an "ink" version for the
       label text, darkened until it clears 4.5:1. Amber on cream is barely
       2:1 at full saturation, so a single value cannot serve both jobs. */
    --p-low:         #8a857a;
    --p-medium:      #5b8aa8;
    /* Burnt orange rather than amber. Amber has to be darkened almost to
       brown before it clears 4.5:1 on cream, at which point it reads as
       dirty; this keeps the heat and sits clear of the urgent red. */
    --p-high:        #c4661f;
    --p-urgent:      #d6534a;

    --p-low-ink:     #6f6a61;
    --p-medium-ink:  #457089;
    --p-high-ink:    #a85520;
    --p-urgent-fill: #b5443b;
    --p-urgent-on:   #ffffff;

    --radius:        14px;
    --radius-sm:     10px;
    --radius-xs:     8px;
    --pill:          999px;

    --shadow:        0 1px 2px rgba(40, 32, 16, .06), 0 6px 20px -12px rgba(40, 32, 16, .18);
    --shadow-lg:     0 12px 34px -10px rgba(40, 32, 16, .28);

    --top-h:         56px;

    --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
    --sans:  "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #151617;
        --surface:       #1e2022;
        --surface-2:     #232628;
        --surface-hover: #2a2d30;
        --border:        #2d3033;
        --border-strong: #3d4245;

        --text:          #ebe7de;
        --text-muted:    #9a958b;
        --text-faint:    #918c82;

        /* Navy is too dark to serve as an accent on a dark ground, so the
           dark theme lifts it to a pale steel blue and keeps the metal. */
        --accent:        #93b4de;
        --accent-hover:  #a8c4e6;
        --accent-soft:   #1c2941;
        --accent-text:   #10192a;

        --metal:         #a8b2c0;
        --metal-ink:     #a8b2c0;
        --metal-soft:    #262b31;

        /* Brushed metal with navy lettering: 8.9:1 against the bar, so it
           reads as a key action rather than a faded chip. */
        --btn-bg:        #b8c0cb;
        --btn-bg-hover:  #c6ccd5;
        --btn-fg:        #1b2f4e;

        /* Lifted slightly so "Remove" still clears 4.5:1 on the tinted
           member and invitation rows, not just on the card surface. */
        --danger:        #e57268;
        --danger-soft:   #2b1e1d;
        --success:       #4fbf82;
        --warning:       #e0a23a;

        --p-low:         #8a857a;
        --p-medium:      #4f7ea3;
        --p-high:        #d9803f;
        --p-urgent:      #e0655b;

        --p-low-ink:     #9a958b;
        --p-medium-ink:  #7fb3d5;
        --p-high-ink:    #e6975a;
        --p-urgent-fill: #e0655b;
        /* White on this red is only 3.4:1; the dark ground is 4.8:1. */
        --p-urgent-on:   #1e2022;

        /* Elevation is carried by borders in the dark theme; a drop shadow
           on a near-black ground reads as smudge, not lift. */
        --shadow:        none;
        --shadow-lg:     0 12px 34px -10px rgba(0, 0, 0, .6);
    }
}

*, *::before, *::after { box-sizing: border-box; }

/* Any explicit display value beats the UA stylesheet's
   `[hidden] { display: none }`, so anything toggled via the hidden
   attribute needs this said outright or it stays on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 var(--sans);
    -webkit-font-smoothing: antialiased;
}

/* Page titles are serif; section headings stay sans, so the hierarchy is
   carried by typeface as well as size. */
h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -.01em;
    margin: 0;
}

h2 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: 0; }
h3 { font-size: 15px; font-weight: 600; margin: 0; }
p  { margin: 0; }

a { color: inherit; text-decoration: none; }

code {
    font-size: 13px;
    background: var(--surface-2);
    padding: 1px 5px;
    border-radius: 5px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------- Top bar --------------------------- */
.topbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--top-h);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 0 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar-brand {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--serif); font-weight: 600; font-size: 20px;
    letter-spacing: -.01em; color: var(--text);
}

.topbar-right { display: flex; align-items: center; gap: 12px; }

.org-name { font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.org-name-empty { color: var(--text-faint); font-style: italic; }
a.org-name:hover { color: var(--accent); }

.org-switcher, .select-inline, .search-input {
    font: inherit; font-size: 14px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 7px 10px;
}

.search-input { min-width: 12rem; }

/* A link to /account. It stays visually quiet — the avatar and name are
   already recognisable, and a button here would compete with the actions
   beside it — so the affordance is the pointer and the hover. */
.user-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--pill);
    color: inherit;
    transition: background .12s;
}

.user-chip:hover { background: var(--surface-2); }
.user-chip:hover .user-name { color: var(--text); }
.user-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.avatar {
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 600; font-size: 13px;
    flex-shrink: 0;
}

.user-name { font-size: 14px; color: var(--text-muted); }

@media (max-width: 720px) {
    /* The topbar runs out of room fast. The organization name goes first:
       the "Organization" link right beside it leads to a page that names
       it, so nothing becomes unreachable. A switcher stays, because with
       several organizations knowing which one you are in still matters.

       The wordmark is NOT hidden here: it is the only brand element left in
       the bar now that the mark has gone, so dropping it would leave the
       app anonymous on a phone. */
    .user-name, .org-name { display: none; }
    .topbar { padding: 0 12px; }
    .topbar-brand { font-size: 18px; }
}

/* --------------------------------- Buttons --------------------------- */
.btn {
    font: inherit; font-size: 15px; line-height: 1.35;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, transform .05s;
}

.btn:hover:not([disabled]) { background: var(--surface-2); }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

.btn-primary {
    background: var(--btn-bg); color: var(--btn-fg);
    border-color: var(--btn-bg); font-weight: 500;
}
/* An explicit shade rather than a brightness filter, which is barely
   visible on a colour this dark. */
.btn-primary:hover:not([disabled]) {
    background: var(--btn-bg-hover); border-color: var(--btn-bg-hover);
}

.btn-secondary { background: var(--surface); border-color: var(--border); }

.btn-ghost { border-color: transparent; background: none; color: var(--text-muted); }
.btn-ghost:hover:not([disabled]) { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 500; }
.btn-danger:hover:not([disabled]) { background: var(--danger); filter: brightness(1.08); }

.btn-danger-ghost { border-color: transparent; background: none; color: var(--danger); }
.btn-danger-ghost:hover:not([disabled]) { background: var(--danger-soft); }

.btn-block { width: 100%; }
.btn-tiny { padding: 4px 10px; font-size: 13px; border-radius: var(--radius-xs); }

.btn-icon {
    width: 30px; height: 30px; padding: 0;
    display: grid; place-items: center;
    font-size: 20px; line-height: 1;
    color: var(--text-muted);
    border-color: transparent; background: none;
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }

/* --------------------------------- Forms ----------------------------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.field label { font-size: 13px; color: var(--text-muted); }
.label-optional { color: var(--text-faint); }

.field input, .field select, .field textarea {
    font: inherit; font-size: 15px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 11px;
    width: 100%;
}

.field textarea { resize: vertical; min-height: 84px; }

.field input:focus, .field select:focus, .field textarea:focus,
.org-switcher:focus, .select-inline:focus, .search-input:focus,
.inline-form input:focus, .column-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.field input[type="color"] { padding: 3px; height: 40px; cursor: pointer; }
.field input[type="checkbox"] { width: 20px; height: 20px; padding: 0; accent-color: var(--accent); }

.field-hint { font-size: 12px; color: var(--text-faint); }

.field-error, .form-error { font-size: 13px; color: var(--danger); margin: 0; }
.form-error:not(:empty) { margin-bottom: 10px; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }

/* --------------------------------- Auth ------------------------------ */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

.auth-shell { width: 100%; max-width: 400px; }

.auth-brand {
    display: flex; align-items: center; justify-content: center;
    gap: 9px; margin-bottom: 18px;
    font-family: var(--serif); font-weight: 600; font-size: 20px;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 26px;
    box-shadow: var(--shadow);
}

.auth-card h1 { font-size: 30px; margin-bottom: 2px; }
.auth-subtitle { color: var(--text-muted); margin-bottom: 22px; }

.auth-card .btn-block { padding: 12px 20px; font-size: 16px; font-weight: 600; margin-top: 4px; }

.auth-alt { margin-top: 16px; text-align: center; font-size: 14px; color: var(--text-muted); }
.auth-alt a { color: var(--accent); font-weight: 500; }
.auth-alt a:hover { text-decoration: underline; }

.auth-note {
    margin-top: 14px; font-size: 13px;
    color: var(--text-muted); text-align: center;
}

/* --------------------------------- Page shell ------------------------ */
.page { padding: 24px 20px 56px; max-width: 1400px; margin: 0 auto; }
.page-narrow { max-width: 760px; }

.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}

.page-subtitle { color: var(--text-muted); font-size: 14px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.board-title { display: flex; align-items: flex-start; gap: 12px; }

.back-link {
    display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: 18px;
    flex-shrink: 0;
}
.back-link:hover { background: var(--surface-2); color: var(--text); }

/* --------------------------------- Project grid ---------------------- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.project-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: border-color .12s, transform .12s;
}

.project-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.project-stripe { display: block; height: 3px; background: var(--accent); }

.project-card-body { display: block; padding: 16px 18px 12px; cursor: pointer; }

.project-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}

.project-code {
    font-size: 11px; font-weight: 600; letter-spacing: .07em;
    color: var(--text-faint);
}

.project-status {
    font-size: 11px; padding: 2px 8px;
    border-radius: var(--pill);
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-muted); line-height: 1.5;
}

.project-name {
    font-family: var(--serif); font-size: 20px; font-weight: 600;
    letter-spacing: -.01em; margin-bottom: 4px;
}

.project-description {
    font-size: 14px; color: var(--text-muted);
    margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
}

.progress {
    height: 8px; border-radius: 4px;
    background: var(--surface-hover); overflow: hidden;
}

.progress-bar {
    display: block; height: 100%; width: 0;
    background: var(--accent); border-radius: 4px;
    transition: width .25s;
}

.project-meta { font-size: 13px; color: var(--text-faint); margin-top: 8px; }

.project-card-actions {
    display: flex; gap: 6px;
    padding: 0 14px 14px;
    opacity: 0; transition: opacity .12s;
}
.project-card:hover .project-card-actions,
.project-card:focus-within .project-card-actions { opacity: 1; }

/* Touch devices have no hover, so the actions must always be visible. */
@media (hover: none) { .project-card-actions { opacity: 1; } }

/* ------------------------- Project reordering ------------------------ */
/* Owner-only; the handle stays hidden for everyone else. */

.project-drag-handle {
    position: absolute; top: 10px; right: 10px; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0;
    border: 1px solid transparent; border-radius: 6px;
    background: none; color: var(--text-faint);
    font-size: 15px; line-height: 1; cursor: grab;
    opacity: 0; transition: opacity .12s, border-color .12s, background .12s;
}

.project-card:hover .project-drag-handle,
.project-drag-handle:focus-visible { opacity: 1; }

.project-drag-handle:hover {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-muted);
}

.project-drag-handle:active { cursor: grabbing; }

/* No hover on touch, and HTML5 drag does not fire there either — the
   handle is the only way in, so it is always visible. */
@media (hover: none) { .project-drag-handle { opacity: 1; } }

.project-card.dragging { opacity: .4; }

/* The grid flows left-to-right, so the drop marker is a vertical edge —
   the board's top/bottom shadows would read as the wrong axis here. */
.project-card.drop-before { box-shadow: -3px 0 0 var(--accent); }
.project-card.drop-after  { box-shadow:  3px 0 0 var(--accent); }

/* While a card is held by the keyboard, it stays visibly picked up. */
.project-card.is-grabbed {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.project-grid.is-reordering { cursor: grabbing; }

.skeleton-card {
    height: 12rem; border-radius: var(--radius);
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease infinite;
}

@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------- Task list ------------------------- */
.my-tasks h2 { margin-bottom: 10px; }

.task-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.task-row {
    display: grid;
    grid-template-columns: 4px 4.5rem 1fr auto auto;
    align-items: center; gap: 12px;
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    cursor: pointer;
}
.task-row:first-child { border-top: 0; }
.task-row:hover { background: var(--surface-2); }

.task-priority { width: 4px; height: 20px; border-radius: 2px; background: var(--p-medium); }
.task-priority[data-level="low"]    { background: var(--p-low); }
.task-priority[data-level="medium"] { background: var(--p-medium); }
.task-priority[data-level="high"]   { background: var(--p-high); }
.task-priority[data-level="urgent"] { background: var(--p-urgent); }

.task-row-ref { font-size: 12px; font-weight: 600; color: var(--text-faint); letter-spacing: .03em; }
.task-row-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row-project { font-size: 13px; color: var(--text-muted); }
.task-row-due { font-size: 13px; color: var(--text-faint); }
.task-row-due.overdue { color: var(--danger); font-weight: 600; }

@media (max-width: 720px) {
    .task-row { grid-template-columns: 4px 1fr auto; }
    .task-row-ref, .task-row-project { display: none; }
}

/* --------------------------------- Empty states ---------------------- */
.empty-state {
    grid-column: 1 / -1;
    text-align: center; padding: 40px 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.empty-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.empty-hint { font-size: 14px; }

/* --------------------------------- Panels ---------------------------- */
.settings-grid { display: grid; gap: 16px; max-width: 46rem; }

.panel-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
.panel-section h2 { margin-bottom: 12px; }
.section-hint { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }

.column-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }

.column-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}
.column-row.drag-over { border-color: var(--accent); }
.column-row.dragging { opacity: .4; }

.drag-handle { cursor: grab; color: var(--text-faint); font-size: 14px; }

.column-input {
    flex: 1; font: inherit; font-size: 15px;
    background: transparent; border: 1px solid transparent;
    border-radius: 7px; padding: 4px 7px; color: var(--text);
    min-width: 0;
}
.column-input:focus { background: var(--surface); }

.done-toggle {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-muted); white-space: nowrap;
}
.done-toggle input { accent-color: var(--accent); }

.column-task-count { font-size: 13px; color: var(--text-faint); min-width: 3.8rem; text-align: right; }

.inline-form { display: flex; gap: 8px; }
.inline-form input {
    flex: 1; font: inherit; font-size: 15px;
    padding: 9px 11px;
    background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 9px;
    min-width: 0;
}

.danger-zone { border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.danger-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 0;
    border-top: 1px solid var(--border);
}
.danger-row:first-of-type { border-top: 0; padding-top: 0; }
.danger-title { font-weight: 600; font-size: 15px; }
.danger-hint { font-size: 13px; color: var(--text-muted); }

@media (max-width: 560px) {
    .danger-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ------------------- Onboarding and organization --------------------- */
.welcome-header { margin-bottom: 22px; }
.welcome-header h1 { margin-bottom: 6px; }
.welcome-header .page-subtitle { max-width: 40rem; }

.welcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.welcome-invitations { margin-bottom: 20px; }
.welcome-invitations h2 { margin-bottom: 8px; }

/* Accepting an invitation is the primary action on this screen when one is
   waiting, so give it a little more presence than the panels below. */
.welcome-invitations .invite-row {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.invite-list, .org-list, .member-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 8px;
}

.invite-list { margin-top: 12px; }

.invite-row, .org-row, .member-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.invite-main { min-width: 0; }
.invite-org { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.invite-meta { font-size: 13px; color: var(--text-muted); }

.invite-code {
    display: inline-block; margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px; letter-spacing: .06em;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    border-radius: 7px; padding: 3px 8px;
    user-select: all;
}

.invite-actions { display: flex; gap: 6px; flex-shrink: 0; }

.org-row-name { font-weight: 600; font-size: 15px; }
.org-row-role {
    font-size: 12px; color: var(--text-muted);
    /* Roles arrive lowercase from the database ("owner"), so they are
       capitalised here rather than in the query. */
    text-transform: capitalize;
}

/* Same slot as .org-row-role but for a written sentence, which must not be
   run through capitalize. */
.org-row-note { font-size: 12px; color: var(--text-muted); }

.org-row-main { min-width: 0; }

/* Switch / Open / the active badge share this slot, so it must not be
   squeezed by a long organization name beside it. */
.org-row-actions {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
}

/* Marks the organization you are already in, in the slot where the other
   rows carry their Switch button. */
.org-row-current {
    flex-shrink: 0;
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--pill);
    padding: 3px 10px;
}

/* Separated from the list above it: the list is what you have, these are
   the two ways to gain another. They collapse to one column when there is
   not room for two. */
.org-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.invite-form { margin-bottom: 4px; }

.member-row { justify-content: flex-start; }
.member-main { flex: 1; min-width: 0; }
.member-name { font-size: 15px; font-weight: 500; }
.member-email {
    font-size: 13px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.member-role-static {
    font-size: 12px; color: var(--text-muted);
    text-transform: capitalize;
    padding: 2px 10px; border-radius: var(--pill);
    background: var(--surface); border: 1px solid var(--border);
}

.member-role-static[data-role="owner"] {
    color: var(--metal-ink);
    background: var(--metal-soft);
    border-color: color-mix(in srgb, var(--metal) 50%, var(--border));
}

@media (max-width: 560px) {
    .invite-row, .org-row { flex-direction: column; align-items: flex-start; }
    .member-row { flex-wrap: wrap; }
}

/* --------------------------------- Modal ----------------------------- */
/*
 * Stacking order for the whole app, highest last:
 *
 *   40  topbar (sticky)
 *   65  .panel-backdrop   (board.css)
 *   70  .task-panel       (board.css)
 *   75  .modal-backdrop   — must clear the task panel
 *   80  .toast-stack      — always visible, never interactive
 *
 * The modal has to outrank the task panel because it is opened FROM it:
 * "delete this task?" is asked while the panel is on screen. At a lower
 * z-index the dialog rendered behind the panel, so its buttons could not be
 * clicked at all — the confirmation appeared and then nothing happened.
 * Change one of these numbers only with the others in view.
 */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 75;
    background: rgba(36, 33, 28, .42);
    display: grid; place-items: center;
    padding: 24px;
}

.modal {
    width: 100%; max-width: 27rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 24px;
}

.modal h2 { margin-bottom: 14px; font-family: var(--serif); font-size: 20px; }
.modal .field-hint { margin-bottom: 12px; font-size: 14px; color: var(--text-muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* --------------------------------- Toasts ---------------------------- */
.toast-stack {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
    max-width: 90vw;
}

.toast {
    background: var(--text); color: var(--bg);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    animation: toast-in .18s ease;
}

.toast.error { background: var(--danger); color: #fff; }
.toast.success { background: var(--accent); color: var(--accent-text); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------- Marketing -------------------------- */
/* The signed-out landing page. It shares the app's tokens deliberately —
   what a visitor sees here is the interface they get after signing up,
   not a separate brand. */

.marketing-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    height: var(--top-h);
    padding: 0 24px;
    max-width: 1120px; margin: 0 auto;
}

.marketing-nav { display: flex; align-items: center; gap: 8px; }

.marketing { max-width: 1120px; margin: 0 auto; padding: 0 24px 72px; }

.btn-large { padding: 12px 22px; font-size: 16px; }

/* ---- Hero ---- */
.hero { text-align: center; padding: 64px 0 40px; max-width: 40rem; margin: 0 auto; }

.hero-eyebrow {
    display: inline-block;
    font-size: 13px; font-weight: 500; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--metal-ink);
    background: var(--metal-soft);
    border: 1px solid color-mix(in srgb, var(--metal) 45%, var(--border));
    border-radius: var(--pill);
    padding: 4px 12px;
    margin-bottom: 20px;
}

/* clamp() rather than a breakpoint: the headline is the one element where
   a hard jump between two sizes is most visible. */
.hero-title {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(34px, 6vw, 52px);
    line-height: 1.1; letter-spacing: -.02em;
    margin: 0 0 18px;
}

.hero-lede { font-size: 18px; line-height: 1.6; color: var(--text-muted); }

.hero-actions {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
    margin-top: 28px;
}

.hero-note { margin-top: 14px; font-size: 14px; color: var(--text-faint); }

/* ---- Board preview ---- */
.hero-preview { margin: 8px auto 72px; max-width: 60rem; }

.preview-window {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.preview-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.preview-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--border-strong);
}

.preview-title {
    margin-left: 8px;
    font-size: 13px; color: var(--text-muted);
}

/* Scrolls inside its own box on a phone rather than widening the page. */
.preview-board {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: 12px;
    padding: 16px;
    overflow-x: auto;
}

.preview-column {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
}

.preview-column.is-done {
    background: var(--metal-soft);
    border-color: color-mix(in srgb, var(--metal) 40%, var(--border));
}

.preview-column-name {
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.preview-column-name span { color: var(--text-faint); font-weight: 400; }

.preview-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 9px 10px;
    font-size: 13px; line-height: 1.4;
    margin-bottom: 8px;
    box-shadow: var(--shadow);
}

.preview-card:last-child { margin-bottom: 0; }
.preview-card.is-done { color: var(--text-muted); text-decoration: line-through; }

.preview-tag {
    display: block;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 4px;
}

/* The "ink" variants, because these are small text on a light card. */
.tag-low    { color: var(--p-low-ink); }
.tag-medium { color: var(--p-medium-ink); }
.tag-high   { color: var(--p-high-ink); }
.tag-urgent { color: var(--p-urgent-fill); }

/* ---- Sections ---- */
.marketing-section { margin-bottom: 72px; }

.section-title {
    font-family: var(--serif); font-weight: 600;
    font-size: 30px; letter-spacing: -.01em;
    margin: 0 0 10px;
    text-align: center;
}

.section-lede {
    font-size: 17px; color: var(--text-muted);
    text-align: center;
    max-width: 34rem; margin: 0 auto 36px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 16px;
}

.feature {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 20px;
}

.feature h3 { font-size: 17px; margin-bottom: 8px; }
.feature p { color: var(--text-muted); line-height: 1.6; font-size: 15px; }

/* ---- Steps ---- */
.steps {
    list-style: none; margin: 0 auto; padding: 0;
    max-width: 40rem;
    display: grid; gap: 14px;
}

.step {
    display: flex; align-items: flex-start; gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.step-number {
    display: grid; place-items: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 600; font-size: 15px;
}

.step h3 { margin-bottom: 4px; font-size: 16px; }
.step p { color: var(--text-muted); font-size: 15px; line-height: 1.55; }

/* ---- Closing call to action ---- */
.cta-panel {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 44px 24px;
    box-shadow: var(--shadow);
}

.cta-panel h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: 26px; letter-spacing: -.01em;
    margin-bottom: 8px;
}

.cta-panel p { color: var(--text-muted); margin-bottom: 22px; }

/* ---- Footer ---- */
.marketing-footer {
    border-top: 1px solid var(--border);
    padding: 26px 24px 40px;
    text-align: center;
    font-size: 14px; color: var(--text-muted);
}

.marketing-footer-links { margin-top: 6px; }
.marketing-footer-links a { color: var(--accent); }
.marketing-footer-links a:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .marketing-bar { padding: 0 16px; }
    .marketing { padding: 0 16px 56px; }
    .hero { padding: 40px 0 32px; }
    .hero-actions .btn { width: 100%; }
    .section-title { font-size: 25px; }
}

/* ------------------------------ Consent row --------------------------- */
/* The terms checkbox on the sign-up form. Laid out as a grid so the label
   text wraps in its own column instead of running under the box. */
.field-consent { margin-top: 4px; }

.consent {
    display: grid; grid-template-columns: auto 1fr;
    gap: 10px; align-items: start;
    cursor: pointer;
}

.consent input[type="checkbox"] {
    width: 18px; height: 18px; margin: 1px 0 0; padding: 0;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.consent span { font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.consent a { color: var(--accent); font-weight: 500; text-decoration: underline; }
.consent a:hover { color: var(--accent-hover); }

/* The shared .field.has-error rule only paints inputs, and a tinted
   checkbox is easy to miss; colour the sentence as well. */
.field-consent.has-error .consent span { color: var(--danger); }

/* ------------------------------ Legal pages --------------------------- */
/* Long-form prose. Narrower than the marketing page on purpose — these are
   meant to be read, and a 40rem measure is where that stops being a chore. */
.legal {
    max-width: 44rem;
    margin: 0 auto;
    padding: 48px 24px 72px;
}

.legal-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-faint);
    margin-bottom: 10px;
}

.legal-title {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(30px, 5vw, 40px);
    line-height: 1.15; letter-spacing: -.02em;
    margin: 0 0 8px;
}

.legal-meta { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }

/* The summary box. These documents are the ones people skip, so the part
   that actually affects them is stated once, up front, in plain words. */
.legal-callout {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    margin-bottom: 28px;
}

.legal-callout-title {
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-faint);
    margin-bottom: 8px;
}

.legal-callout p:not(.legal-callout-title) { font-size: 15px; line-height: 1.65; }
.legal-callout a { color: var(--accent); text-decoration: underline; }

.legal-intro { font-size: 17px; line-height: 1.7; color: var(--text-muted); margin-bottom: 8px; }

.legal h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: 21px; letter-spacing: -.01em;
    margin: 34px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.legal h3 { font-size: 15px; margin: 20px 0 8px; color: var(--text); }

.legal p { line-height: 1.7; margin-bottom: 12px; color: var(--text-muted); }
.legal p strong { color: var(--text); font-weight: 600; }

.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { line-height: 1.7; margin-bottom: 8px; color: var(--text-muted); }
.legal li strong { color: var(--text); font-weight: 600; }

.legal a { color: var(--accent); text-decoration: underline; }
.legal a:hover { color: var(--accent-hover); }

.legal code {
    font-size: 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 1px 5px; border-radius: 5px;
    color: var(--text);
}

.legal-footer-note {
    margin-top: 34px; padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 14px;
}

@media (max-width: 560px) {
    .legal { padding: 32px 16px 56px; }
    .legal h2 { font-size: 19px; }
}