/* The Celephant bench, shared by every page but the chat: red plate header, brushed steel
   deck, a card clamped to it, and the search bar's field and push-button styles for forms.
   Same variables and class names as web/index.html, which carries its own copy (its deck
   holds the sticky search bar): keep colours, fields and clamp geometry in step if the
   bench changes. The animated bench itself lives in /static/hero.js. */

@font-face { font-family: "Aptos"; src: url("/static/fonts/Aptos-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("/static/fonts/Aptos-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("/static/fonts/Aptos-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("/static/fonts/Aptos-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;
  --red: #d9101f; --red-dark: #a10b15; --red-light: #f0323f;
  --yellow: #f6c700; --yellow-dark: #c79f00; --iron: #1a1c1e;
  --steel: #c9ced3; --steel-dark: #aab1b7;
  /* the deck: a drafting grid on brushed steel, lit from above, darker towards the edges */
  --grid: rgba(26, 28, 30, .075); --grid-major: rgba(26, 28, 30, .14); --deck-light: rgba(255, 255, 255, .38);
  --vignette: rgba(0, 0, 0, .22);
  --panel: #ffffff; --text: #1a1c1e; --muted: #5c646b; --border: #d3d8dc; --bg: #f1f3f4;
  --accent: var(--red); --accent-soft: #fde8ea;
  /* machined look: chamfered corners where supported, rounded elsewhere */
  --chamfer: bevel;
  /* a real damped spring (k=210, c=24), ~1% overshoot */
  --spring: linear(0, 0.054 4.5%, 0.176 9.1%, 0.323 13.6%, 0.47 18.2%, 0.603 22.7%, 0.714 27.3%, 0.803 31.8%, 0.871 36.4%, 0.921 40.9%, 0.956 45.5%, 0.98 50%, 0.995 54.5%, 1.003 59.1%, 1.008 63.6%, 1.009 68.2%, 1.009 72.7%, 1.008 77.3%, 1.007 81.8%, 1.006 86.4%, 1.004 90.9%, 1.003 95.5%, 1.002 100%, 1);
  --ease-out: cubic-bezier(.2, .7, .1, 1);
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --steel: #3b4147; --steel-dark: #383e43;
    --grid: rgba(255, 255, 255, .055); --grid-major: rgba(255, 255, 255, .11); --deck-light: rgba(255, 255, 255, .07);
    --vignette: rgba(0, 0, 0, .45);
    --panel: #1e2124; --text: #eceff1; --muted: #aab2ba; --border: #363b40; --bg: #171a1c;
    --accent: var(--red-light); --accent-soft: #3a191d;
  }
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0; padding: 0; color: var(--text); background: var(--steel);
  font: 18px/1.6 "Aptos", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* the clamps' bolt heads may stick out by a few pixels: never a scrollbar */
}
::selection { background: var(--yellow); color: var(--iron); }
.bench { min-height: 100vh; display: flex; flex-direction: column; }

/* --- Front plate (header): the logo and the name at the left; at the right, a panel laid over
   the plate (absolute, so nothing reflows when a control changes shape) with the yellow clamp
   button to contribute. plate.js shows the panel once the session is known. --------------- */
.plate {
  position: relative; z-index: 3; padding: 12px 430px 12px 40px;
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(to bottom, var(--red-light), var(--red) 45%, var(--red-dark));
  border-bottom: 5px solid var(--red-dark);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55);
}
/* the plate is bolted on: a bolt head at each end */
.plate::before, .plate::after {
  content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a5f65, var(--iron) 65%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), 0 1px 0 rgba(255, 255, 255, .2), 0 -1px 2px rgba(0, 0, 0, .5);
}
.plate::before { left: 14px; } .plate::after { right: 14px; }
.plate .brand { display: flex; align-items: center; gap: 18px; flex: none; min-width: 0; color: #fff; text-decoration: none; }
.plate .brand:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 4px; }
/* the logo on a white disc, as on its own artwork; the ring turns a notch under the pointer */
.roundel {
  width: 72px; height: 72px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .08); flex: none;
  transition: transform .4s var(--spring);
}
.roundel img { width: 64px; height: 64px; display: block; }
a.brand:hover .roundel { transform: rotate(-10deg); }
.plate .title { display: flex; flex-direction: column; line-height: 1.1; }
.plate h1 {
  margin: 0; font-size: 26px; font-weight: 800; letter-spacing: 6px; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .2);
}
.plate .sub { font-size: 12px; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-top: 4px; }
.panel {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 18px;
}
.panel[hidden] { display: none; }
/* Contribute: the one thing to do here besides asking, so it wears the clamp's yellow */
.add {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 16px;
  border-radius: 10px; corner-shape: var(--chamfer); text-decoration: none; color: var(--iron);
  font-size: 14px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(to bottom, #ffd83a, var(--yellow) 40%, var(--yellow-dark));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 10px -4px rgba(0, 0, 0, .6);
  transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out), filter .2s;
}
.add:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .5), 0 7px 14px -4px rgba(0, 0, 0, .6);
}
.add:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); }
.add:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.add svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
/* on its own page the button is pressed in and stays so */
.add.on { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25); filter: brightness(.96); cursor: default; }
/* the library, beside it: the same button in the plate's darker key - documents are
   there to be read, contributing is the thing to do */
