/* Clerkmark — the memo sheet. Tokens come from /tokens.css (UI-SPEC §14). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--ff-display);
  font-size:var(--step-1);
  line-height:var(--lh-memo);
  font-variant-numeric:tabular-nums;
  min-height:100dvh;
}
[hidden]{display:none !important}
button,input,label{font:inherit;color:inherit}
button{background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
p{margin:0}
h1,h2,h3{margin:0;font-size:inherit;line-height:inherit}
ol,ul{margin:0;padding:0;list-style:none}
dl,dd,dt{margin:0}
svg{display:block}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tab:focus-visible{outline-offset:-2px}

/* visually hidden text for the status region's announcements */
.vh{position:absolute !important;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:16px;top:-100px;z-index:10;
  background:var(--button-bg);color:var(--button-ink);padding:8px 12px;border-radius:var(--r-sm);
  font-weight:700;
}
.skip:focus{top:8px}

/* ---------- the table-top and the sheet ---------- */
.table{
  min-height:100dvh;
  padding:0;
}
.sheet{
  position:relative;
  background:var(--canvas);
  width:100%;
  min-height:100dvh;
  padding:20px 16px 40px 0;
  --m:32px;            /* pleading margin width at this viewport */
  --gap:16px;          /* margin rule → content column */
  --pad-r:16px;
}
.sheet::before{
  content:"";position:absolute;top:0;bottom:0;left:var(--m);width:1px;background:var(--line);
}
/* every block on the sheet: [line-number margin | content] */
.ln{
  display:grid;
  grid-template-columns:var(--m) minmax(0,1fr);
  column-gap:var(--gap);
  padding-right:var(--pad-r);
}
.ln > .num{
  grid-column:1;
  text-align:right;
  padding-right:8px;
  font-size:var(--step--2);
  color:var(--ink-muted);
  line-height:calc(var(--step-1) * var(--lh-memo));
  padding-top:6px;
  user-select:none;
}
.ln > :not(.num){grid-column:2}
.ln > .full{grid-column:1 / -1}

@media (min-width:901px){
  .sheet{
    --m:var(--margin-w);
    --gap:24px;
    --pad-r:var(--sheet-pad-right);
    padding:var(--sheet-pad-top) 0 var(--sheet-pad-bottom) 0;
  }
  .ln > .num{padding-right:12px}
}
@media (min-width:1024px){
  body{background:var(--surround)}
  .table{padding:40px 24px 32px}
  .sheet{
    width:var(--sheet-w);
    max-width:100%;
    margin:0 auto;
    box-shadow:var(--shadow-raised);
    min-height:calc(100dvh - 72px - var(--tab-h));
  }
  .tabs,.banner{width:var(--sheet-w);max-width:100%;margin-left:auto;margin-right:auto}
}

/* ---------- folder tabs ---------- */
.tabs{
  display:flex;gap:2px;align-items:flex-end;
  padding-left:var(--m, 32px);
  position:relative;z-index:1;
}
@media (max-width:900px){.tabs{padding-left:32px}}
@media (min-width:901px){.tabs{padding-left:var(--margin-w)}}
.tab{
  height:var(--tab-h);
  padding:0 16px;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:var(--tab-inactive);
  color:var(--ink-muted);
  font-weight:400;
  font-size:var(--step-1);
  display:inline-flex;align-items:center;
  transition:background-color var(--dur-hover) var(--ease-out);
}
.tab[aria-selected="true"]{background:var(--canvas);color:var(--ink);font-weight:700}
/* 320 px: three tabs on one line ("How it works" wrapped out of its 36 px tab) */
@media (max-width:380px){.tab{padding:0 8px;font-size:var(--step-0);white-space:nowrap}}
@media (hover:hover) and (pointer:fine){
  .tab[aria-selected="false"]:hover{background:var(--surface-2)}
}
.banner{
  font-size:var(--step--1);
  color:var(--ink-muted);
  min-height:28px;
  padding:0 16px 6px var(--m, 32px);
}
@media (max-width:900px){.banner{padding-left:32px;background:var(--canvas)}}
@media (min-width:901px){.banner{padding-left:var(--margin-w)}}

