/* ---------------------------------------------------------------------
   Design tokens
   A quiet, paper-and-ink palette: warm neutrals, one restrained accent
   (sumi-ink blue) for action, a separate muted red reserved only for
   destructive actions. Generous space over decoration; hairline dividers
   instead of boxed cards; type does most of the work.
------------------------------------------------------------------------ */
:root {
    color-scheme: light dark;

    --bg: #faf8f5;
    --bg-raised: #ffffff;
    --fg: #2a2724;
    --fg-muted: #857f74;
    --fg-faint: #b3ac9f;
    --border: #e7e1d6;
    --border-strong: #d3cabb;

    --accent: #3e5c76;
    --accent-fg: #ffffff;
    --accent-tint: #e9eef2;

    --danger: #9a3b3b;
    --danger-fg: #ffffff;
    --danger-tint: #f5e9e7;

    --success: #5f7a52;
    --success-tint: #edf1e8;

    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: ui-serif, Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    --radius: 3px;
    --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #171614;
        --bg-raised: #201e1a;
        --fg: #e9e3d8;
        --fg-muted: #9c9488;
        --fg-faint: #635c50;
        --border: #322f28;
        --border-strong: #47433a;

        --accent: #8badc9;
        --accent-fg: #14202b;
        --accent-tint: #1f2c36;

        --danger: #cf8a7f;
        --danger-fg: #2b1512;
        --danger-tint: #33201d;

        --success: #9db98a;
        --success-tint: #202a1b;
    }
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--fg);
    background: var(--bg);
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 var(--space-4);
}

h1 { font-size: 1.6rem; letter-spacing: 0.01em; }
h2 { font-size: 1.15rem; color: var(--fg); }
h3 { font-size: 1rem; }

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

a:hover {
    border-bottom-color: currentColor;
}

p.error {
    color: var(--danger);
    background: var(--danger-tint);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
}

p.muted, span.muted {
    color: var(--fg-muted);
    font-size: 0.9rem;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-8) 0;
}

/* ---------------------------------------------------------------------
   Layout
------------------------------------------------------------------------ */
main {
    max-width: 32rem;
    margin: 4rem auto;
    padding: 0 1.5rem;
}

main.wide {
    max-width: 56rem;
    margin: var(--space-8) auto var(--space-12);
    padding: 0 var(--space-6);
}

.topnav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border);
    background: var(--bg-raised);
}

.topnav .brand {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: var(--fg);
    margin-right: auto;
}

.topnav a,
.topnav .link-button {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
}

.topnav a:hover,
.topnav .link-button:hover {
    color: var(--fg);
}

.topnav-logout {
    display: inline;
    margin: 0;
}

section {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border);
}

section:last-of-type {
    border-bottom: none;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.breadcrumb {
    font-size: 0.85rem;
    color: var(--fg-muted);
    margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------
   Forms
------------------------------------------------------------------------ */
form {
    display: block;
}

form.inline-form {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    margin: 0;
}

form.stacked-form {
    display: grid;
    gap: var(--space-3);
    max-width: 28rem;
    margin-bottom: var(--space-6);
}

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3);
}

label {
    display: block;
    font-size: 0.82rem;
    color: var(--fg-muted);
}

label > input[type="text"],
label > input[type="url"],
label > input[type="password"],
label > textarea {
    display: block;
    width: 100%;
    margin-top: var(--space-1);
}

input[type="text"],
input[type="url"],
input[type="password"],
textarea {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-raised);
    color: var(--fg);
    font-size: 0.95rem;
    font-family: inherit;
}

textarea {
    width: 100%;
    resize: vertical;
    line-height: 1.5;
}

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

.checkbox-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--fg);
}

.checkbox-field input {
    width: auto;
}

button,
.button {
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-fg);
    cursor: pointer;
}

button:hover {
    opacity: 0.9;
}

button.secondary {
    background: transparent;
    color: var(--accent);
}

button.danger {
    background: transparent;
    border-color: var(--danger-tint);
    color: var(--danger);
}

button.danger:hover {
    background: var(--danger-tint);
}

button.link-button {
    padding: 0;
    border: none;
    background: none;
    color: var(--fg-muted);
    font-size: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

button.link-button:hover {
    color: var(--fg);
    border-bottom-color: currentColor;
    opacity: 1;
}

button.link-button.danger {
    color: var(--danger);
}

/* ---------------------------------------------------------------------
   Status tags / toggles
------------------------------------------------------------------------ */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--border);
    color: var(--fg-muted);
    border: none;
    cursor: default;
}

.tag.on {
    background: var(--success-tint);
    color: var(--success);
}

.tag.off {
    background: var(--border);
    color: var(--fg-faint);
}

a.tag,
button.tag {
    cursor: pointer;
}

a.tag:hover,
button.tag:hover {
    filter: brightness(0.95);
    opacity: 1;
}

.tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

/* ---------------------------------------------------------------------
   Tables
------------------------------------------------------------------------ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

thead th {
    text-align: left;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    font-weight: 500;
    padding: 0 var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--border);
}

tbody td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

tbody tr:last-child td {
    border-bottom: none;
}

td.actions {
    text-align: right;
    white-space: nowrap;
}

td.actions form {
    display: inline;
}

/* ---------------------------------------------------------------------
   Disclosure (native <details>, no JS) for add/edit forms
------------------------------------------------------------------------ */
details {
    margin-bottom: var(--space-2);
}

details summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 0.85rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: "+";
    display: inline-block;
    width: 1em;
    color: var(--fg-faint);
}

details[open] summary::before {
    content: "\2212";
}

details[open] summary {
    color: var(--fg);
    margin-bottom: var(--space-3);
}

details .stacked-form {
    padding: var(--space-4);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ---------------------------------------------------------------------
   Client list
------------------------------------------------------------------------ */
.client-list {
    display: grid;
    gap: 0;
}

.client-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius);
}

.client-row:last-child {
    border-bottom: none;
}

.client-row:hover {
    background: var(--accent-tint);
}

.client-row .name {
    flex: 1;
    font-size: 1.02rem;
    /* Row title, not body-text -- no underline (it's a flex item stretched
       to fill the row, so a text-decoration underline would span the whole
       row width, not just the visible text). The row background-tint on
       hover above is the affordance instead. */
    border-bottom: none;
}

.client-row .meta {
    color: var(--fg-muted);
    font-size: 0.82rem;
}

.client-row .tags {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Markdown doc content
------------------------------------------------------------------------ */
.doc-content {
    font-size: 0.98rem;
}

.doc-content h1,
.doc-content h2,
.doc-content h3 {
    margin-top: var(--space-6);
}

.doc-content p {
    margin: 0 0 var(--space-4);
}

.doc-content ul,
.doc-content ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.4rem;
}

.doc-content li {
    margin-bottom: var(--space-1);
}

.doc-content blockquote {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-4);
    border-left: 2px solid var(--border-strong);
    color: var(--fg-muted);
}

.doc-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--accent-tint);
    padding: 0.1em 0.35em;
    border-radius: var(--radius);
    font-size: 0.88em;
}

.doc-content pre {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    overflow-x: auto;
    margin: 0 0 var(--space-4);
}

.doc-content pre code {
    background: none;
    padding: 0;
}

.doc-preview {
    min-height: 4rem;
    padding: var(--space-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}

.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin: var(--space-4) 0;
    align-items: start;
}

@media (max-width: 42rem) {
    .editor-grid {
        grid-template-columns: 1fr;
    }
}

.editor-grid textarea {
    min-height: 22rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
}