.add.quiet { background: linear-gradient(to bottom, #3a3f45, var(--iron) 45%, #0e1012); color: var(--yellow); }
.add.quiet:hover { filter: brightness(1.35); }
/* two controls on the plate: below this their labels go and the icons stay */
@media (max-width: 900px) {
  .plate { padding-right: 190px; }
  .add { padding: 0 14px; } .add .lbl { display: none; }
}
/* --- Deck: brushed steel plate with a drafting grid, lit from above ----------- */
.deck {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; isolation: isolate; padding: 36px 16px 64px;
  background:
    radial-gradient(130% 110% at 50% 30%, transparent 45%, var(--vignette) 100%),
    linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px) 0 0 / 160px 160px,
    linear-gradient(0deg, var(--grid-major) 0 1px, transparent 1px) 0 0 / 160px 160px,
    linear-gradient(90deg, var(--grid) 0 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, var(--grid) 0 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(120% 55% at 50% 0, var(--deck-light), transparent 70%),
    var(--steel);
}
.deck::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--brush) 0 0 / 600px 200px; mix-blend-mode: overlay; opacity: .26;
}
/* the animated bench (hero.js), when a page carries one: under the card, over the deck */
.hero { position: absolute; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }

/* --- The card: a part clamped to the deck, like the chat's result card --------- */
.card {
  position: relative; width: min(760px, 100%); background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; corner-shape: var(--chamfer);
  padding: 26px 32px 28px; overflow-wrap: break-word;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .7);
  animation: rise .55s var(--spring) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
/* status ring: the chat's red sweep runs round the card while the server works (.card.loading) */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card::before {
  content: ""; position: absolute; inset: -3px; border-radius: 15px; corner-shape: inherit;
  border: 3px solid transparent; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0 55%, var(--red) 78%, #ffd0d3 82%, var(--red) 86%, transparent 100%) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease-out);
}
.card.loading::before { opacity: 1; animation: sweep 1.5s linear infinite; }
@keyframes sweep { to { --angle: 360deg; } }
.clamp {
  position: absolute; width: 30px; height: 30px; border: 8px solid var(--yellow); pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .4));
  animation: clampIn .6s var(--spring) both;
}
.clamp::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--iron);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .5);
}
.clamp.tl { top: -10px; left: -10px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; --dx: -14px; --dy: -14px; }
.clamp.tr { top: -10px; right: -10px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; --dx: 14px; --dy: -14px; }
.clamp.bl { bottom: -10px; left: -10px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; --dx: -14px; --dy: 14px; }
.clamp.br { bottom: -10px; right: -10px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; --dx: 14px; --dy: 14px; }
.clamp.tl::after { top: -7px; left: -7px; }
.clamp.tr::after { top: -7px; right: -7px; }
.clamp.bl::after { bottom: -7px; left: -7px; }
.clamp.br::after { bottom: -7px; right: -7px; }
@keyframes clampIn { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

h2 { margin: 0 0 14px; font-size: 24px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.line { color: var(--muted); font-size: 16px; }

/* --- Fields: the search field's look, on the card's grey ------------------------- */
label {
  display: block; margin: 0 0 8px 2px;
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
input, textarea {
  width: 100%; margin: 0 0 20px; border: 1px solid var(--border); border-radius: 8px;
  corner-shape: var(--chamfer); background: var(--bg); color: var(--text);
  padding: 12px 16px; font: inherit; height: 54px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .08);
  transition: border-color .2s, background .2s;
}
textarea { height: auto; min-height: 220px; resize: vertical; line-height: 1.6; }
input:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--iron); outline-offset: -1px; border-color: var(--iron); background: var(--panel); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[hidden], textarea[hidden] { display: none; }
/* a file to import: a dashed tray with the push button inside */
input[type="file"] {
  height: auto; padding: 12px; border-style: dashed; cursor: pointer; color: var(--muted); font-size: 16px;
  display: flex; align-items: center; gap: 14px;
}
input[type="file"]::file-selector-button {
  border: 0; border-radius: 8px; corner-shape: var(--chamfer); background: var(--iron); color: var(--yellow);
  padding: 0 18px; height: 42px; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .5px; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
}

/* --- Buttons: the search bar's push button, travels 2px under the finger --------- */
button {
  border: 0; border-radius: 8px; corner-shape: var(--chamfer);
  background: var(--iron); color: var(--yellow); padding: 0 22px; font: inherit; font-weight: 700;
  letter-spacing: .5px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 10px; height: 54px; white-space: nowrap;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out), background .2s;
}
button:hover { background: #2a2d31; }
button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .6), inset 0 2px 4px rgba(0, 0, 0, .6);
}
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }
button[hidden] { display: none; }
/* the quieter one, next to a primary: outlined, no travel */
button.secondary {
  background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--text);
}
button.secondary:hover { background: var(--bg); }
button.secondary:active:not(:disabled) { transform: none; box-shadow: inset 0 0 0 2px var(--text), inset 0 2px 4px rgba(0, 0, 0, .15); }
/* the status ring of a result card, shrunk into a button while the server works */
.spin {
  width: 18px; height: 18px; border-radius: 50%; flex: none; display: none;
  border: 3px solid rgba(246, 199, 0, .3); border-top-color: var(--yellow);
  animation: turn .8s linear infinite;
}
button.secondary .spin { border-color: rgba(128, 128, 128, .3); border-top-color: currentColor; }
.busy .spin, .busy > .spin { display: block; }
@keyframes turn { to { transform: rotate(360deg); } }
.actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; margin-top: 8px; }
.error { margin: 16px 0 0; color: var(--accent); font-size: 15px; font-weight: 700; }
.error:empty { display: none; }

