/*
 * The site theme, for pages that are part of the application: the index, the
 * post viewer, the editor, the invite and key pages.
 *
 * Published posts under /posts/ deliberately do not use this file. They keep
 * their own copy of the CSS inline so that each one is a self contained
 * document that renders correctly on its own.
 */

:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --link-color: #0066cc;
    --header-color: #333333;
    --button-bg: #0066cc;
    --button-text: #ffffff;
    --button-secondary-bg: #6c757d;
    --placeholder-color: #888888;
    --status-color: #666666;
    --border-color: #ddd;
    --input-bg: #ffffff;
    --panel-bg: #f5f5f5;
    --error-color: #c0392b;
    --warn-bg: #fff4e5;
    --warn-border: #e0a960;
    --warn-text: #7a4a00;
    --ok-bg: #e8f5e9;
    --ok-border: #7fb883;
    --ok-text: #24601f;
    --card-bg: #ffffff;
    --card-border: #e3e3e3;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #e0e0e0;
        --link-color: #4dabf7;
        --header-color: #e0e0e0;
        --button-bg: #3a86ff;
        --button-text: #ffffff;
        --button-secondary-bg: #495057;
        --placeholder-color: #666666;
        --status-color: #888888;
        --border-color: #444;
        --input-bg: #2a2a2a;
        --panel-bg: #2a2a2a;
        --error-color: #ff6b6b;
        --warn-bg: #3a2e1a;
        --warn-border: #8a6a2a;
        --warn-text: #ffd08a;
        --ok-bg: #1e3320;
        --ok-border: #3f6b43;
        --ok-text: #a8dcab;
        --card-bg: #222222;
        --card-border: #383838;
        --card-shadow: none;
        --card-shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
}

header { margin-bottom: 20px; color: var(--header-color); }
h1 { font-size: 24px; }
h2 { font-size: 20px; margin-top: 30px; }
h3 { font-size: 18px; margin-top: 25px; }
a { color: var(--link-color); }

footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

button {
    background: var(--button-bg);
    color: var(--button-text);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
button:hover { opacity: 0.8; }
button:disabled { opacity: 0.5; cursor: default; }
button.secondary { background: var(--button-secondary-bg); }
button.small { font-size: 12px; padding: 4px 8px; }

input, select, textarea {
    font-size: 16px;
    padding: 8px;
    color: var(--text-color);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
}

label { display: block; font-size: 14px; color: var(--status-color); margin-bottom: 12px; }
label input, label select { display: block; width: 100%; margin-top: 4px; }

.status { font-size: 12px; color: var(--status-color); font-style: italic; }
/* The line under the site title: who is signed in, and where else to go. */
.site-nav { font-size: 13px; color: var(--status-color); margin: 4px 0 0; }
.muted { color: var(--status-color); }
.error { color: var(--error-color); }
.mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hidden { display: none !important; }

.notice {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 16px 0;
}
.notice.ok {
    background: var(--ok-bg);
    border-color: var(--ok-border);
    color: var(--ok-text);
}

.panel {
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

/*
 * The index feed: a card per post, newest first. Published posts are rendered
 * by the worker and private ones are decrypted in the browser, so the two have
 * to come out identical - both are built as .feed-item > .post-card, in
 * src/pages/index-page.js and public/lib/render.js.
 */
.feed { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }

.post-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    padding: 12px 14px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.post-card:hover { box-shadow: var(--card-shadow-hover); border-color: var(--border-color); }
/* The card is one click target, so the focus ring belongs to the card and not
   to the title tucked inside it. */
.post-card:focus-within { outline: 2px solid var(--button-bg); outline-offset: 2px; }
.post-card:focus-within .feed-title a { outline: none; }

/* The date, and at the far end whatever marks the card out. */
.feed-when {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    color: var(--status-color);
}

.feed-title { margin: 2px 0 0; font-size: inherit; font-weight: 600; }
/* Deliberately not a link to look at: the title carries the href so that the
   card has something to click and a keyboard can reach it, and this stretches
   that one link over the whole card. */
.feed-title a { color: inherit; text-decoration: none; }
.feed-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

.feed-blurb { margin: 2px 0 0; }

.badge {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    color: var(--status-color);
    vertical-align: middle;
}

.fingerprint {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    letter-spacing: 0.05em;
    word-break: break-all;
}

[contenteditable] { outline: none; min-height: 20px; }
[contenteditable]:focus { outline: 2px solid var(--button-bg); outline-offset: 2px; }
.placeholder { color: var(--placeholder-color); font-style: italic; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-color); }
th { color: var(--status-color); font-weight: normal; font-size: 12px; text-transform: uppercase; }