/* ============================================================================
   craft/design/base.css — the starting stylesheet for a new project.
   Extracted 30.8.26 from /c/ (Contract Powers Registry), which is the first
   thing I built that Ofir called finished rather than working.

   HOW TO USE
     cp ~/workspace/craft/design/base.css   ~/projects/<name>/public/base.css
     cp -r ~/workspace/craft/design/fonts   ~/projects/<name>/public/f
     <link rel="stylesheet" href="/base.css">
     <link rel="preload" href="/f/fraunces.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/f/jakarta.woff2"  as="font" type="font/woff2" crossorigin>

   ⚠️ THE FONTS ARE PER-ORIGIN. A new subdomain does NOT inherit /f/ from
   agent.zbang.net, and cross-origin webfonts need CORS. Copy the files into the
   new project. If you skip this the page silently falls back to system fonts and
   still looks fine — which is exactly why you will not notice you skipped it.
   Check a screenshot, not the CSS.

   ⚠️ ONE ACCENT. --acc must mean exactly one thing in a given project, and that
   meaning gets written down at the top of the project's own stylesheet. In /c/
   it means "a human still holds power here". Green/red were REMOVED on purpose:
   a green badge next to "source verified" invited the reader to stop reading,
   which is the exact failure the page existed to prevent. Colour that decorates
   is colour that lies.
   ========================================================================== */

@font-face{font-family:Fraunces;src:url(/f/fraunces.woff2) format("woff2");
font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/f/jakarta.woff2) format("woff2");
font-weight:200 800;font-style:normal;font-display:swap}

:root{
--bg:#0a0c14;--panel:#11141e;--panel2:#151926;--line:#212636;--edge:rgba(255,255,255,.055);
--ink:#e7eaf2;--dim:#878ea4;--acc:#e0a75e;--link:#9fb7ea;--max:940px;
--serif:Fraunces,ui-serif,Georgia,"Times New Roman",serif;
--sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace}

/* --- reset + base ------------------------------------------------------- */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.62 var(--sans);
overflow-wrap:break-word;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}
code{font-family:var(--mono);font-size:.85em;font-variant-numeric:tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
/* ⚠️ NOT left:-9999px. Measured 30.8.26 on the first RTL landing page: in a
   dir="rtl" document the inline axis is reversed, so an element parked 9999px to
   the LEFT is 9999px of real scrollable overflow. The page rendered 11,279px wide
   (9999 + viewport), the body collapsed into a narrow column, and NOTHING errored.
   rtl.md previously listed left:-9999px as safe-to-stay-physical. It was wrong.
   The clip technique has no direction at all, which is why it is the right one. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none;
inset-inline-start:8px;top:8px;background:var(--panel);border:1px solid var(--line);
border-radius:7px;padding:8px 12px;z-index:9}

/* --- surfaces: flat + one hairline + a lit top edge.
   The inset highlight is the whole trick. It is what makes a dark panel read as
   BUILT rather than as DIMMED. Without it the page looks like a light design
   with the brightness turned down. -------------------------------------- */
.panel,.tile,.verdict,.ok-box,.card,.cta>div{
background:var(--panel);border:1px solid var(--line);border-radius:11px;
box-shadow:inset 0 1px 0 var(--edge)}

/* --- nav ---------------------------------------------------------------- */
.topnav{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);
position:sticky;top:0;z-index:5;backdrop-filter:blur(10px)}
.topnav .wrap{display:flex;align-items:center;gap:14px;height:54px;font-size:.88rem;flex-wrap:wrap}
.topnav .brand{font-family:var(--serif);font-weight:600;font-size:1.04rem;color:var(--ink);letter-spacing:.01em}
.topnav .sep{color:var(--dim)}.topnav .grow{flex:1}
.topnav a:not(.brand){color:var(--dim)}.topnav a:not(.brand):hover{color:var(--ink)}
main{padding-bottom:56px}
.crumb{font-size:.82rem;margin:24px 0 0;color:var(--dim)}

