/* ===================================================================
   Omegro AI Playbook — shared design language.

   One stylesheet for all three pages, so the flow, the leadership brief
   and the field guide read as one book rather than three documents.

   Two rules the whole system hangs off:

   1. Mono is for what a reader takes in character by character: figures,
      dates, filenames, keys, inline code. It makes them scannable, and
      that is the only job it has. No mono-uppercase "eyebrow" labels;
      they cost a line of reading and carry no information.
   2. Every colour means exactly one thing:
        green  something has to be true (a gate), and the interactive
               colour: links, hover and focus (Growth #00472A)
        amber  a measured figure
        red    where work actually piles up
        bud    brand accent, energy (Bud #B3D91B — site bar, highlights)
      Nothing else earns a colour. Provenance, state and emphasis are
      carried by weight and by the ink / muted / faint ramp.
   =================================================================== */

:root{
  --bg:#EAE8E0;
  --panel:#F5F4F0;
  --sunk:#E5E1DF;
  --ink:#002618;
  --muted:#4A5B52;
  --faint:#706B58;
  --rule:#E5E1DF;
  --rule-strong:#CFCBBE;

  --gate:#14663F;         /* must be true */
  --gate-soft:#E4F3EF;
  --num:#B45309;          /* a measured figure */
  --num-soft:#FBF0E2;
  --stop:#B02D17;         /* where it piles up */
  --stop-soft:#FBEAE6;

  --growth:#00472A;       /* brand mid-green: links and interactive elements */
  --bud:#B3D91B;          /* brand accent: energy, highlights */

  --sans:"Chromatic Grotesque",Arial,Helvetica,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  /* ---- the scale ----------------------------------------------------
     Six sizes and three weights, and nothing between them. The pages had
     grown to fourteen sizes and nine weights, ten of those sizes inside a
     12-17px band: at half a pixel and ten weight units apart, two levels of
     a hierarchy are indistinguishable, so the hierarchy stops working and
     the page reads as one texture. Every step here is far enough from its
     neighbour to be seen without being measured.

     Display type (the page titles, the count in the ring's hub) is sized
     against the viewport rather than off this scale, because it is doing a
     different job: it is the thing you see before you read anything. */
  --t-xs:13px;      /* labels, meta, the small print under a control */
  --t-sm:15px;      /* secondary body: captions, notes, table cells */
  --t-md:16.5px;    /* body */
  --t-lg:19px;      /* lead paragraphs */
  --t-xl:24px;      /* section headings */
  --t-2xl:32px;     /* page headings */

  --w-body:300;
  --w-med:600;
  --w-bold:600;

  /* Three corners, plus a pill. Seven radii is how a page comes to look
     assembled rather than designed: nothing distinguishes a 10px box from a
     12px one except which week it was written. */
  --r-sm:6px;       /* inline code, keys, ticks */
  --r:10px;         /* callouts, controls, boxes inside a card */
  --r-lg:14px;      /* cards */
  --r-pill:999px;   /* chips and tags */

  --shadow:0 1px 2px rgba(0,38,24,.07), 0 8px 24px -12px rgba(0,38,24,.15);

  /* ---- one measure --------------------------------------------------
     The three pages had three containers: 1320px on the flow, 1120px here
     and on the field guide, plus a second hand-written 1120px inside the
     field guide's tab bar. Opened one after another they read as three
     documents, because the text column moved 200px between them. One token
     now, and no page overrides it.

     1240 rather than either of the two it replaces. At 1120 the flow's two
     columns fall to 512px each and the ring loses a sixth of its width, and
     that ring is the one element on these pages that gets better with width
     and nothing else. At 1320 every line of body text on the other two pages
     sits in a container 200px wider than its own ch cap, which buys nothing
     and costs the book its single column. */
  --measure:1240px;
  --gutter:28px;
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-md); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{letter-spacing:-.02em; text-wrap:balance; margin:0}
button{font:inherit; color:inherit}
a{color:var(--growth); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--growth); outline-offset:3px; border-radius:var(--r-sm)}

.wrap{max-width:var(--measure); margin:0 auto; padding:0 var(--gutter)}

/* ---- three heading levels, and nothing between them ----------------
   Each page had invented its own. The flow and the brief set their titles
   with two different clamps, and the field guide sized a second h1 per
   section by hand in a style attribute, which put two h1 elements in one
   section and two sizes on one level.

     .ptitle   the one title at the top of a page, or of a field-guide tab,
               which is the same job. Sized against the viewport because it
               is the thing you see before you read anything.
     .bandh    a section inside a page.
     .rowh     a row, a card or a call inside a section. Set at the item.

   A heading takes its size from its level, never from a style attribute. */
