/*========================
  Tokens
========================*/

:root {
    --bg: #15181a;
    --fg: #f1ece2;
    --fg-dim: rgb(241 236 226 / 0.62);
    --fg-faint: rgb(241 236 226 / 0.30);
    --line: rgb(241 236 226 / 0.18);
    --line-faint: rgb(241 236 226 / 0.10);
    --surface: rgb(241 236 226 / 0.07);
    --surface-raised: rgb(241 236 226 / 0.04);
    --surface-strong: rgb(241 236 226 / 0.13);
    --panel: #1c2023;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --ease: 180ms ease-in-out;
    --radius: 8px;

    /* Spacing scale. Every view and the tab bar share --gutter, so the three
       views line up on the same left and right edge and switching between them
       never shifts the content sideways. */
    --tabs-h: 2.75rem;
    --gutter: clamp(1rem, 3vw, 2rem);
    --gutter-y: clamp(1rem, 2.5vw, 1.75rem);
    --stack: 1.25rem;
}

/*========================
  Base
========================*/

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

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--mono);
    font-size: clamp(14px, 1.6vw, 17px);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Targeted resets — the old `all: unset` also stripped focus rings. */
button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

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

textarea {
    resize: vertical;
}

[hidden] {
    display: none !important;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

h1,
h2,
p {
    margin: 0;
}

:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
    border-radius: 2px;
}

/*========================
  Views
========================*/

/* One screen each, clearing the fixed tab bar and scrolling inside themselves
   rather than moving the document. A view that holds its own scroller (the
   bookmark list, the board) turns this one off and delegates. */
.view {
    height: 100svh;
    padding: var(--gutter-y) var(--gutter) calc(var(--tabs-h) + 0.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*========================
  Header
========================*/

#view-start {
    display: flex;
    flex-direction: column;
}

#header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 auto;
}

/* Light rather than medium: at 11rem the stems get heavy enough to dominate
   the page, and 300 is one of the weights actually loaded, so this thins the
   clock for real instead of leaving the browser to fake it. */
.time {
    display: block;
    font-size: clamp(3.5rem, 13vw, 9.5rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.blink {
    animation: blinker 2s ease-in-out infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.date {
    font-size: clamp(0.8rem, 1.6vw, 1.05rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
    margin: 0;
}

/* Set back from the date so it reads as a second, lesser fact rather than
   part of the sentence. */
.week {
    margin-left: 0.4em;
    color: var(--fg-faint);
    font-variant-numeric: tabular-nums;
}

#terminal {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.6rem;
}

#terminal label {
    font-size: 1.3rem;
    color: var(--fg-dim);
    user-select: none;
}

#input {
    flex: 1;
    min-width: 0;
    font-size: 1.3rem;
    background: transparent;
    border: none;
    outline: none;
    caret-color: var(--fg);
}

#input::placeholder {
    color: var(--fg-faint);
}

/*========================
  Message / help panel
========================*/

#message {
    margin-top: var(--stack);
    max-height: 52vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 0.9rem;
}

.message-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.message-chips code {
    padding: 0.15em 0.6em;
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg-dim);
}

/* One-line result of a command that acted on the page instead of leaving it. */
.message-notice {
    color: var(--fg-dim);
    max-width: 60ch;
}

.help-intro {
    color: var(--fg-dim);
    margin-bottom: var(--stack);
}

.help-sections {
    columns: 20rem auto;
    column-gap: 2.5rem;
}

.help-section {
    break-inside: avoid;
    margin-bottom: 1.4rem;
}

.help-group {
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-faint);
    margin-bottom: 0.4rem;
}

.help-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 1.25rem;
    margin: 0;
}

.help-grid dt {
    color: var(--fg);
    font-weight: 500;
    white-space: nowrap;
}

.help-grid dd {
    margin: 0;
    color: var(--fg-dim);
    overflow-wrap: anywhere;
}

/*========================
  Bookmarks
========================*/

#view-bookmarks {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* #url-list is the scroller here */
}

#bookmark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: var(--stack);
}

