/* TakoDB public site — shared "aizome" design system.
   Used by index.html, docs.html, contact.html.
   NOTE: this is NOT the operator console stylesheet (that is web/admin.css). */

:root {
  --ground: #182b47;
  --ground-2: #14243c;
  --surface: #21395c;
  --ink: #ece7d8;
  --muted: #9aaabf;
  --rule: rgba(236, 231, 216, .16);
  --rule-strong: rgba(236, 231, 216, .34);
  --accent: #e0553a;
  /* The same hue, lightened until it clears 4.5:1 on --ground (it reaches 5.65:1). The
     brand accent is 3.75:1, which is fine for large display text and for a fill behind
     dark ink, but fails for the small mono labels it was also being used for. */
  --accent-text: #f2856b;
  --seal-ink: #fbf3ec;
  --display: "Shippori Mincho", "Yu Mincho", Georgia, "Times New Roman", serif;
  --body: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --edge: min(88px, 6vw);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--seal-ink); }
img { max-width: 100%; }

/* ---------- seal / hanko (蛸 made prominent) ---------- */
.seal {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  background: var(--accent); color: var(--seal-ink);
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1;
  border-radius: 6px; transform: rotate(-3deg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--seal-ink) 34%, var(--accent));
}

/* ---------- sticky header ---------- */
header.site {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--ground) 90%, #000);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(140%) blur(6px);
}
header.site .row { display: flex; align-items: center; gap: 16px 30px; flex-wrap: wrap; padding: 16px var(--edge); }
.wordmark { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.wordmark .name { font-family: var(--mono); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
nav.top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin-left: auto; font-family: var(--mono); font-size: .82rem; }
nav.top a { color: var(--muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; transition: color .15s; }
nav.top a .n { font-size: .72rem; color: var(--accent-text); margin-right: 5px; }
nav.top a:hover { color: var(--ink); }
nav.top a.active, nav.top a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
nav.top a.signin { color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 5px 13px; }
nav.top a.signin:hover { border-color: var(--ink); background: rgba(236, 231, 216, .04); }
.byv { font-family: var(--mono); font-size: .8rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.byv:hover { color: var(--ink); } .byv b { color: var(--ink); font-weight: 700; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 104px var(--edge) 96px; }
.watermark {
  position: absolute; top: 50%; right: -14px; transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--display); font-weight: 500; letter-spacing: .04em; line-height: .94;
  font-size: clamp(8rem, 19vw, 15rem); color: var(--ink); opacity: .05;
  white-space: nowrap; z-index: 0; pointer-events: none; user-select: none;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.32fr 1fr; gap: 52px; align-items: center; }
.hero-grid > * { min-width: 0; } /* let the code card scroll instead of forcing the column wide */
.term { min-width: 0; }
.eyebrow { font-family: var(--mono); font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0; }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 6.4vw, 5rem); line-height: 1.04; margin: 22px 0 0; max-width: 13ch; text-wrap: balance; }
.hero h1 .accent { color: var(--accent); }
.subhead { max-width: 52ch; margin: 26px 0 0; font-size: 1.22rem; line-height: 1.6; }
.status { max-width: 56ch; margin: 22px 0 0; font-size: .95rem; line-height: 1.6; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 14px; }
.status b { color: var(--ink); }
/* Without JavaScript every panel is shown, each under its own caption, and the tab buttons
   are hidden because nothing would happen if they were pressed. The script reverses both
   when it takes over: captions off, tabs on. */
