/* Bounded interactive UI.
 *
 * A night-dark masthead (when the system fetches) sits above a daylight
 * work surface (when you read). The delivery-window track renders at the
 * boundary between the two. Monospace is the product's own voice — feed
 * slugs, the filter DSL, window JSON — the sans carries prose. No
 * webfonts: the server must work self-hosted and offline.
 */

:root {
    --night: #17222d;
    --night-raised: #22303f;
    --night-line: #2e4054;
    --night-text: #e8eef4;
    --night-muted: #8fa2b4;
    --day: #f2f4f6;
    --surface: #ffffff;
    --ink: #212c37;
    --muted: #5d6b79;
    --line: #d9e1e8;
    --line-soft: #e7edf2;
    --dawn: #ffad54;
    --dawn-deep: #e9821e;
    --signal: #bc4b00;
    --warn: #8a5a00;
    --danger: #a63d33;
    --danger-soft: #f8edeb;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo,
        Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial,
        sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--day);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
}

a {
    color: var(--signal);
}

code {
    font-family: var(--mono);
    font-size: 0.92em;
    background: #e8edf1;
    padding: 1px 4px;
    border-radius: 3px;
}

:focus-visible {
    outline: 2px solid var(--dawn-deep);
    outline-offset: 1px;
}

.container {
    max-width: 860px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* --- masthead ------------------------------------------------------- */

.masthead {
    background: var(--night);
    color: var(--night-text);
}

.masthead-inner {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-top: 16px;
    padding-bottom: 15px;
}

.wordmark {
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--night-text);
    text-decoration: none;
}

.wb {
    color: var(--dawn);
    font-weight: 400;
}

.site-nav {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex: 1;
}

.site-nav a {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--night-muted);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover {
    color: var(--night-text);
}

.site-nav a.here {
    color: var(--night-text);
    border-bottom-color: var(--dawn);
}

.site-nav a.crumb {
    margin-left: auto;
}

.who {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--night-muted);
}

.who-out {
    color: var(--night-muted);
}

.who-out:hover {
    color: var(--night-text);
}

/* --- the delivery-window track -------------------------------------- */

.trackbar {
    background: var(--night);
}

.trackbar-inline {
    border: 1px solid var(--night-line);
    border-radius: 6px;
    overflow: hidden;
    margin: 10px 0 18px;
}

/* In a panel the track sits between the JSON and its note, so it keeps the
 * note's rhythm rather than the edit form's trailing gap. */
.panel .trackbar-inline {
    margin-bottom: 0;
}

.track-ribbon {
    position: relative;
    height: 18px;
    background: #0f1721;
    overflow: hidden;
}

.track-open {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(
        180deg,
        #ffc98c 0%,
        var(--dawn) 55%,
        var(--dawn-deep) 100%
    );
}

.track-tick {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    background: rgba(233, 238, 244, 0.22);
}

.track-now {
    position: absolute;
    top: 0;
    height: 100%;
    width: 2px;
    background: #ffffff;
    box-shadow: 0 0 5px rgba(255, 173, 84, 0.9);
}

.track-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 7px;
    padding-bottom: 9px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--night-muted);
}

.trackbar-inline .track-meta {
    padding-left: 12px;
    padding-right: 12px;
}

.track-state {
    color: #c9d5e0;
    text-align: right;
}

.track-bad {
    color: #ffb3a9;
}

.trackbar-off .track-ribbon,
.trackbar-invalid .track-ribbon {
    opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
    .track-open {
        transform-origin: left center;
        animation: window-opens 0.5s ease-out;
    }

    @keyframes window-opens {
        from {
            transform: scaleX(0);
        }
    }
}

/* --- page structure -------------------------------------------------- */

.page {
    padding-top: 28px;
    padding-bottom: 72px;
}

.page-title {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 6px 0 20px;
    overflow-wrap: anywhere;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--muted);
    margin: 42px 0 14px;
}

.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.lede {
    color: var(--muted);
    font-size: 14.5px;
    max-width: 62ch;
    margin: 0 0 22px;
}

/* --- panels, rows, empty states -------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 18px 20px;
}

.panel-actions {
    margin: 14px 0 0;
}

.rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 16px;
}

.row-main {
    flex: 1;
    min-width: 0;
}

.row-name {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

a.row-name {
    color: var(--signal);
    text-decoration: none;
}

a.row-name:hover {
    text-decoration: underline;
}

.row-sub {
    font-size: 13px;
    color: var(--muted);
}

.row-url {
    overflow-wrap: anywhere;
    margin-top: 2px;
}

.row-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.row-end form {
    margin: 0;
}

.empty {
    border: 1px dashed #c2ccd5;
    border-radius: 6px;
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.code {
    background: var(--day);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-x: auto;
    margin: 0;
}

.code-scroll {
    max-height: 260px;
    overflow-y: auto;
}

.note {
    color: var(--muted);
    font-size: 13.5px;
    margin: 10px 0 0;
}

/* --- source detail: facts, activity, key-values, chips ---------------- */

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fact {
    flex: 1;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 16px;
}

