/* Colours, fonts and patterns come from the theme (themes.css), which sets
   these on <html> and on each preview in the theme picker. What follows are
   the values a theme starts from, reset on every themed element: they would
   otherwise be inherited, and a preview would show the page's pattern. Then
   the values every theme derives from its own colours. */
[data-theme-name] {
    --radius: 8px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bg-pattern: none;
    --card-shadow: none;

    --soon-bg: color-mix(in srgb, var(--soon) 16%, var(--card));
    --overdue-bg: color-mix(in srgb, var(--danger) 14%, var(--card));
    --notice-line: #f97316;
    --notice-bg: color-mix(in srgb, #f97316 18%, var(--card));
    --notice-text: color-mix(in srgb, #f97316 55%, var(--text));
    color: var(--text);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-pattern) var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font: 15px/1.45 var(--font);
}

h1, h2, h3 { margin: 0; font-weight: 600; }
.muted { color: var(--muted); font-weight: normal; }
.error { color: var(--danger); margin: .25rem 0; }
.spacer { flex: 1; }
.pad { padding: 1rem; }

input, textarea, select, button {
    font: inherit;
    color: inherit;
}

input, textarea, select {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
}

input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button {
    padding: .45rem .9rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--card);
    cursor: pointer;
}
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--danger); }
button.subtle { background: none; border-color: transparent; }
button.subtle:hover { border-color: var(--line); }
button.icon { padding: .1rem .4rem; color: var(--muted); }

/* ---- space picker */

.picker { max-width: 28rem; margin: 12vh auto 2rem; padding: 0 1rem; }
.picker h1 { font-size: 2rem; }
.picker-new { display: flex; gap: .5rem; margin: 1.25rem 0 .5rem; }
.picker-new input { flex: 1; }
.picker-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.picker-list a {
    display: block;
    padding: .7rem .9rem;
    margin-bottom: .4rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
}
.picker-list a:hover { border-color: var(--accent); }

/* ---- board */

/* Three columns with equal sides, so the space name sits in the true centre. */
.topbar {
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--card);
}
.topbar-title { min-width: 0; text-align: center; }
.topbar h1 { font-size: 1.2rem; white-space: nowrap; }
.topbar-end { display: flex; justify-content: flex-end; }
.rename.title { width: min(20rem, 60vw); font-size: 1.1rem; font-weight: 600; text-align: center; }

/* The space name is the way to the other spaces; the chevron says so. */
.space-switch {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .15rem .6rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}
.space-switch:hover { background: var(--panel); }
.space-name { overflow: hidden; text-overflow: ellipsis; }
.chevron { color: var(--muted); font-size: .8em; }

/* ---- sync state, top left; empty when all is well */

.sync-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.sync-status.corner-left { position: absolute; top: 1.1rem; left: 1rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.dot.offline { background: var(--muted); }
.dot.pending { background: var(--soon); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.sync-status .short { display: none; }

/* ---- the ⋯ menu */

.menu { position: relative; }
.menu.corner { position: absolute; top: .6rem; right: 1rem; }
.menu-button { padding: .1rem .6rem; font-size: 1.2rem; line-height: 1.3; border-color: transparent; background: none; }
.menu-button:hover, .menu-button[aria-expanded="true"] { background: var(--panel); }
.menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 5;
    min-width: 15rem;
    padding: .35rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / .18);
}
.menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: .35rem 0; }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .45rem .6rem; }
.menu-item:hover { background: var(--panel); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .35rem .6rem; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segmented button { border: 0; border-radius: 0; padding: .2rem .6rem; font-size: .8rem; background: var(--card); }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button.active { background: var(--accent); color: var(--accent-text); }

.banner { padding: .5rem 1rem; background: var(--overdue-bg); margin: 0; }
.banner.notice { background: var(--notice-bg); color: var(--notice-text); border-left: 4px solid var(--notice-line); }

.tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .6rem 1rem 0; }

.board {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem;
    overflow-x: auto;
    min-height: calc(100vh - 4rem);
}

.column {
    flex: 0 0 18rem;
    background: var(--panel);
    border-radius: var(--radius);
    padding: .6rem;
}
.column-new { background: none; padding: 0; }
.column-new input { background: var(--panel); border-style: dashed; }

.column-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; min-height: 1.9rem; }
.column-head h2 { font-size: .95rem; flex: 1; cursor: text; overflow-wrap: anywhere; }
.column-head .rename { flex: 1; padding: .2rem .4rem; }
.section-handle { cursor: grab; color: var(--muted); letter-spacing: -2px; padding: 0 .15rem; user-select: none; touch-action: none; }
.count { color: var(--muted); font-size: .8rem; }

