/* A quiet analysis desk beside one continuous report. Shared theme tokens only. */
#weakness-page .page-heading { margin-bottom: var(--space-6); }
#weakness-page .weakness-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
#weakness-page :is(.weakness-controls, .weakness-report, .weakness-analysis, .weakness-growth) { min-width: 0; }
#weakness-page :is(p, h3, h4, strong, dt, dd, span) { overflow-wrap: anywhere; }
#weakness-page :is(.muted, .field-hint, .multiline) { line-height: var(--lh-prose); }
#weakness-page .weakness-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The desk has a pen rule, not another enclosing panel. */
#weakness-page .weakness-controls { align-self: start; padding: var(--space-5) 0 0; border-top: 2px solid var(--accent); }
#weakness-page .weakness-controls > h3 { margin: 0 0 var(--space-5); color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; letter-spacing: .12em; }
#weakness-page .weakness-count { margin: 0; }
#weakness-page .weakness-count-visual { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
#weakness-page .weakness-count-label { flex-basis: 100%; color: var(--ink-2); font-size: var(--text-base); }
#weakness-page .weakness-count-number { font: 400 clamp(56px, 6vw, 76px)/1.1 var(--serif); font-variant-numeric: tabular-nums; }
#weakness-page .weakness-count-unit { color: var(--ink-2); font-size: var(--text-base); }
#weakness-page #weakness-readiness { margin: var(--space-4) 0 var(--space-5); }
#weakness-page .weakness-ready { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--growth-line); border-radius: var(--radius-chip); background: var(--growth-soft); color: var(--growth-ink); font-size: var(--text-xs); }
#weakness-page .weakness-progress-label { display: block; margin-top: var(--space-2); color: var(--ink-2); font-size: var(--text-sm); }
#weakness-page .weakness-progress-track { display: block; height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
#weakness-page .weakness-progress-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--weakness-progress, 0)); transform-origin: left; }
#weakness-page .weakness-controls .actions { display: block; margin: 0; }
#weakness-page #weakness-analyze { width: 100%; min-height: 52px; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: var(--lh-ui); }
#weakness-page #weakness-analyze:disabled { opacity: 1; border-color: var(--line); background: var(--paper-2); color: var(--ink-2); }
#weakness-page #weakness-status { margin: var(--space-3) 0 0; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-prose); }
#weakness-page #weakness-status:empty { display: none; }
#weakness-page #weakness-status.error { color: var(--danger); }
#weakness-page .weakness-quota-block { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
#weakness-page #weakness-quota-meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-1); }
#weakness-page .weakness-quota-dot { height: 4px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
#weakness-page .weakness-quota-dot-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--weakness-quota-fill, 0)); transform-origin: left; }
#weakness-page #weakness-quota { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: var(--text-xs); }
#weakness-page .weakness-billing { margin: var(--space-4) 0 0; border-bottom: 1px solid var(--line); }
#weakness-page .weakness-billing summary { padding: var(--space-3) 0; color: var(--ink-2); font-size: var(--text-sm); }
#weakness-page #weakness-cost { margin: 0 0 var(--space-4); font-size: var(--text-xs); }

/* Section headings and generous space establish the report's reading rhythm. */
#weakness-page .weakness-section-heading { margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
#weakness-page .weakness-section-heading h3 { margin: 0; font: 500 var(--text-xl)/var(--lh-heading) var(--serif); }
#weakness-page .weakness-section-heading p { margin: var(--space-2) 0 0; max-width: var(--measure); color: var(--ink-2); }
#weakness-page .weakness-analysis { margin-top: var(--space-8); }
#weakness-page #growth-empty { margin: var(--space-5) 0; }
#weakness-page #growth-community-note { margin: var(--space-4) 0 0; font-size: var(--text-xs); }
#weakness-page .growth-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
#weakness-page .growth-zone { position: relative; display: flex; flex-direction: column; padding: var(--space-5); border-radius: var(--radius-sm); background: var(--surface); }
#weakness-page .growth-zone-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); }
#weakness-page .growth-zone h4 { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin: 0; font-size: var(--text-base); font-weight: 600; }
#weakness-page .growth-zone-dot { flex: 0 0 6px; height: 6px; border-radius: var(--radius-round); background: var(--accent); }
#weakness-page .growth-zone:nth-child(3n + 2) .growth-zone-dot { background: var(--azurite); }
#weakness-page .growth-zone:nth-child(3n) .growth-zone-dot { background: var(--gamboge); }
#weakness-page .growth-headline { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-5) 0 var(--space-4); }
#weakness-page .growth-count-number { font: 400 44px/1 var(--serif); font-variant-numeric: tabular-nums; }
#weakness-page .growth-period { color: var(--ink-2); font-size: var(--text-xs); }
#weakness-page .growth-comparison { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
#weakness-page .growth-comparison-row { display: grid; grid-template-columns: 5em minmax(0, 1fr) max-content; align-items: center; gap: var(--space-2); color: var(--ink-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
#weakness-page .growth-bar-track { display: block; height: 3px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
#weakness-page .growth-bar { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(var(--growth-ratio, 0)); transform-origin: left; }
#weakness-page .growth-comparison-row + .growth-comparison-row .growth-bar { background: var(--ink-2); }
#weakness-page .growth-total { margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--text-xs); line-height: var(--lh-prose); }
#weakness-page .growth-quiet-badge { margin: 0 0 0 auto; padding: var(--space-1); border: 1px solid var(--growth-line); border-radius: var(--radius-badge); background: var(--growth-soft); color: var(--growth-ink); font-size: var(--text-xs); }
#weakness-page .growth-zone-quiet { border-color: var(--growth-line); }
#weakness-page .growth-community { margin: var(--space-3) 0 0; color: var(--ink-2); font-size: var(--text-xs); }

