/* PDF screen reader check (/pdf-screen-reader-check/): each page beside the numbered list its tags give
   reading software. Every rule is scoped to #prc so site-wide button, table and heading rules don't reach it. */
body.prc-page { background: var(--oa-sheet); }
body.prc-page main { max-width: none; padding: 0; margin: 0; }
#prc { color: var(--ink); font: 400 1.0625rem/1.6 var(--text); }
#prc h1, #prc h2, #prc h3 { text-wrap: wrap; }
#prc table { min-width: 0; }
#prc button:hover, #prc a.btn:hover { filter: none; }
/* the site's own .facts ledger (components.css) styles dt/dd; this grid keeps the prototype's cells */
#prc .facts dt, #prc .facts dd { border-bottom: 0; padding: 0; letter-spacing: 0; text-transform: none; }
#prc {
  --ground: #151518; --ground-2: #1e1f23; --paper: #e8e9e7; --muted-f: #b2b4bd; --blue: #b2c8f0;
  --sheet: #eff0ec; --panel: #f7f7f5; --ink: #151518; --muted: #55575f; --hair: #cfd1d6;
  --blue-deep: #2d4f93; --line: #3c3d45; --rust: #9a3b16; --cited: #d9e3f5;
  --display: "CN Display", Arial, sans-serif; --text: "CN Text", Arial, sans-serif; --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(1.25rem, 3.4vw, 3rem); --tap: 48px;
}
#prc a { color: var(--ink); text-decoration-color: var(--blue-deep); text-underline-offset: .18em; }
#prc :focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }
#prc .wrap { max-width: 80rem; margin: 0 auto; padding: 0 var(--gutter); }
#prc .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* field: the shared header */
/* first screen */
#prc .intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); }
#prc h1 { font: 600 clamp(2.4rem, 5.2vw, 4.4rem)/.98 var(--display); letter-spacing: -.015em; margin: 0 0 1.25rem; max-width: 13ch; }
#prc .lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; max-width: 34em; margin: 0 0 2rem; }
#prc .tray { position: relative; border: 2px solid var(--ink); background: var(--panel); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .75rem; max-width: 34rem; }
#prc .tray.over { background: var(--cited); }
#prc .tray p { margin: 0; }
#prc .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--tap); padding: .7rem 1.6rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 1.0625rem/1.2 var(--text); cursor: pointer; text-decoration: none; }
#prc .btn.quiet { background: transparent; color: var(--ink); }
#prc .btn svg { width: 1.2em; height: 1.2em; }
#prc .tray .btn { justify-self: start; }
#prc .or { color: var(--muted); }
#prc .private { display: flex; gap: .6rem; align-items: baseline; font-size: .9375rem; color: var(--muted); border-top: 1px solid var(--hair); padding-top: .9rem; margin-top: .4rem !important; }
#prc .private b { color: var(--ink); font-weight: 600; }
/* the example object */
#prc .example { margin: 0; }
#prc .example .pair { display: grid; grid-template-columns: 44% 1fr; gap: 1.1rem; align-items: start; }
#prc .mini { position: relative; aspect-ratio: 8.5/11; background: #fff; border: 1px solid var(--hair); box-shadow: 0 18px 40px -24px rgb(21 21 24 / .45); padding: 12% 11%; display: grid; align-content: start; gap: 6%; }
#prc .mini i { display: block; height: 5px; background: #c9cbd0; border-radius: 1px; }
#prc .mini i.h { height: 9px; width: 70%; background: var(--ink); }
#prc .mini i.s { width: 82%; }
#prc .mini .ph { aspect-ratio: 4/3; background: repeating-linear-gradient(135deg, #d6d8dc 0 6px, #e6e7ea 6px 12px); }
#prc .mini .pin { position: absolute; }
#prc .mini .p1 { left: 3%; top: 10%; }
#prc .mini .p2 { left: 3%; top: 31%; }
#prc .mini .p3 { left: 3%; top: 66%; }
#prc .example ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
#prc .example li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--hair); font-size: .9375rem; line-height: 1.4; }
#prc .example figcaption { font: 400 .8125rem/1.4 var(--mono); color: var(--muted); margin-top: .9rem; }
/* states */
body:not([data-state="start"]) #prc [data-for="start"], body:not([data-state="reading"]) #prc [data-for="reading"], body:not([data-state="failed"]) #prc [data-for="failed"], body:not([data-state="done"]) #prc [data-for="done"] { display: none; }
#prc .reading, #prc .failed { padding-block: clamp(2.5rem, 6vw, 5rem); }
#prc .reading h2, #prc .failed h2 { font: 600 clamp(1.75rem, 3.4vw, 2.6rem)/1.05 var(--display); margin: 0 0 .75rem; max-width: 24ch; }
#prc .reading p { margin: 0 0 1rem; }
/* after a file is chosen the title stays as the page's one heading, set small above the state */
body:not([data-state="start"]) #prc .intro { display: block; padding-block: clamp(1.5rem, 3vw, 2.25rem) 0; }
body:not([data-state="start"]) #prc .intro h1 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.1; max-width: none; margin: 0; }
body:not([data-state="start"]) #prc .reading, body:not([data-state="start"]) #prc .failed { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
#prc progress { width: min(100%, 34rem); height: 6px; appearance: none; border: 0; background: var(--hair); display: block; }
#prc progress::-webkit-progress-bar { background: var(--hair); }
#prc progress::-webkit-progress-value { background: var(--ink); }
#prc progress::-moz-progress-bar { background: var(--ink); }
#prc .mono { font: 500 .875rem/1.4 var(--mono); color: var(--muted); }
#prc .failed .box { border-left: 4px solid var(--rust); padding: .2rem 0 .2rem 1.25rem; max-width: 40rem; margin-bottom: 1.75rem; }
#prc .failed .box p { margin: 0; }
#prc .failed .box:focus { outline: none; }
/* result: verdict band */
#prc .result { padding-block: clamp(2rem, 4vw, 3.5rem) 1rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; border-bottom: 2px solid var(--ink); }
#prc .docname { font: 500 .875rem/1.5 var(--mono); color: var(--muted); margin: 0 0 1rem; overflow-wrap: anywhere; max-width: none; letter-spacing: 0; }
#prc .docname b { color: var(--ink); font-weight: 500; }
#prc #result-head { font: 600 clamp(2rem, 4vw, 3.4rem)/1.02 var(--display); margin: 0 0 1rem; letter-spacing: -.01em; }
#prc #result-head:focus { outline: none; }
#prc #verdict-text { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.5; margin: 0 0 .75rem; max-width: 36em; }
#prc .facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); gap: 0 1rem; margin: 0 0 1.5rem; border-top: 1px solid var(--hair); }
#prc .fact { padding: .7rem 0 .8rem; min-width: 0; border-bottom: 1px solid var(--hair); }
#prc .fact dt { font: 400 .8125rem/1.3 var(--mono); color: var(--muted); }
#prc .fact dd { margin: .2rem 0 0; font-weight: 600; font-size: 1.0625rem; overflow-wrap: anywhere; }
#prc .fact.warn dd { color: var(--rust); }
#prc .fact.wide { grid-column: 1 / -1; }
#prc .fact.wide dd { font-weight: 400; }
#prc .gloss { font-size: .9375rem; line-height: 1.5; color: var(--muted); margin: 0 0 1rem; max-width: 36em; }
#prc .next { font-size: .9375rem; line-height: 1.5; margin: 0; max-width: 36em; }
#prc .textlink { display: inline-flex; align-items: center; min-height: 48px; margin: 0 0 1.25rem; font-weight: 600; text-decoration-line: underline; }
#prc .missing-wrap { border-left: 4px solid var(--rust); padding: .1rem 0 .1rem 1.1rem; margin: 0 0 1.75rem; }
#prc .missing-wrap h3 { font: 500 .875rem/1.4 var(--mono); color: var(--rust); margin: 0 0 .35rem; }
#prc .missing-wrap ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-weight: 600; }
#prc .missing-wrap[hidden] { display: none; }
#prc .ask { background: var(--ground); color: var(--paper); padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; gap: .9rem; }
#prc .ask h2 { font: 600 1.375rem/1.15 var(--display); margin: 0; }
#prc .ask p { margin: 0; color: var(--muted-f); font-size: 1rem; }
#prc .ask .btn { background: var(--blue); color: var(--ground); border-color: var(--blue); justify-self: start; }
#prc .ask :focus-visible { outline-color: var(--blue); }
#prc .ask small { font: 400 .8125rem/1.4 var(--mono); color: var(--muted-f); }
#prc .again { justify-self: start; }
/* pages */
#prc .page { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); padding-block: clamp(1.75rem, 3vw, 2.75rem); border-bottom: 1px solid var(--hair); align-items: start; }
#prc .sheet-wrap { position: sticky; top: 1rem; }
#prc .sheet { position: relative; width: min(100%, calc((100svh - 2rem) * var(--r))); background: #fff; border: 1px solid var(--hair); box-shadow: 0 18px 40px -26px rgb(21 21 24 / .5); margin-inline: auto; }
#prc .sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#prc .sheet.drawn canvas { opacity: 1; }
#prc .draw-note { position: absolute; inset: auto .75rem .75rem; margin: 0; padding: .6rem .75rem; background: var(--panel); border-top: 2px solid var(--rust); color: var(--ink); font: 400 .875rem/1.45 var(--text); }
#prc .marks, #prc .ring { position: absolute; inset: 0; pointer-events: none; }
#prc .pin { position: absolute; transform: translate(-115%, -10%); min-width: 1.35rem; height: 1.35rem; padding: 0 .25rem; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 .6875rem/1.35rem var(--mono); text-align: center; box-shadow: 0 0 0 2px #fff; }
#prc .pin.warn { background: var(--rust); }
#prc .pin.on { background: var(--blue-deep); z-index: 2; transform: translate(-115%, -10%) scale(1.25); }
#prc .ring { inset: auto; border: 2px solid var(--blue-deep); background: rgb(45 79 147 / .09); outline: 3px solid rgb(255 255 255 / .85); margin: -4px; padding: 4px; box-sizing: content-box; }
#prc .page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
#prc .page-head h2 { font: 600 1.5rem/1.1 var(--display); margin: 0; }
#prc .page-head .of { font: 400 .875rem var(--mono); color: var(--muted); }
#prc .page-head .count { margin: 0; font: 400 .875rem/1.3 var(--mono); color: var(--muted); }
#prc .heard { list-style: none; margin: 0; padding: 0; }
#prc .heard > li[data-n] { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .4rem; padding: .7rem .5rem .75rem .25rem; min-height: var(--tap); border-bottom: 1px solid var(--hair); cursor: default; }
#prc .heard > li.on { background: var(--cited); }
#prc .heard > li:focus-visible { outline-offset: -3px; }
#prc .heard .n { font: 500 .8125rem/1.65rem var(--mono); color: var(--muted); white-space: nowrap; }
#prc .kind { display: block; font: 500 .8125rem/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; }
#prc .kind.warn { color: var(--rust); }
#prc .kind .extra { font-weight: 400; }
#prc .say { margin: .15rem 0 0; overflow-wrap: anywhere; }
#prc .say.h { font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
#prc q.say { display: block; quotes: "“" "”"; }
#prc .missing { color: var(--rust); font-weight: 600; }
#prc .inline-figs { list-style: none; margin: .5rem 0 0; padding: .5rem 0 0; border-top: 1px dashed var(--hair); }
#prc .inline-figs .kind { display: inline; margin-right: .4rem; }
#prc .sep { padding: 1rem 0 .4rem; font: 500 .8125rem/1.4 var(--mono); color: var(--rust); border-bottom: 2px solid var(--rust); }
#prc .empty { margin: 1rem 0; padding: 1rem 1.1rem; border-left: 4px solid var(--rust); background: var(--panel); }
#prc .hidden-words { margin: 1rem 0 0; border-left: 4px solid var(--rust); background: var(--panel); padding: .7rem 1rem .8rem; }
#prc .hidden-words p { margin: 0; overflow-wrap: anywhere; }
#prc .hidden-words .kind { margin-bottom: .35rem; }
#prc .deco { margin: .9rem 0 0; font-size: .9375rem; color: var(--muted); overflow-wrap: anywhere; }
#prc .deco .kind { display: inline; }
#prc details.grid { margin-top: .5rem; }
#prc details.grid summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue-deep); text-underline-offset: .18em; width: max-content; max-width: 100%; }
#prc .scroll { overflow-x: auto; max-width: 100%; }
#prc .scroll table { border-collapse: collapse; font-size: .875rem; line-height: 1.35; }
#prc .scroll th, #prc .scroll td { border: 1px solid var(--hair); padding: .35rem .5rem; text-align: left; vertical-align: top; min-width: 5rem; max-width: 16rem; }
#prc .scroll th { background: var(--cited); font-weight: 600; }
#prc .note { font-size: .875rem; color: var(--muted); margin: .4rem 0 0; }
#prc .about { padding-block: 2.5rem 4rem; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); }
#prc .about h2 { font: 600 1.5rem/1.1 var(--display); margin: 0; }
#prc .about ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; max-width: 42em; }
@media (max-width: 860px) {
#prc .intro, #prc .result, #prc .about { grid-template-columns: 1fr; }
#prc .example { max-width: 26rem; }
#prc .page { grid-template-columns: 1fr; gap: 1rem; }
#prc .sheet-wrap { top: 0; z-index: 3; background: var(--sheet); padding: .6rem 0; border-bottom: 1px solid var(--hair); }
#prc .sheet { width: min(100%, calc(36svh * var(--r))); }
#prc .pin { min-width: .95rem; height: .95rem; font-size: .5625rem; line-height: .95rem; padding: 0 .12rem; transform: translate(-105%, -10%); box-shadow: 0 0 0 1.5px #fff; }
#prc .pin.on { transform: translate(-105%, -10%) scale(1.2); }
}
@media (prefers-reduced-motion: no-preference) {
#prc .sheet canvas { transition: opacity .25s ease; }
#prc .heard > li[data-n] { transition: background-color .15s ease; }
}
#prc #reading-count { margin-top: .6rem; }
#prc .ask .again { background: transparent; color: var(--paper); border-color: var(--paper); }
/* offer box: the live free-file ask words on the graphite panel */
#prc .ask .ask-kicker { font: 500 .8125rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin: 0; }
#prc .ask ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; color: var(--muted-f); font-size: .9375rem; line-height: 1.45; }
#prc .ask ul a { color: var(--paper); text-decoration-color: var(--blue); display: inline-block; min-height: 48px; line-height: 48px; margin-block: -14px; }
#prc .ask .ask-how { font-size: .875rem; }
#prc .ask ol.ask-slip { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); font: 400 .8125rem/1.4 var(--mono); color: var(--muted-f); gap: 0; }
#prc .ask ol.ask-slip li { padding: .35rem 0; border-bottom: 1px solid var(--line); }