/* An empty list still needs height, or nothing can be dropped into it. */
.todo-list { display: flex; flex-direction: column; gap: .45rem; min-height: 2.5rem; }

.todo {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid transparent;
    border-radius: 6px;
    padding: .55rem .65rem;
    cursor: pointer;
    box-shadow: var(--card-shadow);
}
.todo:hover { border-color: var(--accent); }
.todo-body { flex: 1; min-width: 0; }
.todo h3 { font-size: .95rem; font-weight: 500; overflow-wrap: anywhere; }

.check {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
    padding: 0;
    border: 1.5px solid var(--muted);
    border-radius: 50%;
    background: none;
    color: var(--accent-text);
    font-size: .75rem;
    line-height: 1;
}
.check:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.todo.done .check { background: var(--accent); border-color: var(--accent); }

.todo.done { background: transparent; opacity: .65; }
.todo.done h3 { text-decoration: line-through; color: var(--muted); }

/* A repeating todo's check is dashed: ticking it moves it on, not away. */
.check.repeating { border-style: dashed; }
.todo.flash { animation: done-flash .9s ease-out; }
.todo.flash .check { background: var(--accent); border-color: var(--accent); border-style: solid; }
@keyframes done-flash { from { background: color-mix(in srgb, var(--accent) 25%, var(--card)); } }
.repeat-badge { font-size: .78rem; color: var(--muted); }

.completed { margin-top: .4rem; }
.completed-toggle {
    border: 0;
    background: none;
    padding: .2rem .35rem;
    font-size: .8rem;
    color: var(--muted);
}
.completed-toggle:hover { color: var(--text); }
.completed-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .3rem; }
.todo-description {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .85rem;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.todo-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; align-items: center; }
.expiry { font-size: .78rem; color: var(--muted); }
.todo.soon { border-left-color: var(--soon); }
.todo.soon .expiry { color: var(--soon); }
.todo.overdue { border-left-color: var(--danger); background: var(--overdue-bg); }
.todo.overdue .expiry { color: var(--danger); font-weight: 600; }

.tag {
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .78rem;
    background: var(--panel);
    border: 1px solid var(--line);
}
.tag.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* Non-priority: below the ordered ones, under a quiet label. Empty, it takes
   no room, except during a drag, when it shows where to drop. */
.low-label { margin: .6rem 0 .35rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.todo-list.low-list.empty { min-height: 0; }
body.dragging .todo-list.low-list.empty {
    min-height: 2.5rem;
    margin-top: .5rem;
    border: 1.5px dashed var(--line);
    border-radius: 6px;
}
body.dragging .todo-list.low-list.empty::before {
    content: attr(data-drop-label);
    margin: auto;
    font-size: .8rem;
    color: var(--muted);
}

.dialog .checkbox { flex-direction: row; align-items: baseline; gap: .5rem; font-weight: normal; }
.dialog .checkbox input { width: auto; }

.quick-add { margin-top: .5rem; }
.quick-add input { background: transparent; border-color: transparent; }
.quick-add input:focus { background: var(--card); }

/* Sortable's classes while dragging */
.sortable-ghost { opacity: .35; }
.sortable-chosen .todo { border-color: var(--accent); }

/* ---- editor dialog */

.overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / .4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 1rem;
    overflow-y: auto;
    z-index: 10;
}
.dialog {
    width: 100%;
    max-width: 32rem;
    background: var(--card);
    border-radius: var(--radius);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    box-shadow: 0 10px 40px rgb(0 0 0 / .3);
}
.dialog label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 500; }
.dialog .row { display: flex; gap: .75rem; }
.dialog .row label { flex: 1; }
.dialog-actions { display: flex; gap: .5rem; margin-top: .25rem; }
.dialog .hint { margin: -.4rem 0 0; font-size: .8rem; }