/* ---------- heading block ---------- */
.heading{padding-bottom:0}
.heading-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.memo-h1{
  font-weight:700;text-transform:uppercase;letter-spacing:var(--track-caps);
  font-size:var(--step-1);
  margin-bottom:8px;
}
.hl{display:grid;grid-template-columns:minmax(112px,max-content) minmax(0,1fr);column-gap:12px;row-gap:8px}
.hl > div{display:contents}
@media (max-width:480px){
  .hl{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .hl dd{margin-bottom:4px}
}
.hl dt{font-weight:700;text-transform:uppercase;letter-spacing:var(--track-caps);white-space:nowrap}
.hl dd{color:var(--ink);overflow-wrap:anywhere}
.heading-right{
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
  order:1;             /* after the heading lines in the grid layouts (source order puts it first for the float below) */
}
@media (max-width:480px){.heading-right{gap:12px}}
/* Wide screens: the stamp and button float at the heading's top right and the TO/FROM/RE lines wrap around them
   line by line, so a long RE: runs under the stamp at full width instead of down a 220 px column. */
@media screen and (min-width:901px){
  .heading-grid{display:flow-root}
  .heading-right{float:right;align-items:flex-end;margin:0 0 16px 32px;max-width:232px}
  .hl{display:block}
  .hl > div{display:block;position:relative;padding-left:180px;margin-bottom:8px}
  .hl > div:last-child{margin-bottom:0}
  .hl dt{position:absolute;left:0;top:0}
}
.double-rule{
  margin-top:8px;
  border-bottom:1px solid var(--line);
  position:relative;height:4px;
}
.double-rule::after{content:"";position:absolute;left:0;right:0;bottom:-4px;border-bottom:1px solid var(--line)}
.disclaimer{margin-top:16px;font-size:var(--step-0);color:var(--ink)}
.litigant{margin-top:4px;font-size:var(--step-0);color:var(--ink-muted);max-width:64ch}

/* ---------- stamp ---------- */
.stamp{
  width:max-content;min-width:148px;max-width:232px;
  border:2px solid var(--pen);
  border-radius:var(--r-sm);
  padding:8px 12px;
  color:var(--pen);
  font-weight:700;text-transform:uppercase;letter-spacing:var(--track-stamp);
  font-size:var(--step-0);
  line-height:1.35;
  transform:rotate(-2deg);
  transform-origin:50% 50%;
  will-change:transform;
}
.stamp .stamp-word{font-size:var(--step-2);display:block}
.stamp span{display:block}
.stamp .stamp-line{white-space:nowrap}
.stamp .stamp-soft{white-space:normal}
@media (min-width:901px){.stamp{min-width:176px}}
@media (prefers-reduced-motion:no-preference){
  .stamp.land{animation:stamp-land var(--dur-stamp) var(--ease-out-quint) both}
}
@keyframes stamp-land{from{opacity:0;transform:rotate(-2deg) scale(1.08)}to{opacity:1;transform:rotate(-2deg) scale(1)}}

/* ---------- buttons ---------- */
.button-primary{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 16px;
  background:var(--button-bg);color:var(--button-ink);
  border-radius:var(--r-sm);
  font-weight:700;font-size:var(--step-1);
  width:100%;
  cursor:pointer;
  transition:background-color var(--dur-hover) var(--ease-out),transform var(--dur-press) var(--ease-out);
}
.button-primary input[type="file"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;
}
.button-primary:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.button-primary:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .button-primary:hover{background:var(--button-hover)}
}
.button-primary[aria-disabled="true"]{cursor:default}
.button-primary[aria-disabled="true"] input{pointer-events:none}
@media (min-width:901px){.button-primary{height:40px;width:auto}}

.button-tonal{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 16px;
  background:var(--surface-2);color:var(--ink);
  border-radius:var(--r-sm);
  font-weight:400;font-size:var(--step-1);
  width:100%;
  transition:background-color var(--dur-hover) var(--ease-out),transform var(--dur-press) var(--ease-out);
}
.button-tonal:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .button-tonal:hover{background:color-mix(in oklch, var(--surface-2), black 8%)}
}
.button-tonal[aria-disabled="true"]{cursor:default}
@media (min-width:901px){.button-tonal{height:40px;width:auto}}

/* typed bracket links */
.blink{
  display:inline-flex;align-items:center;
  min-height:24px;
  font-size:var(--step-0);
  color:var(--ink);
  white-space:nowrap;
}
.blink.file{position:relative;cursor:pointer}
.blink.file input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.blink.file:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .blink:hover{text-decoration:underline;text-underline-offset:3px}
}
.blink[aria-disabled="true"]{cursor:default;color:var(--ink-muted)}

