/* Steve's website: one look for every page, the House of Krell's (the same palette as the public site). */
:root { color-scheme: dark; --bg:#080f27; --panel:#0c1736; --text:#ebf0fc; --muted:#94a5cd; --accent:#ff963a; --accent-text:#10172e; --soft:#101e43; --border:#284172; --danger:#ff8495; --warn:#ffb24a; --shadow:0 10px 34px rgba(0,0,0,.5); --bg:#080f27; --panel:#0c1736; --text:#ebf0fc; --muted:#94a5cd; --accent:#ff963a; --accent-text:#10172e; --soft:#101e43; --border:#284172; --danger:#ff8495; --warn:#ffb24a; --shadow:0 10px 34px rgba(0,0,0,.5); --cyan:#42e3f4; --purple:#9f3cf6; --lime:#c1ff45; --pink:#f16fb0; --display:"Bahnschrift Condensed","Bahnschrift","Arial Narrow",sans-serif; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--accent); }
button, .button { font:inherit; border:0; border-radius:10px; padding:8px 14px; cursor:pointer; background:var(--accent);
                  color:var(--accent-text); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
button.quiet, .button.quiet { background:transparent; color:var(--text); border:1px solid var(--border); }
button.danger { background:var(--danger); color:#fff; }
button:disabled { opacity:.55; cursor:default; }
input[type=text], input[type=search], textarea, select { font:inherit; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; width:100%; }
.muted { color:var(--muted); }
.small { font-size:.8125rem; }
[hidden] { display:none !important; }

/* The bar along the top of every page. */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; padding:10px 16px;
          background:var(--panel); border-bottom:1px solid var(--border); }
.topbar .brand { font-weight:700; text-decoration:none; color:var(--text); }
.topbar .app { color:var(--muted); }
.topbar .spacer { flex:1; }
.topbar .who { color:var(--muted); font-size:.875rem; }
main.page { max-width:1180px; margin:0 auto; padding:20px 16px 96px; }
.notice { background:var(--soft); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:0 0 16px; }
.notice.warn { border-color:var(--warn); }
.error { color:var(--danger); }

/* Home. */
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.tile { display:block; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px;
        text-decoration:none; color:var(--text); min-height:110px; }
.tile:hover { border-color:var(--accent); }
.tile h2 { margin:0 0 6px; font-size:1.125rem; }
.tile p { margin:0; color:var(--muted); font-size:.875rem; }

/* Cards and lists. */
.card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:16px; }
.card h2 { margin:0 0 10px; font-size:1.125rem; }
.rows { list-style:none; padding:0; margin:0; }
.rows li { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.rows li:first-child { border-top:0; }
.rows li .grow { flex:1; min-width:180px; }

/* Signing in. */
.signin { max-width:420px; margin:10vh auto 0; padding:0 16px; }
.signin .card { padding:24px; }
.signin h1 { margin:0 0 6px; font-size:1.5rem; }
.signin .stack { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.signin .stack button { justify-content:center; padding:11px 14px; }

/* Steve, at the side of every page. */
#steve-toggle { position:fixed; right:18px; bottom:18px; z-index:30; border-radius:999px; padding:12px 18px; box-shadow:var(--shadow); }
#steve-panel { position:fixed; top:0; right:0; bottom:0; width:min(420px, 100vw); z-index:40; background:var(--panel);
               border-left:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column;
               transform:translateX(100%); transition:transform .18s ease; }
#steve-panel.open { transform:none; }
#steve-panel header { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
#steve-panel header strong { flex:1; }
#steve-panel iframe { flex:1; border:0; width:100%; background:var(--bg); }

/* Photos. */
.layout { display:grid; grid-template-columns:220px 1fr; gap:20px; }
@media (max-width: 760px) { .layout { grid-template-columns:1fr; } }
.side { display:flex; flex-direction:column; gap:4px; }
@media (max-width: 760px) { .side { flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px; } }
.side button { justify-content:flex-start; background:transparent; color:var(--text); border-radius:10px; white-space:nowrap; }
.side button.active { background:var(--soft); font-weight:600; }
.side .label { margin:12px 0 4px; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
@media (max-width: 760px) { .side .label { display:none; } }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px; }
.filters select { width:auto; max-width:220px; padding:5px 10px; border-radius:999px; font-size:.875rem; }
.chip { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:.875rem; }
.chip.active { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.thumb { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--soft); border:1px solid var(--border);
         padding:0; display:block; width:100%; color:var(--text); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb .doc { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:10px;
              text-align:center; font-size:.8125rem; gap:6px; }
.thumb .doc span:first-child { font-size:2.125rem; }
.thumb .badge { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.62); color:#fff; font-size:.6875rem;
                border-radius:6px; padding:2px 6px; max-width:calc(100% - 12px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thumb .tick { position:absolute; right:6px; top:6px; width:22px; height:22px; border-radius:50%; border:2px solid #fff;
               background:rgba(0,0,0,.3); }
.thumb.selected { outline:3px solid var(--accent); }
.thumb.selected .tick { background:var(--accent); }
.bulk { position:sticky; bottom:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--panel);
        border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:var(--shadow); margin-top:14px; }
dialog.viewer { border:0; padding:0; border-radius:16px; width:min(1100px, 96vw); max-height:94vh; background:var(--panel);
                color:var(--text); box-shadow:var(--shadow); }
dialog.viewer::backdrop { background:rgba(0,0,0,.6); }
.viewer .body { display:grid; grid-template-columns:1fr 340px; max-height:94vh; }
@media (max-width: 820px) { dialog.viewer { width:100vw; max-height:100vh; height:100vh; border-radius:0; }
                            .viewer .body { grid-template-columns:1fr; overflow-y:auto; max-height:100vh; } }
.viewer .picture { background:#000; display:flex; align-items:center; justify-content:center; min-height:260px; }
.viewer .picture img { max-width:100%; max-height:90vh; display:block; }
.viewer .picture .doc { color:#fff; text-align:center; padding:30px; }
.viewer .details { padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.viewer .details h3 { margin:0; font-size:.8125rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.viewer .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.viewer label.check { display:flex; gap:6px; align-items:center; font-size:.875rem; }
.empty { text-align:center; padding:60px 16px; color:var(--muted); }

/* Outings. */
.outing h3 { margin:0 0 2px; font-size:1rem; }
.outing p { margin:2px 0; }
.outing.gone h3 a { text-decoration:line-through; color:var(--muted); }
.outing .tags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.outing .chip { font-size:.75rem; padding:2px 9px; }
.outing .quiet-chip { background:var(--soft); }
.flag { font-size:.75rem; border-radius:6px; padding:1px 7px; vertical-align:middle; border:1px solid var(--border); }
.flag.warn, .warn-text { color:var(--warn); }
.flag.bad { color:var(--danger); border-color:var(--danger); }

/* ---------------------------------------------------------------------------------------------------------------
 * The House of Krell look (owner, 2026-10-26: the whole website in the theme): the public site's jewel palette,
 * the coloured rail along the top, display lettering, orange actions, and Steve's orb as the way to ask him.
 * ------------------------------------------------------------------------------------------------------------- */
body { background: radial-gradient(ellipse at 92% -10%, rgba(76,30,160,.35) 0%, transparent 45%),
                   radial-gradient(ellipse at -10% 110%, rgba(12,58,90,.45) 0%, transparent 50%), var(--bg);
       min-height: 100dvh; }
a { color: var(--cyan); }
button, .button { background: linear-gradient(90deg, #ffb24a, var(--accent)); font-weight: 600; }
button.quiet, .button.quiet { background: transparent; font-weight: 500; }
button.quiet:hover, .button.quiet:hover { border-color: var(--cyan); }
input[type=text], input[type=search], textarea, select { background: #0b1736; }
h1, h2 { font-family: var(--display); font-stretch: condensed; letter-spacing: .03em; }
main.page > h1 { color: var(--lime); text-transform: uppercase; letter-spacing: .06em; }
.topbar { background: rgba(8,17,44,.96); border-bottom: 0; padding-bottom: 14px; }
.topbar::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 5px; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) 0 17%, transparent 17% 18%, var(--purple) 18% 27%,
                              transparent 27% 28%, var(--lime) 28% 94%, transparent 94% 95%, var(--pink) 95% 100%); }
.topbar .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); letter-spacing: .08em; }
.topbar .brand img { width: 30px; height: 30px; }
.topbar .brand b { color: var(--accent); }
.topbar .app { color: var(--cyan); font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; }
.tile, .card { border-left: 5px solid var(--purple); border-radius: 16px 12px 16px 6px; }
.tile:hover { border-color: var(--accent); }
.tile h2 { color: var(--text); }
.chip.active { color: var(--accent-text); }
#steve-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; border-radius: 18px;
                background: #0c1938f5; color: var(--text); border: 1px solid #5d72b9; border-left: 5px solid var(--purple); }
#steve-toggle steve-presence { width: 52px; height: 52px; }
#steve-toggle:hover { border-color: var(--cyan); }
#steve-panel header strong { font-family: var(--display); letter-spacing: .1em; }

/* The day, date and time, left of who's signed in (owner, 2026-10-26); on a phone, the time only. */
.topbar .clock { display:inline-flex; gap:12px; font-family:var(--display); font-stretch:condensed; letter-spacing:.06em;
                 color:var(--cyan); white-space:nowrap; font-size:1rem; }
@media (max-width: 640px) { .topbar .clock .day { display:none; } }

/* Text size (shared/textsize.js, Cindy 2026-10-28): the Aa control in the top bar. On a phone the app name and the words beside the logo give way first. */
.topbar text-size-button .ts-button { min-height:36px; padding:4px 11px; }
.topbar { flex-wrap:wrap; row-gap:6px; }
@media (max-width: 520px) { .topbar { gap:8px; padding-left:12px; padding-right:12px; } .topbar .app { display:none; } .topbar .brand { font-size:0; gap:0; } }