#btn-add {
    display: grid;
    place-items: center;
    flex: none;
    height: 2.75rem;
    width: 2.75rem;
    font-size: 1.8rem;
    line-height: 1;
    background-color: var(--fg);
    color: var(--bg);
    border-radius: 0;
    transition: opacity var(--ease);
}

#btn-add:hover {
    opacity: 0.7;
}

#tag-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    gap: 0.5rem;
}

.tag {
    font-size: 0.95rem;
    font-style: italic;
    user-select: none;
}

/* Visually hidden, but still focusable and announced. */
.tag-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.tag span {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.35em 0.9em;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}

.tag span em {
    font-style: normal;
    font-size: 0.8em;
    color: var(--fg-faint);
}

.tag-input:hover+span,
.tag-input:focus-visible+span {
    border-color: var(--fg);
    background-color: var(--surface);
}

.tag-input:focus-visible+span {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
}

.tag-input:checked+span {
    background-color: var(--fg);
    border-color: var(--fg);
    color: var(--bg);
}

.tag-input:checked+span em {
    color: rgb(21 24 26 / 0.55);
}

#searchbar {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 300;
    background: transparent;
    border: 0;
    outline: none;
    padding: 0.3rem 0;
}

#searchbar::placeholder {
    color: var(--fg-faint);
}

#searchbar::-webkit-search-cancel-button {
    filter: invert(1);
}

hr {
    margin: 0.75rem 0 var(--stack);
    height: 1px;
    background-color: var(--line);
    border: 0;
}

#url-list {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    grid-auto-rows: max-content;
    gap: 0.15rem 2rem;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.url-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    transition: background-color var(--ease);
}

.url-item:hover {
    background-color: var(--surface);
}

.url {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    color: var(--fg-dim);
    white-space: nowrap;
    transition: color var(--ease);
}

.url:hover,
.url:focus-visible {
    color: var(--fg);
}

.url-host {
    color: var(--fg-faint);
    font-size: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.url-favicon {
    flex: none;
    height: 16px;
    width: 16px;
    object-fit: contain;
}

.url-favicon-fallback {
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: var(--bg);
    background-color: var(--fg-faint);
    border-radius: 3px;
}

.url-delete {
    flex: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 0.25rem;
    color: var(--fg-faint);
    opacity: 0;
    transition: opacity var(--ease), color var(--ease);
}

.url-item:hover .url-delete,
.url-delete:focus-visible {
    opacity: 1;
}

.url-delete:hover {
    color: var(--fg);
}

.url-empty {
    color: var(--fg-faint);
    font-style: italic;
    padding: 0.5rem 0;
}

/*========================
  Add-bookmark dialog
========================*/

#modal-addbookmark {
    width: min(30rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 0;
    background-color: #1c2023;
    color: var(--fg);
}

#modal-addbookmark::backdrop {
    background-color: rgb(0 0 0 / 0.7);
    backdrop-filter: blur(3px);
}

.modal-content {
    padding: 2rem;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}

.form-group label {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    color: var(--fg-dim);
}

.hint {
    color: var(--fg-faint);
    font-style: italic;
}

.form-input {
    padding: 0.5rem 0.7rem;
    background-color: rgb(0 0 0 / 0.25);
    border: 1px solid var(--line);
    border-radius: 0;
    outline: none;
    transition: border-color var(--ease);
}

.form-input::placeholder {
    color: var(--fg-faint);
}

.form-input:hover,
.form-input:focus {
    border-color: var(--fg);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.btn {
    padding: 0.5rem 1.2rem;
    border-radius: 0;
    transition: opacity var(--ease), background-color var(--ease);
}

.btn-primary {
    background-color: var(--fg);
    color: var(--bg);
    font-weight: 500;
}

.btn-primary:hover {
    opacity: 0.75;
}

.btn-ghost {
    color: var(--fg-dim);
}

.btn-ghost:hover {
    background-color: var(--surface);
    color: var(--fg);
}

/*========================
  Responsive & motion
========================*/

@media (max-width: 640px) {
    #terminal label,
    #input {
        font-size: 1.05rem;
    }

    #message {
        max-height: 30vh;
    }

    .help-grid {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .help-grid dd {
        margin-bottom: 0.6rem;
    }

    .url {
        white-space: normal;
    }

    .url-delete {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*========================
  View tabs
========================*/

.tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--tabs-h);
    padding: 0 var(--gutter);
}

