/* =============================================================================
   INSTRUMENT COMPONENTS
   The recurring visual idea: a diagnostic readout. Hairline arcs and bars,
   tick marks at meaningful thresholds, monospaced numerals for anything
   that is literally a measurement — now with the layered depth, glow and
   motion a commercial product needs, used deliberately rather than as
   blanket card-shadow styling.
   ============================================================================= */

/* -------------------------------------------------------------- hero readout (landing page) */
.readout-panel, .panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--ink-raised));
  padding: var(--sp-6);
  position: relative;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
}
.readout-panel::before {
  content: 'CAREER READINESS';
  position: absolute; top: -0.65rem; left: var(--sp-5);
  background: var(--ink); padding: 0 0.5rem;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted);
}
.readout-panel::after, .panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.readout-score {
  display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.readout-score .num {
  font-family: var(--font-display); font-size: 4.4rem; color: #fff; line-height: 1;
  background: linear-gradient(180deg, #fff, #D8DCE6);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.readout-score .of { color: var(--muted); font-size: var(--step-1); }
.readout-row { display: flex; align-items: center; gap: var(--sp-4); padding: 0.6rem 0; }
.readout-row .label { flex: 0 0 6.5rem; font-size: var(--step--1); color: var(--text-dim); }
.readout-row .track { flex: 1; height: 5px; background: var(--line); border-radius: var(--radius-full); position: relative; overflow: hidden; }
.readout-row .fill { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--grad-signal); transition: width 1s var(--ease); }
.readout-row .fill.good { background: linear-gradient(90deg, var(--evidence-dim), var(--evidence)); }
.readout-row .fill.weak { background: linear-gradient(90deg, var(--alert-dim), var(--alert)); }
.readout-row .val { flex: 0 0 2.4rem; text-align: right; font-family: var(--font-mono); font-size: var(--step--1); color: var(--text); }

/* -------------------------------------------------------------- tool tiles */
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-tile {
  background: var(--surface); padding: var(--sp-6); text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; min-height: 15rem;
  position: relative; overflow: hidden;
  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease);
}
.tool-tile::before {
  content: ''; position: absolute; inset: 0; background: var(--grad-card-hover);
  opacity: 0; transition: opacity var(--dur-base) var(--ease); pointer-events: none;
}
.tool-tile:hover { background: var(--surface-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); z-index: 1; }
.tool-tile:hover::before { opacity: 1; }
.tool-tile:hover .tile-cta { color: var(--signal-bright); gap: 0.6rem; }
.tool-tile:hover .tile-cta::after { opacity: 1; transform: translateX(0); }
.tool-tile .tile-mark {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.06em;
}
.tool-tile h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--step-1); }
.tool-tile p { font-size: var(--step--1); flex: 1; margin-bottom: var(--sp-4); }
.tool-tile .tile-cta { font-size: var(--step--1); font-weight: 600; color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.35rem; transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease); position: relative; z-index: 1; }
.tool-tile .tile-cta::after { content: '→'; opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.tool-tile .corner {
  position: absolute; top: var(--sp-5); right: var(--sp-5);
  width: 8px; height: 8px; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong);
  transition: border-color var(--dur-base) var(--ease);
}
.tool-tile:hover .corner { border-color: var(--signal); }

/* -------------------------------------------------------------- report dashboard */
.report-hero {
  display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-7); align-items: center;
  padding: var(--sp-6) 0;
}
@media (max-width: 780px) { .report-hero { grid-template-columns: 1fr; } }

.gauge-wrap { position: relative; width: 200px; height: 200px; filter: drop-shadow(0 0 24px rgba(245,200,75,0.12)); }
.gauge-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-wrap .track { fill: none; stroke: var(--line); stroke-width: 8; }
.gauge-wrap .fill { fill: none; stroke: var(--signal); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge-center .num { font-family: var(--font-display); font-size: 3.1rem; color: #fff; line-height: 1; }
.gauge-center .lbl { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.06em; margin-top: 0.3rem; }

.category-list { display: flex; flex-direction: column; }
.category-row {
  display: grid; grid-template-columns: 11rem 1fr 3rem; align-items: center; gap: var(--sp-4);
  padding: 0.75rem 0; border-bottom: 1px solid var(--line);
}
.category-row:last-child { border-bottom: none; }
.category-row .cat-label { font-size: var(--step--1); color: var(--text-dim); }
.category-row .cat-track { height: 6px; background: var(--line); border-radius: var(--radius-full); position: relative; overflow: hidden; }
.category-row .cat-fill { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--grad-signal); transition: width 1s var(--ease); }
.category-row .cat-fill[data-band="strong"] { background: linear-gradient(90deg, var(--evidence-dim), var(--evidence)); }
.category-row .cat-fill[data-band="weak"] { background: linear-gradient(90deg, var(--alert-dim), var(--alert)); }
.category-row .cat-fill[data-band="mid"] { background: var(--grad-signal); }
.category-row .cat-val { font-family: var(--font-mono); font-size: var(--step--1); text-align: right; color: var(--text); }

.top-actions { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); background: var(--surface); box-shadow: var(--shadow-sm); }
.top-actions ol { margin: 0; padding-left: 1.2rem; }
.top-actions li { margin-bottom: var(--sp-3); color: var(--text); font-size: var(--step-0); }
.top-actions li:last-child { margin-bottom: 0; }
.top-actions li::marker { color: var(--signal); font-family: var(--font-mono); font-weight: 600; }

