/* Looking glass styles, same tokens and components as the Norway VPS theme
   (wordpress/build/input.css), written out without Tailwind. */

@font-face { font-family: "Geist"; src: url("Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
    color-scheme: dark;
    --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --bg: #0c1015;
    --surface: #131920;
    --surface-2: #19212a;
    --line: #26303a;
    --line-strong: #3a4652;
    --ink: #eef2f5;
    --muted: #9aa7b3;
    --primary: #8ccff0;
    --primary-hover: #a8dcf5;
    --on-primary: #0c1015;
    --error: #ff8a80;
    --ok: #7ee2a8;
    --shadow-lg: 0 10px 25px -3px rgb(0 0 0 / 0.4);
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #f8fafc;
    --surface-2: #f1f5f9;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --ink: #0f172a;
    --muted: #64748b;
    --primary: #1979ad;
    --primary-hover: #146390;
    --on-primary: #ffffff;
    --error: #c62828;
    --ok: #1b7f4b;
    --shadow-lg: 0 10px 25px -3px rgb(15 23 42 / 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font: 400 1rem/1.6 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
::selection { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
.accent { color: var(--primary); }
.mono { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 64rem) { .wrap { padding-inline: 1.5rem; } }

/* Header */
.top { border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 74px; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.125rem; text-decoration: none; }
.logo { height: 2.75rem; width: auto; }
.logo-light, [data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: block; }
.top-actions { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 30rem) { .top-actions .btn { display: none; } }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: 1px solid; border-radius: .375rem; padding: .5rem 1.25rem;
    font-weight: 600; letter-spacing: .025em; white-space: nowrap; text-decoration: none;
    transition: color .2s ease-out, background-color .2s ease-out, border-color .2s ease-out, scale .2s ease-out;
}
.btn:active:not(:disabled) { scale: .97; }
.btn-primary { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { border-color: var(--primary-hover); background: var(--primary-hover); }
.btn-primary:disabled { opacity: .6; }
.btn-outline { border-color: var(--line-strong); background: transparent; color: var(--ink); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border: 0; border-radius: .375rem; background: transparent; color: var(--ink);
    transition: color .2s ease-out;
}
.icon-btn:hover:not(:disabled) { color: var(--primary); }
.icon-btn:disabled { opacity: .4; }
.icon-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.small { width: 2rem; height: 2rem; margin-inline-start: auto; }
.icon-btn.small svg { width: 1rem; height: 1rem; }
.icon-btn.is-done { color: var(--ok); }
.icon-moon, [data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* Intro */
.intro { padding-block: 3.5rem 2.5rem; max-width: 48rem; }
h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
.lead { margin: 1rem 0 0; color: var(--muted); font-size: 1.125rem; max-width: 40rem; }
.facts { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 2rem 0 0; }
.facts div { min-width: 0; }
.facts dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .25rem 0 0; font-weight: 600; }

/* Form and result */
.grid { display: grid; gap: 1.5rem; padding-bottom: 4rem; align-items: start; }
@media (min-width: 64rem) { .grid { grid-template-columns: 22rem minmax(0, 1fr); gap: 2rem; } }

.panel { border: 1px solid var(--line); border-radius: .375rem; background: var(--surface); padding: 1.5rem; display: grid; gap: 1.25rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .field > label { display: block; margin-bottom: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0; }

.segmented { display: flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line); border-radius: .375rem; background: var(--bg); }
.segmented label { flex: 1; position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span {
    display: block; padding: .45rem .5rem; border-radius: .25rem; text-align: center;
    font-weight: 600; font-size: .9375rem; color: var(--muted);
    transition: color .2s ease-out, background-color .2s ease-out;
}
.segmented input:hover + span { color: var(--ink); }
.segmented input:checked + span { background: var(--primary); color: var(--on-primary); }
.segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.segmented input:disabled { cursor: not-allowed; }
.segmented input:disabled + span { color: var(--muted); opacity: .7; }
.soon { margin-left: .25rem; font-size: .7em; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

.field input {
    width: 100%; height: 2.75rem; padding: 0 .875rem;
    border: 1px solid var(--line-strong); border-radius: .375rem; background: var(--bg); color: var(--ink);
    font: 500 1rem var(--font-mono);
    transition: border-color .2s ease-out;
}
.field input::placeholder { color: var(--muted); opacity: .7; }
.field input:focus { border-color: var(--primary); outline: none; }
.field input[aria-invalid="true"] { border-color: var(--error); }
.link-btn { margin-top: .5rem; padding: 0; border: 0; background: none; color: var(--primary); font-size: .875rem; font-weight: 600; text-align: start; overflow-wrap: anywhere; }
.link-btn:hover { text-decoration: underline; }
.error { margin: .5rem 0 0; color: var(--error); font-size: .875rem; }
.actions { display: flex; gap: .5rem; }
.actions .btn-primary { flex: 1; }
.note { margin: 0; font-size: .8125rem; color: var(--muted); }

/* Terminal card, as in the theme */
.terminal { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: .375rem; background: var(--surface); box-shadow: var(--shadow-lg); }
.terminal-bar { display: flex; align-items: center; gap: .75rem; padding: .375rem .5rem .375rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .75rem; color: var(--muted); }
.terminal-dots { display: flex; gap: .375rem; }
.terminal-dots i { display: block; width: .625rem; height: .625rem; border-radius: 50%; background: #ff5f57; }
.terminal-dots i:nth-child(2) { background: #febc2e; }
.terminal-dots i:nth-child(3) { background: #28c840; }
.terminal-title { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.status { flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); }
.status[data-state="running"] { color: var(--primary); }
.status[data-state="running"]::before { background: var(--primary); animation: pulse 1s ease-in-out infinite; }
.status[data-state="done"]::before { background: var(--ok); }
.status[data-state="error"], .status[data-state="stopped"] { color: var(--error); }
.status[data-state="error"]::before, .status[data-state="stopped"]::before { background: var(--error); }
.status + .icon-btn.small { margin-inline-start: 0; }

.progress { height: 2px; overflow: hidden; position: relative; }
.progress.is-running::after { content: ""; position: absolute; inset-block: 0; width: 30%; background: var(--primary); animation: slide 1.2s ease-in-out infinite; }

.terminal-body {
    margin: 0; padding: 1.25rem; min-height: 22rem; max-height: 70vh; overflow: auto;
    font: .8125rem/1.65 var(--font-mono); color: var(--ink); white-space: pre; tab-size: 4;
}
@media (min-width: 40rem) { .terminal-body { font-size: .875rem; } }
/* Desktop: the result is as high as the form, long output scrolls inside.
   height: 0 keeps the output from stretching the row, flex-grow fills it. */
@media (min-width: 64rem) {
    .grid { align-items: stretch; }
    .terminal { display: flex; flex-direction: column; }
    .terminal-body { flex: 1 0 auto; height: 0; min-height: 0; max-height: none; }
}
.terminal-prompt { color: var(--primary); }
.terminal-out { color: var(--ink); }
.terminal-body > .terminal-out:only-child { color: var(--muted); white-space: pre-wrap; }
.terminal-error { color: var(--error); white-space: pre-wrap; }
.terminal-cursor { display: inline-block; width: .55em; height: 1.15em; vertical-align: text-bottom; background: var(--primary); animation: blink 1s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes slide { from { left: -30%; } to { left: 100%; } }

.foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--primary); }

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