/* Legal Document Quality Machine (ldqm-showcase.html) on the Planit skin.
   Loaded last in <head>, after shell/skin.css. Everything is scoped to
   body.pl-skin.pl-ldqm, markup and script stay as they are.
   The page's own light/dark switch is retired: both data-theme values resolve
   to the same light palette below, and the toggle is hidden.
   !important only where the page sets inline styles or where the competing
   rule in skin.css is itself !important. */

/* 1. Palette: the page's variables, mapped for both themes */
body.pl-skin.pl-ldqm,
[data-theme="light"] body.pl-skin.pl-ldqm,
[data-theme="dark"] body.pl-skin.pl-ldqm {
  --bg-primary: var(--pl-paper);
  --bg-secondary: #fff;
  --bg-card: #fff;
  --bg-elevated: var(--pl-paper-2);
  --text-primary: var(--pl-ink);
  --text-secondary: var(--pl-ink-2);
  --text-muted: var(--pl-ink-2);
  --accent-cyan: var(--pl-navy);
  --accent-purple: var(--pl-navy);
  --accent-green: var(--pl-ok);
  --accent-amber: var(--pl-due);
  --accent-red: var(--pl-bad);
  --border-subtle: var(--pl-line);
  --border-active: var(--pl-navy);
  --glow-cyan: none;
  --glow-purple: none;
  --noise-opacity: 0;
  --ldqm-gutter: clamp(1rem, 4vw, 2rem);
  --ldqm-gap: clamp(2.5rem, 6vw, 4rem);
  --ldqm-rule-on-navy: oklch(0.4 0.04 265);
}

/* 2. Retired: theme toggle, noise texture, header glow, decorative glyphs */
body.pl-skin.pl-ldqm .theme-toggle,
body.pl-skin.pl-ldqm .noise-overlay { display: none; }
body.pl-skin.pl-ldqm .header::before,
body.pl-skin.pl-ldqm .badge::before,
body.pl-skin.pl-ldqm .pass-card::before { content: none; }

/* 3. Frame (breadcrumb and shell footer links, focus ring: handled in skin.css) */
body.pl-skin.pl-ldqm .container {
  max-width: 72rem;
  padding: 0 var(--ldqm-gutter);
}

/* 4. Masthead band (no links or controls inside, so no gold focus or link rules needed) */
body.pl-skin.pl-ldqm .header {
  text-align: left;
  margin: 0 calc(50% - 50vw) var(--ldqm-gap);
  padding: clamp(2.5rem, 7vw, 4.5rem) calc(50vw - 50%) clamp(2.25rem, 5.5vw, 3.75rem);
  background: var(--pl-navy);
  color: var(--pl-on-navy);
  border-bottom: 2px solid var(--pl-gold);
}
body.pl-skin.pl-ldqm .badge {
  display: block;
  margin: 0 0 1rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font: 500 .75rem/1.4 var(--pl-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-gold);
}
body.pl-skin.pl-ldqm .header h1 {
  margin: 0 0 1.25rem;
  font: 600 clamp(2rem, 5.2vw, 3.5rem)/1.08 var(--pl-serif);
  letter-spacing: -.015em;
  color: #fff;
  text-wrap: balance;
}
body.pl-skin.pl-ldqm .tagline {
  max-width: 56ch;
  margin: 0 0 .9rem;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  color: var(--pl-on-navy);
  text-wrap: pretty;
}
body.pl-skin.pl-ldqm .header .credit {
  font: 400 .875rem/1.5 var(--pl-sans);
  color: var(--pl-on-navy-2) !important; /* inline colour on the element */
}