/* --- The chat's tabs, reused as they are -------------------------------------- */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs[hidden] { display: none; }
.tab {
  padding: 6px 16px; border-radius: 999px; cursor: pointer; font-size: 15px;
  font-weight: 600; border: 1px solid var(--border); color: var(--muted); user-select: none;
  white-space: nowrap;
}
.tab:hover { border-color: var(--muted); color: var(--text); }
.tab.active { background: var(--red); border-color: var(--red); color: #fff; }

@media (max-width: 640px) {
  .plate { padding: 10px 76px 10px 14px; gap: 12px; }
  .plate::before, .plate::after { display: none; }
  .plate .brand { gap: 12px; }
  .roundel { width: 52px; height: 52px; } .roundel img { width: 46px; height: 46px; }
  .plate h1 { font-size: 18px; letter-spacing: 4px; }
  .plate .sub { display: none; }
  .panel { right: 14px; gap: 10px; }
  .add { height: 40px; padding: 0 10px; } .add .lbl { display: none; }
  .deck { padding: 22px 12px 44px; }
  .card { padding: 22px 18px 20px; }
  .tabs { flex-wrap: wrap; }
  .tab { padding: 6px 13px; font-size: 14px; }
  /* the buttons share the width instead of a fixed size each */
  .actions { flex-wrap: wrap; }
  .actions button { flex: 1 1 140px; min-width: 0; }
  input, textarea { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero { display: none; }
}
/* --- Asking before an irreversible action (ask.js): a small card clamped over the dimmed deck.
   The dialog springs in and out: display and overlay transition discretely, so the closing
   animation plays before the element goes. ----------------------------------------------- */
dialog.ask {
  width: min(460px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border);
  border-radius: 12px; corner-shape: var(--chamfer); background: var(--panel); color: var(--text);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85);
  opacity: 0; transform: translateY(22px) scale(.96);
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out),
              overlay .3s allow-discrete, display .3s allow-discrete;
}
dialog.ask[open] { opacity: 1; transform: none; transition: opacity .25s var(--ease-out), transform .55s var(--spring); }
@starting-style { dialog.ask[open] { opacity: 0; transform: translateY(22px) scale(.96); } }
dialog.ask::backdrop {
  background: rgba(20, 24, 28, .38); backdrop-filter: blur(6px);
  transition: background .3s, backdrop-filter .3s, overlay .3s allow-discrete, display .3s allow-discrete;
}
@starting-style { dialog.ask[open]::backdrop { background: rgba(20, 24, 28, 0); backdrop-filter: blur(0); } }
dialog.ask .body { padding: 28px 30px 26px; }
dialog.ask p { margin: 0 0 22px; font-size: 18px; text-wrap: pretty; }
dialog.ask .actions { margin: 0; }
/* the button that does the irreversible thing wears the plate's red */
button.danger { background: linear-gradient(to bottom, var(--red-light), var(--red) 45%, var(--red-dark)); color: #fff; }
button.danger:hover { background: linear-gradient(to bottom, #ff5560, var(--red-light) 45%, var(--red)); }

/* the pages toggle controls with the hidden attribute: it must beat any display above */
[hidden] { display: none !important; }