.tab {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--fg-faint);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: color var(--ease), border-color var(--ease);
}

.tab:hover {
    color: var(--fg-dim);
}

.tab[aria-selected="true"] {
    color: var(--fg);
    border-bottom-color: var(--fg);
}

/*========================
  Horizon — board
========================*/

#view-horizon {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    overflow: hidden;
    /* the board and each task list scroll on their own */
}

/* ── Toolbar ─────────────────────────────────────────────────────────── */

.toolbar {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex: none;
}

.input-group {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 0;
    transition: border-color var(--ease);
}

.input-group:focus-within {
    border-color: var(--fg);
}

#task-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    background: transparent;
    border: 0;
    outline: none;
}

#task-input::placeholder {
    color: var(--fg-faint);
}

.select {
    position: relative;
    flex: none;
}

/* `appearance: none` drops the native look so the button can carry the same
   chevron the old <select> used, placed against the text instead of stuck in
   a reserved gutter. Its colour is --fg-dim spelled out, since a data URI
   cannot read a custom property. */
.select-trigger {
    display: block;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 1.7rem 0 0.8rem;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F1ECE2' stroke-opacity='.62' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 0.6rem auto;
    border: 0;
    border-left: 1px solid var(--line-faint);
    outline: none;
    color: var(--fg-dim);
    font: inherit;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.select-list {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 20;
    min-width: 100%;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background-color: var(--panel);
    border: 1px solid var(--line);
}

.select-list [role="option"] {
    padding: 0.4rem 0.7rem;
    color: var(--fg-dim);
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.select-list [role="option"]:hover,
.select-list [role="option"]:focus {
    background-color: var(--surface);
    color: var(--fg);
    outline: none;
}

.select-list [role="option"].is-selected {
    color: var(--fg);
}

.toolbar-actions {
    display: flex;
    gap: 0.5rem;
    flex: none;
}

/* Stretched to the toolbar's height by .toolbar's align-items, so the width
   is pinned to match via aspect-ratio instead of a fixed value - a fixed
   width drifted out of square whenever the Add button's height changed. */
.btn-icon {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0;
    color: var(--fg-dim);
    border: 1px solid var(--line);
    border-radius: 0;
    transition: color var(--ease), border-color var(--ease), opacity var(--ease);
}

.btn-icon:hover {
    color: var(--fg);
    border-color: var(--fg);
}

.btn-icon[aria-pressed="true"] {
    color: var(--fg);
    border-color: var(--fg);
}

#ai-toggle.loading {
    opacity: 0.4;
    pointer-events: none;
}

.icon {
    width: 1.15em;
    height: 1.15em;
    display: block;
}

/* ── Columns ─────────────────────────────────────────────────────────── */

.board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    gap: 0.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--surface-raised);
    border: 1px solid var(--line-faint);
    border-radius: 0;
    transition: background-color var(--ease), border-color var(--ease);
}

.column.drag-over {
    background-color: var(--surface);
    border-color: var(--fg-faint);
}

.column-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex: none;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--line-faint);
}

