/* The look of Chris's v2 (dark navy, gold, glass, drifting neurons) on every page,
   with v0's rules kept: large type and large targets, every action labelled with
   words, nothing hidden behind a menu. Long reading (answers, notes) sits on a
   solid surface in a plain, very legible face; the rounded brand faces are for
   headings, buttons and navigation. */

@font-face { font-family: "Quicksand"; src: url(/static/fonts/quicksand-latin-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Quicksand"; src: url(/static/fonts/quicksand-latin-500.woff2) format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Quicksand"; src: url(/static/fonts/quicksand-latin-700.woff2) format("woff2"); font-weight: 700 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Quicksand has no Greek: Greek headings and buttons take Comfortaa, as in v2. */
@font-face { font-family: "Comfortaa"; src: url(/static/fonts/comfortaa-greek-400.woff2) format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Comfortaa"; src: url(/static/fonts/comfortaa-greek-700.woff2) format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* Two sets of colours. The default is the plain one: a white page and black text,
   the easiest on the eye for most people. «Χρώματα GOI» (top right) switches to v2's
   navy and gold; the choice is the person's and is rendered by the server
   (html[data-theme]), so a page never flashes in the other colours. Rules below use
   the role names only (--accent, --link, --label…), never a colour of their own. */
:root {
  --scale: 1;
  --navy: #0d1b4b;
  --navy-2: #13235e;
  --gold: #f5a623;
  --gold-soft: #ffd27f;
  --bg: #ffffff;
  --page-bg: #ffffff;
  --ink: #111111;
  --muted: #4b5563;
  --line: #d9dde3;
  --line-2: #b8bfc9;
  --read: #ffffff;
  --surface: var(--read);
  --glass: #ffffff;
  --glass-blur: #ffffff;
  --shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 6px 20px rgba(17, 17, 17, .06);
  --header-bg: rgba(255, 255, 255, .96);
  --foot-bg: #f7f8fa;
  --soft-fill: #f5f6f8;
  --soft-fill-2: #eceef1;
  --strong: #000000;
  --link: #0b57d0;
  --heading2: #111111;
  --label: #4b5563;
  --eyebrow: #8a5300;
  --deco: #b87400;
  --accent: #111827;
  --on-accent: #ffffff;
  --accent-soft: rgba(11, 87, 208, .08);
  --accent-line: #b8bfc9;
  --accent-glow: 0 6px 18px rgba(17, 24, 39, .22);
  --hover-ink: #0b57d0;
  --hover-line: #0b57d0;
  --cite: #8a5300;
  --cite-line: rgba(138, 83, 0, .45);
  --date-ink: #b3261e;
  --chip-bg: #ffffff;
  --chip-ink: #111111;
  --chip-line: #b8bfc9;
  --user-bubble: #e8eefc;
  --on-user-bubble: #111111;
  --user-when: #4b5563;
  --notice-bg: #fff7e6;
  --notice-line: #e6b34d;
  --input-bg: #ffffff;
  --placeholder: #6b7280;
  --th-bg: #f4f5f7;
  --code-bg: #f1f2f4;
  --tile-live-bg: #f5f6f8;
  --tile-live-line: #e3e6ea;
  --tile-live-ink: #111111;
  --hi-mix: #000000;          /* an agent's colour, darkened to read on white */
  --tour-bg: #ffffff;
  --intro-bg: #ffffff;
  --halo: none;
  --hero-shadow: none;
  --logo-filter: brightness(0);
  --selection: #cfe0ff;
  --selection-ink: #000000;
  --ok: #1e7d3a;
  --ok-soft: #e8f5ec;
  --err: #b3261e;
  --err-soft: #fdecea;
  --on-err: #ffffff;
  --focus: #0b57d0;
  --focus-ring: rgba(11, 87, 208, .2);
  --stage-bg: radial-gradient(ellipse at 50% 40%, #182a6b 0%, #0d1b4b 58%, #070f2e 100%);
  --stage-line: #0d1b4b;
  --radius: 14px;
  --pill: 999px;
  --font-ui: "Quicksand", "Comfortaa", "Segoe UI", system-ui, sans-serif;
  --font: "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(20px * var(--scale));
  color-scheme: light;
}
html[data-theme="goi"] {
  --bg: #0d1b4b;
  --page-bg: radial-gradient(ellipse at 50% 0%, #1a2c70 0%, #0d1b4b 62%) fixed, #0d1b4b;
  --ink: #f2f4fb;
  --muted: #bcc4df;
  --line: rgba(255, 255, 255, .16);
  --line-2: rgba(255, 255, 255, .28);
  --read: #142661;
  --glass: rgba(13, 27, 75, .8);
  --glass-blur: rgba(13, 27, 75, .66);
  --shadow: 0 18px 50px rgba(0, 0, 0, .25);
  --header-bg: rgba(13, 27, 75, .62);
  --foot-bg: rgba(13, 27, 75, .6);
  --soft-fill: rgba(255, 255, 255, .05);
  --soft-fill-2: rgba(255, 255, 255, .08);
  --strong: #ffffff;
  --link: #ffd27f;
  --heading2: #ffd27f;
  --label: #ffd27f;
  --eyebrow: #f5a623;
  --deco: #f5a623;
  --accent: #f5a623;
  --on-accent: #0d1b4b;
  --accent-soft: rgba(245, 166, 35, .14);
  --accent-line: rgba(245, 166, 35, .5);
  --accent-glow: 0 10px 28px rgba(245, 166, 35, .32);
  --hover-ink: #ffd27f;
  --hover-line: #f5a623;
  --cite: #ffd27f;
  --cite-line: rgba(255, 210, 127, .45);
  --date-ink: #ffb4a6;
  --chip-bg: rgba(13, 27, 75, .55);
  --chip-ink: #ffd27f;
  --chip-line: rgba(245, 166, 35, .5);
  --user-bubble: #f5a623;
  --on-user-bubble: #0d1b4b;
  --user-when: rgba(13, 27, 75, .75);
  --notice-bg: rgba(245, 166, 35, .1);
  --notice-line: rgba(245, 166, 35, .55);
  --input-bg: rgba(0, 0, 0, .28);
  --placeholder: #9aa5c8;
  --th-bg: rgba(255, 255, 255, .07);
  --code-bg: rgba(255, 255, 255, .1);
  --tile-live-bg: rgba(245, 166, 35, .1);
  --tile-live-line: rgba(245, 166, 35, .25);
  --tile-live-ink: #ffd27f;
  --hi-mix: #ffffff;
  --tour-bg: #13235e;
  --intro-bg: radial-gradient(ellipse at center, #1a2c70 0%, #0d1b4b 70%);
  --halo: radial-gradient(closest-side, rgba(13, 27, 75, .96) 0%, rgba(13, 27, 75, .9) 72%, rgba(13, 27, 75, 0) 100%);
  --hero-shadow: 0 1px 14px rgba(13, 27, 75, .95);
  --logo-filter: none;
  --selection: rgba(245, 166, 35, .45);
  --selection-ink: #ffffff;
  --ok: #6be89b;
  --ok-soft: rgba(107, 232, 155, .12);
  --err: #ff9b8a;
  --err-soft: rgba(255, 155, 138, .12);
  --on-err: #0d1b4b;
  --focus: #ffd27f;
  --focus-ring: rgba(245, 166, 35, .22);
  --stage-bg: radial-gradient(ellipse at 50% 40%, #0f1f5a 0%, #060c26 70%, #03071a 100%);
  --stage-line: rgba(245, 166, 35, .35);
  color-scheme: dark;
}
body[data-font="-1"] { --scale: .9; }
body[data-font="1"] { --scale: 1.12; }
body[data-font="2"] { --scale: 1.25; }
body[data-font="3"] { --scale: 1.4; }
:root:has(body[data-font="-1"]) { font-size: 18px; }
:root:has(body[data-font="1"]) { font-size: 22.4px; }
:root:has(body[data-font="2"]) { font-size: 25px; }
:root:has(body[data-font="3"]) { font-size: 28px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--page-bg);
  color: var(--ink); font: 1rem/1.6 var(--font); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; min-height: 100vh;
  display: flex; flex-direction: column;
}
.page { flex: 1 0 auto; width: 100%; }
a { color: var(--link); text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--font-ui); font-weight: 700; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .2rem 0 .4rem; text-wrap: balance; letter-spacing: .01em; }
h2 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .7rem; color: var(--heading2); }
p { margin: 0 0 .8rem; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 46rem; }
.quiet { color: var(--muted); }
.small { font-size: .85rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sel { user-select: all; font-weight: 600; color: var(--ink); }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; z-index: 60; border-radius: 0 0 10px 10px; }
.skip:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--selection); color: var(--selection-ink); }

/* drifting neurons behind the pages that have no live brain */
.particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.top, .page, .foot { position: relative; z-index: 1; }

/* header: logo and name, then the page buttons as pills */
.top { background: var(--header-bg); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(6px)) { .top { backdrop-filter: blur(14px); } }
.top-in, .tabs-in, .page, .foot-in { max-width: 72rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .7rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; font: 700 1.1rem/1.2 var(--font-ui); color: var(--ink); text-decoration: none; }
.brand img { height: 2.1rem; width: auto; display: block; filter: var(--logo-filter); }
.brand-name { padding-left: .75rem; border-left: 1px solid var(--line-2); }
.top-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.font { display: flex; gap: .35rem; }
.inline { display: inline; margin: 0; }
.tabs { border-top: 1px solid var(--line); }
.tabs-in { display: flex; gap: .45rem; overflow-x: auto; padding-block: .55rem; scrollbar-width: thin; }
.tab { display: inline-flex; align-items: center; min-height: 2.7rem; padding: 0 1.05rem; font: 600 .95rem/1.2 var(--font-ui); color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: var(--pill); white-space: nowrap; }
.tab:hover { border-color: var(--hover-line); color: var(--hover-ink); }
.tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* buttons: ghost pills, the main one gold */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.8rem; padding: .45rem 1.2rem; border-radius: var(--pill); border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: 600 .98rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--hover-line); color: var(--hover-ink); }
.btn-main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn-main:hover { color: var(--on-accent); box-shadow: var(--accent-glow); }
.btn-quiet { background: transparent; }
.btn-quiet.is-active { border-color: var(--hover-line); color: var(--hover-ink); }
.btn-wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }

.page { padding-block: 1.6rem 3rem; }
.block { margin-top: 2rem; }
.count { color: var(--muted); font-weight: 400; font-size: .9rem; }
.crumbs { margin-bottom: .4rem; }
.crumbs a { text-decoration: none; font-family: var(--font-ui); font-weight: 600; }
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; background: var(--foot-bg); }
.foot-in { padding-block: 1rem; }

.msg { padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid; }
.msg-ok { background: var(--ok-soft); border-color: var(--ok); }
.msg-err { background: var(--err-soft); border-color: var(--err); }

/* page titles in v2's style: a short gold rule under them */
.page > h1:first-child, .page > .crumbs + h1, .page-head h1 { position: relative; padding-bottom: .55rem; margin-bottom: .9rem; }
.page > h1:first-child::after, .page > .crumbs + h1::after, .page-head h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 3px; border-radius: 3px; background: var(--deco); }

/* generic */
.list { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.examples li { max-width: 50rem; }
.big { font-size: 1.15rem; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem; }
.card { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem; background: var(--glass); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); min-width: 0; }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] .card { background: var(--glass-blur); backdrop-filter: blur(12px); } }
.card:hover { border-color: var(--hover-line); }
.card-type { font: 700 .76rem/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--label); }
.card-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.card-text { color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }

/* forms */
input[type=email], input[type=password], input[type=search], input[type=text], textarea {
  width: 100%; font: 1rem/1.5 var(--font); padding: .7rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--input-bg); color: var(--ink); min-height: 3rem;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus, textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.check { display: flex; gap: .6rem; align-items: center; font-weight: 400 !important; margin: .4rem 0 .8rem; }
.check input { width: 1.35rem; height: 1.35rem; accent-color: var(--accent); flex: none; }

/* login: v2's card over the drifting neurons */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 6vh 16px 3rem; }
.login-logo { position: fixed; top: 1.1rem; left: 1.4rem; z-index: 2; }
.login-logo img { height: 2.2rem; width: auto; display: block; filter: var(--logo-filter); }
.login { position: relative; z-index: 1; width: 100%; max-width: 30rem; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 2rem 1.8rem 1.6rem; box-shadow: var(--shadow); }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] .login { background: var(--glass-blur); backdrop-filter: blur(16px); } }
.eyebrow { color: var(--eyebrow); font: italic 600 1rem/1.3 var(--font-ui); margin: 0 0 .5rem; }
.login h1 { font-size: 1.35rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .3rem; }
.login .lead { font-size: .95rem; }
.stack { display: grid; gap: .45rem; }
.stack label { font: 600 .85rem/1.3 var(--font-ui); color: var(--muted); margin-top: .4rem; }
.stack .check { font-family: var(--font); font-size: .9rem; color: var(--ink); }
.login .btn-main { margin-top: .4rem; min-height: 3.1rem; font-size: 1.05rem; }
.hint { color: var(--muted); font-size: .9rem; margin-top: 1.2rem; }

