/* Tablabhub. The same token vocabulary as Target-ID, Pocket2D and LinkerBuilder (paper, panel, ink, rule ...),
   one accent of its own: moss. The three tools keep theirs, which tools.css (generated from the registry) sets
   per card as --a / --on-a.

   In the dark theme all main text is ONE light grey, #D4D8D5 (xaba, 2026-10-08: light grey, not white, not dark grey; the same value on every site).
   Both dark blocks below must stay identical: one for the visitor who chose Dark, one for the visitor whose
   system is dark and who has chosen nothing. tests/test_site.py compares them. */

:root{
  --paper:#EEEFEA; --panel:#FFFFFF; --ink:#151A17; --ink2:#56605A; --body:#252C28;
  --rule:#D3D8D1; --rule2:#E3E7E1; --field:#FBFCFA; --soft:#F5F6F2; --chip:#E4E8E1;
  --hover:#E6EFE6; --sel:#D2E4D4;
  --moss:#006826; --on-moss:#FFFFFF; --moss-hover:#005A22;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:"Barlow Condensed","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
html[data-theme="dark"]{
  --paper:#1E2220; --panel:#2A302D; --ink:#D4D8D5; --ink2:#A8B2AC; --body:#D4D8D5;
  --rule:#444D48; --rule2:#353C38; --field:#252A27; --soft:#252A27; --chip:#38403B;
  --hover:#323D36; --sel:#3F5A47;
  --moss:#80CD8B; --on-moss:#09120A; --moss-hover:#A3DCAC;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --paper:#1E2220; --panel:#2A302D; --ink:#D4D8D5; --ink2:#A8B2AC; --body:#D4D8D5;
    --rule:#444D48; --rule2:#353C38; --field:#252A27; --soft:#252A27; --chip:#38403B;
    --hover:#323D36; --sel:#3F5A47;
    --moss:#80CD8B; --on-moss:#09120A; --moss-hover:#A3DCAC;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:16px}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:var(--moss)} a:hover{color:var(--moss-hover)}
:focus-visible{outline:2px solid var(--moss); outline-offset:2px}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-999px; top:8px; background:var(--panel); color:var(--ink); padding:8px 12px; border:1px solid var(--rule); border-radius:4px; z-index:9}
.skip:focus{left:8px}

/* masthead */
.top{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--rule)}
.brand{font-family:var(--cond); font-weight:600; font-size:31px; line-height:1; letter-spacing:.005em; color:var(--ink); text-decoration:none}
.brand .grey{color:var(--ink2)}     /* Tab and hub quiet, lab in the green: the lab is the point (xaba) */
.brand .green{color:var(--moss)}
.theme{display:inline-flex; border:1px solid var(--rule); border-radius:4px; overflow:hidden; flex:0 0 auto}
.theme button{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--panel); color:var(--ink2); border:0; padding:6px 10px; cursor:pointer}
.theme button+button{border-left:1px solid var(--rule)}
.theme button[aria-pressed="true"]{background:var(--moss); color:var(--on-moss)}

/* hero: a title and three tags */
.hero{padding:56px 0 30px}
/* one line wherever the words fit: the size follows the width of the page (and the words wrap, rather than overflow, on a narrow phone) */
h1{font-family:var(--cond); font-weight:600; font-size:clamp(21px,5.2vw,58px); line-height:1.1; letter-spacing:.003em; margin:0}
h1 .hl{color:var(--moss)}
.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:22px 0 0; padding:0}
.tags li{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--moss); border:1px solid var(--rule); border-radius:3px; padding:4px 10px; cursor:help}

/* tool cards */
.tools{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch}
.tools:has(> .tool:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}      /* exactly four tools: two by two, not three and one alone */
.tool{background:var(--panel); border:1px solid var(--rule); border-top:4px solid var(--a); border-radius:6px; padding:18px 18px 20px; display:flex; flex-direction:column}
.tool-head{display:flex; align-items:baseline; gap:10px; margin:0 0 4px}
.step{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--a)}
.verb{font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink2)}
.tool h2{font-family:var(--cond); font-weight:600; font-size:32px; line-height:1.1; margin:0 0 14px}
.wm .w-ink{color:var(--ink)} .wm .w-a{color:var(--a)} .wm .w-b{color:var(--wm-b)}      /* the tool's own wordmark: ink, its accent, a second colour */
.wm sup{font-size:.42em; vertical-align:super; line-height:0; margin-left:.07em; letter-spacing:.04em}
.facts{margin:0 0 18px; padding:12px 0 0; border-top:1px solid var(--rule2); display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px}
.facts dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink2); padding-top:3px}
.facts dd{margin:0; color:var(--body)}
.facts dd[title]{cursor:help}
.actions{margin-top:auto; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center}
.btn{display:inline-block; font-family:var(--cond); font-weight:600; font-size:17px; letter-spacing:.02em; text-decoration:none; background:var(--a); color:var(--on-a); border:1px solid var(--a); border-radius:4px; padding:7px 22px}
.btn:hover{color:var(--on-a); filter:brightness(1.1)}
.btn.soon{background:none; color:var(--ink2); border:1px dashed var(--rule); cursor:default}
.btn.alt{background:transparent; color:var(--a)}      /* the second button: the same size and border, the accent as ink instead of fill */
.btn.alt:hover{background:var(--a); color:var(--on-a); filter:none}
.ghost{font-size:13px; color:var(--a)}
.ghost:hover{color:var(--ink)}

/* the agents' files, the contact, the credits */
.meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin:26px 0 0; font-family:var(--mono); font-size:12px}
.meta span{color:var(--ink2); text-transform:uppercase; letter-spacing:.07em; font-size:10.5px}
.credits{margin-top:34px; padding-top:14px; border-top:1px solid var(--rule2)}
.credits h2{font-family:var(--cond); font-weight:600; font-size:18px; margin:0 0 8px}
.credits dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:12.5px}
.credits dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink2); padding-top:2px}
.credits dd{margin:0; color:var(--body)}
/* "What it is": text for people who arrive from a search result and for crawlers, in the page's quiet style, below the tools and above the credits */
.about{margin-top:34px; padding-top:14px; border-top:1px solid var(--rule2); max-width:68ch; font-size:13px; line-height:1.6; color:var(--body)}
.about h2{font-family:var(--cond); font-weight:600; font-size:18px; margin:0 0 8px; color:var(--ink)}
.about p{margin:0 0 9px}
.about details{border-top:1px solid var(--rule2); padding:7px 0}
.about summary{cursor:pointer; color:var(--ink); font-weight:600}
.about details p{margin:6px 0 2px}

/* the footer is the kit's (site-footer.css); inside the page's column it needs no gutter of its own */
.wrap .site-footer{padding-left:0; padding-right:0; max-width:none}
.site-version{margin:0 0 40px; font-size:11.5px; color:var(--ink2)}
.mono{font-family:var(--mono)}

@media (max-width:900px){
  .tools, .tools:has(> .tool:nth-child(4):last-child){grid-template-columns:1fr}
  .hero{padding-top:40px}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }