/* Wizeyard CMS. Same material as the site: a two-drum risograph print on uncoated paper.
   Flat ink, hard offsets, no blur, no rounded cards, no spinners or toasts. Orange is saved for
   "this is the important or active thing": your unpublished changes, prices, and Publish.
   Rules: docs/design-principles.md. Inks: site/src/styles/global.css. */
@font-face{font-family:"Big Shoulders Display";font-weight:900;font-display:swap;src:url(/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url(/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-display:swap;src:url(/fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/newsreader-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:600;font-display:swap;src:url(/fonts/newsreader-latin-600-normal.woff2) format("woff2")}

:root{
  --paper:#F1ECDF; --blue:#3255A4; --orange:#FF6C2F; --overprint:#32241E;
  --ground:var(--paper); --text:var(--overprint); --head:var(--blue); --rule:var(--blue);
  --field:#FBF8F0; --muted:rgba(50,36,30,.62); --tint:rgba(50,85,164,.14);
  --grain:url(/grain.png);
  --display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--ground:var(--overprint);--text:var(--paper);--head:var(--paper);--rule:var(--orange);--field:#3d2d26;--muted:rgba(241,236,223,.66);--tint:rgba(241,236,223,.10);--grain:url(/grain-dark.png)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grain) 0 0/256px 256px,var(--ground);color:var(--text);font:400 1.0625rem/1.5 var(--serif)}
h1,h2,h3,p,ul,ol{margin:0}
a{color:var(--head);text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{color:var(--orange)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
kbd{font:700 .75rem var(--display);letter-spacing:.06em;border:1.5px solid currentColor;padding:0 4px}
.disp,h1,h2{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.9;color:var(--head)}

/* ---- two-plate type: an orange plate printed under the ink, slightly off register ---- */
.two{position:relative;display:inline-block}
.two::before{content:attr(data-text);position:absolute;left:0;top:0;color:var(--orange);transform:translate(.06em,.05em) rotate(.4deg);z-index:-1}
.two{z-index:0}

/* ---- the status bar: one printed strip, always on screen ---- */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:20px;padding:10px 20px;background:var(--blue);color:var(--paper);border-bottom:3px solid var(--orange)}
.mark{font:900 1.6rem/1 var(--display);text-transform:uppercase;color:var(--paper);text-decoration:none;white-space:nowrap}
.mark b{font-weight:700;font-size:1rem;letter-spacing:.14em;vertical-align:middle;border:2px solid var(--paper);padding:1px 5px 0}
.mark .two::before{color:var(--orange)}
#status{flex:1;min-width:0;font-size:1rem;line-height:1.3}
#status b{font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#status .bad{background:var(--orange);color:var(--overprint);padding:0 6px}
#status.busy{font-style:italic}

/* the main button: orange ink with a blue plate printed off-register behind it */
.press{position:relative;border:0;background:var(--orange);color:var(--overprint);font:900 1.15rem/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:12px 18px 10px;cursor:pointer;box-shadow:4px 4px 0 var(--overprint)}
.press em{font-style:normal;display:inline-block;min-width:1.6em;margin-left:6px;padding:2px 4px 0;background:var(--overprint);color:var(--paper);text-align:center}
.press:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--overprint)}
.press:active{transform:translate(4px,4px);box-shadow:none}
.press[disabled]{background:var(--tint);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.bar .press{box-shadow:4px 4px 0 var(--overprint)}

.ink{border:2px solid var(--head);background:transparent;color:var(--head);font:700 .9rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:7px 10px 5px;cursor:pointer}
.ink:hover{background:var(--head);color:var(--ground)}
.ink.warn{border-color:var(--orange);color:var(--orange)}
.ink.warn:hover{background:var(--orange);color:var(--overprint)}
.ink.armed{background:var(--orange);border-color:var(--orange);color:var(--overprint)}
.quiet{border:0;background:none;padding:0;color:var(--head);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em;cursor:pointer;font-size:.95rem}

/* ---- layout ---- */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 64px)}
.side{border-right:2px solid var(--rule);padding:18px 16px 30px;position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px);overflow:auto}
.side ul{list-style:none;padding:0;margin-top:14px}
.side li a,.side .later{display:block;padding:5px 8px;text-decoration:none;font-size:1.05rem}
.side li a[aria-current="page"]{background:var(--blue);color:var(--paper)}
.side .group{font:700 .8rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:16px 0 2px 8px}
.side .later{color:var(--muted)}
.side .later small{font:700 .7rem var(--display);letter-spacing:.1em;text-transform:uppercase;border:1.5px solid currentColor;padding:0 4px;margin-left:4px}
.side-foot{margin-top:24px;font-size:.9rem;color:var(--muted);line-height:1.9}
.find span{display:block;font:700 .8rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.find input{width:100%;margin-top:4px;padding:7px 8px;border:2px solid var(--rule);background:var(--field)}

main{padding:28px 40px 120px;max-width:980px}
main:focus{outline:none}
.view-head{margin-bottom:26px}
.view-head h1{font-size:4rem}
.view-head p{margin-top:8px;max-width:60ch;color:var(--muted)}

/* ---- fields ---- */
.field{position:relative;padding:14px 0 16px 0;border-top:1.5px solid var(--tint)}
.field>label,.field>.lbl{display:block;font-weight:600;margin-bottom:6px}
.field .key{font:400 .8rem var(--mono);color:var(--muted);margin-left:8px}
.field input[type=text],.field input[type=number],.field textarea,.field select{width:100%;border:2px solid var(--rule);background:var(--field);padding:8px 10px;border-radius:0}
.field textarea{resize:vertical;min-height:2.6em;line-height:1.45}
.field textarea.md{min-height:22em;font-size:1rem}
.field .meta{display:flex;gap:16px;align-items:baseline;margin-top:5px;font-size:.88rem;color:var(--muted)}
.field .meta .count.over{color:var(--orange);font-weight:600}
.field .meta .hint{flex:1}
.field .err{margin-top:6px;background:var(--orange);color:var(--overprint);padding:5px 10px;font-size:.95rem}
.field .err:empty{display:none}
/* an unpublished change: an orange plate down the left edge, printed slightly off */
.field.changed::before{content:"";position:absolute;left:-18px;top:16px;bottom:18px;width:7px;background:var(--orange);transform:rotate(.6deg)}
.field.changed>label::after,.field.changed>.lbl::after{content:"not published";margin-left:10px;font:700 .72rem var(--display);letter-spacing:.12em;text-transform:uppercase;background:var(--orange);color:var(--overprint);padding:1px 5px 0}
.field.has-error input,.field.has-error textarea{border-color:var(--orange)}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--blue);margin-top:2px}