/* --- type: serif for headings ONLY, sans for everything you actually read.
   Mixing them inside body copy is what makes a page look like a template. -- */
h1{font:600 2.35rem/1.14 var(--serif);margin:.22em 0 .12em;letter-spacing:-.015em}
h2{font:600 1.32rem/1.3 var(--serif);margin:2.5em 0 .55em;letter-spacing:-.005em;scroll-margin-top:66px}
h3{font:600 1rem/1.35 var(--sans);margin:0;letter-spacing:-.005em}
.lede{font-size:1.06rem;color:var(--ink);max-width:70ch}
.note{color:var(--dim);max-width:70ch}.note b{color:var(--ink);font-weight:600}

/* --- stat tiles --------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;margin:22px 0 0}
.tile{padding:13px 15px}
.tile .k{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
color:var(--dim);margin-bottom:3px}
.tile b{display:block;font:600 1.5rem/1.25 var(--serif);letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
/* .w = the one accented state. Everything else stays neutral. */
.tile.w{border-color:color-mix(in srgb,var(--acc) 26%,var(--line))}
.tile.w b{color:var(--acc)}

/* --- callouts ----------------------------------------------------------- */
.verdict,.ok-box{padding:15px 17px;margin:0 0 8px;border-inline-start:2px solid var(--line)}
.verdict.w{border-inline-start-color:var(--acc)}

/* --- key/value table ---------------------------------------------------- */
table.kv{width:100%;border-collapse:collapse;margin:10px 0;font-size:.93rem;
font-variant-numeric:tabular-nums}
table.kv th{text-align:start;color:var(--dim);font-weight:400;width:34%;vertical-align:top;
padding-block:9px;padding-inline:0 10px;border-bottom:1px solid var(--line)}
table.kv td{padding-block:9px;padding-inline:0;border-bottom:1px solid var(--line);vertical-align:top}
table.kv.wide th{width:auto}
table.kv code,ul.ev code,.addr code{word-break:break-all}

/* --- cards -------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px;margin:14px 0}
.card{padding:15px 17px;transition:transform .16s ease,border-color .16s ease}
.card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ink) 14%,var(--line))}
.card p{margin:.45em 0 .6em;color:var(--dim);font-size:.9rem}
.chead{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.badge{font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;
border-radius:20px;white-space:nowrap;font-weight:500}
.b-dec{background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc);
border:1px solid color-mix(in srgb,var(--acc) 28%,transparent)}
.b-heu{background:transparent;color:var(--dim);border:1px solid var(--line)}
details{margin-top:6px}
summary{cursor:pointer;color:var(--dim);font-size:.84rem}
summary:hover{color:var(--ink)}
ul.ev{margin:.5em 0;padding-inline-start:18px;font-size:.83rem;color:var(--dim)}ul.ev li{margin:.25em 0}
.src{color:var(--dim);font-size:.8em;opacity:.8}

/* --- filter input ------------------------------------------------------- */
.filter{display:block;margin:20px 0 6px}
.filter span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
color:var(--dim);margin-bottom:6px}
.filter input{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line);
border-radius:9px;color:var(--ink);padding:10px 13px;font:inherit;font-size:.94rem;
box-shadow:inset 0 1px 0 var(--edge)}
.filter input::placeholder{color:var(--dim)}

/* --- data table, grouped.
   Grouping is not decoration: it writes the repeated value ONCE as a heading
   instead of N times as a cell. See craft/patterns/tables.md ---------------*/
