/* ---------------------------------------------------------------------------
   The two themes, and the floating control that switches them.

   Every colour the console uses is a token defined here. Light is the bare
   :root, because most of EBO is read in daylight on a cream ground. Dark is
   defined twice on purpose: once behind prefers-color-scheme for the people who
   never touch a switch, and once behind [data-theme="dark"] so the switch wins
   over the device either way.

   Loaded before os.css, so a page can still override a token for itself.
   --------------------------------------------------------------------------- */

:root{
  /* the brand does not change with the light */
  --teal:#0E5A5A; --teal-2:#0F6B6B; --teal-deep:#08201d; --teal-line:#1B7676;
  --gold:#C8A463; --gold-dark:#9B7E47; --gold-light:#E6CC93;
  --rose:#D6A08A;

  /* the ground, and everything that sits on it */
  --cream:#F7F4EE; --cream-2:#FBF9F5; --card:#FFFFFF;
  --ink:#111111; --muted:#6B6459; --hairline:#E0D5C7; --soft:#F0EBE0;
  --ok:#2d7a5d; --warn:#9B7E47; --bad:#a3402d;

  /* the sidebar is dark in both themes: it is the frame, not the page */
  --rail-1:#0E5A5A; --rail-2:#08201d; --rail-ink:#F7F4EE; --rail-mute:#9CC4C1;

  --sh-1:0 1px 2px rgba(8,32,29,.05), 0 2px 8px -4px rgba(14,90,90,.10);
  --sh-2:0 2px 4px rgba(8,32,29,.04), 0 12px 28px -14px rgba(14,90,90,.28);
  --sh-3:0 4px 8px rgba(8,32,29,.06), 0 28px 56px -24px rgba(14,90,90,.36);
  --sh-gold:0 12px 30px -16px rgba(155,126,71,.55);

  --r-sm:10px; --r:14px; --r-lg:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.22s var(--ease);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

/* ---------- dark, for a device that asked for it and a person who has not said otherwise ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#0E1614; --cream-2:#121D1A; --card:#16231F;
    --ink:#ECE6DA; --muted:#93A39D; --hairline:#26332E; --soft:#1A2723;
    --ok:#5AA57A; --warn:#C8A463; --bad:#D9614A;
    --gold-dark:#C8A463;              /* gold-on-cream never reads on a dark ground */
    --teal:#3E9E96; --teal-2:#48ADA4;
    --rail-1:#0B1513; --rail-2:#070E0D;
    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.5);
    --sh-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.7);
    --sh-3:0 4px 8px rgba(0,0,0,.45), 0 28px 56px -24px rgba(0,0,0,.8);
  }
}

/* ---------- dark, chosen deliberately ---------- */
:root[data-theme="dark"]{
  --cream:#0E1614; --cream-2:#121D1A; --card:#16231F;
  --ink:#ECE6DA; --muted:#93A39D; --hairline:#26332E; --soft:#1A2723;
  --ok:#5AA57A; --warn:#C8A463; --bad:#D9614A;
  --gold-dark:#C8A463;
  --teal:#3E9E96; --teal-2:#48ADA4;
  --rail-1:#0B1513; --rail-2:#070E0D;
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -4px rgba(0,0,0,.5);
  --sh-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.7);
  --sh-3:0 4px 8px rgba(0,0,0,.45), 0 28px 56px -24px rgba(0,0,0,.8);
}

/* ---------------------------------------------------------------------------
   The floating control
   --------------------------------------------------------------------------- */
.prefdock{
  position:fixed;right:18px;bottom:16px;z-index:900;
  display:inline-flex;align-items:center;gap:6px;padding:5px;
  background:rgba(8,32,29,.86);border:1px solid rgba(200,164,99,.34);border-radius:99px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  transition:opacity .28s var(--ease,ease), transform .28s var(--ease,ease);
}
.prefdock.tuck{opacity:.34;transform:translateY(4px)}
.prefdock:hover,.prefdock:focus-within{opacity:1;transform:none}
.prefdock .pd-g{display:inline-flex;gap:2px}
.prefdock .pd-sep{width:1px;height:18px;background:rgba(200,164,99,.28)}
.prefdock a{
  display:inline-grid;place-items:center;min-width:34px;height:28px;padding:0 9px;border-radius:99px;
  color:#9CC4C1;text-decoration:none;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  transition:background .18s, color .18s;
}
.prefdock a:hover{color:#fff;background:rgba(247,244,238,.1)}
.prefdock a:focus-visible{outline:2px solid var(--gold,#C8A463);outline-offset:2px}
.prefdock a[aria-pressed="true"]{background:linear-gradient(100deg,#C8A463,#E0C48B);color:#08201D}
.prefdock .pd-theme a{min-width:30px;padding:0 6px}
.prefdock svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* it must never sit on top of the thing you are reaching for */
@media print{ .prefdock{display:none} }
@media (max-width:520px){
  .prefdock{right:10px;bottom:10px;padding:4px}
  .prefdock a{min-width:30px;height:26px;padding:0 7px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .prefdock{transition:none}
}

/* ---------------------------------------------------------------------------
   The guide
   --------------------------------------------------------------------------- */
.guide{position:fixed;left:18px;bottom:16px;z-index:940;font-family:'Jost',system-ui,sans-serif}
.g-fab{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(200,164,99,.4);cursor:pointer;
  background:rgba(8,32,29,.9);color:#E0C48B;border-radius:99px;padding:9px 16px 9px 12px;
  font:600 11px 'Jost',system-ui;letter-spacing:.1em;text-transform:uppercase;position:relative;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);backdrop-filter:blur(14px);transition:.2s cubic-bezier(.22,.61,.36,1)}
.g-fab:hover{border-color:#C8A463;color:#fff;transform:translateY(-1px)}
.g-fab:focus-visible{outline:2px solid #C8A463;outline-offset:2px}
.g-fab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.g-dot[hidden]{display:none}
.g-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:99px;background:#C8A463;
  box-shadow:0 0 0 2px rgba(8,32,29,.9);animation:gpulse 2.4s ease-in-out infinite}
@keyframes gpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
.g-panel[hidden]{display:none}
.g-panel{position:absolute;left:0;bottom:calc(100% + 10px);width:min(370px,calc(100vw - 36px));
  background:var(--card,#fff);color:var(--ink,#111);border:1px solid var(--hairline,#E0D5C7);border-radius:16px;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.6);overflow:hidden;display:flex;flex-direction:column;
  max-height:min(74vh,620px);animation:gin .24s cubic-bezier(.22,.61,.36,1) both}
@keyframes gin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.g-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--hairline,#E0D5C7);
  background:linear-gradient(160deg,#12716B,#0E5A5A);color:#F7F4EE}
.g-head b{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;flex:1}
.g-x{background:none;border:0;color:#9CC4C1;font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.g-x:hover{color:#fff}
.g-body{padding:14px;overflow-y:auto;flex:1;min-height:0}
.g-tip{display:flex;gap:10px;background:var(--soft,#F0EBE0);border:1px solid var(--hairline,#E0D5C7);
  border-left:3px solid var(--gold,#C8A463);border-radius:11px;padding:11px 13px;margin-bottom:13px}
.g-tip svg{width:17px;height:17px;flex:none;margin-top:2px;fill:none;stroke:var(--gold-dark,#9B7E47);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.g-tip p{margin:0;font-size:13px;line-height:1.7}
.g-lbl{font-size:8.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dark,#9B7E47);margin:14px 0 7px}
.g-links{display:flex;flex-direction:column;gap:6px}
.g-links a{display:block;border:1px solid var(--hairline,#E0D5C7);border-radius:9px;padding:8px 11px;
  font-size:12.5px;color:var(--teal,#0E5A5A);text-decoration:none;transition:.16s}
.g-links a:hover{border-color:var(--gold,#C8A463);background:var(--soft,#F0EBE0)}
.g-qs{display:flex;flex-direction:column;gap:5px}
.g-qs button{text-align:left;background:none;border:1px solid transparent;border-radius:8px;padding:7px 9px;
  font:400 12.5px 'Jost',system-ui;color:var(--ink,#111);cursor:pointer;transition:.16s}
.g-qs button:hover{border-color:var(--hairline,#E0D5C7);background:var(--soft,#F0EBE0)}
.g-tour{display:flex;align-items:center;gap:8px;width:100%;justify-content:center;cursor:pointer;
  background:linear-gradient(140deg,#E0C48B,#C8A463 55%,#9B7E47);border:0;color:#08201D;border-radius:99px;
  padding:10px;font:700 10.5px 'Jost',system-ui;letter-spacing:.14em;text-transform:uppercase;margin-top:13px}
.g-tour svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-q{font-size:14.5px;font-weight:600;margin:10px 0 6px;line-height:1.4}
.g-a{font-size:13px;line-height:1.8;color:var(--muted,#6B6459);margin:0 0 10px}
.g-note{font-size:12px;line-height:1.7;color:var(--gold-dark,#9B7E47);background:var(--soft,#F0EBE0);
  border-radius:9px;padding:9px 11px;margin:8px 0}
.g-back{background:none;border:0;cursor:pointer;color:var(--muted,#6B6459);font-size:16px;padding:0 0 4px}
.g-back:hover{color:var(--teal,#0E5A5A)}
.g-row{display:flex;gap:8px;align-items:center;margin-top:12px}
.g-next{flex:1;text-align:center;background:linear-gradient(140deg,#E0C48B,#C8A463 55%,#9B7E47);color:#08201D;
  border:0;border-radius:99px;padding:9px;font:700 10.5px 'Jost',system-ui;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;cursor:pointer}
.g-quiet{background:none;border:1px solid var(--hairline,#E0D5C7);border-radius:99px;padding:9px 13px;cursor:pointer;
  font:600 10.5px 'Jost',system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#6B6459)}
.g-talk{display:block;text-align:center;margin-top:14px;font-size:12px;color:var(--teal,#0E5A5A);text-decoration:none}
.g-talk:hover{text-decoration:underline}
.g-ask{display:flex;gap:0;border-top:1px solid var(--hairline,#E0D5C7)}
.g-ask input{flex:1;border:0;background:none;padding:12px 14px;font:400 13px 'Jost',system-ui;color:var(--ink,#111);outline:none;min-width:0}
.g-ask button{border:0;background:none;color:var(--gold-dark,#9B7E47);font-size:17px;padding:0 15px;cursor:pointer}
.g-ask button:hover{color:var(--teal,#0E5A5A)}
.g-foot{margin:0;padding:9px 14px 11px;font-size:10.5px;line-height:1.6;color:var(--muted,#6B6459);
  border-top:1px solid var(--hairline,#E0D5C7);background:var(--cream-2,#FBF9F5)}
@media(max-width:520px){
  .guide{left:10px;bottom:10px}
  .g-fab span{display:none}
  .g-fab{padding:10px}
  .g-panel{width:calc(100vw - 20px)}
}
@media print{.guide{display:none}}
@media (prefers-reduced-motion:reduce){.g-dot{animation:none}.g-panel{animation:none}}

/* ---------------------------------------------------------------------------
   The language switch, wherever lang_switch() is dropped: a nav bar, a form
   footer, a marketing page. 'light' is the only style in use today, built
   for a dark teal ground; add another modifier only once a page needs one.
   --------------------------------------------------------------------------- */
.langsw{display:inline-flex;gap:2px;border-radius:99px;padding:2px;vertical-align:middle}
.langsw a{display:inline-block;min-width:30px;text-align:center;padding:6px 11px;border-radius:99px;
  font:700 10.5px 'Jost',system-ui,sans-serif;letter-spacing:.1em;text-decoration:none;
  transition:.2s cubic-bezier(.22,.61,.36,1)}
.langsw.light{border:1px solid rgba(200,164,99,.4)}
.langsw.light a{color:var(--sage,#9CC4C1)}
.langsw.light a:hover{color:#fff}
.langsw.light a.on{background:linear-gradient(100deg,var(--gold,#C8A463),var(--gold-light,#E6CC93));color:var(--teal-deep,#08201d)}

/* ---------------------------------------------------------------------------
   Keyboard focus, everywhere, once.
   Per-component focus rules covered three controls out of roughly forty, which
   left anyone navigating by keyboard guessing where they were. This is the
   floor; a component may still style its own focus more precisely.
   --------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--gold, #C8A463);
  outline-offset:2px;
  border-radius:4px;
}
/* a dark control needs the lighter gold to clear the ground */
:where(.side, .rail, .prefdock, .g-panel, .findtop) :where(a, button, input, select):focus-visible{
  outline-color:var(--gold-light, #E6CC93);
}