.repeat { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.repeat-label { font-weight: 500; margin-right: auto; }
.repeat select { width: auto; }
.repeat-every { width: 4.5rem; }

.history summary { cursor: pointer; font-size: .85rem; font-weight: 500; }
.history ul { list-style: none; padding: 0; margin: .4rem 0 0; max-height: 12rem; overflow-y: auto; }
.history li { display: flex; justify-content: space-between; align-items: center; padding: .15rem 0; font-size: .85rem; border-bottom: 1px solid var(--line); }
button.small { padding: .1rem .5rem; font-size: .8rem; }

/* ---- phones: sections stack instead of scrolling sideways */

@media (max-width: 640px) {
    /* No room beside the space name for the sentence; the count says enough. */
    .sync-status .long { display: none; }
    .sync-status .short { display: inline; }
    .board { flex-direction: column; align-items: stretch; overflow-x: visible; }
    .column { flex: none; }
    .dialog .row { flex-direction: column; }
}

/* ---- installing by hand */

.dialog h2 { font-size: 1.1rem; }
.install-steps { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }

/* ---- a switch in the menu */

.menu-item.toggle-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pill { font-size: .75rem; padding: .05rem .5rem; border-radius: 999px; background: var(--panel); color: var(--muted); }
.pill.on { background: var(--accent); color: var(--accent-text); }

/* ---- the theme picker: each tile is painted by its own theme */

.theme-picker { max-width: 40rem; }
.theme-picker h3 { font-size: .85rem; margin: .4rem 0 .5rem; color: var(--muted); font-weight: 500; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.swatch {
    display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
    background: var(--bg-pattern) var(--bg); color: var(--text); font-family: var(--font);
    border: 2px solid var(--line); border-radius: 10px;
}
.swatch[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatch-bar { padding: .3rem .5rem; font-size: .8rem; font-weight: 600; background: var(--card); border-bottom: 1px solid var(--line); }
.swatch-panel { margin: .45rem; padding: .35rem; border-radius: 6px; background: var(--panel); display: flex; flex-direction: column; gap: .3rem; }
.swatch-card { display: flex; align-items: center; gap: .35rem; padding: .3rem .35rem; background: var(--card); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--card-shadow); }
.swatch-check { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.swatch-check.on { background: var(--accent); border-color: var(--accent); }
.swatch-line { height: .35rem; flex: 1; border-radius: 3px; background: var(--muted); opacity: .45; }
.swatch-line.short { flex: .6; }

/* ---- a space's own background image */

/* Fixed behind everything; a pseudo-element because background-attachment:
   fixed does nothing on iOS. Washed with the theme's background so text on
   the board stays readable whatever the photo. */
.board-page.has-background::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 30%, transparent)),
        var(--space-background) center / cover no-repeat;
}
.board-page.has-background .column {
    background: color-mix(in srgb, var(--panel) 80%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.board-page.has-background .column-new { background: none; backdrop-filter: none; }
.board-page.has-background .tagbar {
    margin: .6rem 1rem 0; padding: .35rem .6rem; border-radius: var(--radius);
    background: color-mix(in srgb, var(--card) 75%, transparent); backdrop-filter: blur(8px);
}
.board-page.has-background .tagbar + .board { padding-top: .6rem; }

/* ---- signing in, and waiting for approval */

.signin { max-width: 24rem; margin: 8vh auto 2rem; padding: 0 1rem; text-align: center; }
.signin h1 { font-size: 1.8rem; margin-top: .4rem; }
.signin-logo { display: block; margin: 0 auto; border-radius: 16px; }
.signin .banner { border-radius: var(--radius); text-align: left; margin: .8rem 0; }
.signin-form { display: flex; flex-direction: column; gap: .6rem; text-align: left; margin-top: .8rem; }
.signin-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 500; }
.signin-form .error { margin: -.3rem 0 0; font-size: .85rem; }
.signin-form button.primary { margin-top: .3rem; padding: .6rem; }
.switch { margin-top: 1rem; }
.small-print { font-size: .8rem; }
.row-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; }
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; }

.social { display: flex; flex-direction: column; gap: .45rem; margin-top: 1rem; }
.social-button {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
    color: var(--text); text-decoration: none; font-weight: 500;
}
.social-button:hover { border-color: var(--accent); }
/* The providers' own marks (public/icons/brands, see SOURCE.md): served from
   here, never fetched from them. Apple, X and GitHub are black marks; on a
   dark theme they turn white, as their guidelines allow. */
