/* =====================================================================
   derrickdemars.com shared stylesheet  (/assets/site.css)
   Loaded by every page: <link rel="stylesheet" href="/assets/site.css?v=1">
   Bump ?v= on every page whenever this file changes.
   Holds everything the pages share. Page-only styles (puzzles, explorer,
   map) stay inline in each page, after this file, so they can refine it.
   Breakpoints: phone <= 760px, tablet 761-920px, desktop >= 921px.
   ===================================================================== */

:root{
  /* Color */
  --ink:#21221f;          /* headings, current nav item, strongest text */
  --strong:#3a3935;       /* bold text, section headings, button text */
  --text:#54514a;         /* body paragraphs */
  --nav:#5f5b54;          /* top-bar links, footer text */
  --label:#6f6b64;        /* gray labels, dates, captions */
  --accent:#2a6fdb;       /* links, selected buttons, focus, solved effects */
  --accent-dark:#1f4f9e;  /* blue text on light-blue fills */
  --accent-soft:#8fb1e4;  /* light blue border */
  --accent-tint:#dfe8f8;  /* light blue fill ("works" buttons) */
  --accent-wash:#e7eef9;  /* pale blue notice fill */
  --accent-line:rgba(42,111,219,.35);  /* faint underline under text links */
  --accent-edge:rgba(42,111,219,.5);   /* 3px left border of section boxes */
  --page:#e7e4de;         /* page background */
  --frame:#d9d5cd;        /* 1px border of the framed screen */
  --box:#f4f2ee;          /* section boxes */
  --line:#ddd9d1;         /* section box borders, top-bar rule */
  --inner:#efece6;        /* inner cards inside a section box */
  --chip:#e4e0d8;         /* tag chips, inner-card borders, dividers */
  --control:#faf8f4;      /* button fill */
  --control-line:#d6d1c8; /* button border */
  --rule:#e6e2da;         /* footer top rule */
  --brown:#8c6f4e;        /* secondary accent: name tap flash */
  --glow:rgba(140,106,74,.55); /* brown hover glow on links */
  /* Publication status */
  --pub:#2e8b57; --sub:#b07d22; --prep:#7a5aa8;
  /* Fonts */
  --head-font:'Spectral', Georgia, serif;
  --body-font:'Source Sans 3', 'Segoe UI', sans-serif;
  --ui-font:'IBM Plex Sans', 'Segoe UI', sans-serif;
  --mono-font:'Source Code Pro', ui-monospace, monospace;
  /* Body text: one size set for every page, changed at the breakpoints below */
  --body-scale:1.02;
  --fs-body:calc(var(--body-scale) * 15.5px);
  --lh-body:1.64;
}
@media (min-width:761px) and (max-width:920px){ :root{ --fs-body:calc(var(--body-scale) * 15px); --lh-body:1.6; } }
@media (max-width:760px){ :root{ --fs-body:calc(var(--body-scale) * 14px); --lh-body:1.5; } }

html,body{margin:0; background:var(--page); color:var(--ink);}
body{font-family:var(--ui-font);}
.frame,.screen,.bar,.page,.card,.foot{box-sizing:border-box;}

/* ---- Framed screen: every page sits inside it ---- */
.frame{max-width:1180px; margin:0 auto;}
.screen{background:var(--page); border:1px solid var(--frame); border-radius:5px; box-shadow:0 18px 50px rgba(20,22,28,.12); font-family:var(--ui-font); color:var(--ink);}

/* ---- Top bar ---- */
.bar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 44px; background:rgba(239,236,230,.93); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); border-radius:5px 5px 0 0;}
.bar a.name{display:inline-block; flex-shrink:0; font-family:var(--head-font); font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--ink); text-decoration:none; cursor:pointer;}
.bar nav{display:flex; align-items:center; justify-content:flex-start; gap:28px; min-width:0; flex:1 1 auto; font-size:14px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; white-space:nowrap;}
.bar nav::-webkit-scrollbar{display:none;}
.bar nav > *{flex:0 0 auto;}
.bar nav > :first-child{margin-left:auto;} /* right-aligned when it fits, scrolls from the left when it does not */
.bar nav a{color:var(--nav); text-decoration:none;}
.bar nav [aria-current="page"]{color:var(--ink); font-weight:700;}
/* When the links do not fit (phones), they scroll sideways and fade at whichever edge has more to see.
   The site behaviors script sets data-fade="l", "r", or "l r" on the nav from its scroll position. */
