/* Patents.fyi look (docs/GUI_PLAN.md; prototype on gui-plan, rollout run 1 on gui-rollout-1).
 *
 * Built ON TOP OF the U.S. Web Design System 3.13.0 (public domain,
 * /static/vendor/uswds-3.13.0/, unchanged). This file only:
 *   1. sets our tokens (one font, colours, sizes),
 *   2. applies the readability rules to pages that opt in with
 *      <body class="pt-look"> (body 18px, nothing important below 15px),
 *   3. defines the LOUD banners (NOT FIXED / CHECK / NOT CHECKED / OK),
 *   4. lifts the existing, unclassed markup of the tool pages (.subtle,
 *      bare buttons and inputs, tables) so a tool looks right before its
 *      template is converted to USWDS classes.
 * Never used: the .gov banner, seals or anything that suggests a government
 * site. The XFA form previews are excluded (they must render as pdf.js draws them).
 */

@font-face { font-family: "Public Sans Web"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(vendor/uswds-3.13.0/fonts/public-sans/PublicSans-Regular.woff2) format("woff2"); }
@font-face { font-family: "Public Sans Web"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(vendor/uswds-3.13.0/fonts/public-sans/PublicSans-Italic.woff2) format("woff2"); }
@font-face { font-family: "Public Sans Web"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(vendor/uswds-3.13.0/fonts/public-sans/PublicSans-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Public Sans Web"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(vendor/uswds-3.13.0/fonts/public-sans/PublicSans-Bold.woff2) format("woff2"); }

:root {
  /* Colour direction A, "Federal navy" (the prototype default). */
  --pt-primary: #1a4480;        /* buttons, links: 9.4:1 on white */
  --pt-primary-dark: #162e51;   /* hover, header band */
  --pt-primary-light: #d9e8f6;
  --pt-ink: #1b1b1b;            /* body text: 17.4:1 */
  --pt-ink-2: #3d4551;          /* help text: 10.4:1, never pale grey */
  --pt-line: #a9aeb1;
  --pt-line-soft: #dfe1e2;
  --pt-paper: #ffffff;
  --pt-page: #f0f0f0;
  --pt-focus: #2491ff;
  /* LOUD words: same four everywhere. */
  --pt-bad: #b50909;   --pt-bad-bg: #f8dfe2;
  --pt-check: #8a5300; --pt-check-bg: #faf3d1; --pt-check-line: #e5a000;
  --pt-not: #454d57;   --pt-not-bg: #e6e6e6;
  --pt-ok: #216e1f;    --pt-ok-bg: #ecf3ec;
  --pt-info: #1a4480;  --pt-info-bg: #e7f2f5;

  --pt-font: "Public Sans Web", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --pt-mono: Consolas, "Cascadia Mono", Menlo, monospace;
  --pt-size-body: 18px;
  --pt-size-help: 17px;
  --pt-size-small: 15px;   /* the floor for anything a user must read */
  --pt-size-h1: 36px;
  --pt-size-h2: 26px;
  --pt-size-h3: 21px;
  --pt-row-gap: 28px;
  --pt-target: 48px;       /* minimum height of a button or input */
}

/* ------------------------------------------------------------ base type */
html:has(body.pt-look) { background: var(--pt-page); }
body.pt-look {
  margin: 0; background: var(--pt-page); color: var(--pt-ink);
  font-family: var(--pt-font); font-size: var(--pt-size-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.pt-look :where(*):not(code, pre, kbd, samp, .hash, .xfa-viewer, .xfa-viewer *) { font-family: var(--pt-font); }
.pt-look :where(code, pre, kbd, samp, .hash) { font-family: var(--pt-mono); font-size: max(15px, 0.9em); }
.pt-look :where(p, li, dd, dt, td, th, label, legend, summary) { line-height: 1.6; }
.pt-look :where(p, ul, ol) { max-width: 72ch; }
.pt-look h1 { font-size: var(--pt-size-h1); line-height: 1.2; font-weight: 700; margin: 8px 0 16px; letter-spacing: -0.01em; }
.pt-look h2 { font-size: var(--pt-size-h2); line-height: 1.25; font-weight: 700; margin: 36px 0 12px; }
.pt-look h3, .pt-look h4 { font-size: var(--pt-size-h3); line-height: 1.3; font-weight: 700; margin: 28px 0 8px; }
.pt-look a { color: var(--pt-primary); text-underline-offset: 3px; }
.pt-look a:hover { color: var(--pt-primary-dark); }
.pt-look :focus-visible { outline: 3px solid var(--pt-focus); outline-offset: 2px; }

/* ------------------------------------------------------------ layout */
.pt-header { background: var(--pt-primary-dark); color: #fff; }
.pt-header__inner { max-width: 1040px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; gap: 24px; }
.pt-header__brand { color: #fff !important; font-size: 24px; font-weight: 700; text-decoration: none; letter-spacing: 0.01em; }
.pt-header__brand:hover { text-decoration: underline; }
.pt-header__tag { color: #d9e8f6; font-size: var(--pt-size-small); }
.pt-header__nav { margin-left: auto; }
.pt-header__nav a { color: #fff !important; font-size: 17px; font-weight: 600; }
.pt-main { max-width: 1040px; margin: 0 auto; padding: 32px 24px 96px; }
.pt-panel { background: var(--pt-paper); border: 1px solid var(--pt-line-soft); border-radius: 6px; padding: 28px 32px; margin: 0 0 24px; }
.pt-lede { font-size: 20px; line-height: 1.55; color: var(--pt-ink); max-width: 68ch; margin: 0 0 24px; }
.pt-footer { max-width: 1040px; margin: 0 auto; padding: 0 24px 48px; color: var(--pt-ink-2); font-size: var(--pt-size-small); }

/* ------------------------------------------------------------ forms */
.pt-look .pt-row { margin: 0 0 var(--pt-row-gap); }
.pt-look .usa-label, .pt-look .pt-label { display: block; font-size: var(--pt-size-body); font-weight: 700; margin: 0 0 4px; max-width: none; }
.pt-look .pt-optional { font-weight: 400; color: var(--pt-ink-2); }
.pt-look .usa-hint, .pt-look .pt-help { display: block; color: var(--pt-ink-2); font-size: var(--pt-size-help); line-height: 1.5; margin: 0 0 10px; max-width: 68ch; }
.pt-look :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea):not(.xfa-viewer *) {
  font-size: var(--pt-size-body); min-height: var(--pt-target); padding: 8px 12px; border: 2px solid #565c65;
  border-radius: 4px; background: #fff; color: var(--pt-ink); max-width: 100%; }
.pt-look textarea:not(.xfa-viewer *) { min-height: 96px; }
.pt-look input[type=file]:not(.xfa-viewer *) {
  font-size: 17px; display: block; width: 100%; max-width: 560px; padding: 12px; background: #fff;
  border: 2px dashed #71767a; border-radius: 6px; cursor: pointer; }
.pt-look input[type=file]::file-selector-button {
  font: 700 17px var(--pt-font); margin-right: 14px; padding: 10px 18px; border-radius: 4px; cursor: pointer;
  border: 2px solid var(--pt-primary); background: #fff; color: var(--pt-primary); }
.pt-look :is(input[type=radio], input[type=checkbox]):not(.xfa-viewer *) { width: 22px; height: 22px; margin: 0 10px 0 0; vertical-align: -4px; accent-color: var(--pt-primary); }
/* A choice card: one big clickable row per radio option. */
.pt-look .pt-choice { display: block; padding: 14px 18px 14px 18px; margin: 0 0 12px; background: #fff; border: 2px solid var(--pt-line-soft); border-radius: 6px; cursor: pointer; }
.pt-look .pt-choice:has(input:checked) { border-color: var(--pt-primary); background: #f5f9fd; box-shadow: inset 6px 0 0 var(--pt-primary); }

/* ------------------------------------------------------------ buttons */
.pt-look :is(button, .usa-button, input[type=submit]):not(.xfa-viewer *):not(.pt-plain) {
  font: 700 var(--pt-size-body)/1.2 var(--pt-font); min-height: var(--pt-target); padding: 12px 24px;
  background: var(--pt-primary); color: #fff; border: 2px solid var(--pt-primary); border-radius: 4px; cursor: pointer; }
.pt-look :is(button, .usa-button):not(.xfa-viewer *):not(.pt-plain):hover { background: var(--pt-primary-dark); border-color: var(--pt-primary-dark); }
.pt-look :is(button.secondary, .usa-button--outline, .pt-button--secondary):not(.xfa-viewer *):not(.pt-plain) { background: #fff; color: var(--pt-primary); }
.pt-look :is(button.secondary, .usa-button--outline, .pt-button--secondary):not(.xfa-viewer *):not(.pt-plain):hover { background: var(--pt-primary-light); color: var(--pt-primary-dark); }
.pt-look :is(button, .usa-button):disabled { background: #c9c9c9; border-color: #c9c9c9; color: #454545; cursor: not-allowed; }
.pt-look .pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 32px 0 8px; }

/* ------------------------------------------------------------ LOUD banners
 * One pattern for every tool: a heavy left bar, the loud word as a label,
 * then the plain-English sentence. Colour is never the only signal: the
 * word itself is always written. */
.pt-loud { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; margin: 16px 0;
  border: 1px solid; border-left-width: 10px; border-radius: 4px; font-size: var(--pt-size-body); line-height: 1.5; max-width: 72ch; }
.pt-loud__word { flex: 0 0 auto; font-weight: 800; font-size: 16px; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 3px; color: #fff; white-space: nowrap; }
.pt-loud__text { flex: 1 1 auto; }
.pt-loud__text > :first-child { margin-top: 0; } .pt-loud__text > :last-child { margin-bottom: 0; }
.pt-loud--bad   { background: var(--pt-bad-bg);   border-color: var(--pt-bad);   } .pt-loud--bad   .pt-loud__word { background: var(--pt-bad); }
.pt-loud--check { background: var(--pt-check-bg); border-color: var(--pt-check-line); } .pt-loud--check .pt-loud__word { background: var(--pt-check); }
.pt-loud--not   { background: var(--pt-not-bg);   border-color: var(--pt-not);   } .pt-loud--not   .pt-loud__word { background: var(--pt-not); }
.pt-loud--ok    { background: var(--pt-ok-bg);    border-color: var(--pt-ok);    } .pt-loud--ok    .pt-loud__word { background: var(--pt-ok); }
.pt-loud--info  { background: var(--pt-info-bg);  border-color: var(--pt-info);  } .pt-loud--info  .pt-loud__word { background: var(--pt-info); }

/* ------------------------------------------------------------ tables */
.pt-look table:not(.xfa-viewer *) { border-collapse: collapse; font-size: 17px; }
.pt-look :is(th, td):not(.xfa-viewer *) { padding: 10px 14px !important; border-bottom: 1px solid var(--pt-line-soft); vertical-align: top; text-align: left; }
.pt-look th:not(.xfa-viewer *) { font-weight: 700; background: #f5f6f7; border-bottom: 2px solid var(--pt-line); }

/* ------------------------------------------------------------ home tiles */
.pt-look .pt-tiles { max-width: none; }
.pt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin: 8px 0 0; padding: 0; list-style: none; }
.pt-tile { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 24px; background: #fff; border: 1px solid var(--pt-line-soft);
  border-top: 5px solid var(--pt-primary); border-radius: 4px; color: var(--pt-ink) !important; text-decoration: none; }
.pt-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); border-color: var(--pt-line); border-top-color: var(--pt-primary-dark); }
.pt-tile__name { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--pt-primary); }
.pt-tile:hover .pt-tile__name { text-decoration: underline; }
.pt-tile__desc { font-size: 17px; line-height: 1.5; color: var(--pt-ink-2); }
.pt-tag { display: inline-block; font-size: var(--pt-size-small); font-weight: 700; padding: 1px 8px; border-radius: 3px; background: var(--pt-not-bg); color: var(--pt-ink); vertical-align: 2px; margin-left: 6px; }
.pt-tag--bad { background: var(--pt-bad); color: #fff; }

/* ------------------------------------------------------------ bridge for existing tool markup
 * Converted templates use the classes above. These rules lift what is
 * still unconverted (and what the tools' scripts build at run time), so a
 * page never mixes 13px grey text with the new 18px body. */
.pt-look .subtle { color: var(--pt-ink-2) !important; font-size: var(--pt-size-help) !important; line-height: 1.5; }
.pt-look :is(small, .hint) { font-size: var(--pt-size-small); color: var(--pt-ink-2); }
.pt-look [style*="font-size:0.9em"], .pt-look [style*="font-size: 0.9em"] { font-size: var(--pt-size-help) !important; }
.pt-look [style*="font-size: 90%"] { font-size: var(--pt-size-help) !important; }
.pt-look [style*="font-size: 80%"], .pt-look [style*="font-size:0.85em"],
.pt-look [style*="font-size:12px"], .pt-look [style*="font-size:13px"] { font-size: var(--pt-size-small) !important; }
.pt-look :is(div, p)[style*="border:1px solid"], .pt-look :is(div, p)[style*="border: 1px solid"] { border-radius: 4px; padding: 14px 18px !important; }
.pt-look details > summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.pt-look progress { width: 360px; height: 14px; accent-color: var(--pt-primary); }
.pt-look #progress-label { font-size: var(--pt-size-small); color: var(--pt-ink-2); }
/* The tools' common field pattern: <p><label>..</label><br><span class="subtle">..</span><br><input></p> */
.pt-look form :is(p, div.pt-row):has(> input, > textarea, > select) { margin: 0 0 var(--pt-row-gap); max-width: none; }
.pt-look form p > br { display: none; }
.pt-look form p > label { display: block; font-weight: 700; margin: 0 0 4px; }
.pt-look form p > label > strong { font-weight: 700; }
.pt-look form p > .subtle { display: block; margin: 0 0 10px; max-width: 68ch; }
.pt-look form p > input[type=text] { width: 100%; max-width: 560px; }
.pt-look hr { border: 0; border-top: 1px solid var(--pt-line-soft); margin: 32px 0; }
/* A shown LOUD box stays a row even when a script sets display:block. */
.pt-loud[style*="display: block"], .pt-loud[style*="display:block"] { display: flex !important; }

/* Verdict headings the tools' scripts write (class added, colour kept). */
.pt-look .pt-verdict { font-size: 24px !important; line-height: 1.3; padding: 12px 18px; margin: 0 0 12px !important;
  border-left: 10px solid; border-radius: 4px; }
.pt-verdict--bad   { background: var(--pt-bad-bg);   border-color: var(--pt-bad);   color: var(--pt-bad) !important; }
.pt-verdict--check { background: var(--pt-check-bg); border-color: var(--pt-check-line); color: var(--pt-check) !important; }
.pt-verdict--ok    { background: var(--pt-ok-bg);    border-color: var(--pt-ok);    color: var(--pt-ok) !important; }
.pt-verdict--not   { background: var(--pt-not-bg);   border-color: var(--pt-not);   color: var(--pt-not) !important; }

/* Plain message boxes (errors, hashes) and the email preview. */
.pt-box { padding: 16px 20px; margin: 16px 0; border: 1px solid; border-left-width: 10px; border-radius: 4px; max-width: 72ch; }
.pt-box--bad  { background: var(--pt-bad-bg);  border-color: var(--pt-bad); }
.pt-box--info { background: var(--pt-info-bg); border-color: var(--pt-info); overflow-wrap: anywhere; }
.pt-preview { background: #fff; border: 1px solid var(--pt-line); border-radius: 4px; padding: 20px 24px; }
.pt-meta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0 0 8px; }
.pt-meta dt { font-weight: 700; } .pt-meta dd { margin: 0; }

/* A mode switch: the choices side by side. */
.pt-segmented { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.pt-segmented .pt-choice { margin: 0; font-weight: 600; }

/* Tool result panels the scripts build with a thin grey border. */
.pt-look #results > div[style*="border: 1px solid rgb(204, 204, 204)"], .pt-look #sections > div { background: #fff; border-radius: 6px; padding: 24px 28px !important; }
.pt-look fieldset.pt-panel { border: 1px solid var(--pt-line-soft); }

/* ------------------------------------------------------------ rollout run 1: shared pieces
 * The macros in templates/_pt.html write these classes. */

/* A normal question (a choice the user makes, not an alarm): calm panel,
 * navy bar, the question in bold. Red stays for the LOUD banners. */
.pt-question { background: var(--pt-paper); border: 1px solid var(--pt-line-soft); border-left: 8px solid var(--pt-primary);
  border-radius: 4px; padding: 20px 24px; margin: 20px 0; max-width: 80ch; }
.pt-question__ask { font-size: var(--pt-size-h3); font-weight: 700; line-height: 1.35; color: var(--pt-ink); margin: 0 0 12px; }
.pt-question .pt-choice { margin: 0 0 10px; }
.pt-question .pt-actions { margin-top: 16px; }

/* The entity-status question (templates/_entity_election.html, shared with
 * pages still on the old look, so its inline alarm styling stays in the
 * partial and is only overridden here). Its flag state (a red outline set by
 * static/js/ads_entity_election.js when the question was left unanswered)
 * still shows. */
.pt-look .entity-election { background: var(--pt-paper) !important; border: 1px solid var(--pt-line-soft) !important;
  border-left: 8px solid var(--pt-primary) !important; border-radius: 4px; padding: 20px 24px !important;
  margin: 24px 0 !important; max-width: 80ch !important; }
.pt-look .entity-election-question { display: block; font-size: var(--pt-size-body); line-height: 1.5; margin: 0 0 10px; }
.pt-look .entity-election label { display: inline-flex; align-items: center; padding: 10px 18px; margin: 0 12px 10px 0 !important;
  border: 2px solid var(--pt-line-soft); border-radius: 6px; font-weight: 600; cursor: pointer; background: #fff; }
.pt-look .entity-election label:has(input:checked) { border-color: var(--pt-primary); background: #f5f9fd; }
.pt-look .entity-election-note { font-size: var(--pt-size-help) !important; color: var(--pt-ink-2); }

/* Tables the macros write; wide ones scroll inside their box, never the page. */
.pt-table-wrap { max-width: 100%; overflow-x: auto; margin: 12px 0; }
.pt-look .pt-table { width: 100%; background: var(--pt-paper); }

/* Sections inside a panel, and a section heading row. */
.pt-subpanel { border: 1px solid var(--pt-line-soft); border-radius: 4px; padding: 18px 20px; margin: 20px 0; background: #fafbfc; }
.pt-look .pt-section-title { font-size: var(--pt-size-h3); font-weight: 700; margin: 0 0 8px; }
.pt-look fieldset.pt-fieldset { border: 0; padding: 0; margin: 0 0 var(--pt-row-gap); min-width: 0; }
.pt-look fieldset.pt-fieldset > legend { font-size: var(--pt-size-body); font-weight: 700; padding: 0; margin: 0 0 8px; }
.pt-look .pt-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 20px; }
.pt-look .pt-field-grid .usa-label { font-size: 17px; }
.pt-look .pt-field-grid input { width: 100%; }

/* A status line next to buttons: plain while working, a red box when it
 * reports an error (the script adds pt-status--bad; the words are the tool's). */
.pt-look .pt-status--bad { display: block; flex-basis: 100%; color: var(--pt-bad) !important; font-weight: 700;
  background: var(--pt-bad-bg); border-left: 8px solid var(--pt-bad); border-radius: 4px; padding: 12px 16px; font-size: var(--pt-size-body) !important; }
.pt-look .pt-status--done { color: var(--pt-ok) !important; font-weight: 700; }

/* Boxes a script builds (amber "check this" notes, green results). */
.pt-box--check { background: var(--pt-check-bg); border-color: var(--pt-check-line); }
.pt-box--ok    { background: var(--pt-ok-bg);    border-color: var(--pt-ok); }
.pt-box--not   { background: var(--pt-not-bg);   border-color: var(--pt-not); }
.pt-look .pt-box > b:first-child, .pt-look .pt-box > strong:first-child { display: block; margin: 0 0 4px; }
.pt-box--strong { font-weight: 700; }
.pt-box--bad.pt-box--strong { color: var(--pt-bad); }

/* Monospace readouts (a send log, a hash): never below the 15px floor. */
.pt-look .pt-mono { font-family: var(--pt-mono); font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-look .hash { overflow-wrap: anywhere; word-break: break-all; }

/* Download links that wrap a button: keep the button's look, no underline. */
.pt-look .pt-actions > a { text-decoration: none; }

/* Inside the in-browser version (/app, web/src/js/tool_frame.js adds
 * pt-in-app to the framed page): the shell already shows the name and the
 * tool list, so the page's own header and skip link are not shown again. */
.pt-in-app .pt-header, .pt-in-app .usa-skipnav { display: none; }
.pt-in-app body.pt-look, html.pt-in-app:has(body.pt-look) { background: var(--pt-paper); }
.pt-in-app .pt-main { padding-top: 8px; }

/* Choice cards a script builds (ADS Review & Edit: the sign-or-reuse
 * question, the WIPO relationship). A disabled choice stays readable and
 * says why in its note. */
.pt-look .pt-choice--disabled { cursor: not-allowed; background: #f5f6f7; color: var(--pt-ink-2); border-style: dashed; }
.pt-look .pt-choice__note { margin: -6px 0 14px 20px; max-width: 72ch; }
.pt-look .pt-row--ignored { color: var(--pt-ink-2); background: #f5f6f7; }
.pt-look .pt-codepoint { display: block; font-size: var(--pt-size-small) !important; }
.pt-look .pt-input-wide { width: 100%; max-width: 640px; }
.pt-look .pt-box:empty { display: none; }
.pt-look .pt-section-title { display: block; }
/* The continuity chain: the graph and its detail panel side by side. */
.pt-viz { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.pt-viz > #cy { flex: 1 1 480px; min-width: 0; }
.pt-viz__detail { flex: 1 1 240px; max-width: 320px; background: #fff; border: 1px solid var(--pt-line-soft); border-radius: 4px; padding: 16px 18px; }

/* OA Reporter: the editable draft and the send log. */
.pt-look .pt-gap-top { margin-top: 24px; }
.pt-look textarea.pt-draft { width: 100%; }
.pt-look .pt-attachments li { margin: 0 0 6px; }

/* The shared ADS edit panel (static/js/ads_edit_panel.js, also on ADS from
 * USPTO XML, still old look). On a new-look page: its wide inventor table
 * scrolls inside the panel instead of spilling out; its inputs keep a usable
 * width; its entity question is the calm question box, like the partial's.
 * Its inline styles stay in the script, so old-look pages are unchanged. */
.pt-look :is(#edit-panel-host, #reuse-panel-host) { overflow-x: auto; max-width: 100%; }
.pt-look :is(#edit-panel-host, #reuse-panel-host) input[type=text] { max-width: 100%; min-width: 9ch; }
.pt-look :is(#edit-panel-host, #reuse-panel-host) td input[type=text] { width: 100% !important; min-width: 8ch; padding: 6px 8px; }
.pt-look :is(#edit-panel-host, #reuse-panel-host) td button { min-height: 40px; padding: 6px 12px; }
.pt-look .aep-entity { background: var(--pt-paper) !important; border: 1px solid var(--pt-line-soft) !important;
  border-left: 8px solid var(--pt-primary) !important; border-radius: 4px; padding: 20px 24px !important; max-width: 80ch !important; }
.pt-look .aep-entity-question { color: var(--pt-ink) !important; font-size: var(--pt-size-body) !important; margin: 0 0 10px; }
.pt-look .aep-entity label { display: inline-flex; align-items: center; padding: 10px 18px; margin: 0 12px 10px 0 !important;
  border: 2px solid var(--pt-line-soft); border-radius: 6px; font-weight: 600; cursor: pointer; background: #fff; }
.pt-look .aep-entity label:has(input:checked) { border-color: var(--pt-primary); background: #f5f9fd; }
.pt-look .aep-entity-note { font-size: var(--pt-size-help) !important; color: var(--pt-ink-2); }

/* A panel's first heading sits at the panel's own padding. */
.pt-look .pt-panel > :first-child { margin-top: 0; }

/* Sign-in page. */
.pt-look .pt-login { max-width: 520px; margin: 24px auto; }
.pt-look .pt-login input[type=password] { width: 100%; }

/* ADS Ex Nihilo: each inventor is a card of labelled fields instead of a
 * ten-column table row (the table, its tbody and the inv-* inputs are
 * unchanged, so the page script reads them exactly as before). */
.pt-look #inventors-table, .pt-look #inventors-table tbody { display: block; width: 100%; }
.pt-look #inventors-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pt-look #inventors-table tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px;
  background: var(--pt-paper); border: 1px solid var(--pt-line-soft); border-left: 6px solid var(--pt-primary-light);
  border-radius: 4px; padding: 16px 20px 18px; margin: 0 0 16px; counter-increment: pt-inventor; }
.pt-look #inventors-table tbody { counter-reset: pt-inventor; }
.pt-look #inventors-table tr::before { content: "Inventor " counter(pt-inventor); grid-column: 1 / -1; font-weight: 700; font-size: var(--pt-size-h3); }
.pt-look #inventors-table td { display: block; padding: 0 !important; border: 0; }
.pt-look #inventors-table td input { width: 100% !important; }
.pt-look #inventors-table td.pt-cell-actions { display: flex; align-items: flex-end; }
.pt-look .pt-cell-label { display: block; font-size: 17px; font-weight: 700; margin: 0 0 4px; }

@media (max-width: 640px) {
  .pt-main { padding: 20px 16px 64px; }
  .pt-panel { padding: 20px 16px; }
  .pt-header__tag { display: none; }
  .pt-look h1 { font-size: 30px; }
  .pt-loud { flex-direction: column; gap: 8px; }
}

/* ============================================================ WORKSPACE layer
 * docs/rules/GUI_WORKSPACE.md. Used ONLY by the ADS pages: their templates set
 * {% set ws_layout = true %}, base.html then writes <body class="pt-look pt-ws">.
 * Every rule below starts with .pt-ws, so a page without it (the IDS pages,
 * every other tool) renders exactly as before. The numbers live in the yaml
 * block of the rules file; app/test_gui_workspace.py checks they match these
 * tokens. */
.pt-ws {
  --pt-ws-page-max: 1880px;
  --pt-ws-gutter: 24px;
  --pt-ws-list-text: 15px;
  --pt-ws-cell-pad-y: 4px;
  --pt-ws-cell-pad-x: 8px;
  --pt-ws-panel-pad-y: 16px;
  --pt-ws-panel-pad-x: 20px;
  --pt-ws-block-gap: 12px;
  --pt-ws-sticky-z: 20;
  --pt-ws-bar-h: 76px;
  --pt-ws-field-min: 210px;
  --pt-ws-field-min-long: 300px;
  --pt-ws-card-col-min: 250px;
  --pt-ws-label-col-min: 240px;
  --pt-ws-max-cols: 5;
  --pt-ws-col-gap: 12px;
}
/* A grid that never packs in more than max-cols boxes per row, and never
 * makes a box narrower than the minimum (rows wrap instead). */
.pt-ws {
  --pt-ws-cols-field: repeat(auto-fill, minmax(max(var(--pt-ws-field-min), calc((100% - (var(--pt-ws-max-cols) - 1) * var(--pt-ws-col-gap)) / var(--pt-ws-max-cols))), 1fr));
  --pt-ws-cols-card: repeat(auto-fill, minmax(max(var(--pt-ws-card-col-min), calc((100% - (var(--pt-ws-max-cols) - 1) * var(--pt-ws-col-gap)) / var(--pt-ws-max-cols))), 1fr));
  --pt-ws-cols-label: repeat(auto-fill, minmax(max(var(--pt-ws-label-col-min), calc((100% - (var(--pt-ws-max-cols) - 1) * var(--pt-ws-col-gap)) / var(--pt-ws-max-cols))), 1fr));
}
html:has(body.pt-ws) { scroll-padding-bottom: var(--pt-ws-bar-h); scroll-padding-top: 8px; }

/* Rule 1: the screen's width. */
.pt-ws .pt-header__inner, .pt-ws .pt-main, .pt-ws .pt-footer { max-width: var(--pt-ws-page-max); }
.pt-ws .pt-header__inner { padding: 10px var(--pt-ws-gutter); }
/* The bottom space is the sticky bar's height, so the last thing on a page is never under it. */
.pt-ws .pt-main { padding: 16px var(--pt-ws-gutter) calc(var(--pt-ws-bar-h) + 24px); }
.pt-ws :is(.pt-loud, .pt-box, .pt-question, .entity-election, .aep-entity, .pt-lede) { max-width: none !important; }
.pt-ws :is(div, p, form, section)[style*="max-width"]:not(.pagebox) { max-width: none !important; }
.pt-ws .pt-input-wide { max-width: 100%; }

/* Rule 2: compact. Type sizes and form-row spacing stay as GUI_PLAN.md sets
 * them; blocks, panels and lists get tighter. */
.pt-ws h1 { margin: 0 0 8px; }
.pt-ws h2 { margin: 20px 0 8px; }
.pt-ws :is(h3, h4) { margin: 16px 0 6px; }
.pt-ws .pt-panel { padding: var(--pt-ws-panel-pad-y) var(--pt-ws-panel-pad-x); margin: 0 0 var(--pt-ws-block-gap); }
.pt-ws .pt-subpanel { padding: 12px 16px; margin: var(--pt-ws-block-gap) 0; }
.pt-ws .pt-lede { margin: 0 0 var(--pt-ws-block-gap); }
.pt-ws :is(.pt-loud, .pt-box) { margin: 10px 0; padding: 10px 16px; }
.pt-ws .pt-question { padding: 12px 20px; margin: var(--pt-ws-block-gap) 0; }
.pt-ws .pt-choice { padding: 8px 14px; margin: 0 0 8px; }
.pt-ws hr { margin: 16px 0; }
/* Labels in a row line up: a row of labelled fields shares one label line and
 * the boxes sit on a common bottom edge. */
.pt-ws .pt-field-grid { grid-template-columns: var(--pt-ws-cols-label); gap: 10px var(--pt-ws-col-gap); align-items: end; }
.pt-ws .pt-field-grid > .pt-row { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; min-width: 0; }
/* No box cuts off its text or placeholder: a text box is never narrower than the minimum (rows wrap instead). */
.pt-ws input[type=text]:not(.ov, .xfa-viewer *) { min-width: var(--pt-ws-field-min) !important; box-sizing: border-box; }
.pt-ws.pt-look input[type=text]:is(.parent-manual-serial, .parent-manual-filing-date) { min-width: var(--pt-ws-field-min-long) !important; }
/* "Applicant is..." (and every other .usa-label inside the entity question) is a label, never a choice card. */
.pt-ws :is(.entity-election, .aep-entity) label.usa-label { display: block; padding: 0; margin: 0 0 4px; border: 0; background: none;
  border-radius: 0; font-size: var(--pt-size-body); font-weight: 700; cursor: default; }
/* Help folded behind a summary ("More"). LOUD boxes are never folded. */
.pt-ws details.pt-more { margin: 4px 0 var(--pt-ws-block-gap); }
.pt-ws details.pt-more > summary { font-size: var(--pt-size-small); font-weight: 600; color: var(--pt-primary); min-height: 0; }
.pt-ws details.pt-more[open] { padding: 8px 14px; background: #fafbfc; border: 1px solid var(--pt-line-soft); border-radius: 4px; }
.pt-ws details.pt-more > :is(p, ul) { margin: 6px 0; }
/* Short fields side by side: the upload rows of ADS from USPTO XML. */
.pt-ws :is(#convert-form, #child-form) { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px 24px; align-items: start; }
.pt-ws :is(#convert-form, #child-form) > :is(p, .entity-election, .pt-actions, #parent-rows, button, br) { grid-column: 1 / -1; }
.pt-ws :is(#convert-form, #child-form) > div > label { display: block; font-size: var(--pt-size-small); font-weight: 700; margin: 0 0 4px; }
.pt-ws #mode-toggle { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 var(--pt-ws-block-gap); }
.pt-ws #mode-toggle label { padding: 8px 16px; border: 2px solid var(--pt-line-soft); border-radius: 6px; background: #fff; font-weight: 600; cursor: pointer; }
.pt-ws #mode-toggle label:has(input:checked) { border-color: var(--pt-primary); background: #f5f9fd; }
.pt-ws #mode-toggle + hr { display: none; }

/* Lists and tables: about 15 px text, tight cells, full width. */
.pt-ws table:not(.xfa-viewer *) { font-size: var(--pt-ws-list-text); width: 100%; }
.pt-ws :is(th, td):not(.xfa-viewer *) { padding: var(--pt-ws-cell-pad-y) var(--pt-ws-cell-pad-x) !important; }
.pt-ws :is(ul, ol).subtle { margin: 4px 0; }

/* Rules 3 + 4 (inventors): every inventor is one card of labelled fields, at
 * most max-cols boxes per row, rows wrapping; no horizontal scrollbar. The
 * table, its rows, cells and inputs are unchanged, so the page scripts read
 * them exactly as before. Two tables: the edit panel's (cells carry a
 * data-label the label is printed from) and ADS Ex Nihilo's (its own labels). */
.pt-ws :is(#edit-panel-host, #reuse-panel-host, #child-edit-panel-host) { overflow-x: visible; }
.pt-ws :is(#inventors-table, table:has(.inv-first)), .pt-ws :is(#inventors-table, table:has(.inv-first)) tbody { display: block; width: 100%; }
.pt-ws :is(#inventors-table, table:has(.inv-first)) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pt-ws :is(#inventors-table, table:has(.inv-first)) tr { display: grid; grid-template-columns: var(--pt-ws-cols-card); gap: 8px var(--pt-ws-col-gap);
  align-items: end; background: var(--pt-paper); border: 1px solid var(--pt-line-soft); border-left: 6px solid var(--pt-primary-light);
  border-radius: 4px; padding: 10px 14px 12px; margin: 0 0 8px; }
.pt-ws :is(#inventors-table, table:has(.inv-first)) td { display: block; padding: 0 !important; border: 0; min-width: 0; }
.pt-ws table:has(.inv-first) td[data-label]::before { content: attr(data-label); display: block; font-size: var(--pt-ws-list-text); font-weight: 700; margin: 0 0 2px; }
.pt-ws :is(#inventors-table, table:has(.inv-first)) td input[type=text] { width: 100% !important; box-sizing: border-box; min-height: 40px; padding: 4px 8px; font-size: var(--pt-ws-list-text); }
.pt-ws table:has(.inv-first) td:last-child { white-space: nowrap; }
.pt-ws :is(#inventors-table, table:has(.inv-first)) td button { min-height: 40px !important; padding: 2px 12px !important; font-size: var(--pt-ws-list-text); }
.pt-ws #inventors-table td.pt-cell-actions { display: flex; align-items: flex-end; }
.pt-ws .pt-cell-label { font-size: var(--pt-ws-list-text); margin: 0 0 2px; }

/* Rule 4: the main action stays on screen. The page keeps --pt-ws-bar-h of
 * space under its last line (.pt-main), and a jump or focus scrolls clear of the bar. */
.pt-ws .pt-sticky { position: sticky; bottom: 0; z-index: var(--pt-ws-sticky-z); background: var(--pt-paper);
  margin: var(--pt-ws-block-gap) 0 0; padding: 10px 16px; border: 1px solid var(--pt-line); border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .10); min-height: 0; box-sizing: border-box; }
/* The signing page's jump link, and where the jump lands. */
.pt-ws .pt-goto { margin: 0 0 8px; font-weight: 700; }
.pt-ws .ov-input { scroll-margin: 120px 0 var(--pt-ws-bar-h) 0; }
@media (max-width: 640px) { .pt-ws { --pt-ws-gutter: 16px; } .pt-ws .pt-sticky { padding: 8px 12px; } }