.ptitle{font-size:clamp(30px,3.8vw,44px); font-weight:200;
        letter-spacing:-.035em; line-height:1.05}
.ptitle + .lede, .ptitle + p{margin-top:12px}
.bandh{font-size:var(--t-xl); font-weight:var(--w-bold)}
.bandh + p{color:var(--muted); max-width:64ch; margin:7px 0 0; font-size:var(--t-md)}

/* ---- site bar ------------------------------------------------------
   The only navigation in the playbook: three pages, always visible, no
   role picker in front of them. A reader should never have to answer a
   question about themselves before they can see any content.

   Each name carries who it is for, because three nouns on their own left
   every reader guessing which page was theirs, and a GM handed the base URL
   landed on a practitioner page with no signal that the brief existed. The
   hint is a label, not a gate: nobody is asked to declare a role, and every
   page stays one click away. Dropped below 820px, where the bar wraps and
   the names have to carry it alone. */
.sitebar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:9px 28px; border-bottom:3px solid var(--bud);
  background:var(--ink); position:sticky; top:0; z-index:40;
}
.sitebar .mark{font-weight:600; font-size:var(--t-md); letter-spacing:-.02em; margin-right:14px;
               display:inline-flex; align-items:center; gap:7px; color:var(--bg)}
.sitebar .mark svg{width:22px; height:20px; flex:none}
.sitebar nav{display:flex; gap:4px; flex-wrap:wrap}
.sitebar nav a{
  color:rgba(234,232,224,.7); font-size:var(--t-sm); padding:4px 11px; border-radius:var(--r-sm);
  text-decoration:none; white-space:nowrap;
}
.sitebar nav a:hover{background:rgba(234,232,224,.1); color:var(--bg); text-decoration:none}
.sitebar nav a[aria-current="page"]{background:var(--bud); color:var(--ink); font-weight:600}
.sitebar nav a em{font-style:normal; font-weight:400; font-size:var(--t-sm);
                  color:rgba(234,232,224,.5); margin-left:6px}
.sitebar nav a:hover em{color:rgba(234,232,224,.7)}
.sitebar nav a[aria-current="page"] em{color:var(--ink); opacity:.7}
@media(max-width:820px){.sitebar nav a em{display:none}}
/* The bar is sticky, so its height is a tax on every screen of the page. At
   360px the wordmark and the page names did not fit one row, and two rows cost
   116px of an 844px phone for the whole scroll. The wordmark is the one a
   reader can lose: the page title sits directly under it. */
@media(max-width:560px){
  .sitebar{padding:6px 18px; gap:6px}
  .sitebar .mark{display:none}
}
/* A finger is about 9 millimetres across and the floor for a touch target is
   44px. These controls were drawn for a mouse, so touch gets the height back
   without a desktop losing the compact bar. */
@media (pointer:coarse){
  .sitebar nav a{padding:10px 11px}
}
.sitebar .sp{margin-left:auto}

/* ---- two things only a keyboard or a screen reader ever meets ------
   .vh puts text in the accessibility tree and nowhere else. It is not
   display:none, which removes it from that tree as well, and it is not
   width:0, which makes some readers skip it.

   .skip is the first thing in the tab order on every page. Without it the
   only way past the site bar is to tab through it on each page, and on the
   flow that is four stops before the first stage. It is invisible until it
   has focus, which is the one moment anybody needs it. */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:60;
      background:var(--panel); color:var(--ink); border:1px solid var(--ink);
      border-radius:var(--r-sm); padding:8px 14px; font-size:var(--t-sm); font-weight:600;
      text-decoration:none}
.skip:focus{left:8px; top:8px}

/* Every word on these pages is drawn by script from the data block in the same
   file, so with scripting off a reader gets a blank page and no reason for it.
   These pages get emailed and pasted into SharePoint, and some corporate builds
   and some preview panes still open a page that way. */
.noscript{max-width:62ch; margin:26px auto; padding:16px 20px; border:1px solid var(--stop);
    background:var(--stop-soft); border-radius:var(--r); color:var(--ink); font-size:var(--t-md)}
.noscript p{margin:0}
.noscript p + p{margin-top:8px}

/* numbers are the one place mono earns its keep */
.fig{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--num); font-weight:600}

/* ---- shared blocks ------------------------------------------------- */

/* A gate: green, and always phrased as a condition.

   One callout shape across the whole site: a plain box, all four sides equal,
   coloured by what it means. The thicker left edge this used to carry read as
   decoration rather than as meaning, and meaning is already doing the work. */