.brand-mark { width: 1.25rem; height: 1.25rem; flex: none; object-fit: contain; }
[data-theme="dark"] .brand-mark[data-provider="apple"],
[data-theme="dark"] .brand-mark[data-provider="x"],
[data-theme="dark"] .brand-mark[data-provider="github"] { filter: invert(1); }
.or { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; margin: .5rem 0 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---- the account in the menu */

.menu-account { display: flex; flex-direction: column; padding: .35rem .6rem; font-size: .85rem; }
.menu-account .muted { overflow: hidden; text-overflow: ellipsis; }
.menu-note { margin: 0; padding: .35rem .6rem; font-size: .8rem; }

/* ---- admin: users */

.dialog.wide { max-width: 44rem; }
.dialog h2 .pill { vertical-align: middle; margin-left: .4rem; }
.user-list, .member-list { list-style: none; padding: 0; margin: 0; max-height: 60vh; overflow-y: auto; }
.user-list li { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.user-list li.status-pending { background: color-mix(in srgb, var(--notice-line) 8%, transparent); margin: 0 -.5rem; padding: .55rem .5rem; }
.user-list li.status-disabled .user-who { opacity: .6; }
.user-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; min-width: 0; }
.user-who .small-print, .user-mail { flex-basis: 100%; }
.user-actions { display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---- sharing */

.member-list li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.member-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-list select { width: auto; }
.share-add { display: flex; gap: .4rem; }
.share-add input { flex: 1; }
.share-add select { width: auto; }
.shared-badge { display: block; font-size: .78rem; color: var(--muted); }

/* A viewer's editor: everything visible, nothing changeable. */
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
fieldset.plain:disabled input, fieldset.plain:disabled textarea, fieldset.plain:disabled select { opacity: .85; }
.check:disabled { cursor: default; opacity: .6; }

/* ---- profile */

.dialog.profile { max-width: 34rem; }
.profile section { border-top: 1px solid var(--line); padding-top: .7rem; display: flex; flex-direction: column; gap: .45rem; }
.profile h3 { font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.profile .small-print { margin: 0; }
.profile-form { display: flex; flex-direction: column; gap: .45rem; }
.profile-form label, .profile .proof { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 500; }
.profile-form button { align-self: flex-start; }
.row-buttons, .link-buttons { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.link-buttons .social-button { padding: .35rem .6rem; font-size: .85rem; }
.qr { background: #fff; padding: .5rem; border-radius: var(--radius); align-self: flex-start; line-height: 0; }
.qr svg { width: 180px; height: 180px; }
code.secret { word-break: break-all; font-size: .8rem; }
.codes { columns: 2; margin: .2rem 0 .5rem; padding-left: 1.4rem; font-size: .9rem; }
.recovery { background: var(--panel); border-radius: var(--radius); padding: .6rem .8rem; }
.recovery p { margin: 0 0 .3rem; font-size: .85rem; }
.signin-form button.link { align-self: center; }
.signin-form p { margin: 0; }

/* ---- verification, devices, deleting */

.banner.flash { position: sticky; top: 0; z-index: 20; }
.waiting-step { text-align: left; margin: .8rem 0; }
.waiting-step .row-actions { justify-content: flex-start; margin-top: .4rem; }
.pill.warn { background: var(--notice-bg); color: var(--notice-text); }
.profile .danger-zone h3 { color: var(--danger); }
.device-switch { border: 1px solid var(--line); border-radius: var(--radius); }
.member-list li.invited .member-who strong { font-weight: 500; }

/* ---- not production: a badge in the corner (resources/views/app.blade.php) */

.env-badge {
    position: fixed; left: .5rem; bottom: .5rem; z-index: 1000;
    padding: .15rem .55rem; border-radius: 999px;
    font: 700 .7rem/1.4 system-ui, sans-serif; letter-spacing: .06em; color: #fff;
    background: repeating-linear-gradient(-45deg, #ea580c 0 8px, #f97316 8px 16px);
    box-shadow: 0 1px 4px rgb(0 0 0 / .25);
    pointer-events: none;   /* never in the way of a click */
    opacity: .9;
}

/* ---- server status (admins) */

.server-status { max-width: 48rem; }
.status-group h3 { font-size: .9rem; margin: .6rem 0 .3rem; color: var(--muted); }
.status-group ul { list-style: none; padding: 0; margin: 0; }
.status-group > ul > li { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.state-dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; margin-top: .35rem; background: var(--muted); }
.state-ok .state-dot { background: #16a34a; }
.state-warn .state-dot { background: #f59e0b; }
.state-error .state-dot { background: var(--danger); }
.state-off .state-dot { background: transparent; border: 2px solid var(--muted); }
.status-body { flex: 1; min-width: 0; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.state-word { font-size: .75rem; color: var(--muted); }
.state-error .state-word { color: var(--danger); font-weight: 600; }
.state-warn .state-word { color: #b45309; font-weight: 600; }
.status-detail { font-size: .85rem; overflow-wrap: anywhere; }
.status-result { margin-top: .3rem; font-size: .85rem; padding: .3rem .5rem; border-radius: 6px; background: var(--panel); }
.status-result.state-ok { border-left: 3px solid #16a34a; }
.status-result.state-warn { border-left: 3px solid #f59e0b; }
.status-result.state-error { border-left: 3px solid var(--danger); }
.status-help { margin-top: .35rem; font-size: .85rem; }
.status-help summary { cursor: pointer; color: var(--accent); }
.status-help ol { margin: .3rem 0 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .2rem; }
.status-help code, .status-detail code { font-size: .8rem; background: var(--panel); padding: 0 .25rem; border-radius: 4px; }
.small-link { font-size: .8rem; color: var(--accent); }
.pill.bad { background: var(--danger); color: #fff; }