.versions{margin-top:10px;border:2px solid var(--rule);background:var(--field)}
.versions li{display:grid;grid-template-columns:150px 1fr auto;gap:12px;padding:8px 10px;border-top:1.5px solid var(--tint);align-items:start}
.versions li:first-child{border-top:0}
.versions time{font-size:.85rem;color:var(--muted)}
.versions .v{white-space:pre-wrap;word-break:break-word;max-height:7em;overflow:hidden}
.versions ul{list-style:none;padding:0}

/* ---- offers ---- */
.toggle-row{padding:14px 16px;border:2px solid var(--rule);margin-bottom:28px}
.offer{margin:34px 0 0}
.offer>h2{font-size:2.6rem;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.offer .start{font:400 1rem var(--serif);text-transform:none;color:var(--text)}
.offer .sub{font:700 .85rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 0}
.prices table{width:100%;border-collapse:collapse}
.prices td{padding:4px 6px 4px 0;vertical-align:middle}
.prices td.amt{width:150px}
.prices td.unit{width:130px}
.prices td.fmt{width:96px;font:900 1.35rem var(--display);color:var(--orange);white-space:nowrap}
.prices .money{display:flex;align-items:center;gap:4px}
.prices thead td{font-size:.82rem;color:var(--muted)}

/* ---- review ---- */
.change{display:grid;grid-template-columns:1fr auto;gap:6px 18px;padding:16px 0;border-top:2px solid var(--rule)}
.change h3{font:600 1.05rem var(--serif)}
.change .ba{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.change .ba div{padding:8px 10px;white-space:pre-wrap;word-break:break-word;max-height:16em;overflow:auto}
.change .before{color:var(--muted);background:var(--tint)}
.change .before s{text-decoration-thickness:1px}
.change .after{border-left:6px solid var(--blue);background:var(--field)}
.change .ba small{display:block;font:700 .72rem var(--display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px}
.change.price .after{border-left-color:var(--orange)}
.stamp{display:inline-block;font:900 .9rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--orange);border:2.5px solid var(--orange);padding:1px 6px 0;transform:rotate(-3deg);margin-left:8px}
.conflict{grid-column:1/-1;background:var(--orange);color:var(--overprint);padding:8px 10px}
.conflict .ink{border-color:var(--overprint);color:var(--overprint);margin:6px 8px 0 0}
.problems{border:3px solid var(--orange);padding:12px 16px;margin:0 0 22px}
.problems h2{font-size:1.6rem;color:var(--orange)}
.problems li{margin-top:6px}
.publish-row{margin-top:30px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.publish-row .press{font-size:1.6rem;padding:16px 26px 13px}
.result{margin-top:24px;padding:14px 16px;border:3px solid var(--blue)}
.result.bad{border-color:var(--orange)}
.result h2{font-size:2rem}
.result pre{white-space:pre-wrap;font:.85rem/1.4 var(--mono);margin:10px 0 0;max-height:24em;overflow:auto;background:var(--field);padding:10px}
.empty{padding:30px 0;font-size:1.3rem;font-style:italic;color:var(--muted)}

/* ---- history ---- */
.hist li{list-style:none;padding:14px 0;border-top:2px solid var(--rule)}
.hist{padding:0}
.hist .row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.hist time{font-size:.9rem;color:var(--muted);min-width:150px}
.hist .who{font:700 .75rem var(--display);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid currentColor;padding:1px 5px 0}
.hist .live{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.hist .subj{font-weight:600;flex:1}
.hist .chg{margin:8px 0 0 162px;padding:0;font-size:.95rem}
.hist .chg li{border:0;padding:2px 0}
.hist .chg s{color:var(--muted)}
.hist .act{margin:8px 0 0 162px}

.found li{list-style:none;padding:10px 0;border-top:1.5px solid var(--tint)}
.found{padding:0}
.found mark{background:var(--orange);color:var(--overprint)}

@media (max-width:760px){
  .bar{flex-wrap:wrap;gap:8px 14px;padding:8px 12px}
  #status{order:3;flex-basis:100%}
  .shell{grid-template-columns:1fr}
  .side{position:static;max-height:none;border-right:0;border-bottom:2px solid var(--rule);padding:12px 16px}
  .side ul{display:flex;flex-wrap:wrap;gap:2px 4px;margin-top:10px}
  .side .group{flex-basis:100%;margin:8px 0 0}
  .side-foot{display:none}
  main{padding:20px 16px 90px}
  .view-head h1{font-size:2.8rem}
  .field.changed::before{left:-10px;width:5px}
  .change .ba{grid-template-columns:1fr}
  .prices thead{display:none}
  .prices table,.prices tbody{display:block}
  .prices tr{display:grid;grid-template-columns:1fr 1fr auto;gap:6px 8px;align-items:center;padding:8px 0;border-bottom:1.5px solid var(--tint)}
  .prices td,.prices td.amt,.prices td.unit,.prices td.fmt{width:auto;padding:0}
  .prices td:first-child,.prices td:last-child{grid-column:1/-1}
  .hist .chg,.hist .act{margin-left:0}
  .versions li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- sign-in (cms.wizeyard.com) ---- */
[hidden]{display:none !important}
.signout{border:2px solid var(--paper);background:transparent;color:var(--paper);font:700 .95rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;padding:8px 10px 6px;cursor:pointer}
.signout:hover{background:var(--paper);color:var(--blue)}
.signin-box{max-width:34rem;margin:48px auto;padding:0 16px}
.signin-box h1{font-size:clamp(2.4rem,8vw,3.6rem);margin-bottom:16px}
.signin-box p{margin:0 0 18px}
.signin-name{display:block;margin:0 0 18px}
.signin-name span{display:block;font:700 .95rem var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--head);margin-bottom:4px}
.signin-name input{width:100%;padding:10px;border:2px solid var(--rule);background:var(--field)}
#signin-msg{min-height:1.5em}
#signin-msg.bad{background:var(--orange);color:var(--overprint);padding:4px 8px}