/* The overview carries the conclusion; evidence cards give it room to breathe. */
#weakness-page .weakness-overview { padding: var(--space-6); border-radius: var(--radius); background: var(--paper-2); --fx-panel-color: var(--paper-2); }
#weakness-page .weakness-eyebrow { margin: 0 0 var(--space-4); color: var(--ink-2); font-size: var(--text-xs); }
#weakness-page .weakness-overview h3 { margin: 0 0 var(--space-5); font: 500 clamp(26px, 3vw, 34px)/var(--lh-heading) var(--serif); text-wrap: balance; }
#weakness-page .weakness-summary { max-width: var(--measure); margin: 0; padding-left: var(--space-5); border-left: 3px solid var(--accent); color: var(--ink); font-size: var(--text-lg); line-height: var(--lh-prose); }
#weakness-page .weakness-sample { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
#weakness-page .weakness-stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
#weakness-page .weakness-stat + .weakness-stat { border-left: 1px solid var(--line); padding-left: var(--space-4); }
#weakness-page .weakness-stat-number { order: -1; margin: 0; font: 400 40px/1 var(--serif); font-variant-numeric: tabular-nums; }
#weakness-page .weakness-stat dt { color: var(--ink-2); font-size: var(--text-xs); }
#weakness-page .weakness-range { margin: 0; color: var(--ink-2); font-size: var(--text-xs); }
#weakness-page .weakness-patterns { margin: 0; padding: 0; list-style: none; }
#weakness-page .weakness-pattern { margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-sm); background: var(--surface); }
#weakness-page .weakness-pattern-number { display: block; margin-bottom: var(--space-3); color: var(--accent); font: 400 40px/1 var(--serif); font-variant-numeric: tabular-nums; }
#weakness-page .weakness-pattern-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
#weakness-page .weakness-pattern-heading h3 { flex: 1 1 220px; min-width: 0; margin: 0; font: 500 var(--text-xl)/var(--lh-heading) var(--serif); }
#weakness-page .weakness-confidence { flex-shrink: 0; padding: var(--space-1) var(--space-2); border: 1px solid var(--accent); border-radius: var(--radius-compact); color: var(--accent); background: var(--surface); font: 600 var(--text-sm)/var(--lh-ui) var(--kai); letter-spacing: .06em; }
#weakness-page .weakness-confidence-clear { color: var(--on-accent); background: var(--accent); }
#weakness-page .weakness-pattern > .multiline { margin: var(--space-5) 0; font-size: var(--text-base); line-height: var(--lh-prose); }
#weakness-page .weakness-pattern > h4 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
#weakness-page .weakness-evidence { margin: 0; padding: 0; list-style: none; }
#weakness-page .weakness-evidence li { display: grid; grid-template-columns: 6em minmax(0, 1fr); align-items: start; gap: var(--space-4); margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
#weakness-page .weakness-evidence-zone { justify-self: start; max-width: 100%; padding: var(--space-1) var(--space-2); border-radius: var(--radius-chip); background: var(--paper-2); color: var(--ink-2); font-size: var(--text-xs); }
#weakness-page .weakness-evidence-copy { min-width: 0; font-size: var(--text-base); line-height: var(--lh-prose); }
#weakness-page .weakness-evidence-copy strong { font-weight: 600; }
#weakness-page .weakness-evidence-copy p { margin: var(--space-1) 0 0; color: var(--ink-2); }
#weakness-page .weakness-action { margin-top: var(--space-5); padding: var(--space-5); border-left: 4px solid var(--accent); border-radius: var(--radius-flat) var(--radius-sm) var(--radius-sm) var(--radius-flat); background: var(--soft); }
#weakness-page .weakness-action h4 { margin: 0 0 var(--space-2); color: var(--accent-hover); font-size: var(--text-sm); }
#weakness-page .weakness-action p { margin: 0; max-width: var(--measure); font: 400 var(--text-lg)/var(--lh-prose) var(--kai); }
#weakness-page #weakness-result > .muted { margin: var(--space-5) 0 0; max-width: var(--measure); font-size: var(--text-xs); }

