:root{
  --paper:#f3eddf;
  --paper2:#fffaf0;
  --ink:#1b1d1f;
  --muted:#5f625f;
  --rule:#c9bea9;
  --teal:#0d7771;
  --orange:#d9692d;
  --yellow:#e8bd4f;
  --red:#ad3d36;
  --blue:#356b8c;
  --shadow:8px 8px 0 rgba(27,29,31,.10);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:Segoe UI,Arial,sans-serif;
  line-height:1.65;
  background:
    linear-gradient(rgba(27,29,31,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,29,31,.045) 1px,transparent 1px),
    var(--paper);
  background-size:32px 32px,32px 32px,auto;
}
body:before{
  content:"";
  display:block;
  height:10px;
  background:repeating-linear-gradient(90deg,var(--teal) 0 54px,var(--orange) 54px 108px,var(--yellow) 108px 162px,var(--ink) 162px 216px);
}
a{color:inherit}
.wrap{width:min(var(--max),calc(100% - 36px));margin:auto}
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(243,237,223,.94);
  border-bottom:3px solid var(--ink);
  backdrop-filter:blur(8px);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:20px}
.brand{
  font-family:Georgia,serif;
  font-size:1.22rem;
  font-weight:800;
  text-decoration:none;
  letter-spacing:-.02em;
}
.brand span{color:var(--orange)}
.nav-links{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.nav-links a{
  text-decoration:none;
  padding:7px 10px;
  border:1px solid transparent;
  font-family:Consolas,monospace;
  font-size:.83rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{
  border-color:var(--ink);
  background:var(--paper2);
  box-shadow:3px 3px 0 var(--ink);
}
.menu-btn{
  display:none;
  border:2px solid var(--ink);
  background:var(--yellow);
  color:var(--ink);
  padding:8px 11px;
  font-weight:800;
  font-family:Consolas,monospace;
}
.hero{padding:78px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:54px;align-items:center}
.eyebrow{
  display:inline-block;
  color:var(--paper2);
  background:var(--ink);
  padding:5px 9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-family:Consolas,monospace;
  font-weight:800;
  font-size:.72rem;
  transform:rotate(-1deg);
}
h1,h2,h3{margin:0 0 .7em;line-height:1.05}
h1{
  font-family:Georgia,serif;
  font-size:clamp(3.2rem,7vw,6.5rem);
  letter-spacing:-.055em;
  max-width:1000px;
}
h2{
  font-family:Georgia,serif;
  font-size:clamp(2.1rem,4.3vw,3.8rem);
  letter-spacing:-.04em;
}
h3{font-family:Georgia,serif;font-size:1.28rem}
.lede{max-width:800px;font-size:1.2rem;color:var(--muted)}
.motto{
  position:relative;
  background:var(--paper2);
  border:3px solid var(--ink);
  padding:27px;
  box-shadow:var(--shadow);
  transform:rotate(1deg);
}
.motto:before{
  content:"BENCH NOTE";
  position:absolute;top:-16px;right:20px;
  background:var(--yellow);
  border:2px solid var(--ink);
  padding:4px 8px;
  font:800 .72rem Consolas,monospace;
  letter-spacing:.08em;
}
.motto .big{font-family:Georgia,serif;font-weight:800;font-size:1.85rem;line-height:1.15}
.motto p{color:var(--muted)}
.signal{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tag{
  border:2px solid var(--ink);
  background:var(--paper);
  padding:5px 8px;
  font:700 .78rem Consolas,monospace;
  box-shadow:2px 2px 0 var(--ink);
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  padding:11px 16px;
  border:2px solid var(--ink);
  background:var(--paper2);
  font-family:Consolas,monospace;
  font-weight:800;
  box-shadow:4px 4px 0 var(--ink);
  transition:.12s ease;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--teal);color:white}
.section{padding:64px 0}
.section.tight{padding-top:30px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}
.section-head p{max-width:590px;color:var(--muted);margin:0}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{
  position:relative;
  background:var(--paper2);
  border:2px solid var(--ink);
  padding:24px;
  box-shadow:var(--shadow);
  min-height:100%;
}
.card:nth-child(3n+1){border-top:8px solid var(--teal)}
.card:nth-child(3n+2){border-top:8px solid var(--orange)}
.card:nth-child(3n+3){border-top:8px solid var(--yellow)}
.card p{color:var(--muted)}
.card .kicker{
  color:var(--red);
  text-transform:uppercase;
  letter-spacing:.11em;
  font:800 .74rem Consolas,monospace;
}
.card a.more{color:var(--teal);font-weight:800;text-decoration:none}
.card a.more:hover{text-decoration:underline}
.quote{
  max-width:960px;
  padding:26px 30px;
  background:var(--yellow);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  font-family:Georgia,serif;
  font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.9rem);
  line-height:1.18;
  transform:rotate(-.5deg);
}
.workbench{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,transparent 49%,rgba(27,29,31,.06) 50%,transparent 51%),
    var(--paper2);
  border:3px solid var(--ink);
  padding:34px;
  box-shadow:var(--shadow);
}
.workbench:before{
  content:"WORKBENCH INDEX";
  position:absolute;right:22px;top:18px;
  color:rgba(27,29,31,.20);
  font:800 1rem Consolas,monospace;
  letter-spacing:.12em;
}
.timeline{display:grid;gap:0;background:var(--paper2);border:2px solid var(--ink);box-shadow:var(--shadow)}
.timeline-item{
  display:grid;grid-template-columns:175px 1fr;gap:24px;
  padding:22px;border-bottom:1px dashed var(--rule)
}
.timeline-item:last-child{border-bottom:0}
.timeline-item strong{
  color:var(--paper2);
  background:var(--blue);
  width:max-content;height:max-content;
  padding:4px 8px;
  font:800 .78rem Consolas,monospace;
  text-transform:uppercase;
}
.timeline-item .meta{color:var(--muted)}
.prose{max-width:820px;background:rgba(255,250,240,.72);padding:28px;border-left:6px solid var(--orange)}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--ink)}
.list{display:grid;gap:0;padding:0;list-style:none}
.list li{padding:11px 0;border-bottom:1px dashed var(--rule)}
.meta{color:var(--muted);font-size:.9rem}
.callout{
  background:var(--paper2);
  border:3px solid var(--ink);
  border-left:16px solid var(--orange);
  padding:24px;
  box-shadow:var(--shadow);
}
.codebox{
  background:#222;
  color:#f2f0e8;
  border:3px solid var(--ink);
  padding:16px;
  font-family:Consolas,monospace;
  box-shadow:inset 0 0 0 1px #555;
}
form{display:grid;gap:14px}
label{font:800 .8rem Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
input,textarea{
  width:100%;padding:12px 13px;
  border:2px solid var(--ink);
  background:white;color:var(--ink);
  font:inherit;
}
textarea{min-height:150px;resize:vertical}
.note{color:var(--muted);font-size:.88rem}
.site-footer{
  margin-top:70px;
  border-top:3px solid var(--ink);
  background:#ded4c0;
  padding:38px 0;
}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start}
.footer-grid p{color:#51544f;max-width:650px}
.small{font:700 .78rem Consolas,monospace;color:#51544f}
.manual-mark{
  font:800 .75rem Consolas,monospace;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted)
}
.error-page{
  min-height:calc(100vh - 210px);
  display:grid;place-items:center;
  padding:50px 0;
}
.error-panel{
  width:min(980px,calc(100% - 36px));
  background:var(--paper2);
  border:4px solid var(--ink);
  box-shadow:12px 12px 0 rgba(27,29,31,.13);
}
.error-head{
  display:grid;
  grid-template-columns:180px 1fr;
  border-bottom:4px solid var(--ink);
}
.error-code{
  display:grid;place-items:center;
  background:var(--orange);
  color:white;
  font:900 clamp(3rem,8vw,6rem) Georgia,serif;
  border-right:4px solid var(--ink);
  padding:28px 18px;
}
.error-title{padding:26px}
.error-title h1{font-size:clamp(2.3rem,5vw,4.8rem);margin-bottom:.25em}
.diagnostic{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.diag-block{padding:24px;border-right:2px dashed var(--rule)}
.diag-block:last-child{border-right:0}
.status-line{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px dashed var(--rule);font-family:Consolas,monospace}
.status-bad{color:var(--red);font-weight:900}
.status-good{color:var(--teal);font-weight:900}
.error-actions{padding:24px;border-top:4px solid var(--ink);background:#eee4d2}
@media(max-width:900px){
  .hero-grid,.grid-3,.grid-2,.diagnostic{grid-template-columns:1fr}
  .section-head{display:block}
  .section-head p{margin-top:14px}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);border-bottom:3px solid var(--ink);padding:16px;flex-direction:column;align-items:flex-start}
  .nav-links.open{display:flex}
  .menu-btn{display:inline-block}
  .timeline-item{grid-template-columns:1fr;gap:8px}
  .footer-grid{grid-template-columns:1fr}
  .error-head{grid-template-columns:1fr}
  .error-code{border-right:0;border-bottom:4px solid var(--ink)}
  .diag-block{border-right:0;border-bottom:2px dashed var(--rule)}
  .diag-block:last-child{border-bottom:0}
}

/* ===================================================================
   Blazor conversion additions.

   The second half skins the shared CyberLogix.Auth account components.
   Those components carry semantic class names and no styling of their
   own, which is what lets one set of sign-in, passkey and admin screens
   serve a dark technical site and this cream workshop one.
   =================================================================== */

/* --- shared utilities --- */
.visually-hidden,
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Must win against .button{display:inline-flex} and .button-row{display:flex},
   or a hidden control stays on screen. */
[hidden]{display:none!important}

.breadcrumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-bottom:18px;
  font:700 .78rem Consolas,monospace;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
}
.breadcrumbs a{color:var(--teal);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs span[aria-current]{color:var(--ink)}

.footer-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.footer-links a{color:#3f6f68;font:700 .8rem Consolas,monospace;text-decoration:none}
.footer-links a:hover{text-decoration:underline}

.prose-aside{
  margin-top:26px;padding-top:18px;
  border-top:1px dashed var(--rule);
  font-size:.94rem;
}
.prose-aside a{color:var(--teal);font-weight:700}

/* --- archive entry cards --- */
.entry-card{text-decoration:none;display:block;transition:.12s ease;overflow:hidden}
.entry-card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 rgba(27,29,31,.14)}
.entry-card h3{margin-bottom:.45em}
.entry-thumb{
  display:block;height:auto;
  margin:-24px -24px 18px;width:calc(100% + 48px);
  border-bottom:2px solid var(--ink);
}
.entry-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 10px}
.entry-tags .tag{font-size:.72rem;padding:3px 6px;box-shadow:1px 1px 0 var(--ink)}
.entry-card time{display:block;margin-top:6px}

