/* ────────────────────────────────────────────────────────────────
   Patent Wrapper — pw.noahlot.com

   Wearing NLGS's scheme (leadgeneration.noahlot.com): white ground,
   black type, one grey metal blue that does every job an accent has
   to do. Tints of that blue are still that blue. IBM Plex superfamily
   throughout, hairline rules instead of shadows.

   One colour is added that NLGS has no need for: an alert red, used
   only where the application is reporting a real defect in USPTO's
   continuity data or a failed request. That is information, not
   decoration, and it never appears on a healthy page.
   ──────────────────────────────────────────────────────────────── */

:root {
  --paper: #FFFFFF;
  --paper-deep: rgba(70, 88, 107, .045);
  --card: #FFFFFF;

  --ink: #000000;
  --ink-soft: #2E353C;   /* reading weight, 12.6:1 */
  --muted: #464E57;      /* meta, 8.7:1 */

  --steel: #46586B;                  /* the one colour */
  --steel-deep: #354454;             /* pressed / hover, same hue */
  --steel-05: rgba(70, 88, 107, .045);
  --steel-12: rgba(70, 88, 107, .17);
  --steel-30: rgba(70, 88, 107, .42);

  --rule: rgba(70, 88, 107, .17);
  --rule-strong: rgba(70, 88, 107, .42);

  /* Reserved for defects and failures. Nothing cosmetic uses it. */
  --alert: #8A2B2B;
  --alert-deep: #6B2020;
  --alert-wash: #FBF3F3;

  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

/* Class-level display rules would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  position: relative;
  overflow-x: clip;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  position: relative;
  z-index: 1;
}

main.wrap { padding-bottom: 90px; }

/* ------------------------------------------------------------ masthead */

.masthead { padding: 44px 0 0; }

/* A single hairline, not a printed double rule: the scheme divides with
   one line and lets weight do the rest. */
.rule-double {
  border-top: 1px solid var(--steel-30);
  border-bottom: 0;
  height: 0;
}

.masthead h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(29px, 3.7vw, 43px);
  letter-spacing: -0.016em;
  line-height: 1.17;
  margin: 30px 0 18px;
  text-align: center;
  text-wrap: balance;
}

/* Set beside the wordmark rather than above it, because a pill floating
   over a heading is the one thing every generated page does. */
.beta {
  font-family: var(--mono);
  font-size: .3em;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
  vertical-align: .95em;
  margin-left: .18em;
}

.standfirst {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto 22px;
  text-align: center;
  text-wrap: balance;
}

/* The standing caveat. It sits above the search rather than in the footer
   because it has to be read before a family is trusted, not after. */
.notice {
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.62;
  color: var(--ink-soft);
  background: var(--steel-05);
  border-left: 2px solid var(--steel);
  padding: 13px 16px;
  max-width: 66ch;
  margin: 0 auto 30px;
}

/* ------------------------------------------------------------ search */

.search-block { padding: 48px 0 8px; }

.field {
  display: flex;
  gap: 0;
  border: 1px solid var(--steel-30);
  background: var(--card);
  transition: border-color .25s ease;
}

.field:focus-within { border-color: var(--steel); }

.field input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 19px 22px;
  font-family: var(--mono);
  font-size: 1.18rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 0;
}

.field input:focus { outline: none; }
/* Clearly a prompt rather than a value someone already typed. */
.field input::placeholder { color: var(--muted); opacity: .62; }

.field button {
  border: 0;
  border-left: 1px solid var(--steel);
  background: var(--steel);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 0 30px;
  cursor: pointer;
  transition: background .25s ease;
}

.field button:hover { background: var(--steel-deep); }
.field button:disabled { background: var(--muted); cursor: default; }

.hint {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--muted);
  margin: 14px 2px 0;
  min-height: 1.3em;
}

.hint.error { color: var(--alert); }

/* ------------------------------------------------------------ shared */

.section-label {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--steel-30);
}

.alert {
  background: var(--alert-wash);
  border-top: 1px solid var(--alert);
  border-bottom: 1px solid var(--alert);
  color: var(--alert-deep);
  padding: 13px clamp(20px, 5vw, 56px);
  font-size: .92rem;
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------ candidates */

.candidates { padding-top: 46px; }

.candidate-list { display: grid; gap: 12px; }

.candidate {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  text-align: left;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--steel-12);
  border-left: 3px solid var(--steel-30);
  padding: 17px 20px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-left-color .16s ease, background-color .16s ease, transform .16s ease;
}