.tab-caption { margin: 0; padding: 10px 18px 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
[data-tabs-enhanced] .tab-caption { display: none; }
.term .tabs, .code .langtabs { display: none; }
[data-tabs-enhanced] .tabs, [data-tabs-enhanced] .langtabs { display: inline-flex; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }
.btn { font-family: var(--mono); font-size: .88rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; padding: 14px 24px; border-radius: 4px; transition: transform .12s, background .15s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--accent); color: var(--seal-ink); }
.btn.solid:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn.ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* ensō + seal accent (right of hero-demo on wide, hidden refinement) */
.enso { position: absolute; top: 40px; right: var(--edge); width: 108px; height: 108px; color: var(--ink); z-index: 1; }
.enso svg { display: block; width: 100%; height: 100%; opacity: .08; }
.enso .center { position: absolute; inset: 0; display: grid; place-items: center; }
.enso .center .seal { width: 58px; height: 58px; font-size: 2.1rem; transform: rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .enso .center .seal { animation: press .55s cubic-bezier(.2, .9, .3, 1) both; }
  @keyframes press { 0% { transform: rotate(-6deg) scale(1.3); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
}

/* ---------- terminal / demo card (fills the hero right) ---------- */
.term { background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--rule-strong), 0 24px 50px -34px rgba(0,0,0,.8); }
.term .bar { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.term .bar i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.term .bar .ep { margin-left: 8px; color: var(--ink); }
.term .tabs { margin-left: 10px; gap: 4px; }
.term .tabs button { font-family: var(--mono); font-size: .72rem; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 2px 6px 3px; cursor: pointer; }
.term .tabs button:hover { color: var(--ink); }
.term .tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.term pre { margin: 0; padding: 16px 17px; font-family: var(--mono); font-size: .8rem; line-height: 1.65; color: #dfe6ef; overflow-x: auto; }
.term pre .c { color: #7286a0; } .term pre .k { color: #f0a58f; } .term pre .s { color: #a9c6a0; }

/* ---------- positioning band ---------- */
.band { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band .cell { padding: 30px 32px; border-right: 1px solid var(--rule); }
.band .cell:first-child { padding-left: var(--edge); }
.band .cell:last-child { padding-right: var(--edge); border-right: 0; }
.band b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.22rem; margin-bottom: 7px; }
.band span { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ---------- brush divider ---------- */
.brush { display: block; width: 100%; height: 18px; color: var(--ink); opacity: .4; }
.brush svg { display: block; width: 100%; height: 100%; }

/* ---------- landing "how it works" teasers ---------- */
.section-head { padding: 72px var(--edge) 0; }
.section-head .kicker { font-family: var(--mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 10px; }
.section-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.7rem); margin: 0; }
.section-head p { max-width: 60ch; color: var(--muted); font-size: 1.05rem; margin: 14px 0 0; }
.teasers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); box-shadow: 0 0 0 1px var(--rule); margin: 40px var(--edge) 0; }
a.teaser { display: block; background: var(--ground); padding: 26px 28px; text-decoration: none; color: var(--ink); transition: background .15s; }
a.teaser:hover { background: var(--surface); }
a.teaser .tnum { font-family: var(--mono); font-size: .72rem; color: var(--accent-text); letter-spacing: .1em; }
a.teaser h3 { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 12px 0 8px; }
a.teaser p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.6; }
a.teaser .more { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: .76rem; color: var(--accent-text); }

/* highlight diagram block on landing */
.spotlight { margin: 40px var(--edge) 0; padding: 34px; border: 1px solid var(--rule-strong); background: var(--ground-2); }
.spotlight .lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }

/* ---------- shared diagrams ---------- */
.diagram { border: 1px solid var(--rule-strong); background: var(--surface); padding: 22px; margin: 8px 0 24px; }
.dirbox { border: 1px dashed var(--rule-strong); padding: 15px; }
.dirname { font-family: var(--mono); font-size: .76rem; color: var(--muted); margin-bottom: 13px; letter-spacing: .04em; }
.files { display: flex; flex-wrap: wrap; gap: 9px; }
.file { font-family: var(--mono); font-size: .8rem; padding: 8px 11px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.file .side { color: var(--muted); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.node { background: var(--ground); box-shadow: inset 0 0 0 1px var(--rule-strong); padding: 11px 14px; font-size: .84rem; line-height: 1.35; }
.node b { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.arrow { color: var(--muted); }
.verdict { display: inline-flex; align-items: center; gap: 10px; padding: 11px 15px; box-shadow: inset 0 0 0 1px var(--rule-strong); background: var(--ground); font-family: var(--mono); font-size: .84rem; }
.maru { font-size: 1.15rem; color: var(--ink); } .batsu { font-size: 1.15rem; color: var(--accent-text); }
.caps { display: flex; flex-wrap: wrap; margin: 8px 0 20px; box-shadow: inset 0 0 0 1px var(--rule-strong); width: fit-content; }
.cap-item { font-family: var(--mono); font-size: .82rem; padding: 11px 17px; border-right: 1px solid var(--rule-strong); }
.cap-item:last-child { border-right: 0; }
.cap-item b { color: var(--accent-text); font-weight: 700; }

/* ---------- code blocks with copy ---------- */
.code { position: relative; margin: 10px 0 22px; }
.code .label { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
/* Language switch inside a code block's label row. Sits left of the copy button, which is
   positioned over the top-right of the <pre> below. */
.code .langtabs { gap: 2px; margin-right: 74px; }
.code .langtabs button { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 1px 7px 3px; cursor: pointer; }
.code .langtabs button:hover { color: var(--ink); }
.code .langtabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.code pre { margin: 0; font-family: var(--mono); font-size: .84rem; line-height: 1.7; background: var(--ground-2); color: #dfe6ef; padding: 17px 19px; overflow-x: auto; box-shadow: inset 0 0 0 1px var(--rule); }
.code pre .k { color: #f0a58f; } .code pre .s { color: #a9c6a0; } .code pre .c { color: #7286a0; } .code pre .p { color: #e0c07a; }
.code .copy { position: absolute; top: 28px; right: 11px; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 6px 10px; cursor: pointer; }
.code .copy:hover { color: var(--ink); }

/* ---------- durability plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); box-shadow: inset 0 0 0 1px var(--rule-strong); margin: 10px 0 22px; }
.plan { padding: 24px; border-right: 1px solid var(--rule); }
.plan:last-child { border-right: 0; }
.plan.mid { background: var(--surface); }
.plan .pt { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.plan h3 { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 8px 0 16px; }
.plan ul { margin: 0; padding: 0; list-style: none; }
.plan li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: .92rem; line-height: 1.45; }
.plan li:first-child { border-top: 0; }
.plan li .m { color: var(--accent-text); flex: none; }

/* ---------- facts ---------- */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); box-shadow: inset 0 0 0 1px var(--rule); margin: 10px 0 22px; }
.fact { background: var(--ground); padding: 18px 20px; }
.fact dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.fact dd { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink); }

/* ---------- tables ---------- */
.errtable { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .82rem; margin: 8px 0 6px; }
.errtable th, .errtable td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--rule); }
.errtable th { color: var(--muted); font-weight: 500; }
.errtable td:first-child { color: var(--accent-text); white-space: nowrap; }
.endpoints { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .8rem; margin: 8px 0 6px; }
.endpoints td { padding: 9px 11px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.endpoints td:first-child { color: var(--accent-text); white-space: nowrap; padding-right: 22px; }
.endpoints td:last-child { color: var(--muted); }
.table-wrap { overflow-x: auto; }

/* inline code + emphasis */
em { font-style: normal; color: var(--accent-text); font-weight: 700; }
code { font-family: var(--mono); font-size: .86em; background: var(--surface); padding: .12em .42em; border-radius: 2px; }

/* ---------- closing CTA ---------- */
.ctaband { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding: 64px var(--edge); border-top: 1px solid var(--rule); margin-top: 78px; }
.ctaband h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; }
.ctaband p { margin: 10px 0 0; color: var(--muted); font-size: 1rem; }

/* ---------- footer ---------- */
footer.site { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 34px var(--edge) 46px; color: var(--muted); font-family: var(--mono); font-size: .82rem; line-height: 1.6; border-top: 1px solid var(--rule); }
footer.site .seal { width: 30px; height: 30px; font-size: 1.05rem; }
footer.site a { color: var(--ink); }
footer.site .spacer { flex: 1 1 40px; }

/* =====================================================================
   DOCS PAGE layout
   ===================================================================== */
.doc-hero { padding: 72px var(--edge) 40px; border-bottom: 1px solid var(--rule); }
.doc-hero .kicker { font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 12px; }
.doc-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.8rem); margin: 0; max-width: 18ch; text-wrap: balance; }
.doc-hero p { max-width: 62ch; color: var(--muted); font-size: 1.12rem; margin: 18px 0 0; }