/* ---------- body ---------- */
.body{margin-top:24px}
.muted{color:var(--ink-muted)}
.sheet.dragover .body{outline:2px solid var(--line-input);outline-offset:8px}

/* drop target (S1) */
.drop-inner{max-width:60ch}
.drop-sentence{display:flex;flex-wrap:wrap;gap:12px 8px;align-items:center}
.drop-sentence .button-primary,.drop-sentence .button-tonal{flex:1 1 100%}
/* one column: the sentence's full stop after "Choose a PDF" would sit alone on a line between two full-width buttons */
@media (max-width:900px){.drop-sentence > .button-primary + span{display:none}}
@media (min-width:901px){
  .drop-sentence .button-primary,.drop-sentence .button-tonal{flex:0 0 auto}
}
.drop-note{margin-top:16px;font-size:var(--step-0);color:var(--ink-muted)}
.drop-note.blocked,.drop-note.error{color:var(--ink)}
.drop-note .blink{margin-left:4px}

/* status line (S2) */
.status-inner{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows var(--dur-exit) var(--ease-exit);
}
.status-inner.collapsed{grid-template-rows:0fr}
.status-inner > div{overflow:hidden;min-height:0}
.status-steps{color:var(--ink-muted);font-size:var(--step-1)}
.status-steps li{padding:2px 0}
.status-steps li.done{color:var(--ink)}
.status-elapsed{margin-top:8px;font-size:var(--step-0);color:var(--ink)}
.status-slow{margin-top:8px;font-size:var(--step-0);color:var(--ink-muted)}

/* rows */
.rows{margin:0}
.row{
  position:relative;
  min-height:var(--row-min);
  padding:6px var(--pad-r) 6px 0;   /* keep the sheet's right margin: notes stop 72 px from the paper edge at 1440 (UI-SPEC §5) */
  margin-bottom:var(--row-gap);
  border-radius:var(--r-sm);
}
.row.hidden-row{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .row.enter{animation:row-in var(--dur-row) var(--ease-out-quint) both;animation-delay:var(--d,0ms)}
}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.rowbody{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px 24px;
  min-width:0;
  border-radius:var(--r-sm);
  transition:background-color var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out);
}
@media (min-width:901px){
  .rowbody{grid-template-columns:minmax(0,1fr) var(--note-w)}
  .rowbody > .drawer{grid-column:1 / -1}
}
@media (hover:hover) and (pointer:fine){
  .row:hover .rowbody{background:var(--surface-2);box-shadow:0 0 0 8px var(--surface-2)}
}
.row.target .rowbody{background:var(--surface-2);box-shadow:0 0 0 8px var(--surface-2)}
.row.target > .num,.row:focus-within > .num{color:var(--ink);font-weight:700}
.row .num[tabindex]{cursor:default}
.row.rendered-target .rowbody{transition:background-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out)}