/* the intro: v2's loading lines, once per browser session */
.intro { position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: var(--intro-bg); color: var(--ink); }
html.goi-intro .intro { display: flex; }
.intro img { height: 2.8rem; width: auto; filter: var(--logo-filter); }
.intro-line { min-height: 1.6rem; font: 600 1.05rem/1.4 var(--font-ui); text-align: center; padding: 0 16px; }
.intro-bar { width: min(320px, 70vw); height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.intro-bar span { display: block; height: 100%; width: 0; background: var(--deco); }
.intro.out { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .intro { transition: opacity .5s ease; }
  .intro-bar span { animation: introbar 1.6s ease-out forwards; }
  .intro-line { animation: fadeup .45s ease both; }
}
@keyframes introbar { to { width: 100%; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* chat */
.chat { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.4rem; align-items: start; }
.chat-main { min-width: 0; }
.messages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.msg-row { display: flex; }
.msg-row.user { justify-content: flex-end; }
.bubble { max-width: min(46rem, 100%); padding: .9rem 1.15rem .55rem; border-radius: 18px; background: var(--read); border: 1px solid var(--line); overflow-wrap: anywhere; min-width: 0; line-height: 1.65; }
.msg-row.assistant .bubble { border-bottom-left-radius: 6px; }
.msg-row.user .bubble { background: var(--user-bubble); border-color: var(--user-bubble); color: var(--on-user-bubble); border-bottom-right-radius: 6px; }
.msg-row.user .bubble a { color: var(--on-user-bubble); }
.msg-row.user .when { color: var(--user-when); }
.msg-row.notice .bubble { background: var(--notice-bg); border-color: var(--notice-line); }
.bubble p:last-of-type { margin-bottom: .4rem; }
.bubble ul, .bubble ol { padding-left: 1.3rem; }
.bubble h1, .bubble h2, .bubble h3 { font-size: 1.08rem; color: var(--heading2); margin: .9rem 0 .4rem; }
.bubble table, .prose table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; margin: .4rem 0 .8rem; }
.bubble th, .bubble td, .prose th, .prose td { border: 1px solid var(--line-2); padding: .4rem .65rem; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.bubble th, .prose th { background: var(--th-bg); font-weight: 700; }
/* Text wraps inside its cell, so every column is on screen; a number never breaks («350,0» has no
   space to break at, and overflow-wrap stays normal). Only a table too wide even then scrolls sideways. */
.bubble td, .bubble th, .prose td, .prose th { min-width: 5.5rem; }
/* A table wider than its bubble (a phone) keeps whole words and scrolls sideways; a shadow at the
   edge that has more shows that it does (the shadows ride the scroll, the covers stay with the text). */
.bubble table {
  background:
    linear-gradient(to right, var(--read) 30%, transparent) left / 2.2rem 100% no-repeat local,
    linear-gradient(to left, var(--read) 30%, transparent) right / 2.2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .22), transparent) left / .9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .22), transparent) right / .9rem 100% no-repeat scroll;
}
@media (max-width: 560px) {
  .bubble td, .bubble th, .prose td, .prose th { min-width: 0; padding: .3rem .45rem; font-size: .92em; }
}
.bubble code, .prose code { background: var(--code-bg); border-radius: 5px; padding: .05rem .3rem; font-size: .9em; }
.when { display: block; font-size: .78rem; color: var(--muted); text-align: right; }
.cite { color: var(--cite); font-weight: 600; }
.ext { font-size: .8em; }
.files { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0; }
.file-img { display: block; max-width: 100%; }
.file-audio { display: block; width: 100%; max-width: 26rem; }
.file-img img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.live { border-style: dashed; }
#live-text { white-space: pre-wrap; }
.empty { padding: 1.2rem; background: var(--glass); border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); }
.older { text-align: center; }
.suggest { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 .7rem; }
.chip { font: 600 .9rem/1.3 var(--font-ui); min-height: 2.6rem; padding: .45rem 1rem; border-radius: var(--pill); border: 1px solid var(--chip-line); background: var(--chip-bg); color: var(--chip-ink); cursor: pointer; white-space: normal; max-width: 100%; text-align: left; }
.chip:hover { border-color: var(--hover-line); background: var(--accent-soft); }
/* the composer: v2's rounded glass box */
.ask { display: grid; gap: .6rem; background: var(--glass); border: 1px solid var(--line); border-radius: 22px; padding: .7rem; }
.ask:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.ask textarea { min-height: 5.2rem; resize: vertical; border: 0; background: transparent; box-shadow: none; padding: .55rem .6rem; }
.ask textarea:focus { box-shadow: none; }
.ask-actions { display: flex; gap: .6rem; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.ask-actions .btn-main { min-width: 10rem; }
.now { position: sticky; top: 1rem; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.2rem; }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] :is(.now, .ask) { background: var(--glass-blur); backdrop-filter: blur(14px); } }
.now h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--label); }
.plan, .steps { margin: 0 0 .8rem; padding-left: 1.3rem; display: grid; gap: .35rem; font-size: .92rem; }
.steps { list-style: none; padding-left: 0; }
.steps li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.steps li.current::before { content: "… "; color: var(--deco); }
.steps li.current { font-weight: 600; color: var(--link); }
.plan li.completed { color: var(--muted); text-decoration: line-through; }
.plan li.in_progress { font-weight: 700; color: var(--link); }

/* documents */
.upload { display: grid; gap: .8rem; max-width: 40rem; }
.drop { display: grid; gap: .3rem; place-items: center; text-align: center; padding: 1.8rem 1rem; border: 2px dashed var(--accent-line); border-radius: 18px; background: var(--glass); cursor: pointer; }
.drop:hover, .drop.is-over { border-color: var(--hover-line); background: var(--accent-soft); }
.drop-title { font: 700 1.2rem/1.3 var(--font-ui); color: var(--eyebrow); }
.drop input, .camera input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* The camera button is for phones and tablets: shown on a touch screen only. */
.camera { position: relative; display: none; }
@media (pointer: coarse) { .camera { display: inline-flex; } }
.docs li { overflow-wrap: anywhere; }
.list.docs { list-style: none; padding: 0; gap: .5rem; }
.list.docs li { background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .9rem; }