/* -------------------------------------------------------------- issue log */
.issue-log { display: flex; flex-direction: column; }
.issue {
  border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-md);
  padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.issue:hover { transform: translateX(2px); box-shadow: var(--shadow-sm); }
.issue[data-severity="Critical"], .issue[data-severity="High"] { border-left-color: var(--alert); }
.issue[data-severity="Medium"] { border-left-color: var(--warn); }
.issue[data-severity="Low"], .issue[data-severity="Info"] { border-left-color: var(--line-strong); }

.issue-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.issue-priority { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); }
.issue-sev {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.04em; padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full); border: 1px solid var(--line-strong); color: var(--text-dim); text-transform: uppercase;
}
.issue-sev[data-severity="Critical"], .issue-sev[data-severity="High"] { color: var(--alert); border-color: var(--alert-dim); background: rgba(225,87,63,0.08); }
.issue-sev[data-severity="Medium"] { color: var(--warn); border-color: var(--signal-dim); background: rgba(224,179,71,0.08); }
.issue-title { font-family: var(--font-display); font-size: var(--step-1); color: #fff; margin: 0 0 var(--sp-2); }
.issue-explain { font-size: var(--step--1); margin-bottom: var(--sp-3); }
.issue-fix { font-size: var(--step--1); color: var(--evidence); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.issue-fix strong { color: var(--text); font-weight: 600; }
.issue-example {
  margin-top: var(--sp-3); padding: var(--sp-3); background: var(--ink-raised); border-radius: var(--radius-sm);
  font-size: var(--step--1); color: var(--text-dim); font-style: italic;
}

/* -------------------------------------------------------------- bullet feedback cards */
.bullet-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface); transition: box-shadow var(--dur-fast) var(--ease); }
.bullet-card:hover { box-shadow: var(--shadow-sm); }
.bullet-original { font-size: var(--step-0); color: var(--text); margin-bottom: var(--sp-3); }
.bullet-scores { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.bullet-scores .bs { font-size: 0.7rem; font-family: var(--font-mono); color: var(--muted); }
.bullet-scores .bs b { color: var(--text); }
.bullet-problems { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.bullet-problems li { font-size: var(--step--1); color: var(--alert); padding-left: 1rem; position: relative; margin-bottom: 0.25rem; }
.bullet-problems li::before { content: '—'; position: absolute; left: 0; color: var(--alert-dim); }
.bullet-rewrite { font-size: var(--step--1); color: var(--text-dim); border-top: 1px dashed var(--line); padding-top: var(--sp-3); }

/* -------------------------------------------------------------- repo cards (GitHub report) */
.repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.repo-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-5); background: var(--surface); transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease); }
.repo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.repo-card .repo-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); }
.repo-card .repo-name { font-family: var(--font-mono); font-size: var(--step--1); color: #fff; }
.repo-card .repo-score { font-family: var(--font-display); font-size: var(--step-1); color: var(--signal); }
.repo-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--sp-3); }
.repo-tag { font-size: 0.68rem; font-family: var(--font-mono); padding: 0.18rem 0.45rem; border-radius: var(--radius-full); }
.repo-tag.good { color: var(--evidence); border: 1px solid var(--evidence-dim); background: rgba(70,201,142,0.06); }
.repo-tag.bad { color: var(--alert); border: 1px solid var(--alert-dim); background: rgba(225,87,63,0.06); }
.repo-fix { font-size: var(--step--1); color: var(--text-dim); }

/* -------------------------------------------------------------- states */
.state-panel { text-align: center; padding: var(--sp-9) var(--sp-5); }
.state-panel .spinner { margin: 0 auto var(--sp-5); width: 32px; height: 32px; border-width: 3px; }
.empty-note { color: var(--muted); font-size: var(--step--1); }

/* -------------------------------------------------------------- stat strip (landing page trust bar) */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--line); }
@media (max-width: 720px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-strip .stat { background: var(--surface); padding: var(--sp-6) var(--sp-5); text-align: center; }
.stat-strip .stat .num { font-family: var(--font-display); font-size: var(--step-3); color: #fff; line-height: 1; display: block; margin-bottom: var(--sp-2); }
.stat-strip .stat .lbl { font-size: var(--step--1); color: var(--text-dim); }

/* -------------------------------------------------------------- step flow (how it works) */
.step-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 820px) { .step-flow { grid-template-columns: 1fr; } }
.step-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); background: var(--surface); position: relative; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.step-card .step-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--signal); letter-spacing: 0.08em; margin-bottom: var(--sp-4); display: block; }
.step-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.step-card p { font-size: var(--step--1); margin: 0; }