.gatebox{
  background:var(--gate-soft); border:1px solid var(--gate);
  border-radius:var(--r); padding:13px 17px;
}
.gatebox .lbl{color:var(--gate); opacity:.75; font-size:var(--t-sm); font-weight:600; margin:0 0 5px}
/* body size, not lead size. The gate is one sentence in a green box, and the
   box already says how much it matters; setting it two steps up the scale as
   well spent a quarter of the panel on a line nobody was going to miss. */
.gatebox p{margin:0; color:var(--gate); font-size:var(--t-md); font-weight:600; line-height:1.4}

/* evidence: always "<BU> <figure> <rest of the sentence>", never a claim
   without a number attached to it */
.ev{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.ev .k{font-size:var(--t-sm); font-weight:600; color:var(--faint)}
.ev .who{font-weight:600; white-space:nowrap; font-size:var(--t-md)}
/* the figure sits at body size, like the sentence it belongs to. Mono, amber
   and weight already mark it as the measured part; size on top of those three
   pulled the number out of its own sentence and made it read as a headline. */
.ev .n{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--t-md);
       color:var(--num); font-weight:600; white-space:nowrap}
/* the sentence sits beside the figure until there is no room for both, and
   never widens the box it is in: on a phone the minimum is wider than the card */
.ev .txt{flex:1; min-width:min(220px,100%); color:var(--muted); font-size:var(--t-md)}

.card{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:22px 26px; box-shadow:var(--shadow);
}

.pill{
  font-size:var(--t-xs); border-radius:var(--r-pill); padding:1px 10px; font-weight:600;
  border:1px solid currentColor; white-space:nowrap;
}
.pill.stop{color:var(--stop); background:var(--stop-soft)}
.pill.skip{color:var(--faint); border-style:dashed; background:none}

.lede{color:var(--muted); font-size:var(--t-lg); max-width:62ch; margin:8px 0 0}

table.grid{width:100%; border-collapse:collapse; font-size:var(--t-md)}
table.grid th{
  text-align:left; font-weight:600; font-size:var(--t-sm); color:var(--faint);
  padding:0 16px 8px 0; border-bottom:1px solid var(--rule);
}
table.grid td{padding:11px 16px 11px 0; border-bottom:1px solid var(--rule); vertical-align:top}
table.grid tr:last-child td{border-bottom:0}
table.grid .who{font-weight:600; white-space:nowrap}
/* The evidence column is a sentence with figures in it, not a figure. It used
   to be set entirely in mono amber, so "reusable skills across every repo" and
   "MCP servers for Jira + RPG analysis" — rows carrying no digit at all — read
   as measurements. Amber is this site's evidence signal; spending it on prose
   spends its meaning everywhere else. The cell is body text now, and `figures()`
   in each page wraps the numbers, and only the numbers, in .fig. */
table.grid .n{color:var(--muted)}
table.grid .n .fig{font-size:var(--t-sm)}
/* A three-column table has a minimum width and a phone does not, so the widest
   of these was pushing the whole document sideways: the reader got a page that
   scrolled horizontally, and no way to tell which element had done it. The
   table scrolls inside its own box instead, and nothing else on the page moves. */
@media(max-width:620px){
  table.grid{display:block; overflow-x:auto; overscroll-behavior-x:contain}
}

footer.site{
  border-top:1px solid var(--rule); margin-top:44px; padding:22px 0 46px;
  font-size:var(--t-sm); color:var(--faint);
}
footer.site a{color:var(--muted)}

@media print{
  .sitebar{display:none}
  body{background:#fff; color:var(--ink)}
  .card{box-shadow:none}
  /* A URL a reader cannot see is a claim they cannot check, and this site's
     whole argument is that every figure carries its source. */
  .chg .meta a[href^="http"]::after, ul.src a[href^="http"]::after{
    content:" (" attr(href) ")"; font-size:10px; color:var(--faint); word-break:break-all;
  }
}
@media (prefers-reduced-motion:reduce){ *{transition-duration:.001s !important; animation-duration:.001s !important} }

/* ---------- footer ---------- */
/* The rule sits on the text, not on .wrap: .wrap carries the gutter as padding,
   so a border there runs --gutter wider each side than every rule above it. */
.pb-footer { padding:48px 0 56px; text-align:center; color:var(--faint); font-size:var(--t-sm) }
.pb-footer p { margin:0; padding-top:28px; border-top:1px solid var(--rule) }
.pb-footer a { color:var(--muted); text-decoration:none }
.pb-footer a:hover { text-decoration:underline; color:var(--ink) }