table.reg{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:8px;
font-variant-numeric:tabular-nums}
table.reg th{text-align:start;color:var(--dim);font-weight:400;font-size:.72rem;
text-transform:uppercase;letter-spacing:.08em;padding-block:10px 9px;padding-inline:0 14px;
border-bottom:1px solid var(--line);white-space:nowrap}
table.reg td{padding-block:11px;padding-inline:0 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.reg tbody tr{transition:background .14s ease}
table.reg tbody tr:hover{background:var(--panel)}
table.reg td:first-child a{color:var(--ink);font-weight:500}
table.reg td:first-child a:hover{color:var(--link)}
tr.grp th{font:600 .95rem/1.3 var(--serif);color:var(--ink);text-transform:none;
letter-spacing:0;padding-block:26px 8px;padding-inline:0;border-bottom:1px solid var(--line)}
tr.grp .n{color:var(--dim);font-family:var(--sans);font-size:.72rem;font-weight:400;
text-transform:uppercase;letter-spacing:.09em;margin-inline-start:8px}
code.tiny{font-size:.72rem;color:var(--dim)}
.dim{color:var(--dim)}

/* --- empty state: says what is true, not the word "none".
   See craft/patterns/empty-and-loading.md -------------------------------- */
.empty{display:none;padding:26px 0 6px;color:var(--dim);font-size:.94rem}
.empty b{color:var(--ink);font-weight:600;font-family:var(--serif)}

/* --- skeleton: reserve the SHAPE of the answer, never the word "Loading".
   Width varies per line so it reads as text, not as three grey bars. ------ */
.sk{background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 37%,var(--panel) 63%);
background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:6px;
height:1em;margin:.5em 0}
.sk:nth-child(2){width:82%}.sk:nth-child(3){width:64%}.sk:nth-child(4){width:73%}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* --- CTA ---------------------------------------------------------------- */
.cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin:32px 0 0}
.cta>div{background:var(--panel2);padding:17px 19px;
transition:transform .16s ease,border-color .16s ease}
.cta>div:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ink) 14%,var(--line))}
.cta p{color:var(--dim);font-size:.9rem;margin:.5em 0 0}

/* --- footer. The AI-agent disclosure lives here and is MANDATORY. -------- */
.foot{border-top:1px solid var(--line);margin-top:46px;padding-top:22px;padding-bottom:46px;font-size:.86rem}
.foot p{max-width:74ch;color:var(--dim)}.foot strong{color:var(--ink);font-weight:600}

/* --- motion you feel rather than watch: 40ms stagger, 1px lift, nothing else */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tiles>*,.cards>*{animation:rise .38s cubic-bezier(.2,.6,.2,1) both}
.tiles>:nth-child(2),.cards>:nth-child(2){animation-delay:40ms}
.tiles>:nth-child(3),.cards>:nth-child(3){animation-delay:80ms}
.tiles>:nth-child(4),.cards>:nth-child(4){animation-delay:120ms}
.cards>:nth-child(5){animation-delay:160ms}.cards>:nth-child(6){animation-delay:200ms}
.cards>:nth-child(7){animation-delay:240ms}.cards>:nth-child(8){animation-delay:280ms}

/* --- responsive. Both rules below came from a real phone screenshot, not
   from guessing a breakpoint. See craft/patterns/responsive.md ----------- */
@media(max-width:560px){
h1{font-size:1.72rem}.lede{font-size:1.06rem}.tile b{font-size:1.24rem}
.topnav .wrap{height:54px;gap:16px}
/* a 42-char hex has no break point, so a two-column table cannot shrink below
   it. On a phone the label/value pair STACKS instead of fighting for width. */
table.kv:not(.wide),table.kv:not(.wide) tbody,table.kv:not(.wide) tr,
table.kv:not(.wide) th,table.kv:not(.wide) td{display:block;width:100%}
table.kv:not(.wide) th{border-bottom:none;padding-block:10px 2px;padding-inline:0;font-size:.76rem;
text-transform:uppercase;letter-spacing:.07em}
table.kv:not(.wide) td{padding-block:0 12px;padding-inline:0}
/* a table with meaningful column headers must NOT stack — stacking orphans the
   values from their labels. It scrolls sideways instead. */
table.kv.wide{display:block;overflow-x:auto;white-space:nowrap}
table.reg{display:block;overflow-x:auto}}

@media(prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
.tiles>*,.cards>*{opacity:1;transform:none}}