/*
 * codekit terminal theme — two-tone off-white/dark-grey "paper terminal".
 * One theme, no light/dark switching. Status distinguished by weight/
 * invert/blink, not color — this palette is deliberately just bg + ink.
 * Borders are dashed throughout for an ASCII "+---+" hand-drawn-box feel.
 */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    --bg:          #f2f1ec;
    --bg-panel:    #f8f7f3;
    --bg-inset:    #e7e5de;
    --grid:        rgba(43, 42, 38, 0.18);
    --grid-bright: rgba(43, 42, 38, 0.42);
    --fg:          #2b2a26;
    --fg-dim:      rgba(43, 42, 38, 0.62);
    --fg-dimmer:   rgba(43, 42, 38, 0.36);
}

* { box-sizing: border-box; }

html, body {
    background: var(--bg);
    color: var(--fg);
}

body {
    font-family: 'VT323', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    line-height: 1.45;
    margin: 0;
}

::selection { background: var(--fg); color: var(--bg); }

a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--fg-dim); }
a:hover { color: var(--fg); text-decoration: none; border-bottom-style: solid; }

h1, h2 {
    font-weight: 400;
    letter-spacing: 0.04em;
}

h1 {
    font-size: 1.7rem;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

h2 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-dim);
    margin: 2rem 0 0.6rem;
}
h2::before { content: '[ '; }
h2::after { content: ' ]'; }

code {
    font-family: inherit;
    background: var(--bg-inset);
    border: 1px dashed var(--grid);
    padding: 0 0.35rem;
    border-radius: 0;
    font-size: 1em;
    color: var(--fg);
}

.muted { color: var(--fg-dim); font-size: 0.95rem; }

/* ---- Robot-head brand mark ---- */
.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border: 1px dashed var(--grid-bright);
    border-radius: 0;
    background: var(--bg-inset);
    padding: 6px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.brand-text .name {
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.tagline { font-size: 0.95rem; color: var(--fg-dim); }
.tagline::before { content: '> '; }

/* ---- Panels ---- */
.card {
    background: var(--bg-panel);
    border: 1px dashed var(--grid-bright);
    border-radius: 0;
    overflow: hidden;
}

/* ---- Buttons ---- */
.google-btn, .process-btn, .clear-btn, form.filters button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px dashed var(--fg);
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
    padding: 0.5rem 1rem;
}
.google-btn::before, .process-btn::before, .clear-btn::before, form.filters button::before { content: '[ '; }
.google-btn::after, .process-btn::after, .clear-btn::after, form.filters button::after { content: ' ]'; }
.google-btn:hover, .process-btn:hover:not(:disabled), .clear-btn:hover, form.filters button:hover {
    background: var(--fg);
    color: var(--bg);
}
.process-btn:disabled, .clear-btn:disabled {
    color: var(--fg-dimmer);
    border-color: var(--fg-dimmer);
    cursor: not-allowed;
}
.remove-btn, .delete-btn {
    font-family: inherit;
    background: none;
    border: none;
    color: var(--fg-dim);
    cursor: pointer;
    font-size: 0.95rem;
    text-decoration: underline;
    text-transform: uppercase;
}
.remove-btn:hover, .delete-btn:hover { color: var(--fg); font-weight: 700; }
.delete-btn:disabled { color: var(--fg-dimmer); cursor: not-allowed; text-decoration: none; }

/* ---- Inputs ---- */
input[type="text"], form.filters select, form.filters input {
    font-family: inherit;
    font-size: 1rem;
    background: var(--bg-inset);
    border: 1px dashed var(--grid);
    border-radius: 0;
    color: var(--fg);
    padding: 0.5rem 0.65rem;
}
input[type="text"]:focus, form.filters select:focus, form.filters input:focus {
    outline: 1px dashed var(--fg);
    outline-offset: 2px;
    border-color: var(--fg);
}
input::placeholder { color: var(--fg-dimmer); }

.empty { padding: 0.5rem 0.8rem; margin: 0; }

/* ---- Tables ---- */
table { border-collapse: collapse; width: 100%; }
th, td {
    text-align: left;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px dashed var(--grid);
    font-size: 1rem;
    line-height: 1.4;
}
thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--fg-dim);
    font-weight: 400;
    background: var(--bg-inset);
    border-bottom: 1px dashed var(--grid-bright);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(43, 42, 38, 0.05); }
tbody tr[data-href] { cursor: pointer; }

.kv th { width: 10rem; color: var(--fg-dim); font-weight: 400; text-transform: none; letter-spacing: 0; background: transparent; }

/* ---- Badges (ASCII bracket tags) ----
 * Strictly two-tone: state is read from weight/underline/invert,
 * never from hue. */
.badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge::before { content: '['; }
.badge::after { content: ']'; }
.badge + .badge { margin-left: 0.4rem; }

/* in-progress: bold, no blinking cursor */
.badge-running, .badge-sending { font-weight: 700; }

/* done/neutral: plain */
.badge-succeeded, .badge-sent, .badge-queued { font-weight: 400; }

/* failed/error: inverted stamp */
.badge-failed, .badge-error {
    background: var(--fg);
    color: var(--bg);
    font-weight: 700;
    padding: 0.05rem 0.35rem;
}

/* ---- Blinking cursor-block spinner (ASCII, no JS needed) ---- */
.throbber { display: inline-block; vertical-align: middle; margin-right: 0.5em; }
.spinner {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    animation: none;
    color: var(--fg);
}
.spinner::before {
    content: '\2588';
    animation: blink-block 0.8s steps(1) infinite;
}
@keyframes blink-block { 50% { opacity: 0.15; } }

.check-icon { font-weight: 400; }
.alert-icon { font-weight: 700; text-decoration: underline; }
.error-icon {
    background: var(--fg);
    color: var(--bg);
    font-weight: 700;
    padding: 0 0.25rem;
}

.row-warning { font-weight: 700; }
.row-warning::before { content: '[!] '; }
.row-error { font-weight: 700; text-decoration: underline; }

.error-box {
    background: var(--bg-inset);
    color: var(--fg);
    border: 1px dashed var(--fg);
    padding: 0.75rem 0.9rem;
    border-radius: 0;
    margin-top: 1rem;
    white-space: pre-wrap;
    font-size: 1rem;
}
.error-box::before { content: '[ ERROR ]\A'; font-weight: 700; }

.disabled-link { color: var(--fg-dimmer); cursor: not-allowed; }