/* --- forms --- */
.form-success,.form-error,.form-status{
  border:2px solid var(--ink);
  padding:13px 15px;margin:0 0 18px;
  font-weight:600;
  box-shadow:3px 3px 0 var(--ink);
}
.form-success,.form-status[data-state="success"]{background:#d9ece4;border-left:8px solid var(--teal)}
.form-error,.form-status[data-state="error"]{background:#f4ddd9;border-left:8px solid var(--red)}
.form-helper{color:var(--muted);font-size:.9rem;margin-top:12px}
.form-helper a,.notice a{color:var(--teal);font-weight:700}
.form-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.form-success-heading{margin-bottom:.4em}
.checkbox-row{display:flex;align-items:center;gap:10px;font:inherit;text-transform:none;letter-spacing:0}
.checkbox-row input{width:auto}
.validation-message{color:var(--red);font:700 .82rem Consolas,monospace;display:block;margin-top:6px}
.notice{
  background:var(--paper2);border:2px solid var(--ink);
  border-left:10px solid var(--yellow);
  padding:16px 18px;margin:0 0 18px;box-shadow:var(--shadow);
}

/* --- buttons used by the shared auth components --- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;cursor:pointer;
  padding:11px 16px;
  border:2px solid var(--ink);
  background:var(--teal);color:#fff;
  font-family:Consolas,monospace;font-weight:800;font-size:.9rem;
  box-shadow:4px 4px 0 var(--ink);
  transition:.12s ease;
}
.button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.button-light{background:var(--paper2);color:var(--ink)}
.button-small{padding:7px 11px;font-size:.78rem;box-shadow:3px 3px 0 var(--ink)}
.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.text-link{color:var(--teal);font-weight:800;text-decoration:none}
.text-link:hover{text-decoration:underline}
.card-link{color:var(--teal);font-weight:800;font-size:.86rem}

/* --- account + admin frame --- */
.shell{width:min(var(--max),calc(100% - 36px));margin:auto}
.shell.narrow{max-width:820px}
.shell.wide{max-width:1180px}
.page-hero{padding:64px 0 30px}
.page-hero.compact{padding:52px 0 18px}
/* The shared components carry a scroll-reveal hook; this site does not animate. */
.reveal{opacity:1}
.account-shell{display:grid;gap:22px}
.account-card{
  background:var(--paper2);
  border:2px solid var(--ink);
  border-top:8px solid var(--teal);
  padding:26px;
  box-shadow:var(--shadow);
}
/* Scoped to prose only. A blanket rule here turns the teal buttons and the
   active admin tab into teal-on-teal, which is exactly how it went wrong the
   first time on the other site. */
.account-card>p a,.account-card li a{color:var(--teal);font-weight:700}
.detail-card{
  background:var(--paper2);border:2px solid var(--ink);
  padding:20px;box-shadow:var(--shadow);
}
.detail-card>span{color:var(--red);font:800 .74rem Consolas,monospace;letter-spacing:.11em}

.pill{
  display:inline-block;padding:3px 9px;
  border:2px solid var(--ink);background:var(--paper);
  font:800 .72rem Consolas,monospace;text-transform:uppercase;letter-spacing:.06em;
}
.pill-good{background:#cfe8df}
.pill-warn{background:var(--yellow)}
.pill-bad{background:#f0cfcb}

.table-scroll{overflow-x:auto;border:2px solid var(--ink);box-shadow:var(--shadow);background:var(--paper2)}
.admin-table,.log-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
.admin-table th,.log-table th{
  text-align:left;padding:11px 14px;
  background:var(--ink);color:var(--paper2);
  font:800 .74rem Consolas,monospace;text-transform:uppercase;letter-spacing:.08em;
}
.admin-table td,.log-table td{padding:11px 14px;border-bottom:1px dashed var(--rule);vertical-align:middle}
.admin-table tr:last-child td,.log-table tr:last-child td{border-bottom:0}
.admin-table td a:not([class]){color:var(--teal);font-weight:700}
.admin-person{display:flex;align-items:center;gap:11px}
.admin-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.log-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:18px}
.role-set{display:flex;flex-wrap:wrap;gap:14px}

.passkey-list,.recovery-codes,.setup-steps{display:grid;gap:12px;padding:0;list-style:none}
.setup-steps{list-style:decimal;padding-left:20px}
.recovery-codes{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));font-family:Consolas,monospace}
.recovery-codes li{
  background:#222;color:#f2f0e8;border:2px solid var(--ink);
  padding:9px 11px;text-align:center;letter-spacing:.08em;
}
.totp-qr{border:3px solid var(--ink);background:#fff;padding:10px;display:inline-block;box-shadow:var(--shadow)}
.totp-key{
  font-family:Consolas,monospace;font-weight:800;letter-spacing:.12em;
  background:var(--yellow);border:2px solid var(--ink);padding:7px 10px;display:inline-block;
}

/* --- password strength meter --- */
.pw-strength{margin-top:14px}
.pw-meter{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:9px}
.pw-meter span{height:11px;background:var(--paper);border:2px solid var(--ink)}
.pw-meter span[data-on="1"]{background:var(--red)}
.pw-meter span[data-on="2"]{background:var(--orange)}
.pw-meter span[data-on="3"]{background:var(--yellow)}
.pw-meter span[data-on="4"]{background:#7fae5a}
.pw-meter span[data-on="5"]{background:var(--teal)}
.pw-verdict{font:800 .9rem Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.pw-crack{font-family:Consolas,monospace;font-weight:700}
.pw-basis,.pw-live{color:var(--muted);font-size:.84rem}
.pw-rules,.password-rules{display:grid;gap:6px;padding:0;list-style:none;margin-top:12px;font-size:.88rem}
.pw-rules li::before,.password-rules li::before{content:"[ ] ";font-family:Consolas,monospace;font-weight:800}
.pw-rules li[data-met="true"]::before,.password-rules li[data-met="true"]::before{content:"[x] ";color:var(--teal)}

/* --- header account menu --- */
.account-menu{position:relative}
.account-menu summary{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:6px 10px;border:2px solid var(--ink);background:var(--paper2);
  font:800 .8rem Consolas,monospace;box-shadow:3px 3px 0 var(--ink);
}
.account-menu summary::-webkit-details-marker{display:none}
.account-menu summary:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.account-name{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--ink);
}
.account-dropdown{
  position:absolute;right:0;top:calc(100% + 9px);z-index:40;
  min-width:260px;
  background:var(--paper2);border:3px solid var(--ink);
  box-shadow:8px 8px 0 rgba(27,29,31,.18);
  padding:8px;
}
.account-dropdown-head{
  display:flex;gap:12px;align-items:center;
  padding:12px;border-bottom:2px dashed var(--rule);margin-bottom:6px;
}
.account-dropdown-head strong{display:block;line-height:1.2}
.account-dropdown-head span{color:var(--muted);font-size:.82rem;word-break:break-all}
.account-tenant{
  display:inline-block;margin-top:5px;
  background:var(--blue);color:var(--paper2);
  padding:2px 6px;font:800 .68rem Consolas,monospace;
}
.account-dropdown a,.account-dropdown button{
  display:block;width:100%;text-align:left;
  padding:9px 12px;text-decoration:none;color:var(--ink);
  background:none;border:0;cursor:pointer;
  font:700 .86rem Consolas,monospace;
}
.account-dropdown a:hover,.account-dropdown button:hover{
  background:var(--paper);outline:2px solid var(--ink);outline-offset:-2px;
}
.account-dropdown-label{
  padding:10px 12px 4px;color:var(--muted);
  font:800 .68rem Consolas,monospace;text-transform:uppercase;letter-spacing:.1em;
}
.account-dropdown-cta{
  margin-top:6px;padding:12px;border-top:2px dashed var(--rule);
  color:var(--muted);font-size:.82rem;
}
.avatar{display:inline-block;flex:none;line-height:0}
.avatar img{border-radius:50%;border:2px solid var(--ink);display:block}

@media(max-width:900px){
  .form-row{grid-template-columns:1fr}
  .account-dropdown{position:static;min-width:0;margin-top:10px;box-shadow:none}
  .nav-links .account-menu{width:100%}
}

/* ===================================================================
   Archive entries and the content editor
   =================================================================== */

select{
  width:100%;padding:12px 13px;
  border:2px solid var(--ink);
  background:#fff;color:var(--ink);
  font:inherit;
}
code{
  font-family:Consolas,monospace;font-size:.88em;
  background:rgba(27,29,31,.06);padding:1px 5px;
}

/* --- entry detail --- */
.entry-meta{
  font:700 .82rem Consolas,monospace;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em;
  margin-top:18px;
}
.entry-hero{margin:0}
.entry-hero img,.entry-gallery img{
  display:block;width:100%;height:auto;
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
}
.entry-hero figcaption,.entry-gallery figcaption{
  margin-top:10px;color:var(--muted);font-size:.9rem;
}
.entry-gallery{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.entry-gallery figure{margin:0}

.entry-body{max-width:820px}
.entry-body h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:1.4em}
.entry-body h3{font-size:1.2rem;margin-top:1.3em}
.entry-body a{color:var(--teal);font-weight:700}
.entry-body ul,.entry-body ol{padding-left:22px}
.entry-body li{margin-bottom:.4em}
.entry-body blockquote{
  margin:1.4em 0;padding:14px 18px;
  background:var(--yellow);border:2px solid var(--ink);
  font-family:Georgia,serif;font-weight:700;
}
.entry-body pre{
  background:#222;color:#f2f0e8;
  border:3px solid var(--ink);
  padding:16px;overflow-x:auto;
  font-family:Consolas,monospace;font-size:.88rem;
}
.entry-body pre code{background:none;padding:0;color:inherit}
.entry-body img{max-width:100%;height:auto;border:2px solid var(--ink)}
.entry-body table{width:100%;border-collapse:collapse;margin:1.3em 0}
.entry-body th,.entry-body td{border:1px solid var(--rule);padding:9px 12px;text-align:left}
.entry-body th{background:var(--ink);color:var(--paper2);font:800 .8rem Consolas,monospace}

/* --- admin --- */
.admin-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px;align-items:center}
.admin-tabs a{
  text-decoration:none;padding:8px 13px;
  border:2px solid var(--ink);background:var(--paper2);
  font:800 .8rem Consolas,monospace;text-transform:uppercase;letter-spacing:.05em;
  box-shadow:3px 3px 0 var(--ink);
}
.admin-tabs a:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
/* Not a blanket .admin-tabs a rule: the active tab needs to stay legible, and the
   inherited teal-on-teal mistake is easy to reproduce here. */
.admin-tabs a[aria-current="page"]{background:var(--ink);color:var(--paper2)}
.admin-tab-new{margin-left:auto;background:var(--teal)!important;color:#fff}

.editor-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.editor-side{display:grid;gap:24px;position:sticky;top:92px}
.editor-grid label{display:block;margin-bottom:16px;text-transform:none;letter-spacing:0}
.editor-grid label>.form-helper{
  display:inline;margin:0 0 0 6px;
  font:400 .78rem Segoe UI,Arial,sans-serif;text-transform:none;letter-spacing:0;
}
.editor-body{font-family:Consolas,monospace;font-size:.9rem;line-height:1.6;min-height:420px}
.editor-preview{
  max-height:520px;overflow-y:auto;
  background:var(--paper);border:2px dashed var(--rule);padding:18px;
}
.editor-preview>:first-child{margin-top:0}
.editor-advanced{margin-bottom:16px}
.editor-advanced summary{
  cursor:pointer;font:800 .8rem Consolas,monospace;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  padding:8px 0;
}
.editor-file{border:2px dashed var(--ink);padding:14px;background:var(--paper)}
.editor-danger{background:var(--red);color:#fff}
.editor-danger.button-light{background:var(--paper2);color:var(--red)}

.editor-images{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-top:18px}
.editor-images figure{margin:0;border:2px solid var(--ink);background:var(--paper);padding:8px}
.editor-images figure.is-hero{border-color:var(--teal);border-width:4px}
.editor-images img{display:block;width:100%;height:110px;object-fit:cover;border:1px solid var(--rule)}
.editor-images figcaption{margin-top:8px;display:grid;gap:8px}

@media(max-width:1000px){
  .editor-grid{grid-template-columns:1fr}
  .editor-side{position:static}
}

/* ===================================================================
   Corrections found by actually looking at the rendered pages
   =================================================================== */

/* The shared components emit an empty <p class="form-status"> as a live region for
   the passkey script to write into. Empty, it drew a bordered box under the sign-in
   button that looked like a broken control. */
.form-status:empty{display:none}

/* A sign-in form has no business being 1180px wide. AccountShell puts its hero in
   .shell.narrow but the body in a plain .shell, so constrain here instead — and let
   any page that actually holds a table have the full width back. */
.account-shell{max-width:660px;margin-inline:auto}
.account-shell:has(.table-scroll),
.account-shell:has(.admin-table),
.account-shell:has(.editor-grid){max-width:none}

/* The site h1 runs to 6.5rem, which on an account page leaves a canyon between the
   heading and its lede. */
.page-hero h1{font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:.35em}
.page-hero.compact .shell.narrow,
.page-hero .shell.narrow{max-width:660px}

/* "or" divider between the password form and the passkey button. */
.account-divider{
  display:flex;align-items:center;gap:14px;
  margin:22px 0 18px;
  color:var(--muted);
  font:800 .76rem Consolas,monospace;text-transform:uppercase;letter-spacing:.12em;
}
.account-divider::before,.account-divider::after{
  content:"";flex:1;height:2px;background:var(--rule);
}

/* The site h2 runs to 3.8rem, which is right for a section heading and absurd for a
   panel label. Editor panels get a stamped monospace label instead. */
.account-card>h2{font-size:clamp(1.25rem,2vw,1.6rem)}
.editor-side .account-card>h2{
  font:800 .82rem Consolas,monospace;
  text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);margin-bottom:1.1em;
}

/* Blazor's FocusOnNavigate puts focus on the h1 after every navigation, which drew a
   box around the entire heading. Suppress the ring for programmatic focus only —
   :focus-visible still shows it for anyone actually navigating by keyboard. */
h1:focus:not(:focus-visible),
[tabindex="-1"]:focus:not(:focus-visible){outline:none}

.entry-back{
  padding-top:22px;border-top:2px dashed var(--rule);
  font:800 .86rem Consolas,monospace;
}

/* A category card only gains the raised, clickable treatment when it actually leads
   somewhere. Without a destination it stays flat description — no pointer, no hover
   lift, no false promise. */
.category-card{display:block}
a.category-card{text-decoration:none;transition:.12s ease}
a.category-card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 rgba(27,29,31,.14)}
a.category-card .card-link{display:inline-block;margin-top:14px}

/* Georgia's numerals have descenders (4, 9), and grid centring clipped them against
   the panel edge. Give the block room rather than shrinking the type. */
.error-code{line-height:1.05;padding:34px 22px 40px}

/* --- interactive surfaces should feel interactive ---------------------------
   A card built as <a> containing <h3> and <p> still shows an I-beam over its text,
   so it reads as a paragraph rather than a control, and a slightly draggy click
   selects text instead of following the link.

   Scoped deliberately to things that ARE controls. Prose, headings, code blocks and
   table cells stay selectable — making body text unselectable to tidy up a cursor
   would be a genuinely worse trade. */
a.card, a.card *,
.btn, .btn *,
.button, .button *,
.account-menu summary, .account-menu summary *,
.admin-tabs a, .admin-tabs a *,
.nav-links a, .menu-btn,
button:not(:disabled), label.checkbox-row{
  cursor:pointer;
}
a.card, .btn, .button, .account-menu summary, .admin-tabs a, .nav-links a, .menu-btn,
.editor-advanced summary, label.checkbox-row{
  -webkit-user-select:none;
  user-select:none;
}
/* The stamped labels and status readouts are decoration, not content worth copying,
   and selecting them mid-drag looks like a glitch. */
.eyebrow, .kicker, .manual-mark, .card-link, .status-line span, .error-code{
  -webkit-user-select:none;
  user-select:none;
}

/* Display type is decoration as much as content: the I-beam is most obvious in a hero,
   and nobody drag-selects a headline on purpose. Body copy, list items, code blocks
   and tables stay selectable, which is what keeps a technical archive quotable. */
h1, h2, h3,
.lede, .big, .quote, blockquote,
.motto .big, .timeline-item strong, .brand, .small{
  -webkit-user-select:none;
  user-select:none;
  cursor:default;
}
/* Except inside an entry body, where a heading is part of the text someone may want
   to quote along with the paragraph under it. */
.entry-body h1, .entry-body h2, .entry-body h3,
.entry-body blockquote, .prose h2, .prose h3{
  -webkit-user-select:text;
  user-select:text;
  cursor:auto;
}

/* --- error panel corrections -------------------------------------------------
   The code column was a fixed 180px while the numeral rendered wider than that, so
   "404" ran underneath the title block and lost its last digit. Size the column to
   the content and let the type scale with it. */
.error-head{grid-template-columns:auto 1fr}
.error-code{
  min-width:150px;
  font-size:clamp(2.8rem,5.5vw,4.8rem);
  line-height:1;
  padding:32px 26px 36px;
  overflow:visible;
}

/* FocusOnNavigate gives the h1 tabindex="-1" and focuses it after every navigation.
   Browsers disagree about whether that counts as :focus-visible, and when it does the
   result is a box drawn around the entire headline. An h1 is not an interactive
   control, so it has no focus state worth showing. */
h1[tabindex="-1"]:focus,
h1:focus{outline:none}

/* Labels inside a form get spacing from `form{gap:14px}`, but the passkey block is
   not a form — it is an input and a button driven by script — so its field sat flush
   against the Register button. Space the labels themselves instead of special-casing
   that one button. */
.account-card label:not(.checkbox-row){display:block;margin-bottom:18px}
.account-card label:not(.checkbox-row):last-child{margin-bottom:0}
.account-card > .button{margin-top:2px}

/* --- error scene -------------------------------------------------------------
   Small animated illustration above the error copy. A nut going over the bench edge
   for 4xx, a component venting for 5xx. Class-driven throughout: the CSP is
   style-src 'self', so an inline style attribute would be dropped. */
.error-scene{max-width:300px;margin:0 0 4px}
.error-scene svg{width:100%;height:auto;overflow:visible}

/* The nut rolls along the bench, reaches the edge, and goes over it. It always goes
   over it. */
@keyframes runaway{
  0%{transform:translate(64px,63px) rotate(0deg);opacity:0}
  8%{opacity:1}
  52%{transform:translate(214px,63px) rotate(560deg);opacity:1}
  70%{transform:translate(236px,74px) rotate(700deg);opacity:1}
  100%{transform:translate(252px,140px) rotate(1000deg);opacity:0}
}
.runaway{animation:runaway 4s cubic-bezier(.42,0,.75,1) infinite}

/* The failed capacitor: a slow bulge, and smoke that keeps on going. */
@keyframes bulge{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.09)}}
@keyframes puff-rise{
  0%{transform:translateY(0) scale(.5);opacity:0}
  22%{opacity:.55}
  100%{transform:translateY(-40px) scale(1.6);opacity:0}
}
.cap-blown,.cap-top{transform-origin:152px 96px;animation:bulge 2.6s ease-in-out infinite}
.puff{animation:puff-rise 3.2s ease-out infinite}
.puff-2{animation-delay:1s}
.puff-3{animation-delay:2s}

/* Decoration with no informational content, so it goes away rather than slowing. */
@media (prefers-reduced-motion:reduce){
  .runaway,.cap-blown,.cap-top,.puff{animation:none}
  .runaway{transform:translate(150px,63px)}
  .puff{opacity:.3}
}

.error-note{
  margin:22px 0 0;padding-top:16px;border-top:1px dashed var(--rule);
  font:700 .84rem Consolas,monospace;color:var(--muted);
}