@property --fade-l{syntax:'<length>'; inherits:false; initial-value:0px;}
@property --fade-r{syntax:'<length>'; inherits:false; initial-value:0px;}
.bar nav{--fade-l:0px; --fade-r:0px; transition:--fade-l .2s ease, --fade-r .2s ease;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);}
.bar nav[data-fade~="l"]{--fade-l:28px;}
.bar nav[data-fade~="r"]{--fade-r:28px;}
@keyframes nameTap{0%{transform:scale(1); color:#21221f}35%{transform:scale(.94); color:#8c6f4e}100%{transform:scale(1); color:#21221f}}
@keyframes nameTapStill{0%{color:#21221f}35%{color:#8c6f4e}100%{color:#21221f}}
.bar a.name.name-tap{animation:nameTap .4s ease-out;}
@media (prefers-reduced-motion: reduce){ .bar a.name.name-tap{animation:nameTapStill .4s ease-out;} }

/* ---- Page body and section boxes ---- */
.page{padding:46px 44px 40px; display:flex; flex-direction:column; gap:22px;}
.card{background:var(--box); border:1px solid var(--line); border-left:3px solid var(--accent-edge); border-radius:16px; padding:32px 34px;}
.inner{background:var(--inner); border:1px solid var(--chip); border-radius:12px; padding:20px;}

/* ---- Headings and text ---- */
h1.title{font-family:var(--head-font); font-weight:600; font-size:clamp(32px,7.4vw,50px); line-height:1; letter-spacing:-.02em; color:var(--ink); margin:0 0 14px;}
.sec-h{font-family:var(--head-font); font-size:16.5px; font-weight:600; letter-spacing:.03em; color:var(--strong); margin:0 0 14px;}
.prose{font-family:var(--body-font); font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text); margin:0;}
.prose strong, .prose b{font-weight:600; color:var(--strong);}
/* Numbered steps: decimal numbers, bold numerals */
ol.steps{font-family:var(--body-font); font-size:var(--fs-body); line-height:1.55; color:var(--text); margin:10px 0 0; padding-left:1.4em;}
ol.steps li{margin:0 0 4px; padding-left:.2em;}
ol.steps li::marker{font-weight:600; color:var(--strong);}
sub{font-size:.72em; line-height:0; vertical-align:baseline; position:relative; top:.28em;}
sup{font-size:.72em; line-height:0; vertical-align:baseline; position:relative; top:-.42em;}

/* ---- Links ---- */
a{color:var(--accent); text-decoration:none;}
a.tl, .prose a{border-bottom:1px solid var(--accent-line);} /* links inside sentences get the faint underline */
a:not([data-box]):not([data-plain]){display:inline-block; transition:transform .16s ease, text-shadow .2s ease;}
a:not([data-box]):not([data-plain]):hover{transform:scale(1.06); text-shadow:0 0 7px var(--glow);}
a[data-box]{transition:transform .16s ease, box-shadow .25s ease;}
a[data-box]:hover{transform:scale(1.03); box-shadow:0 7px 20px rgba(20,22,28,.16);}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}

/* ---- Buttons ---- */
/* Two-way choice: joined segmented bar */
.seg{display:inline-flex; border:1px solid var(--control-line); border-radius:10px; overflow:hidden; background:var(--control);}
.seg button{font-family:var(--ui-font); font-size:13.5px; color:var(--strong); background:transparent; border:0; padding:9px 14px; cursor:pointer;}
.seg button + button{border-left:1px solid var(--control-line);}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff;}
.seg button:disabled{opacity:.45; cursor:default;}
/* Longer list of choices: separate rounded buttons */
.opts{display:flex; flex-wrap:wrap; gap:8px;}
.opts button{font-family:var(--ui-font); font-size:13.5px; color:var(--strong); background:var(--control); border:1px solid var(--control-line); border-radius:10px; padding:9px 13px; cursor:pointer; text-align:left; line-height:1.3;}
.opts button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff;}
.opts button:disabled{opacity:.45; cursor:default;}
/* Action buttons (Back / Next / Previous Coloring ...) */
.cbtn{font-family:var(--ui-font); font-weight:500; color:#23241f; background:var(--control); border:1px solid var(--control-line); border-radius:9px;
  font-size:var(--bf,14px); line-height:1.2; padding:.66em .5em; white-space:nowrap; text-align:center; cursor:pointer;}