/* brain */
.brain-tools { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin: 1rem 0 .4rem; }
.search { display: flex; gap: .5rem; flex: 1 1 26rem; max-width: 40rem; }
.search input { flex: 1; min-width: 0; border-radius: var(--pill); padding-left: 1.2rem; background: var(--glass); }
.note { max-width: 50rem; background: var(--read); border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem 1.6rem; line-height: 1.7; }
.note h1 { color: var(--ink); }
.prose h2 { margin-top: 1.4rem; font-size: 1.1rem; color: var(--heading2); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose strong { color: var(--strong); }

/* citations jump to their item in «Πηγές», which lights up */
a.cite { text-decoration: none; border-bottom: 2px solid var(--cite-line); }
a.cite:hover { border-bottom-color: var(--deco); }
.sources li { scroll-margin-top: 6rem; border-radius: 6px; }
.sources li:target { background: rgba(245, 166, 35, .22); box-shadow: 0 0 0 6px rgba(245, 166, 35, .22); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } .sources li { transition: background-color .4s ease, box-shadow .4s ease; } }

/* tour */
.tour { position: fixed; inset: 0; background: rgba(5, 10, 30, .62); display: grid; place-items: center; padding: 16px; z-index: 50; }
.tour[hidden] { display: none; }
.tour-card { background: var(--tour-bg); border: 1px solid var(--line-2); border-radius: 18px; max-width: 32rem; width: 100%; padding: 1.6rem; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.tour-card h2 { font-size: 1.3rem; color: var(--eyebrow); }
.tour-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.tour-count { color: var(--muted); font-size: .85rem; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .card, .action, .chip, .tab, .door, .idea { transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .btn-main:hover, .door:hover { transform: translateY(-2px); }
}

/* ---- the live pages: the brain behind, glass in front ---------------------------- */
html[data-theme="goi"] .live-page { background: radial-gradient(ellipse at 50% 30%, #182a6b 0%, var(--navy) 65%) fixed, var(--navy); }
.brain-bg { position: fixed; inset: 0; z-index: 0; }
.brain-tip { position: fixed; z-index: 30; background: var(--navy-2); color: #fff; border: 1px solid var(--line-2); font-size: .85rem; padding: .35rem .6rem; border-radius: 8px; pointer-events: none; max-width: 22rem; }
.live-page .top, .live-page .foot { position: relative; z-index: 2; }
.live-page .page { position: relative; z-index: 1; pointer-events: none; }
.live-page .page .glass, .live-page .page a, .live-page .page button, .live-page .page input, .live-page .page form, .live-page .page label { pointer-events: auto; }
.glass { background: var(--glass); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] .glass { background: var(--glass-blur); backdrop-filter: blur(14px) saturate(1.1); } }

/* home: v2's hero and doors over the living brain */
.hero { padding: 1.2rem 1.5rem 1.1rem; max-width: 56rem; }
.hero .lead { margin-bottom: .2rem; }
/* v2's soft navy halo behind the headline, so the neurons never cover the words */
.home-front .hero { margin: .4rem auto 0; padding: 2rem 3.5rem 1.8rem; max-width: 62rem; text-align: center; background: var(--halo); border: 0; box-shadow: none; backdrop-filter: none; text-shadow: var(--hero-shadow); }
.home-front .hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.home-front .hero h1 span, .accent { color: var(--eyebrow); }
.home-front .hero .lead { margin: 0 auto .2rem; }

.doors, .three { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.tile, .door { display: flex; flex-direction: column; gap: .45rem; padding: 1.3rem 1.25rem 1.15rem; min-height: 14rem; text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.tile:hover, .door:hover { border-color: var(--hover-line); }
.tile-icon { width: 3.1rem; height: 3.1rem; color: var(--deco); }
.tile-icon svg { width: 100%; height: 100%; }
.tile-title { font: 700 1.3rem/1.2 var(--font-ui); }
.tile-text { color: var(--muted); font-size: .95rem; }
.tile-live { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--tile-live-ink); background: var(--tile-live-bg); border: 1px solid var(--tile-live-line); border-radius: 10px; padding: .45rem .7rem; }
.tile-live strong { color: var(--strong); }
.tile-live.is-busy::before { content: ""; display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; background: var(--ok); margin-right: .45rem; vertical-align: middle; box-shadow: 0 0 0 0 rgba(107, 232, 155, .6); }
@media (prefers-reduced-motion: no-preference) { .tile-live.is-busy::before { animation: pulse 2s infinite; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(107, 232, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(107, 232, 155, 0); } }
.bump { display: inline-block; }
/* the team as a row of little robots, overlapping like a stack of avatars */
.crew { display: flex; flex-wrap: nowrap; margin: .15rem 0 .1rem .4rem; }
.crew-face { position: relative; width: 2.3rem; height: 2.3rem; flex: none; margin-left: -.55rem; border-radius: 50%; background: #e9edf8; border: 2px solid var(--bg); overflow: hidden; display: inline-grid; place-items: center; }
.crew-face svg { width: 2.6rem; height: auto; margin-top: .55rem; }
.crew-face[data-status="idle"], .crew-face[data-status="off"] { filter: saturate(.6) brightness(.85); }
.crew-face[data-status="working"] { z-index: 1; border-color: var(--deco); box-shadow: 0 0 0 2px var(--deco); }
.crew-face[data-status="queued"] { border-color: var(--deco); }

.quick-ask { display: flex; gap: .6rem; padding: .6rem; margin-top: 1.1rem; border-radius: var(--pill); }
.quick-ask input { flex: 1; min-width: 0; border: 0; background: transparent; border-radius: var(--pill); }
.quick-ask input:focus { box-shadow: none; }
.quick-ask:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }

.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
.panel { padding: 1.1rem 1.3rem; min-width: 0; }
.panel h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; color: var(--label); }
.dl, .mini-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .5rem; }
.dl a { display: grid; gap: .05rem; text-decoration: none; color: var(--ink); padding: .5rem .75rem; border-radius: 12px; background: var(--soft-fill); border: 1px solid var(--line); }
.dl a:hover { border-color: var(--hover-line); }
.dl-date { font-size: .82rem; font-weight: 700; color: var(--date-ink); }
.dl-title { font-weight: 600; }
.mini-list li { overflow-wrap: anywhere; }
.mini-list a { color: var(--ink); text-decoration: none; }
.mini-list a:hover { text-decoration: underline; color: var(--link); }
.mini-type { font: 700 .7rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: var(--label); background: var(--soft-fill-2); border-radius: 6px; padding: .1rem .4rem; }
.mini-list li.is-new .mini-type { background: var(--accent); color: var(--on-accent); }
.panel .small a { display: inline-block; padding: .35rem 0; }

/* ideas: v2's «Learn», for his work */
.idea-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.idea-group { padding: 1.1rem 1.2rem; }
.idea-group h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; color: var(--label); }
.idea { display: block; width: 100%; text-align: left; margin: 0 0 .55rem; padding: .7rem .95rem; border-radius: 14px; border: 1px solid var(--line-2); background: var(--soft-fill); color: var(--ink); font: 600 .95rem/1.4 var(--font); cursor: pointer; }
.idea:hover { border-color: var(--hover-line); background: var(--accent-soft); }
.idea[disabled] { opacity: .6; cursor: progress; }

/* ---- the team ---------------------------------------------------------------------- */
.agents-front .hero, .page-hero { margin-bottom: .2rem; }
.crew-status { font-weight: 700; color: var(--link); margin: .3rem 0 0; }
.stage { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.1rem; margin: 1.3rem 0; }
.station { --agent-hi: color-mix(in srgb, var(--agent) 50%, var(--hi-mix)); padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; border-top: 5px solid var(--agent-hi); min-width: 0; }
.station[data-status="off"] { filter: grayscale(.85); opacity: .8; }
.station-top { display: flex; gap: .7rem; align-items: flex-start; }
.avatar { flex: 0 0 auto; width: 116px; min-height: 132px; border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .95) 0 56%, rgba(255, 255, 255, .25) 57%, transparent 70%); }
.avatar > svg { display: block; }
.say { position: relative; flex: 1; min-height: 4.4rem; margin: .4rem 0 0; padding: .6rem .8rem; background: var(--read); border: 2px solid var(--agent-hi); border-radius: 14px; font-size: .95rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.say::before { content: ""; position: absolute; left: -10px; top: 18px; border: 8px solid transparent; border-right-color: var(--agent-hi); border-left: 0; }
.station[data-status="idle"] .say, .station[data-status="off"] .say { border-style: dashed; color: var(--muted); font-weight: 500; }
.station-name { font-size: 1.15rem; margin: .2rem 0 0; color: var(--ink); }
.status-badge { align-self: flex-start; font: 700 .78rem/1.3 var(--font-ui); padding: .2rem .6rem; border-radius: var(--pill); background: var(--soft-fill-2); color: var(--muted); }
.station[data-status="working"] .status-badge { background: var(--gold); color: var(--navy); }
.station[data-status="queued"] .status-badge { background: var(--accent-soft); color: var(--link); }
.station-role { margin: .2rem 0 0; }
.station-when, .station-last { margin: 0; color: var(--muted); font-size: .88rem; }
.station-steps { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .88rem; }
.station-steps li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.station-steps li.current { font-weight: 700; color: var(--agent-hi); }
.station-steps li.current::before { content: "▶ "; color: var(--agent-hi); }
.station-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: auto; padding-top: .5rem; }
.station-msg { margin: 0; color: var(--link); font-weight: 600; }
.helpers { display: flex; flex-wrap: wrap; gap: .5rem; }
.helper { --agent-hi: color-mix(in srgb, var(--agent) 50%, var(--hi-mix)); display: grid; justify-items: center; gap: .1rem; width: 6.6rem; text-align: center; }
.helper svg { border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .92) 0 56%, transparent 58%); }
.helper-name { font-size: .78rem; font-weight: 800; color: var(--agent-hi); }
.helper-say { font-size: .74rem; color: var(--muted); line-height: 1.25; max-height: 2.6em; overflow: hidden; }
.helper[data-status="done"] .helper-say { color: var(--ok); font-weight: 700; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.timeline .run { --agent-hi: color-mix(in srgb, var(--agent) 50%, var(--hi-mix)); padding: .45rem .75rem; border-left: 5px solid var(--agent-hi); background: var(--soft-fill); border-radius: 10px; overflow-wrap: anywhere; }

/* robots: asleep, waiting, working */
.robot .eyes-open, .robot .mouth { display: none; }
.robot .zzz { display: inline; }
[data-status="working"] .robot .eyes-open, [data-status="queued"] .robot .eyes-open, .robot-helper .eyes-open { display: inline; }
[data-status="working"] .robot .eyes-closed, [data-status="queued"] .robot .eyes-closed, .robot-helper .eyes-closed { display: none; }
[data-status="working"] .robot .mouth, .robot-helper .mouth { display: inline; }
[data-status="working"] .robot .zzz, [data-status="queued"] .robot .zzz, [data-status="off"] .robot .zzz, .robot-helper .zzz { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .robot .zzz text { animation: zfloat 3s ease-in-out infinite; }
  .robot .zzz text:nth-child(2) { animation-delay: .6s; }
  .robot .zzz text:nth-child(3) { animation-delay: 1.2s; }
  [data-status="idle"] .robot .robot-body { animation: breathe 4s ease-in-out infinite; transform-origin: 60px 120px; }
  [data-status="working"] .robot .robot-body, .robot-helper .robot-body { animation: bob .9s ease-in-out infinite; }
  [data-status="working"] .robot .bulb, .robot-helper .bulb { animation: blinkbulb .8s steps(2, jump-none) infinite; }
  [data-status="working"] .robot .gear { animation: spin 2.4s linear infinite; transform-origin: 60px 99px; transform-box: view-box; }
  [data-status="working"] .robot .eye, .robot-helper .eye { animation: blink 3.6s infinite; transform-origin: center; transform-box: fill-box; }
  [data-status="working"] .robot .arm-r { animation: wave 1.2s ease-in-out infinite; transform-origin: 93px 88px; transform-box: view-box; }
  [data-status="queued"] .robot .pupil { animation: look 2.4s ease-in-out infinite; }
  .helper { animation: popin .45s cubic-bezier(.2, 1.6, .4, 1) both; }
  .helper.leaving { animation: leave 1.2s ease-in both; }
  .bump { animation: bump .6s ease; }
  .say { transition: border-color .3s ease; }
}
@keyframes zfloat { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes blinkbulb { 0% { opacity: 1; } 100% { opacity: .25; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-28deg); } }
@keyframes look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-2.5px); } 70% { transform: translateX(2.5px); } }
@keyframes popin { from { opacity: 0; transform: scale(.3) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes leave { 0% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 100% { opacity: 0; transform: translateY(-14px) scale(.6); } }
@keyframes bump { 50% { transform: scale(1.35); color: var(--deco); } }

.copy-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.copy-row input { flex: 1 1 22rem; min-width: 0; font: .9rem/1.4 var(--font); }

/* help and other text pages: each section on a glass panel */
.page > .block { background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.3rem; }
.page > .block:has(> .cards) { background: transparent; border: 0; padding: 0; }
@supports (backdrop-filter: blur(6px)) { html[data-theme="goi"] .page > .block { background: var(--glass-blur); backdrop-filter: blur(12px); } }

/* «Χρώματα GOI» ↔ «Φωτεινό»: a small two-colour disc says what the button switches to. */
.theme-toggle { gap: .45rem; }
.theme-toggle::before { content: ""; width: .85rem; height: .85rem; border-radius: 50%; flex: none; background: linear-gradient(135deg, #0d1b4b 50%, #f5a623 50%); border: 1px solid var(--line-2); }
html[data-theme="goi"] .theme-toggle::before { background: linear-gradient(135deg, #ffffff 50%, #111111 50%); }

/* Home: the living brain in its own dark window, the four ways in beneath it. The
   window is dark in both colour sets, so the brain is always drawn the same way and
   always seen; the doors sit under it, never on top of the neurons. */
.home-page .page { padding-top: 1rem; }
.home-head { margin: .4rem 0 .8rem; }
.home-head .eyebrow { margin-bottom: .15rem; }
.home-head h1 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); margin: 0; }
.home-head h1 span { color: var(--eyebrow); }
.home-stage {
  --ink: #f2f4fb; --muted: #c6cde6; --strong: #ffffff; --bg: #0d1b4b; --deco: #f5a623; --ok: #6be89b;
  --line: rgba(255, 255, 255, .16); --line-2: rgba(255, 255, 255, .3);
  --hover-line: #f5a623; --hover-ink: #ffd27f; --focus: #ffd27f; --link: #ffd27f;
  --tile-live-bg: rgba(245, 166, 35, .12); --tile-live-line: rgba(245, 166, 35, .3); --tile-live-ink: #ffd27f;
  color: var(--ink); background: var(--stage-bg); border: 1px solid var(--stage-line); border-radius: 22px;
  overflow: hidden; box-shadow: 0 18px 46px rgba(7, 15, 46, .26);
}
.stage-brain { position: relative; height: clamp(14rem, 40vh, 30rem); view-transition-name: brain-stage; }
.brain-stage-canvas { position: absolute; inset: 0; }
.brain-stage-canvas canvas { display: block; }
.stage-caption { position: absolute; z-index: 1; left: 1rem; top: .9rem; margin: 0; max-width: calc(100% - 2rem); padding: .35rem .85rem; border-radius: var(--pill); background: rgba(7, 15, 46, .74); border: 1px solid var(--line); font: 600 .85rem/1.35 var(--font-ui); pointer-events: none; }
.stage-caption strong { color: var(--hover-ink); }
.stage-pulse { display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; border-radius: 50%; background: var(--ok); vertical-align: middle; box-shadow: 0 0 0 0 rgba(107, 232, 155, .6); }
.stage-hint { position: absolute; z-index: 1; left: 1rem; bottom: .8rem; margin: 0; max-width: min(34rem, calc(100% - 2rem)); padding: .35rem .85rem; border-radius: 14px; background: rgba(7, 15, 46, .74); border: 1px solid var(--line); font-size: .85rem; color: var(--muted); pointer-events: none; }
.stage-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: .9rem; border-top: 1px solid var(--line); background: rgba(7, 15, 46, .45); }
.stage-door { min-height: 0; gap: .45rem; padding: .95rem 1rem .9rem; border-radius: 16px; background: rgba(255, 255, 255, .06); }
.stage-door:hover { background: rgba(255, 255, 255, .1); }
.door-head { display: flex; align-items: center; gap: .7rem; }
.stage-door .tile-icon { flex: none; width: 2.2rem; height: 2.2rem; }
.stage-door .tile-title { font-size: 1.05rem; }
.stage-door .tile-text { font-size: .86rem; }
.stage-door .tile-live { font-size: .8rem; padding: .35rem .6rem; }
.stage-door .crew { margin: 0 0 0 .6rem; }
.stage-door .crew-face { width: 1.7rem; height: 1.7rem; margin-left: -.6rem; }
.stage-door .crew-face svg { width: 1.95rem; margin-top: .4rem; }
.home-stage + * { margin-top: 1.1rem; }
.stage-door .tile-short { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .stage-pulse { animation: pulse 2s infinite; }
  /* From one page to the next the brain window carries over (the 3D page names its
     canvas the same); where the browser cannot, the page simply changes. */
  @view-transition { navigation: auto; }
  ::view-transition-group(brain-stage) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
}
@media (max-width: 1100px) {
  .stage-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .home-page .page { padding-top: .6rem; }
  .home-head { margin: 0 0 .5rem; }
  .home-head h1 { font-size: 1.35rem; }
  .home-stage { border-radius: 18px; }
  .stage-hint { display: none; }
  .stage-caption { left: .6rem; top: .6rem; max-width: calc(100% - 1.2rem); font-size: .76rem; padding: .3rem .7rem; }
  .stage-brain { height: clamp(9.5rem, 30vh, 15rem); }
  /* The four doors as two rows of two, icon over a short name, so they sit right under
     the brain on the first screen of a small phone. The full name stays the link's name
     for a screen reader; the short one is what the eye reads. */
  .stage-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .6rem; }
  .stage-door { justify-content: center; min-height: 0; padding: .6rem .35rem; text-align: center; }
  .stage-door .door-head { flex-direction: column; gap: .35rem; }
  .stage-door .tile-icon { width: 2rem; height: 2rem; }
  .stage-door .tile-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stage-door .tile-short { display: block; font-weight: 600; font-size: .9rem; line-height: 1.2; }
  .stage-door .tile-text, .stage-door .tile-live, .stage-door .crew { display: none; }
  .cap-lead { display: none; }
}

/* Narrow screens. Kept at the end of the file so they override the rules above. */
@media (max-width: 1100px) {
  .doors, .three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .door { min-height: 0; }
}
@media (max-width: 960px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .now { order: -1; position: static; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.4rem; }
  .bubble { max-width: 100%; }
  .ask-actions .btn { width: 100%; }
  .brand-name { display: none; }
  .top-in { padding-block: .55rem; }
  /* the header on one row: logo, then A− A+ and the colours as one small control */
  .top-in { gap: .4rem; }
  .brand img { height: 1.45rem; }
  .top-actions { gap: .3rem; }
  .top-actions .btn { min-height: 2.4rem; padding: .25rem .5rem; font-size: .78rem; }
  .font { gap: 0; }
  .font .btn, .top-actions .theme-toggle { min-width: 2.3rem; padding: .25rem .35rem; justify-content: center; border-radius: 0; }
  .font .btn:first-child { border-radius: var(--pill) 0 0 var(--pill); }
  .font .btn + .btn { margin-left: -1px; }
  .top-actions .theme-toggle { margin-left: calc(-.3rem - 1px); border-radius: 0 var(--pill) var(--pill) 0; gap: 0; }
  .theme-toggle::before { width: 1rem; height: 1rem; }
  /* «Βοήθεια» as «?» on a phone; the word stays its name for screen readers and its tooltip */
  .hl-help { min-width: 2.4rem; justify-content: center; }
  .hl-help::before { content: "?" / ""; font: 700 1.05rem/1 var(--font-ui); }
  .hl-help .hl-label, .theme-toggle .tt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabs-in { padding-block: .45rem; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tab { min-height: 2.5rem; padding: 0 .85rem; font-size: .88rem; }
  .doors, .three { grid-template-columns: minmax(0, 1fr); }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .quick-ask { flex-direction: column; border-radius: 20px; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .avatar { width: 92px; min-height: 105px; }
  .avatar svg { width: 92px; height: auto; }
  .hero { padding: .9rem 1rem .7rem; }
  .home-front .hero { padding: 1.2rem 1.1rem 1rem; }
  .home-front .hero h1 { font-size: 1.45rem; }
  .tile-title { font-size: 1.2rem; }
  .login { padding: 1.6rem 1.2rem 1.3rem; }
  .login-logo { position: static; margin: 0 auto 1.2rem; }
  .login-body { place-items: start center; padding-top: 1.4rem; }
}

/* ---------------------------------------------------------------- chat-controls
   «Διακοπή» while an answer is being written, «Νέα συζήτηση» always (public/chat.js). */
.chat-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin: .3rem 0 .7rem; }
.chat-controls .btn[hidden] { display: none; }
.chat-stop { border-color: var(--err); color: var(--err); }
.chat-stop:hover:not(:disabled) { background: var(--err-soft); }
.chat-controls .btn:disabled { opacity: .55; cursor: default; }
/* /chat-controls */
/* ===== onboarding (first-login interview card) — feat/onboarding ===== */
.onboard-card { border-left: 4px solid var(--accent, #0e5b66); }
.onboard-card h2 { margin-top: 0; }
.onboard-card[hidden] { display: none; }
.onboard-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.onboard-actions .btn { min-height: 44px; }
/* ===== end onboarding ===== */
/* ===== Terms & data (agent B: terms.ts / terms-views.ts) ===== */
.terms-text { max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .6rem 1.2rem 1rem; margin: 1rem 0; }
.terms-text h1 { font-size: 1.3rem; }
.terms-text blockquote { margin: .8rem 0; padding: .6rem 1rem; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.terms-text p { margin: .45rem 0; }
.terms-end { text-align: center; color: var(--muted); margin-top: 1.4rem; }
.terms-accept { display: grid; gap: .3rem; margin-bottom: 2rem; }
.terms-tick { align-items: flex-start; }
.terms-tick input { flex: 0 0 auto; margin-top: .15rem; }
.data-confirm { border: 2px solid var(--err); background: var(--err-soft); border-radius: var(--radius); padding: .8rem 1.1rem; margin: .8rem 0; }
.data-confirm h3 { margin-top: 0; }
.btn-danger { background: var(--err); border-color: var(--err); color: var(--on-err); }
.ai-notice { margin: .4rem 0 0; font-size: .9rem; color: var(--muted); }
/* ===== end Terms & data ===== */
@media (max-width: 374px) {
  .top-in, .tabs-in, .page, .foot-in { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .brand img { height: 1.25rem; }
  .top-actions .btn { padding: .2rem .4rem; font-size: .74rem; }
  .font .btn, .top-actions .theme-toggle { min-width: 2.1rem; }
}
/* ===== voice & media (public/voice.js, src/media.ts, src/voice.ts) — start ===== */
.mic { display: inline-flex; align-items: center; gap: .4rem; }
.mic svg { flex: 0 0 auto; }
.mic.is-on { border-color: var(--err); color: var(--err); }
.mic.is-on svg { animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mic.is-on svg { animation: none; } }
.mic-note { margin: .4rem 0 0; }
.speak { display: inline-flex; align-items: center; gap: .35rem; margin: .35rem .6rem .1rem 0; padding: .35rem .7rem; min-height: 36px; font: inherit; font-size: .9rem; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.speak:hover, .speak:focus-visible { color: var(--ink); border-color: var(--accent); }
.speak.is-on { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.mic { justify-content: center; }
/* ===== voice & media — end ===== */

/* ===== «Μπείτε μέσα στον εγκέφαλό σας» — the big way into the 3D brain on /brain ===== */
.enter-brain { position: relative; display: grid; gap: .45rem; overflow: hidden; margin: 1.2rem 0 1.6rem; padding: 1.6rem 1.8rem 1.5rem;
  border-radius: 18px; text-decoration: none; color: #f3e9e6; isolation: isolate;
  background: radial-gradient(120% 140% at 85% 30%, #3a1414 0%, #120808 45%, #050505 100%); border: 1px solid rgba(255, 120, 100, .35);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28); }
.enter-brain-glow { position: absolute; inset: 0; z-index: -1; opacity: .9;
  background:
    radial-gradient(3px 3px at 72% 28%, #ffb4a0 60%, transparent 61%), radial-gradient(2px 2px at 80% 52%, #ff7a66 60%, transparent 61%),
    radial-gradient(4px 4px at 88% 38%, #ffd2c4 60%, transparent 61%), radial-gradient(2px 2px at 64% 66%, #ff8f7a 60%, transparent 61%),
    radial-gradient(3px 3px at 92% 72%, #ff6a55 60%, transparent 61%), radial-gradient(2px 2px at 58% 40%, #ffc0b0 60%, transparent 61%),
    radial-gradient(2px 2px at 76% 80%, #ff9e8a 60%, transparent 61%), radial-gradient(5px 5px at 84% 24%, rgba(255, 140, 120, .9) 50%, transparent 51%),
    radial-gradient(60% 80% at 82% 45%, rgba(255, 90, 70, .22), transparent 70%); }
.enter-brain-badge { justify-self: start; font: 700 .8rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .12em;
  padding: .35rem .55rem; border-radius: 6px; color: #120808; background: #ff8f7a; }
.enter-brain-title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.2; color: #fff; max-width: 22ch; }
.enter-brain-text { max-width: 46ch; font-size: 1.02rem; line-height: 1.55; color: #f1d9d2; }
.enter-brain-cta { justify-self: start; margin-top: .4rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1.3rem;
  border-radius: 999px; font-weight: 700; color: #120808; background: #ffb4a0; }
.enter-brain:hover .enter-brain-cta, .enter-brain:focus-visible .enter-brain-cta { background: #fff; }
.enter-brain:focus-visible { outline: 3px solid var(--focus, #ffd27f); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .enter-brain { transition: transform .18s ease, box-shadow .18s ease; }
  .enter-brain:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, .34); }
  .enter-brain-glow { animation: enter-brain-twinkle 4s ease-in-out infinite alternate; }
  @keyframes enter-brain-twinkle { from { opacity: .65; } to { opacity: 1; } }
}
@media (max-width: 560px) {
  .enter-brain { padding: 1.3rem 1.2rem 1.25rem; }
  .enter-brain-cta { justify-self: stretch; justify-content: center; }
}
/* ===== end «Μπείτε μέσα στον εγκέφαλό σας» ===== */

/* ===== «Οι δικοί σας βοηθοί» on the team page ===== */
.own-agents { margin-top: 1.6rem; }
.own-agents > h2 { margin: 0 0 .3rem; }
.own-agents > .quiet { margin: 0 0 1rem; max-width: 60ch; }
.station-tools { color: var(--muted); margin: .2rem 0 .4rem; }
.station-actions .station-pause { margin-left: .5rem; }
/* ===== end «Οι δικοί σας βοηθοί» ===== */

/* ===== the two layouts (html[data-ui], set by the server from the person's choice or the profile) =====
   «large» is everything above: big type and buttons, for someone less at home with computers.
   «classic» is calmer: normal type (16px), denser cards, normal buttons; the same pages, the same
   colours, the same order. The «Μεγάλα γράμματα» button switches between them. */
html[data-ui="classic"] { font-size: calc(16px * var(--scale)); }
:root[data-ui="classic"]:has(body[data-font="-1"]) { font-size: 14.4px; }
:root[data-ui="classic"]:has(body[data-font="1"]) { font-size: 17.9px; }
:root[data-ui="classic"]:has(body[data-font="2"]) { font-size: 20px; }
:root[data-ui="classic"]:has(body[data-font="3"]) { font-size: 22.4px; }
/* :where() keeps these at the specificity of the rules they adjust, so they win by coming last
   and still give way to the narrower rules (the phone header, a page's own layout). */
:where(html[data-ui="classic"]) h1 { font-size: 1.55rem; }
:where(html[data-ui="classic"]) .btn { min-height: 2.35rem; padding: .35rem 1rem; font-size: .95rem; }
:where(html[data-ui="classic"]) .tab { min-height: 2.3rem; padding: 0 .95rem; font-size: .93rem; }
:where(html[data-ui="classic"]) .chip { min-height: 2.2rem; padding: .35rem .85rem; font-size: .88rem; }
:where(html[data-ui="classic"]) input, :where(html[data-ui="classic"]) select, :where(html[data-ui="classic"]) textarea { min-height: 2.5rem; }
:where(html[data-ui="classic"]) .cards { gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
:where(html[data-ui="classic"]) .card { padding: .75rem .9rem; border-radius: 12px; }
:where(html[data-ui="classic"]) .tile, :where(html[data-ui="classic"]) .door { min-height: 11rem; padding: 1rem 1rem .95rem; }
:where(html[data-ui="classic"]) .block { margin-top: 1.5rem; }
:where(html[data-ui="classic"]) .page { padding-block: 1.2rem 2.5rem; }
:where(html[data-ui="classic"]) .chat { gap: 1.1rem; }
:where(html[data-ui="classic"]) .login .btn-main { min-height: 2.7rem; }
:where(html[data-ui="classic"]) .onboard-actions .btn { min-height: 2.35rem; }

/* «Μεγάλα γράμματα»: pressed while the large layout is on. */
.ui-toggle { gap: .4rem; }
.ui-toggle::before { content: "Α" / ""; font: 700 1.05em/1 var(--font-ui); }
/* An English page draws the Latin A (Quicksand) instead of the Greek Alpha (Comfortaa). */
html[lang="en"] .ui-toggle::before { content: "A" / ""; }
.ui-toggle[aria-pressed="true"] { border-color: var(--hover-line); color: var(--hover-ink); background: var(--accent-soft); }
@media (max-width: 560px) {
  /* on a phone it joins A− A+ and the colours as the last segment of one small control */
  .top-actions .theme-toggle { border-radius: 0; }
  .top-actions .ui-toggle { min-width: 2.3rem; padding: .25rem .35rem; gap: 0; margin-left: calc(-.3rem - 1px); border-radius: 0 var(--pill) var(--pill) 0; }
  .ui-toggle .ui-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-toggle::before { font-size: 1.15rem; }
  /* the large type needs the controls a little narrower to keep the header on one row */
  html[data-ui="large"] .top-in { gap: .3rem; }
  html[data-ui="large"] .brand img { height: 1.3rem; }
  html[data-ui="large"] .font .btn, html[data-ui="large"] .top-actions .theme-toggle, html[data-ui="large"] .top-actions .ui-toggle { min-width: 2rem; padding-inline: .2rem; }
  html[data-ui="large"] .top-actions .hl-help { min-width: 2.1rem; }
  html[data-ui="large"] .top-actions .btn { padding-inline: .4rem; font-size: .74rem; }
}
/* ===== end layouts ===== */