/* An unboxed empty report, with a small CSS seal rather than an illustration. */
#weakness-page .weakness-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; padding: var(--space-8) var(--space-5); text-align: center; }
#weakness-page .weakness-empty-mark { position: relative; width: 44px; height: 44px; margin-bottom: var(--space-5); border: 2px solid var(--accent); border-radius: var(--radius-xs); background: var(--soft); transform: rotate(-8deg); }
#weakness-page .weakness-empty-mark::before, #weakness-page .weakness-empty-mark::after { content: ""; position: absolute; inset: 10px; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }
#weakness-page .weakness-empty-mark::after { transform: rotate(90deg); }
#weakness-page .weakness-empty h3 { margin: 0; font: 500 var(--text-xl)/var(--lh-heading) var(--serif); }
#weakness-page .weakness-empty p { max-width: 30em; margin: var(--space-4) 0 0; }

@media (min-width: 1024px) {
  #weakness-page .weakness-layout { grid-template-columns: 336px minmax(0, 1fr); gap: var(--space-8); }
}
@media (min-width: 1024px) and (min-height: 640px) {
  #weakness-page .weakness-controls { position: sticky; top: var(--space-4); }
}
@media (min-width: 1024px) and (max-width: 1150px) {
  #weakness-page .weakness-layout { grid-template-columns: 320px minmax(0, 1fr); gap: var(--space-7); }
}
@media (max-width: 600px) {
  #weakness-page .weakness-layout { padding: var(--space-4); }
}
@media (max-width: 599px) {
  #weakness-page .growth-zones { grid-template-columns: minmax(0, 1fr); }
  #weakness-page :is(.weakness-overview, .weakness-pattern) { padding: var(--space-5) var(--space-4); }
  #weakness-page .weakness-summary { padding-left: var(--space-4); }
  #weakness-page .weakness-stat-number { font-size: var(--text-3xl); }
  #weakness-page .weakness-sample { gap: var(--space-2); }
  #weakness-page .weakness-stat + .weakness-stat { padding-left: var(--space-2); }
  #weakness-page .weakness-evidence li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  #weakness-page .weakness-action { padding: var(--space-4); }
}

/* Opaque defaults above; reuse the existing ripple panel behavior and fine-pointer blur. */
@supports (color: color-mix(in srgb, white 50%, transparent)) {
  html[data-cursor-fx="ripple"] #weakness-page .weakness-layout {
    background: color-mix(in srgb, var(--paper) var(--fx-panel-opacity), transparent);
  }
  html[data-cursor-fx="ripple"] #weakness-page :is(.growth-zone, .weakness-overview, .weakness-pattern) {
    background: color-mix(in srgb, var(--fx-panel-color, var(--surface)) var(--fx-panel-opacity), transparent);
  }
  @media (hover: hover) and (pointer: fine) {
    html[data-cursor-fx="ripple"] #weakness-page .weakness-layout {
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
  }
}

/* Qixi uses the shared, lighter glass token for readable ink over any scene.
   Keep the paper overflow visible: its grid content box bounds the sticky desk. */
html[data-theme="qixi"] #weakness-page .weakness-layout { background: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  @supports (backdrop-filter: blur(12px)) {
    html[data-theme="qixi"] #weakness-page .weakness-layout {
      background: var(--glass-surface);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }
}

/* Only compositor properties animate, once per render. */
@media (prefers-reduced-motion: no-preference) {
  #weakness-page .weakness-reveal { animation: weakness-report-enter 220ms var(--motion-ease) both; animation-delay: calc(var(--weakness-order, 0) * 40ms); }
  #weakness-page .growth-bar { animation: weakness-bar-enter 200ms var(--motion-ease) both; }
  @keyframes weakness-report-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes weakness-bar-enter { from { transform: scaleX(0); } to { transform: scaleX(var(--growth-ratio, 0)); } }
}