.candidate:hover {
  border-left-color: var(--steel);
  background: var(--steel-05);
  transform: translateX(3px);
}

.candidate .num {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.candidate .why {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.candidate .ttl {
  flex-basis: 100%;
  font-family: var(--serif);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ progress */

.progress {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 44px 0 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.06rem;
}

.spinner {
  width: 17px;
  height: 17px;
  border: 2px solid var(--steel-12);
  border-top-color: var(--steel);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ family */

.family { padding-top: 46px; animation: rise .5s ease both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

.family-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  border-bottom: 1px solid var(--steel-30);
  padding-bottom: 18px;
  margin-bottom: 30px;
}

.family-head h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 1.95rem);
  letter-spacing: -.012em;
  line-height: 1.18;
  margin: 0 0 7px;
  text-wrap: balance;
}

.family-meta {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.family-caveat {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--steel);
}

.ghost {
  flex: none;
  background: transparent;
  border: 1px solid var(--steel-30);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 9px 15px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}

.ghost:hover { border-color: var(--steel); color: var(--steel); }

/* ------------------------------------------------------------ number list */

.number-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.85;
  color: var(--ink);
}

.number-list li.is-excluded { opacity: .5; text-decoration: line-through; text-decoration-color: var(--alert); }

/* ------------------------------------------------------------ downloads */

.downloads { margin: 0 0 40px; }

.download-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.download-row .action { display: inline-block; width: auto; }
.download-row .spinner { margin: 0; }

.format-picker {
  display: inline-flex;
  border: 1px solid var(--steel-30);
  overflow: hidden;
}

.format-btn {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--steel-30);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  padding: 9px 10px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.format-btn:first-child { border-left: 0; }
.format-btn:hover { background: var(--steel-05); color: var(--steel); }

.download-status {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  margin: 0;
  min-height: 1.2em;
  font-variant-numeric: tabular-nums;
}

.download-status.error { color: var(--alert); }

/* ------------------------------------------------------------ anomalies */

.anomalies { margin-bottom: 38px; }

.errors-btn {
  display: block;
  width: 100%;
  border: 1px solid var(--alert);
  background: var(--alert-wash);
  color: var(--alert-deep);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 15px 20px;
  cursor: pointer;
  text-align: left;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.errors-btn::before { content: "⚠ "; }

.errors-btn:hover { background: var(--alert); color: #fff; transform: translateX(2px); }

.anomaly-list { list-style: none; margin: 0; padding: 0; }

.anomaly {
  border: 1px solid var(--steel-12);
  border-left: 3px solid var(--steel-30);
  background: var(--card);
  padding: 15px 18px;
  margin-bottom: 10px;
}

.anomaly.defect { border-left-color: var(--alert); }

.anomaly-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.anomaly-tag {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid currentColor;
  color: var(--steel);
  flex: none;
}

.anomaly.defect .anomaly-tag { color: var(--alert); }

.anomaly-msg {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0;
}

.anomaly-evidence {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  margin: 8px 0 0;
  overflow-x: auto;
  white-space: pre-wrap;
}

.excluded-note {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.excluded-note p {
  margin: 0;
  font-family: var(--serif);
  font-size: .96rem;
  color: var(--ink-soft);
  flex: 1 1 320px;
}

.app-row.is-excluded { opacity: .62; }
.app-row.is-excluded .app-num { text-decoration: line-through; text-decoration-color: var(--alert); }

/* ------------------------------------------------------------ error modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(53, 68, 84, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  z-index: 50;
  overflow-y: auto;
}

.modal-panel {
  background: var(--paper);
  border: 1px solid var(--steel-30);
  max-width: 760px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--steel-30);
  flex: none;
}

.modal-head h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  margin: 0;
}

.modal-close {
  border: 1px solid var(--steel-30);
  background: transparent;
  color: var(--ink-soft);
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.modal-close:hover { border-color: var(--steel); color: var(--steel); }

.modal-panel .anomaly-list {
  overflow-y: auto;
  padding: 20px 22px;
}

.plate { margin: 0 0 42px; }

.plate-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.plate-inner {
  border: 1px solid var(--steel-30);
  background: var(--card);
  padding: 22px;
  overflow-x: auto;
}

.plate img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

.plate figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: .89rem;
  color: var(--muted);
  margin-top: 10px;
}

/* ------------------------------------------------------------ app list */

.app-list { display: grid; gap: 0; }

.app-row {
  border-bottom: 1px solid var(--steel-12);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 26px;
  align-items: start;
}

.app-row:first-child { border-top: 1px solid var(--steel-12); }

/* The searched-for application is marked the way a match is marked on
   NLGS: a wash of the accent and more weight, never a second hue. */
.app-row.is-seed { background: var(--steel-05); }
.app-row.is-seed .app-num { font-weight: 600; }

.app-num {
  font-family: var(--mono);
  font-size: 1.04rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tag {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid currentColor;
  color: var(--muted);
}

/* Four states, one hue: filled, accented, plain, alert. */
.tag.seed { background: var(--steel); border-color: var(--steel); color: var(--paper); }
.tag.granted { color: var(--steel); }
.tag.pct { color: var(--muted); }
.tag.warn { color: var(--alert); }

.app-title {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 5px 0 3px;
}

.app-detail {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
}

.app-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 190px;
}

.action {
  background: var(--card);
  border: 1px solid var(--steel-30);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.action:hover { background: var(--steel); border-color: var(--steel); color: var(--paper); }

/* Solid is reserved for the finished download. Starting a build is the expensive,
   several-minute action, so it stays quiet until there is something to collect. */
.action.primary { background: var(--steel); border-color: var(--steel); color: var(--paper); }
.action.primary:hover { background: var(--steel-deep); border-color: var(--steel-deep); }

.action.quiet { border-color: var(--steel-12); color: var(--muted); background: transparent; }
.action.quiet:hover { border-color: var(--steel); color: var(--steel); background: transparent; }

.action.cancel { border-color: var(--steel-12); color: var(--alert); background: transparent; }
.action.cancel:hover { border-color: var(--alert); color: var(--alert); background: transparent; }
.action.cancel:disabled { border-color: var(--steel-12); color: var(--muted); }

.action:disabled { border-color: var(--steel-12); color: var(--muted); background: transparent; cursor: default; }
.action:disabled:hover { background: transparent; color: var(--muted); border-color: var(--steel-12); }

.action-note {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ external */

.external { margin-top: 38px; }
.external ul { margin: 0; padding-left: 18px; color: var(--ink-soft); }
.external li { font-family: var(--mono); font-size: .88rem; margin: 5px 0; }

/* ------------------------------------------------------------ recent */

.recent { padding-top: 62px; }

.recent-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--steel-30);
  margin-bottom: 16px;
}

.recent-head .section-label {
  border-bottom: 0;
  margin: 0;
  padding-bottom: 9px;
}

.recent-head .ghost { margin-bottom: 6px; padding: 6px 12px; }

.recent-list { list-style: none; margin: 0; padding: 0; }

.recent-item {
  border-bottom: 1px solid var(--steel-12);
}

.recent-item button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 17px 4px;
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 20px;
  align-items: baseline;
  transition: padding-left .16s ease, color .16s ease;
}

.recent-item button:hover { padding-left: 12px; color: var(--steel); }

.recent-num {
  font-family: var(--mono);
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
}

.recent-title {
  font-family: var(--serif);
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-count {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------------------------------------ colophon */

.colophon { padding: 0 0 64px; }
.rule-thin { border-top: 1px solid var(--steel-12); margin-bottom: 18px; }

.colophon p {
  font-family: var(--mono);
  font-style: normal;
  font-size: .76rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
  margin: 0;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
  /* The button was stealing enough width to break the title into single words. */
  .family-head { flex-direction: column; align-items: stretch; }
  .family-head .ghost { align-self: flex-start; }
  .field { flex-direction: column; }
  .field button { border-left: 0; border-top: 1px solid var(--steel); padding: 15px; }
  .app-row { grid-template-columns: 1fr; }
  .app-actions { min-width: 0; }
  .recent-item button { grid-template-columns: 1fr; gap: 4px; }
  .recent-title { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .family { opacity: 1; transform: none; }
}