.docs { display: grid; grid-template-columns: 232px 1fr; gap: 56px; padding: 48px var(--edge) 40px; align-items: start; }
.docs-toc { position: sticky; top: 92px; font-family: var(--mono); font-size: .82rem; }
.docs-toc .t { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.docs-toc a { display: flex; gap: 9px; padding: 8px 0; color: var(--muted); text-decoration: none; border-top: 1px solid var(--rule); }
.docs-toc a:first-of-type { border-top: 0; }
.docs-toc a .n { color: var(--accent-text); }
.docs-toc a:hover, .docs-toc a.active { color: var(--ink); }
.docs-main { min-width: 0; }
.docs-main section { padding-bottom: 52px; margin-bottom: 44px; border-bottom: 1px solid var(--rule); scroll-margin-top: 92px; }
.docs-main section:last-child { border-bottom: 0; }
.docs-main h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin: 0 0 6px; display: flex; align-items: baseline; gap: 14px; }
.docs-main h2 .kanji { font-family: var(--display); font-weight: 500; color: var(--accent); font-size: .9em; }
.docs-main h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 30px 0 10px; }
.docs-main p { max-width: 70ch; font-size: 1.02rem; line-height: 1.78; margin: 0 0 16px; }
.docs-main p.small { color: var(--muted); font-size: .92rem; }
.docs-main ul { max-width: 70ch; padding-left: 20px; line-height: 1.7; }
.docs-main li { margin: 6px 0; }

/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
.contact { position: relative; overflow: hidden; padding: 110px var(--edge) 96px; }
.contact > :not(.watermark) { position: relative; z-index: 1; }
.contact .octo { font-size: clamp(4rem, 12vw, 8rem); line-height: 1; display: block; margin-bottom: 24px; filter: saturate(1.05); }
.contact .kicker { font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 12px; }
.contact h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 5.4vw, 4rem); margin: 0; max-width: 16ch; text-wrap: balance; }
.contact p { max-width: 56ch; font-size: 1.16rem; line-height: 1.66; margin: 24px 0 0; }
.contact .email { display: inline-block; margin-top: 34px; font-family: var(--mono); font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--accent); text-decoration: none; border-bottom: 2px solid var(--rule-strong); padding-bottom: 4px; }
.contact .email:hover { border-bottom-color: var(--accent); }
.contact .note { margin-top: 40px; font-family: var(--mono); font-size: .84rem; color: var(--muted); }
.contact .note a { color: var(--ink); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; gap: 28px; }
  .docs-toc { position: static; top: auto; }
  .docs-toc a { display: inline-flex; border-top: 0; padding: 6px 14px 6px 0; }
}
@media (max-width: 760px) {
  :root { --edge: 22px; }
  html { font-size: 17px; }
  nav.top { width: 100%; margin-left: 0; order: 3; }
  .byv { margin-left: auto; }
  .hero { padding: 56px var(--edge) 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero h1 { max-width: none; font-size: 2.3rem; line-height: 1.1; }
  .subhead { font-size: 1.08rem; }
  .cta .btn { flex: 1 1 auto; text-align: center; }
  .watermark { font-size: 7rem; opacity: .045; }
  .enso { display: none; }
  .band, .teasers, .plans, .facts { grid-template-columns: 1fr; }
  .band .cell { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: var(--edge); padding-right: var(--edge); }
  .plan { border-right: 0; border-bottom: 1px solid var(--rule); } .plan:last-child { border-bottom: 0; }
}