/* 5. Sections: white cards on paper */
body.pl-skin.pl-ldqm .methodology,
body.pl-skin.pl-ldqm .generator-section,
body.pl-skin.pl-ldqm .state-section,
body.pl-skin.pl-ldqm .detail-panel {
  margin: 0 0 var(--ldqm-gap);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  box-shadow: none;
}
body.pl-skin.pl-ldqm .section-title {
  margin-bottom: .5rem;
  font: 600 clamp(1.5rem, 2.6vw, 1.875rem)/1.2 var(--pl-serif);
  letter-spacing: -.01em;
  color: var(--pl-navy);
  text-wrap: balance;
}
body.pl-skin.pl-ldqm .section-subtitle {
  max-width: 68ch;
  margin-bottom: 1.75rem;
  color: var(--pl-ink-2);
  text-wrap: pretty;
}
/* the passes heading sits on the page and is centred inline: align it with the rest */
body.pl-skin.pl-ldqm .container > .section-title,
body.pl-skin.pl-ldqm .container > .section-subtitle { text-align: left !important; }

/* 6. Why eight passes: three columns under a hairline, not cards in a card */
body.pl-skin.pl-ldqm .method-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem 2rem;
  margin-top: 0;
}
@media (min-width: 800px) {
  body.pl-skin.pl-ldqm .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.pl-skin.pl-ldqm .method-card {
  padding: 1rem 0 0;
  background: none;
  border-top: 1px solid var(--pl-line);
  border-radius: 0;
  box-shadow: none;
}
body.pl-skin.pl-ldqm .method-title {
  margin-bottom: .4rem;
  font: 600 1.125rem/1.3 var(--pl-serif);
  color: var(--pl-navy);
}
body.pl-skin.pl-ldqm .method-desc { font-size: .9375rem; color: var(--pl-ink-2); }
/* Copilot workflow note (inline styles): side stripe removed, tinted panel kept */
body.pl-skin.pl-ldqm .methodology > div[style] {
  margin-top: 2rem !important;
  padding: clamp(1.1rem, 3vw, 1.5rem) !important;
  border-left: 0 !important;
  border-radius: var(--pl-radius) !important;
}
body.pl-skin.pl-ldqm .methodology > div[style] h3 { color: var(--pl-navy); }
body.pl-skin.pl-ldqm .methodology > div[style] p:first-of-type { line-height: 1.85; }
body.pl-skin.pl-ldqm .methodology > div[style] strong {
  margin-right: .2em;
  font: 500 .875em/1 var(--pl-mono);
  color: var(--pl-navy);
}

/* 7. The eight passes: a numbered sequence */
body.pl-skin.pl-ldqm .pass-grid { gap: .75rem; margin: 0 0 var(--ldqm-gap); }
body.pl-skin.pl-ldqm .pass-grid:has(+ .detail-panel.visible) { margin-bottom: 1rem; }
body.pl-skin.pl-ldqm .pass-card {
  --pass-color: var(--pl-navy);
  padding: 1.1rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  box-shadow: none;
  transition: border-color .15s var(--pl-ease), background-color .15s var(--pl-ease);
}
body.pl-skin.pl-ldqm .pass-card:hover { transform: none; border-color: var(--pl-navy); box-shadow: none; }
body.pl-skin.pl-ldqm .pass-card.active { background: var(--pl-navy); border-color: var(--pl-navy); }
body.pl-skin.pl-ldqm .pass-number {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .65rem;
  font: 500 .75rem/1.4 var(--pl-mono);
  letter-spacing: .06em;
  color: var(--pl-navy);
}
body.pl-skin.pl-ldqm .pass-number::after { content: ""; flex: 1; height: 1px; background: var(--pl-line); }
body.pl-skin.pl-ldqm .pass-name {
  margin-bottom: .3rem;
  font: 600 1.25rem/1.25 var(--pl-serif);
  color: var(--pl-navy);
}
body.pl-skin.pl-ldqm .pass-question { font-size: .875rem; line-height: 1.5; font-style: normal; color: var(--pl-ink-2); }
body.pl-skin.pl-ldqm .pass-card.active .pass-number { color: var(--pl-gold); }
body.pl-skin.pl-ldqm .pass-card.active .pass-number::after { background: var(--ldqm-rule-on-navy); }
body.pl-skin.pl-ldqm .pass-card.active .pass-name { color: #fff; }
body.pl-skin.pl-ldqm .pass-card.active .pass-question { color: var(--pl-on-navy); }

/* pass detail */
body.pl-skin.pl-ldqm .detail-header { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 1.25rem; }
body.pl-skin.pl-ldqm .detail-title {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: .4rem;
  font: 600 clamp(1.375rem, 2.4vw, 1.625rem)/1.2 var(--pl-serif);
  color: var(--pl-navy);
  text-wrap: balance;
}
body.pl-skin.pl-ldqm .close-btn {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: 999px;
  font: 400 1.375rem/1 var(--pl-sans);
  color: var(--pl-navy);
}
body.pl-skin.pl-ldqm .close-btn:hover { background: var(--pl-paper-2); border-color: var(--pl-navy); color: var(--pl-navy); }
body.pl-skin.pl-ldqm .check-list {
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  gap: 0 2rem;
  margin-bottom: 0;
}
body.pl-skin.pl-ldqm .check-item {
  gap: .65rem;
  padding: .6rem 0;
  background: none;
  border-bottom: 1px solid var(--pl-line);
  border-radius: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--pl-ink);
}
body.pl-skin.pl-ldqm .check-icon { margin-top: 0; font-weight: 600; color: var(--pl-ok); }
/* red flags: a tinted panel, same column grid as the checks above */
body.pl-skin.pl-ldqm .red-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  column-gap: 2rem;
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem .6rem;
  background: var(--pl-paper-2);
  border: 0;
  border-radius: var(--pl-radius);
}
body.pl-skin.pl-ldqm .red-flags-title {
  grid-column: 1 / -1;
  margin-bottom: .5rem;
  font: 600 .8125rem/1.4 var(--pl-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pl-bad);
}
body.pl-skin.pl-ldqm .red-flag-item {
  padding: .55rem 0;
  border-top: 1px solid var(--pl-line);
  border-bottom: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--pl-ink);
}