.fact-value {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
}

.fact-time {
    font-size: 14px;
    padding: 7px 0 3px;
}

.fact-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.activity {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 64px;
    border-bottom: 1px solid var(--line);
}

.abar {
    flex: 1;
    min-height: 2px;
    background: var(--signal);
    border-radius: 2px 2px 0 0;
}

.abar-zero {
    background: var(--line-soft);
}

.activity-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.kv {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 4px 0;
}

.kv-key {
    flex: 0 0 170px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.kv-val {
    font-family: var(--mono);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    font-family: var(--mono);
    font-size: 12.5px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--signal);
    text-decoration: none;
}

.chip:hover {
    border-color: var(--signal);
}

.row-recency {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-right: 6px;
}

.recency {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
}

.recency-warn {
    color: var(--warn);
}

.recency-stale {
    color: var(--danger);
    font-weight: 600;
}

.item-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line);
}

.item-title:hover {
    color: var(--signal);
    text-decoration-color: var(--signal);
}

/* --- one stored item --------------------------------------------------- */

.trail {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 0 0 6px;
}

/* Remote HTML, so it renders in a sandboxed frame rather than in the page. A
 * frame cannot size itself to its content without scripting it, which is the
 * thing the sandbox is for, so it starts a screenful tall, scrolls, and can be
 * dragged taller for a long post. */
.stored-body {
    display: block;
    width: 100%;
    height: 360px;
    resize: vertical;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

/* --- buttons ---------------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--mono);
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: none;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--night);
    color: var(--night-text);
}

.btn-primary:hover {
    background: var(--night-raised);
}

.btn-quiet {
    background: var(--surface);
    border-color: var(--line);
    color: var(--muted);
}

.btn-quiet:hover {
    color: var(--ink);
    border-color: var(--muted);
}

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

.btn-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

.btn-sm {
    font-size: 12px;
    padding: 5px 10px;
}

/* --- forms ------------------------------------------------------------ */

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 6px;
}

input[type="text"],
input[type="url"],
input[type="password"],
select,
textarea {
    width: 100%;
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid #c6d0d9;
    border-radius: 5px;
    padding: 9px 11px;
}

textarea {
    line-height: 1.5;
    min-height: 110px;
    resize: vertical;
}

textarea:disabled {
    background: var(--day);
    color: var(--muted);
}

.textarea-tall {
    min-height: 280px;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--dawn-deep);
}

.field-check {
    display: flex;
    align-items: center;
    gap: 9px;
}

.field-check label {
    margin: 0;
    font-family: var(--sans);
    font-size: 14.5px;
    letter-spacing: 0;
    color: var(--ink);
}

.create-row {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.create-row input,
.create-row select {
    flex: 1;
    min-width: 0;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.error-box {
    border-left: 3px solid var(--danger);
    background: var(--danger-soft);
    color: #6d2a23;
    padding: 12px 14px;
    border-radius: 0 5px 5px 0;
    margin: 0 0 18px;
    font-size: 14px;
}

/* --- help / examples -------------------------------------------------- */

.help {
    font-size: 14px;
}

.help h4 {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin: 28px 0 8px;
}

.help ul {
    padding-left: 20px;
    margin: 8px 0;
}

.help p {
    margin: 8px 0;
}

.example {
    margin: 0 0 14px;
}

.example-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 4px;
}

.use-example {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--signal);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

/* --- login (full night) ----------------------------------------------- */

.night-body {
    background: var(--night);
    color: var(--night-text);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 340px;
}

.login-mark {
    font-family: var(--mono);
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 4px;
}

.login-tag {
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: var(--night-muted);
    margin: 0 0 30px;
}

.night-body .field label {
    color: var(--night-muted);
}

.night-body input[type="text"],
.night-body input[type="password"] {
    background: #101a24;
    border-color: var(--night-line);
    color: var(--night-text);
}

.night-error {
    font-family: var(--mono);
    font-size: 13px;
    color: #ffb3a9;
    margin: 0 0 16px;
}

.btn-dawn {
    width: 100%;
    background: var(--dawn);
    color: #221507;
    font-weight: 600;
    font-size: 14px;
    padding: 11px;
}

.btn-dawn:hover {
    background: #ffbd75;
}

/* --- small screens ---------------------------------------------------- */

@media (max-width: 620px) {
    .masthead-inner {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .site-nav {
        order: 3;
        flex-basis: 100%;
    }

    .row {
        flex-wrap: wrap;
    }

    .create-row {
        flex-direction: column;
    }

    .track-meta {
        flex-direction: column;
        gap: 2px;
    }

    .track-state {
        text-align: left;
    }
}