.cbtn.primary{font-weight:600;}
.cbtn.solid{font-weight:600; color:#fff; background:var(--accent); border-color:var(--accent);}
.cbtn:hover{filter:brightness(.97);}
.cbtn:disabled{opacity:.45; cursor:default;}
.cbtn:disabled:hover{filter:none;}
/* On/off toggle button (e.g. "Show details") */
.toggle{font-family:var(--ui-font); font-size:13px; font-weight:500; color:var(--accent); background:#fff; border:1px solid #cfdcf3; border-radius:9px; padding:6px 11px; cursor:pointer;}
.toggle:hover{filter:brightness(.97);}
/* Round close button */
.xbtn, .modal-x{flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--control); color:var(--strong); font-size:20px; line-height:1; cursor:pointer; padding:0;}
.xbtn:hover, .modal-x:hover{background:var(--inner);}

/* ---- Pills (fully rounded) and tags (7px corners) ---- */
.chip, .chips button, .legend button{display:inline-flex; align-items:center; gap:7px; font-family:var(--ui-font); font-size:13px; color:var(--strong);
  background:var(--control); border:1px solid var(--control-line); border-radius:999px; padding:6px 12px; cursor:pointer;}
.chip[aria-pressed="true"], .chips button[aria-pressed="true"], .legend button[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:#fff;}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--c); background:#fff; border:1px solid currentColor; border-radius:999px; padding:1px 8px;}
.pill i{width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block;}
[data-tag]{font-family:var(--mono-font); font-size:12.5px; color:var(--strong); background:var(--chip); border-radius:7px; padding:6px 11px;}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;} /* a row of tags under a paragraph */

/* ---- Footer ---- */
.foot{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin-top:28px; padding-top:16px; border-top:1px solid var(--rule);
  font-family:var(--mono-font); font-size:12px; letter-spacing:.04em; color:var(--nav);}
.foot .f-left{text-align:left;}
.foot .f-mid{text-align:center;}
.foot .f-right{text-align:right;}
.foot a.f-top{display:inline-block; font-family:var(--mono-font); font-size:12px; letter-spacing:.04em; color:var(--nav); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:9px 18px; background:var(--box);}
/* Middle column: one pill (Main) or a stack of pills (Back to top, then Back to Main), all as wide as the widest */
.foot .f-mid{display:flex; flex-direction:column; align-items:stretch; gap:8px;}
.foot .f-mid a.f-top{text-align:center;}

/* ---- Touch screens: 44px minimum targets ---- */
@media (hover:none),(pointer:coarse){
  .seg button, .opts button, .cbtn, .toggle, .chip, .chips button, .legend button{min-height:44px;}
  .xbtn, .modal-x{width:44px; height:44px;}
  .foot a.f-top{display:flex; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; padding-top:0; padding-bottom:0;}
}

/* ---- Phones ---- */
@media (max-width:760px){
  .bar{padding:8px 16px;}
  .bar a.name{font-size:15px;}
  .bar nav{gap:14px; font-size:13px; margin-left:12px;}
  .page{padding:12px 10px 22px; gap:16px;}
  .card{padding:18px 16px; border-radius:12px;}
  .inner{border-radius:10px; padding:16px;}
  .opts button{font-size:13px; padding:8px 11px;}
  .foot{grid-template-columns:1fr; row-gap:12px; justify-items:center;}
  .foot > div{text-align:center !important;}
  .foot .f-mid{order:-1;}
}
/* Narrowest phones (<= 400px): tighten the top bar so as much of the page links shows as possible; the rest scrolls with faded edges */
@media (max-width:400px){
  .bar{padding:8px 12px;}
  .bar a.name{font-size:14px;}
  .bar nav{gap:12px; font-size:12.5px; margin-left:10px;}
}
@media (max-width:920px){ [data-tag]{font-size:11px; padding:5px 9px;} }

/* ---- Reduced motion: no movement anywhere ---- */
@media (prefers-reduced-motion: reduce){
  a:not([data-box]):not([data-plain]), a[data-box]{transition:none;}
  a:not([data-box]):not([data-plain]):hover, a[data-box]:hover{transform:none;}
  html{scroll-behavior:auto !important;}
  .bar nav{transition:none;}
}

/* ---- Print: no top bar, no Back to top ---- */
@media print{
  html,body{background:#fff !important;}
  .screen{box-shadow:none !important; border:0 !important; background:#fff !important;}
  .bar, .foot .f-mid{display:none !important;}
  [data-tag]{font-size:8.5pt !important; padding:2pt 5pt !important; background:#f0efec !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
}