.column-header h2 {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.column-header .meta {
    font-size: 0.7rem;
    color: var(--fg-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Add a task from within a column ─────────────────────────────────── */

.column-add {
    flex: 1 0 auto;
    padding: 0.35rem;
}

/* An empty column puts its add button straight under the header instead of
   pinning it to the bottom of all that blank space. */
.column:has(.task-list:empty) .column-add {
    order: 0;
    flex: 0 0 auto;
}

.column:has(.task-list:empty) .task-list {
    order: 1;
    flex: 1 1 auto;
}

.column-add-btn {
    width: 100%;
    text-align: left;
    padding: 0.35rem 0.45rem;
    border-radius: 0;
    font-size: 0.9rem;
    color: var(--fg-faint);
    opacity: 0;
    transition: opacity var(--ease), color var(--ease), background-color var(--ease);
}

.column:hover .column-add-btn,
.column:focus-within .column-add-btn {
    opacity: 1;
}

.column-add-btn:hover {
    color: var(--fg);
    background-color: var(--surface);
}

.column-add-input {
    width: 100%;
    padding: 0.35rem 0.45rem;
    font-size: 0.9rem;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0;
    outline: none;
}

.column-add-input::placeholder {
    color: var(--fg-faint);
}

/* ── Tasks ───────────────────────────────────────────────────────────── */

.task-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 0 1 auto;
    min-height: 0;
    padding: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.task {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    background-color: var(--surface);
    border: 1px solid var(--line-faint);
    border-radius: 0;
}

.task.dragging {
    opacity: 0.4;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: grab;
}

.task-row input[type="checkbox"] {
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--fg);
    border-radius: 0;
    cursor: pointer;
}

.task-pie {
    position: relative;
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: conic-gradient(var(--fg-dim) calc(var(--pct) * 1%), var(--surface-strong) 0);
}

.task-pie-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 400;
    color: #fff;
    mix-blend-mode: difference;
}

.task-row span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.task.done .task-row span {
    color: var(--fg-faint);
    text-decoration: line-through;
}

.delete-btn {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    color: var(--fg-faint);
    opacity: 0;
    transition: opacity var(--ease), color var(--ease);
}

.delete-btn:hover {
    color: var(--fg);
}

.task:hover .delete-btn,
.task:focus-within .delete-btn {
    opacity: 1;
}

/* ── Task notes (markdown) ───────────────────────────────────────────── */

.task-details {
    display: flex;
    flex-direction: column;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--line-faint);
}

.task-notes {
    min-height: 10rem;
    padding: 0.4rem;
    font-size: 0.85rem;
    background-color: rgb(0 0 0 / 0.25);
    border: 1px solid var(--line);
    border-radius: 0;
    outline: none;
}

.task-preview {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--fg-dim);
    overflow-wrap: anywhere;
}

.task-preview.empty {
    font-style: italic;
    color: var(--fg-faint);
}

.md-check {
    color: var(--fg-faint);
    margin-right: 0.15em;
    cursor: pointer;
}

.md-check.is-done {
    color: var(--fg-dim);
}

.md-check:hover {
    color: var(--fg);
}

.md-check:focus-visible {
    outline: 1px solid var(--fg-faint);
    outline-offset: 1px;
}

/* `[[key:value]]` metadata, shown raw in the editor and as a chip here. */
.md-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    /* Bottom margin too: chips wrap onto their own row in a narrow column. */
    margin: 0 0.3em 0.25em 0;
    padding: 0 0.5em;
    font-size: 0.85em;
    line-height: 1.6;
    background-color: var(--surface);
    border: 1px solid var(--line-faint);
    border-radius: 999px;
}

.md-tag-key {
    font-style: normal;
    font-size: 0.85em;
    color: var(--fg-faint);
}

.md-tag-value {
    font-weight: 400;
    color: var(--fg);
}

.edit-btn {
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.15rem 0;
    font-size: 0.75rem;
    color: var(--fg-faint);
    transition: color var(--ease);
}

.edit-btn:hover {
    color: var(--fg);
}

.task-preview a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.task-preview code {
    padding: 0 0.25em;
    background-color: var(--surface-strong);
    border-radius: 0;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.board-footer {
    display: flex;
    flex: none;
}

.ai-status {
    font-size: 0.75rem;
    color: var(--fg-faint);
    font-variant-numeric: tabular-nums;
}

/*========================
  Horizon — responsive
========================*/

@media (max-width: 640px) {
    .tabs {
        gap: 1rem;
    }

    .toolbar {
        flex-wrap: wrap;
    }

    .input-group {
        flex-basis: 100%;
    }

    .toolbar-actions {
        margin-left: auto;
    }

    /* One column per screen, snapping so a swipe always lands on a whole
       column rather than halfway between two. */
    .board {
        grid-auto-columns: 100%;
        scroll-snap-type: x mandatory;
    }

    .column {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .delete-btn,
    .column-add-btn {
        opacity: 1;
    }
}