/* 8. Prompt generator */
body.pl-skin.pl-ldqm .input-group { margin-bottom: 1.25rem; }
body.pl-skin.pl-ldqm .input-row { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 0 1.25rem; }
body.pl-skin.pl-ldqm .input-label {
  margin-bottom: .4rem;
  font: 600 .875rem/1.4 var(--pl-sans);
  color: var(--pl-ink);
}
body.pl-skin.pl-ldqm .input-field,
body.pl-skin.pl-ldqm .select-field {
  min-height: 2.75rem;
  padding: .6rem .85rem;
  font-size: 1rem;
  transition: border-color .15s var(--pl-ease);
}
/* outline colour comes from skin.css (--pl-field); hover darkens it, focus turns it navy */
body.pl-skin.pl-ldqm .input-field:hover,
body.pl-skin.pl-ldqm .select-field:hover { border-color: var(--pl-ink-2) !important; }
body.pl-skin.pl-ldqm .input-field:focus,
body.pl-skin.pl-ldqm .select-field:focus { border-color: var(--pl-navy) !important; }
body.pl-skin.pl-ldqm .pl-hint { margin-top: .4rem; font-size: .8125rem; opacity: 1; color: var(--pl-ink-2); }

/* pass toggles */
body.pl-skin.pl-ldqm .checkbox-group { gap: .5rem; margin-top: .25rem; }
body.pl-skin.pl-ldqm .checkbox-item {
  gap: .55rem;
  min-height: 2.5rem;
  padding: .45rem .95rem .45rem .75rem;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: 999px;
  font: 500 .875rem/1.2 var(--pl-sans);
  color: var(--pl-ink-2);
  transition: border-color .15s var(--pl-ease), color .15s var(--pl-ease);
}
body.pl-skin.pl-ldqm .checkbox-item:hover { transform: none; border-color: var(--pl-navy); }
body.pl-skin.pl-ldqm .checkbox-item.selected { background: #fff; border-color: var(--pl-navy); box-shadow: none; color: var(--pl-navy); }
body.pl-skin.pl-ldqm .check-box {
  width: 1rem;
  height: 1rem;
  background: #fff;
  border: 1.5px solid var(--pl-field);
  border-radius: 3px;
  transition: background-color .15s var(--pl-ease), border-color .15s var(--pl-ease);
}
body.pl-skin.pl-ldqm .check-box::after { font: 700 .6875rem/1 var(--pl-sans); color: #fff; }
body.pl-skin.pl-ldqm .checkbox-item.selected .check-box { background: var(--pl-navy); border-color: var(--pl-navy); }
body.pl-skin.pl-ldqm .pass-selection-summary {
  margin-top: .9rem;
  padding: .6rem .6rem .6rem 1rem;
  background: var(--pl-paper-2);
  border: 0;
  border-radius: var(--pl-radius);
}
body.pl-skin.pl-ldqm .selection-count { font: 400 .875rem/1.4 var(--pl-mono); color: var(--pl-ink-2); }
body.pl-skin.pl-ldqm .selection-count strong { font-size: 1rem; font-weight: 600; color: var(--pl-navy); }
body.pl-skin.pl-ldqm .quick-actions { flex-wrap: wrap; gap: .5rem; }

/* buttons: ghost pills, generate as the one filled pill */
body.pl-skin.pl-ldqm .quick-btn,
body.pl-skin.pl-ldqm .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  margin: 0;
  padding: .55rem 1rem;
  background: #fff;
  border: 1px solid var(--pl-line);
  border-radius: 999px;
  box-shadow: none;
  font: 500 .875rem/1 var(--pl-sans);
  color: var(--pl-navy);
  cursor: pointer;
  transition: border-color .15s var(--pl-ease), background-color .15s var(--pl-ease);
}
body.pl-skin.pl-ldqm .quick-btn:hover,
body.pl-skin.pl-ldqm .copy-btn:hover { background: var(--pl-paper-2); border-color: var(--pl-navy); color: var(--pl-navy); }
body.pl-skin.pl-ldqm .output-header .copy-btn { min-height: 2.75rem; }
body.pl-skin.pl-ldqm .copy-btn.copied { background: #fff; border-color: var(--pl-ok); color: var(--pl-ok); }
body.pl-skin.pl-ldqm .generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 2.75rem;
  margin-top: 1.5rem;
  padding: .7rem 1.6rem;
  background: var(--pl-navy);
  border: 1px solid var(--pl-navy);
  border-radius: 999px;
  box-shadow: none;
  font: 600 .9375rem/1 var(--pl-sans);
  color: #fff;
  transition: background-color .15s var(--pl-ease);
}
body.pl-skin.pl-ldqm .generate-btn:hover { background: var(--pl-navy-2); transform: none; box-shadow: none; }

/* generated prompt */
body.pl-skin.pl-ldqm .output-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--pl-line); }
body.pl-skin.pl-ldqm .output-header { flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
body.pl-skin.pl-ldqm .output-title { margin-right: auto; font: 600 1.25rem/1.3 var(--pl-serif); color: var(--pl-navy); }
body.pl-skin.pl-ldqm .pl-out-actions { margin-left: 0; gap: .5rem; }
body.pl-skin.pl-ldqm .output-content {
  padding: 1.25rem;
  background: var(--pl-paper-2);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  font: 400 .8125rem/1.7 var(--pl-mono);
  color: var(--pl-ink);
  overflow-wrap: anywhere;
}

/* 9. Excel state tracker: four columns under a hairline (inline styles), 4, 2 or 1 across */
body.pl-skin.pl-ldqm .state-section > div[style] {
  grid-template-columns: 1fr !important;
  gap: 1.25rem 2rem !important;
  margin: 0 0 1.75rem !important;
}
@media (min-width: 600px) {
  body.pl-skin.pl-ldqm .state-section > div[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1000px) {
  body.pl-skin.pl-ldqm .state-section > div[style] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
body.pl-skin.pl-ldqm .state-section > div[style] > div {
  padding: .9rem 0 0 !important;
  background: none !important;
  border-top: 1px solid var(--pl-line);
  border-radius: 0 !important;
}
body.pl-skin.pl-ldqm .state-section > div[style] > div > div:first-child {
  font-family: var(--pl-serif);
  font-size: 1.0625rem;
  color: var(--pl-navy);
}
body.pl-skin.pl-ldqm .state-preview {
  max-height: none !important; /* inline cap: show the whole outline */
  padding: 1.25rem;
  background: var(--pl-paper-2);
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-radius);
  font: 400 .8125rem/1.65 var(--pl-mono);
  color: var(--pl-ink);
}
body.pl-skin.pl-ldqm .state-section > p[style] { font-style: normal !important; }

/* 10. Page footer */
body.pl-skin.pl-ldqm .footer {
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--pl-line);
  text-align: left;
  font-size: .875rem;
  color: var(--pl-ink-2);
}
body.pl-skin.pl-ldqm .footer p + p { margin-top: .25rem; }
body.pl-skin.pl-ldqm .footer-brand { font: 600 1rem/1.4 var(--pl-serif); color: var(--pl-navy); }
body.pl-skin.pl-ldqm .footer a { color: var(--pl-navy) !important; } /* inline colour on the links */
body.pl-skin.pl-ldqm .footer a:hover { color: var(--pl-gold-ink) !important; }

/* 11. Small screens */
@media (max-width: 560px) {
  body.pl-skin.pl-ldqm .generate-btn { width: 100%; }
  body.pl-skin.pl-ldqm .output-title { flex-basis: 100%; }
  body.pl-skin.pl-ldqm .pass-selection-summary { padding: .75rem; }
  body.pl-skin.pl-ldqm .quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  body.pl-skin.pl-ldqm .quick-btn { padding-inline: .5rem; }
  /* the outline wraps instead of hiding its line ends behind a sideways scroll */
  body.pl-skin.pl-ldqm .state-preview { font-size: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
}
@media (max-width: 500px) {
  body.pl-skin.pl-ldqm .pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  body.pl-skin.pl-ldqm .pass-card { padding: .85rem .9rem 1rem; }
  body.pl-skin.pl-ldqm .pass-name { font-size: 1.0625rem; }
  body.pl-skin.pl-ldqm .pass-question { font-size: .8125rem; }
}
@media (max-width: 340px) {
  body.pl-skin.pl-ldqm .pass-grid { grid-template-columns: 1fr; }
}

/* 12. Print */
@media print {
  body.pl-skin.pl-ldqm .header {
    margin: 0 0 1.5rem;
    padding: 0 0 1rem;
    background: none;
    border-bottom: 1px solid #000;
  }
  body.pl-skin.pl-ldqm .header h1,
  body.pl-skin.pl-ldqm .tagline,
  body.pl-skin.pl-ldqm .badge { color: #000; }
  body.pl-skin.pl-ldqm .header .credit { color: #000 !important; }
  body.pl-skin.pl-ldqm .pass-card.active { background: #fff; }
  body.pl-skin.pl-ldqm .pass-card.active .pass-number,
  body.pl-skin.pl-ldqm .pass-card.active .pass-name,
  body.pl-skin.pl-ldqm .pass-card.active .pass-question { color: #000; }
  body.pl-skin.pl-ldqm .generate-btn,
  body.pl-skin.pl-ldqm .close-btn,
  body.pl-skin.pl-ldqm .quick-actions { display: none; }
  /* the printed prompt and outline run to their full length */
  body.pl-skin.pl-ldqm .output-content,
  body.pl-skin.pl-ldqm .state-preview { max-height: none !important; overflow: visible; background: #fff; }
  body.pl-skin.pl-ldqm .pass-card,
  body.pl-skin.pl-ldqm .check-item { break-inside: avoid; }
}