.cite{position:relative;min-width:0}
.citetext{font-size:var(--step-1);line-height:var(--lh-memo);color:var(--ink);overflow-wrap:anywhere}
.citetext .rep{white-space:nowrap}   /* a reporter wraps as one unit so circle-reporter stays one ellipse ("Fed. Air Rptr. 3d" is 17 characters) */
.row[data-class="skipped"] .citetext,.row[data-class="not_checked"] .citetext{color:var(--ink-muted)}
.fp{font-size:var(--step--1);color:var(--ink-muted);margin-left:12px;white-space:nowrap}
.quote{
  margin-top:4px;
  font-size:var(--step-0);color:var(--ink-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.penword{color:var(--pen);font-weight:700}
.rowlinks{margin-top:4px}

/* the mark overlay */
.mark{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
.mark path{
  fill:none;
  stroke:var(--pen);
  stroke-width:var(--mark-stroke);
  stroke-linecap:round;stroke-linejoin:round;
}
.mark path[data-mark="underline-pencil"]{stroke:var(--pencil);stroke-dasharray:4 3}
.mark text{
  font-family:var(--ff-display);font-weight:700;font-size:var(--step--1);fill:var(--pen);
}
/* draw-on: pathLength=1, dashoffset 1 → 0 */
.mark.animate path{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset var(--dur-mark) var(--ease-out-quint);
  transition-delay:var(--d,0ms);
}
.mark.animate path[data-mark="underline-pencil"]{stroke-dasharray:4 3;stroke-dashoffset:0;opacity:0;transition:opacity var(--dur-mark) var(--ease-out-quint);transition-delay:var(--d,0ms)}
.mark.animate text{opacity:0;transition:opacity var(--dur-mark) var(--ease-out-quint);transition-delay:var(--d,0ms)}
.mark.animate.on path{stroke-dashoffset:0;opacity:1}
.mark.animate.on text{opacity:1}

/* the note */
.note{min-width:0}
.label{font-size:var(--step-0);font-weight:700;color:var(--ink);letter-spacing:0}
.label.pen{color:var(--pen)}
.label.pencil{color:var(--pencil)}
.rule{
  margin-top:4px;
  font-size:var(--step-0);color:var(--ink-muted);line-height:var(--lh-memo);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.row.open .rule{display:block;-webkit-line-clamp:none}
/* a row with no [Show the page]/[Show the shelf] has nowhere else to show its rule sentence, so it is never clamped */
@media screen{.row:not(:has(.drawer)) .rule{display:block;-webkit-line-clamp:none}}
.check{font-weight:400;color:var(--ink);margin-right:4px}

/* evidence drawer */
.drawer{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-drawer) var(--ease-out-quint);
}
.drawer.open{grid-template-rows:1fr}
.drawer.noanim{transition:none}
.drawer.closing{transition:grid-template-rows var(--dur-exit) var(--ease-exit)}
.drawer-inner{overflow:hidden;min-height:0}
.panel-page,.panel-shelf{
  margin:8px 0 4px;
  padding:16px 20px;
  background:var(--surface-1);
  box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--ff-body);
}
.running-head-line{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.running-head{
  font-family:var(--ff-body);font-variant:small-caps;font-size:var(--step--2);letter-spacing:.04em;color:var(--ink-muted);
  flex:1 1 auto;min-width:0;
}
.running-head:focus-visible{outline-offset:4px}
.page-marker{font-family:var(--ff-body);font-weight:700;font-size:var(--step-1);color:var(--ink);white-space:nowrap}
.excerpt{
  margin-top:8px;
  font-size:var(--step-0);line-height:var(--lh-body);color:var(--ink);max-width:64ch;
  white-space:pre-line;
}
.excerpt .hl-passage{text-decoration:underline;text-decoration-color:var(--pen);text-decoration-thickness:1.5px;text-underline-offset:3px}
.excerpt-note{margin-top:8px;font-size:var(--step-0);color:var(--ink-muted)}
.panel-footer{
  margin-top:12px;
  font-family:var(--ff-mono);font-size:var(--step--2);color:var(--ink-muted);
  overflow-wrap:anywhere;
}
.panel-footer a{color:var(--ink-muted);display:inline-block;min-height:24px;line-height:24px}
.panel-footer span + span::before{content:" · "}
.panel-actions{margin-top:8px;font-family:var(--ff-display)}

/* shelf strip */
.strip{
  position:relative;height:var(--strip-h);width:100%;
  margin-top:20px;margin-bottom:8px;
}
.strip .held{position:absolute;top:0;height:100%;background:var(--ink-muted)}
.strip .beyond{position:absolute;top:0;height:100%;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--line-input)}
.strip .tick{position:absolute;top:-4px;width:2px;height:calc(100% + 8px);background:var(--pen)}
.strip .tick-label{
  position:absolute;top:-20px;transform:translateX(-50%);
  font-family:var(--ff-display);font-size:var(--step--2);color:var(--pen);font-weight:700;white-space:nowrap;
}
.strip-label{font-family:var(--ff-body);font-size:var(--step--2);color:var(--ink-muted)}

/* notices, foot */
.notice{margin-top:16px}
.notice-inner{font-size:var(--step-0);color:var(--warning);max-width:60ch}
.notice .blink{margin-left:4px;color:var(--ink)}
.foot{margin:0 0 24px}   /* now the first block of the body, above the rows */
.foot-inner{max-width:60ch;font-size:var(--step-1)}
.foot a{font-variant-numeric:tabular-nums}
.foot.fade{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .foot{transition:opacity 150ms var(--ease-out)}
}
.footlinks{margin-top:12px}
.noresults{max-width:60ch}
.noresults .blink{margin-left:4px}

/* credits under the sheet */
.credits{
  display:none;
  margin:16px auto 0;
  width:var(--sheet-w);max-width:100%;
  font-size:var(--step--1);color:var(--ink-muted);
  padding-left:var(--margin-w);
}
@media (min-width:1024px){.credits{display:block}}
.credits a{color:var(--ink-muted)}
.wordmark{position:relative;display:inline-block;font-weight:700;letter-spacing:var(--track-wordmark);color:var(--ink)}
.wordmark svg{position:absolute;overflow:visible;pointer-events:none}
.wordmark svg path{fill:none;stroke:var(--pen);stroke-width:1.5px;stroke-linecap:round}

/* ---------- evaluation sheet ---------- */
.eval,.how{padding-bottom:16px}
.sheet-h1{font-weight:700;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--step-1)}
.sheet-intro{margin-top:8px;color:var(--ink-muted);font-size:var(--step-0);max-width:64ch}
.eval-table{
  width:100%;border-collapse:collapse;margin-top:24px;
  font-size:var(--step-0);font-variant-numeric:tabular-nums;
}
.eval-table caption{text-align:left;font-size:var(--step-0);color:var(--ink-muted);padding-bottom:8px}
.eval-table th{
  text-align:left;font-size:var(--step--1);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);
  padding:8px 12px 8px 0;border-bottom:1px solid var(--line);
}
.eval-table td{padding:8px 12px 8px 0;vertical-align:top;min-height:40px}
.eval-table td.line a{display:inline-flex;align-items:center;min-height:24px;min-width:24px}
.eval-table td.match .no{color:var(--pen);font-weight:700}
.eval-table .mismatch-reason{display:block;font-size:var(--step--1);color:var(--ink-muted);margin-top:4px}
.eval-table .col-line{width:48px}
.eval-table .col-exp,.eval-table .col-said{width:168px}
.eval-table .col-match{width:64px}
.eval-close{margin-top:24px;max-width:64ch}
.eval-close .zero{color:var(--success);font-weight:700}
.eval-stages{margin-top:16px;color:var(--ink-muted);font-size:var(--step-0)}
.eval-stages li{padding:2px 0}
.eval-keys{margin-top:16px;color:var(--ink-muted);font-size:var(--step--1);max-width:72ch}
.eval-stale{margin-top:16px;font-size:var(--step-0);color:var(--ink-muted)}
.eval-stale .blink{margin-left:4px}
.eval-error{margin-top:24px}
.eval-error .blink{margin-left:4px}
.eval-prov{margin-top:8px;font-size:var(--step--1);color:var(--ink-muted);max-width:64ch}
.sk{height:14px;margin:13px 0;background:var(--surface-2)}
@media (prefers-reduced-motion:no-preference){
  .sk{background:linear-gradient(90deg,var(--surface-2),var(--surface-1),var(--surface-2)) 0 0/200% 100%;animation:sk 1.5s linear infinite}
}
@keyframes sk{to{background-position:-200% 0}}

@media (max-width:900px){
  .eval-table thead{display:none}
  .eval-table tr{display:grid;grid-template-columns:minmax(0,1fr);padding:8px 0;border-bottom:1px solid var(--line)}
  .eval-table td{display:block;padding:2px 0;border:0}
  .eval-table td::before{content:attr(data-label) ": ";color:var(--ink-muted);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em}
  .eval-table td.line::before{content:attr(data-label) " "}
}

/* ---------- how it works ---------- */
.how-section{margin-top:24px}
.how-section:first-of-type{margin-top:0}
.how-h{font-weight:700;text-transform:uppercase;letter-spacing:var(--track-caps);font-size:var(--step-1);margin-bottom:8px}
.how-p{max-width:68ch;margin-top:8px}
.how-rule{margin-top:8px}
.how-rule li{
  display:grid;grid-template-columns:var(--m) minmax(0,1fr);column-gap:var(--gap);
  margin-left:calc(-1 * (var(--m) + var(--gap)));
  margin-bottom:8px;
}
.how-rule li .num{text-align:right;padding-right:8px;font-size:var(--step--2);color:var(--ink-muted);padding-top:4px}
@media (min-width:901px){.how-rule li .num{padding-right:12px}}
.how-rule li p{max-width:68ch}
.how-table{margin-top:8px;border-collapse:collapse;font-size:var(--step-0)}
.how-table td{padding:4px 24px 4px 0;vertical-align:top}
.how-table td:first-child{white-space:nowrap}
.how-list li{margin-top:8px;max-width:68ch}

/* print footer is print-only */
.print-footer{display:none}