:root{
  --paper:#f4efe3;
  --paper2:#efe6d6;
  --ink:#1f1a16;
  --muted:#5f534b;
  --accent:#2f6a58;
  --accent2:#b08a4a;
  --line: rgba(31,26,22,.22);
  --shadow: 0 16px 40px rgba(0,0,0,.12);
  --radius: 18px;
  --max: 1120px;

  /* PPG 8-band color tokens (used by 8D bigline + 8E reference table) */
  --ppg-pristine:  #2f6a58;
  --ppg-excellent: #5a8d7a;
  --ppg-verygood:  #82a26d;
  --ppg-good:      #b8a850;
  --ppg-fair:      #c9a14a;
  --ppg-worn:      #a87844;
  --ppg-poor:      #84543a;
  --ppg-damaged:   #8b3a32;
}

*{box-sizing:border-box}

/* =========================================================
   BACKGROUND
   ========================================================= */
html body.page-grade-postcard,
body.page-grade-postcard,
.page-grade-postcard{
  margin:0 !important;
  color:var(--ink);
  background: url("../images/hero-artnouveau-bg.png") center 60px / cover no-repeat fixed #f4efe3 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.55;
  min-height: 100vh;
}
@media (max-width: 768px){
  html body.page-grade-postcard,
  body.page-grade-postcard,
  .page-grade-postcard{
    background-attachment: scroll !important;
  }
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 18px 64px;
}

/* =========================================================
   GYP LOGO BADGE
   ========================================================= */
.gyp-logo-badge{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(47,106,88,.25);
}
.gyp-logo-text{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (max-width: 600px){
  .gyp-logo-badge{ display: none; }
}

/* =========================================================
   GRADER PANEL — DYP-parallel transparency + layered shadow
   ========================================================= */
.grader{
  margin-top: 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 20px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .60),
    0 6px 12px rgba(0, 0, 0, .09),
    0 20px 40px rgba(0, 0, 0, .14),
    0 48px 80px rgba(0, 0, 0, .11),
    0 80px 100px rgba(0, 0, 0, .06);
  transform: translateY(-10px);
  position: relative;
}

.gradeHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gradeHead h2{ margin: 0; font-size: 24px; letter-spacing: .04em; }
.gradeHead p{ margin: 6px 0 0; color: var(--muted); max-width: 78ch; font-size: 14px; }

/* Tagline second clause hides on narrow viewports — keeps the C-BEAMS
   intro short on phones. */
@media (max-width: 600px){
  .gyp-subtitle-extra{ display: none; }
}

/* =========================================================
   FORM GRID — DYP-style 12-column layout
   ========================================================= */
.formGrid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  /* Without this, a closed card stretches to match its open row-mate
     (grid default). align-items:start keeps each item at its natural
     height. */
  align-items: start;
}
@media (max-width: 860px){
  .formGrid{ gap: 8px; }
}

.field{
  grid-column: span 6;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  transition: border-color .15s, background .15s;
}
.field.full{ grid-column: span 12; }
.field.has-value{
  border-color: rgba(47, 106, 88, .38);
}

@media (max-width: 860px){
  .field{ grid-column: span 12; }
}

/* Form labels + inputs (DYP port) */
.field label,
.formGrid label[for]{
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 3px;
  text-transform: uppercase;
  font-weight: 600;
}
select,
input[type="text"],
input[type="number"]{
  width: 100%;
  height: 32px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(31, 26, 22, .22);
  background: rgba(244, 239, 227, .7);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
select:hover,
input[type="text"]:hover,
input[type="number"]:hover{
  border-color: rgba(47, 106, 88, .45);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 2px 8px rgba(47, 106, 88, .08);
}
select:focus,
input[type="text"]:focus,
input[type="number"]:focus{
  border-color: rgba(47, 106, 88, .55);
  box-shadow: 0 0 0 4px rgba(47, 106, 88, .12);
}
select.has-value,
input.has-value{
  background: rgba(47, 106, 88, .13);
  border-color: rgba(47, 106, 88, .50);
  color: var(--ink);
  font-weight: 500;
}

/* =========================================================
   AXIS CARDS — collapsible, lives inside .formGrid
   ========================================================= */
.axis-card{
  grid-column: span 6;
  min-height: 0;
  padding: 0 !important;        /* override the global section padding so closed cards stay button-height */
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  overflow: hidden;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
@media (max-width: 860px){
  .axis-card{ grid-column: span 12; }
}

.axis-card.has-value{
  /* Color only — never adds size so closed cards stay button-height. */
  border-color: rgba(47, 106, 88, .38);
  background: rgba(47, 106, 88, .05);
}

/* Closed body must contribute zero box. The hidden attribute is the
   single source of truth (toggle handlers add/remove it). */
.axis-card-body[hidden]{ display: none !important; }

/* Card back layout — borrows the axis-card frame but renders as a
   single horizontal row (no toggle button). Sits in row 1 next to the
   first real axis card (Corners) thanks to its span:6. */
.cardera-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  width: 100%;
}
.cardera-letter{
  font-size: 13px;
}
.axis-card-cardera .axis-name{
  flex-grow: 0;
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
}
.cardera-select{
  flex-grow: 1;
  height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(31, 26, 22, .22);
  background: rgba(244, 239, 227, .7);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cardera-select:hover{
  border-color: rgba(47, 106, 88, .45);
  background: rgba(255, 255, 255, .85);
}
.cardera-select:focus{
  border-color: rgba(47, 106, 88, .55);
  box-shadow: 0 0 0 3px rgba(47, 106, 88, .12);
}
.cardera-select.has-value{
  background: rgba(47, 106, 88, .13);
  border-color: rgba(47, 106, 88, .50);
  font-weight: 500;
}

/* Aux cards (Value Markers, Special conditions) span the full row
   so the long checkbox lists have room to breathe. */
.axis-card-aux{
  grid-column: span 12;
}

.axis-card-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--ink);
  text-align: left;
  transition: background .15s;
}
.axis-card-toggle:hover{
  background: rgba(31, 26, 22, .04);
}

.axis-letter{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.axis-letter sub{
  font-size: 0.7em;
  vertical-align: baseline;
  position: relative;
  bottom: -0.2em;
  margin-left: 1px;
}

.axis-name{
  font-weight: 600;
  flex-grow: 1;
}

.axis-status{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
}
.axis-status:not(:empty)::before{
  content: '✓';
  color: var(--accent);
  margin-right: 4px;
  font-weight: 700;
}

.axis-chevron{
  font-size: 10px;
  color: var(--muted);
  transition: transform .2s;
}
.axis-card-toggle[aria-expanded="false"] .axis-chevron{
  transform: rotate(-90deg);
}

.axis-card-body{
  padding: 10px 14px 14px;
  border-top: 1px solid var(--line);
}

/* Body axis hint (era warning, etc.) */
.axis-hint{
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.45;
}

/* =========================================================
   AXIS VIEWS — slider mode / summary mode (Phase 8C)
   Pattern mirrors DYP's .stage-view: only one axis-view is
   visible at a time; the [hidden] attribute drives the swap.
   ========================================================= */
.axis-view[hidden]{ display: none !important; }

/* Context line at the top of slider mode — shows the active
   sub-axis's level description as the user interacts. */
.axis-level-context{
  font-size: 12.5px;
  color: var(--ink);
  margin: 0 0 12px;
  min-height: 1.4em;
  line-height: 1.4;
  letter-spacing: .005em;
}
.axis-level-context:empty{ display: none; }
.axis-level-context.is-default{
  color: var(--muted);
  font-style: italic;
}

/* Summary mode list — only L>0 sub-axes appear here. */
.summary-list{
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-item{
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
.summary-item::before{
  content: '•';
  color: var(--accent);
  font-weight: 700;
  position: absolute;
  left: 2px;
  top: 0;
}

.axis-edit-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  margin: 4px 0 0;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.axis-edit-btn:hover{ color: #1f4f43; }
.axis-edit-btn::before{
  content: '✎';
  margin-right: 2px;
  font-size: 11px;
}

/* =========================================================
   SUB-SLIDER ROWS (label + slider)
   ========================================================= */
.sub-slider-row{
  margin-bottom: 14px;
}
.sub-slider-row:last-child{
  margin-bottom: 0;
}
.sub-slider-label{
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}

/* Defect grid inside Sf / Sb cards — 2 columns desktop, 1 mobile */
.defect-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
@media (max-width: 600px){
  .defect-grid{ grid-template-columns: 1fr; }
}

/* B sub-axes (creasing / tears / missing / pinholes) — 2 col desktop,
   1 col mobile. Missing-types fieldset reveals beneath in full width. */
.b-sub-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
@media (max-width: 600px){
  .b-sub-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   LEVEL SLIDER — dot/circle visual system
   5 ticks (L0-L4). Active level fills a dot; severity colors
   kick in at L3 (gold) and L4 (red).
   ========================================================= */
.slider-wrap{
  position: relative;
  height: 32px;
  margin: 4px 0 8px;
}

.slider-track-bg{
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 2px;
  background: rgba(31, 26, 22, .15);
  border-radius: 999px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Tick container: above the input so individual ticks can
   receive clicks. The container itself is pointer-transparent
   so click-through to the input still works on the long track. */
.slider-ticks{
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 14px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 3;
}

.slider-tick{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid rgba(31, 26, 22, .35);
  box-sizing: border-box;
  transition: background .15s, border-color .15s, transform .12s;
  pointer-events: auto;
  cursor: pointer;
}
.slider-tick:hover{
  border-color: var(--accent);
  transform: scale(1.15);
}

/* Filled (active) tick — set by JS via [data-current-level] on .slider-wrap.
   L0 leaves every dot empty so "no defect" reads as a clean baseline. */
.slider-wrap[data-current-level="1"] .slider-tick[data-tick="1"],
.slider-wrap[data-current-level="2"] .slider-tick[data-tick="2"]{
  background: var(--accent);
  border-color: var(--accent);
}
.slider-wrap[data-current-level="3"] .slider-tick[data-tick="3"]{
  background: var(--accent2);
  border-color: var(--accent2);
}
.slider-wrap[data-current-level="4"] .slider-tick[data-tick="4"]{
  background: #b04a3a;
  border-color: #b04a3a;
}

/* Native range input — sits ABOVE ticks so the thumb is grabbable.
   Track is invisible; tick container handles its own clicks via
   pointer-events on the .slider-tick children. */
.level-slider{
  position: absolute;
  /* Vertically centred at thumb height so the 18px thumb lines up with
     the tick row instead of sitting at the wrap's baseline. Inset 8px
     horizontally to share the tick container's value→x mapping. */
  top: 50%;
  left: 8px;
  right: 8px;
  width: auto;
  height: 18px;
  margin: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  outline: none;
  pointer-events: auto;
}
.level-slider::-webkit-slider-runnable-track{
  background: transparent;
  height: 18px;
  border: none;
}
.level-slider::-moz-range-track{
  background: transparent;
  height: 18px;
  border: none;
}
.level-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper, #f7f4ef);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .25),
    0 0 0 1px rgba(31, 26, 22, .12);
  cursor: grab;
  transition: background .12s, border-color .12s, transform .12s, box-shadow .12s;
}
.level-slider:hover::-webkit-slider-thumb{
  transform: scale(1.15);
}
.level-slider:active::-webkit-slider-thumb{
  cursor: grabbing;
  transform: scale(1.25);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .3),
    0 0 0 4px rgba(47, 106, 88, .25);
}
.level-slider::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper, #f7f4ef);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  cursor: grab;
  transition: background .12s, border-color .12s;
}
.level-slider:active::-moz-range-thumb{
  cursor: grabbing;
}

/* Thumb severity colors — match the tick fill scheme so the thumb
   never disagrees with the underlying tick under it. L1/L2 stay on
   the accent green from the base rule above; L0/L3/L4 override. */
/* L0 thumb — opaque white over the bej page. var(--paper) blended
   with the background and made the handle invisible; the hard-white
   fill + stronger border + outer ring give the user a grabbable
   target. */
.slider-wrap[data-current-level="0"] .level-slider::-webkit-slider-thumb{
  background: #ffffff;
  border: 2px solid rgba(31, 26, 22, .55);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .18),
    0 0 0 1px rgba(255, 255, 255, .8);
}
.slider-wrap[data-current-level="0"] .level-slider::-moz-range-thumb{
  background: #ffffff;
  border: 2px solid rgba(31, 26, 22, .55);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, .18),
    0 0 0 1px rgba(255, 255, 255, .8);
}
.slider-wrap[data-current-level="3"] .level-slider::-webkit-slider-thumb{
  background: var(--accent2);
  border-color: var(--accent2);
}
.slider-wrap[data-current-level="3"] .level-slider::-moz-range-thumb{
  background: var(--accent2);
  border-color: var(--accent2);
}
.slider-wrap[data-current-level="4"] .level-slider::-webkit-slider-thumb{
  background: #b04a3a;
  border-color: #b04a3a;
}
.slider-wrap[data-current-level="4"] .level-slider::-moz-range-thumb{
  background: #b04a3a;
  border-color: #b04a3a;
}
.slider-wrap:focus-within{
  outline: 2px solid rgba(47, 106, 88, .35);
  outline-offset: 4px;
  border-radius: 4px;
}

.b-subtype-indicator{
  font-size: 11px;
  color: var(--accent2);
  margin: 8px 0 0;
  padding: 4px 8px;
  background: rgba(176, 138, 74, .1);
  border-radius: 6px;
}

/* =========================================================
   CHECKBOX LISTS — Value Markers + Special conditions +
   Body's "what's missing" multi-select
   ========================================================= */
.value-markers-list,
.qualifiers-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkbox-option{
  display: block;
}
.checkbox-option > label{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: inherit;
  color: var(--ink);
  letter-spacing: 0;
  font-weight: normal;
  text-transform: none;
  margin-bottom: 0;
  transition: background .12s;
}
.checkbox-option > label:hover{
  background: rgba(31, 26, 22, .04);
}
.checkbox-option input[type="checkbox"]{
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  grid-row: span 2;
}
.vm-label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.vm-desc{
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
  grid-column: 2;
}
.checkbox-hint{
  display: inline-block;
  font-size: 10.5px;
  color: var(--accent2);
  margin-left: 6px;
  font-style: italic;
}

.missing-types-fieldset{
  list-style: none;
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(31, 26, 22, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* `display: flex` above beats the browser's [hidden] {display:none} —
   so the toggle's setAttribute('hidden') was a no-op until this rule. */
.missing-types-fieldset[hidden]{ display: none !important; }
.missing-types-fieldset legend{
  font-size: 11.5px;
  color: var(--muted);
  padding: 0 4px;
  text-transform: none;
  letter-spacing: 0;
}
.missing-types-fieldset legend small{
  margin-left: 4px;
  font-size: 10px;
}
.missing-types-fieldset .checkbox-option > label{
  grid-template-columns: auto 1fr;
  padding: 4px 6px;
}

/* =========================================================
   ACTIONS + BUTTONS (DYP port)
   ========================================================= */
.actions{
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.btn{
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 14px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: .04em;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover{
  background: rgba(255, 255, 255, .85);
  border-color: rgba(47, 106, 88, .45);
}
.btn.primary{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn.primary:hover{
  background: #245849;
  border-color: #245849;
  box-shadow: 0 4px 12px rgba(47, 106, 88, .25);
}

/* =========================================================
   RESULT — auto-shown after Grade, hidden again on form change.
   ========================================================= */
.result{
  margin-top: 22px;
  padding: 22px 22px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .55),
    0 8px 18px rgba(0, 0, 0, .08),
    0 24px 50px rgba(0, 0, 0, .10);
  position: relative;
  /* Auto-scroll on Grade lands below the sticky site header. */
  scroll-margin-top: 80px;
}
.result[hidden]{ display: none !important; }
@media (max-width: 600px){
  .result{ scroll-margin-top: 60px; }
}

.result-block{
  position: relative;
  padding: 14px 0;
  border-top: 1px solid rgba(31, 26, 22, .10);
}
.result-block:first-child{
  border-top: none;
  padding-top: 0;
}
.result-block-heading{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 600;
}

/* PPG block reserves space on the right for the floating thermometer */
.result-block-ppg{
  padding-right: 96px;
  min-height: 100px;
}
@media (max-width: 600px){
  .result-block-ppg{ padding-right: 64px; }
}

/* =========================================================
   BIGLINE — PPG <score> [+TR …] [★★★★☆]
   ========================================================= */
.bigline-row{
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bigline{
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.1;
  flex-wrap: wrap;
}
.bigline-label{
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bigline-score{
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  /* Colored by .ppg-band-* class added to .bigline element by JS */
}

/* Optional band-coloring for the score number — applied via .bigline class.
   PHASE-8-DECISIONS §4.3 says the bigline should stay neutral; brief
   keeps the band color on the score only as a candidate for visual
   review. Comment this block out if Uğur prefers a fully neutral PPG. */
.bigline.ppg-band-pristine  .bigline-score{ color: var(--ppg-pristine); }
.bigline.ppg-band-excellent .bigline-score{ color: var(--ppg-excellent); }
.bigline.ppg-band-verygood  .bigline-score{ color: var(--ppg-verygood); }
.bigline.ppg-band-good      .bigline-score{ color: var(--ppg-good); }
.bigline.ppg-band-fair      .bigline-score{ color: var(--ppg-fair); }
.bigline.ppg-band-worn      .bigline-score{ color: var(--ppg-worn); }
.bigline.ppg-band-poor      .bigline-score{ color: var(--ppg-poor); }
.bigline.ppg-band-damaged   .bigline-score{ color: var(--ppg-damaged); }

.bigline-qualifiers{
  font-size: 18px;
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: .03em;
}
.bigline-qualifiers:empty{ display: none; }

.bigline-stars{
  font-size: 22px;
  color: var(--accent2);
  letter-spacing: .04em;
}
.bigline-stars:empty{ display: none; }

/* =========================================================
   PPG PROFILE — C-BEAMS axes with subscript levels.
   Format: bold "C₀ B₁ E₀ A₀ M₁ S₀". L=0 axes dim to muted so
   non-zero axes pop visually.
   ========================================================= */
.ppg-profile{
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .03em;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.ppg-profile:empty{ display: none; }

.ppg-axis{
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  letter-spacing: 0;
}
.ppg-axis sub{
  font-size: 0.75em;
  font-weight: 700;
  vertical-align: sub;
  margin-left: 1px;
  color: inherit;
}
.ppg-axis.is-zero{ color: var(--muted); }

/* =========================================================
   THERMOMETER — bar + arrow + emoji, top-right of PPG block.
   ========================================================= */
.thermometer{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 70px;
  height: 90px;
  display: flex;
  align-items: stretch;
  gap: 6px;
}
@media (max-width: 600px){
  .thermometer{
    transform: scale(0.85);
    transform-origin: top right;
    top: 8px;
    right: 8px;
  }
}

.thermometer-bar{
  position: relative;
  width: 12px;
  border-radius: 6px;
  background: linear-gradient(
    to bottom,
    var(--ppg-pristine)  0%,
    var(--ppg-pristine)  12%,
    var(--ppg-excellent) 12%,
    var(--ppg-excellent) 25%,
    var(--ppg-verygood)  25%,
    var(--ppg-verygood)  37%,
    var(--ppg-good)      37%,
    var(--ppg-good)      50%,
    var(--ppg-fair)      50%,
    var(--ppg-fair)      62%,
    var(--ppg-worn)      62%,
    var(--ppg-worn)      75%,
    var(--ppg-poor)      75%,
    var(--ppg-poor)      87%,
    var(--ppg-damaged)   87%,
    var(--ppg-damaged)   100%
  );
  box-shadow:
    inset 0 0 2px rgba(0, 0, 0, .25),
    0 1px 2px rgba(0, 0, 0, .1);
  flex-shrink: 0;
}

.thermometer-arrow{
  position: absolute;
  right: -3px;
  transform: translate(100%, -50%);
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  transition: top .35s ease;
  pointer-events: none;
  top: 50%;
}

.thermometer-emoji{
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .85);
}
@media (max-width: 600px){
  .thermometer-emoji{ font-size: 28px; }
}

/* =========================================================
   SYSTEM BLOCKS — Mashburn, État.
   Single-line band name per PHASE-8-DECISIONS §4.3 (no letter,
   no description; "(altered)" suffix is part of the band string).
   ========================================================= */
.system-band{
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  letter-spacing: .01em;
}

.system-cap-note{
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: 6px 0 0;
}
.system-cap-note:empty{ display: none; }

/* =========================================================
   GRADE WARNINGS — card era, back not assessed
   ========================================================= */
.card-era-warning,
.grade-warning{
  font-size: 12px;
  color: var(--ink);
  background: rgba(176, 138, 74, .12);
  border-left: 3px solid var(--accent2);
  padding: 8px 12px;
  margin: 12px 0 0;
  border-radius: 0 6px 6px 0;
  line-height: 1.45;
}
.card-era-warning strong,
.grade-warning strong{
  display: block;
  margin-bottom: 2px;
  color: var(--accent2);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.card-era-warning span,
.grade-warning span{ display: block; }

/* =========================================================
   RESULT ACCORDIONS — All axes breakdown, Value Markers.
   Native <details>/<summary>, styled to match.
   ========================================================= */
.result-accordion{
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  overflow: hidden;
}
.result-accordion[hidden]{ display: none !important; }

.result-accordion summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
  list-style: none;
}
.result-accordion summary::-webkit-details-marker{ display: none; }
.result-accordion summary::marker{ content: ''; }
.result-accordion summary:hover{ background: rgba(31, 26, 22, .04); }

.result-accordion-chevron{
  font-size: 11px;
  color: var(--muted);
  transition: transform .2s;
}
.result-accordion[open] .result-accordion-chevron{ transform: rotate(0deg); }
.result-accordion:not([open]) .result-accordion-chevron{ transform: rotate(-90deg); }

.result-accordion[open] > summary{
  border-bottom: 1px solid var(--line);
}

.axes-breakdown-list,
.value-markers-result-list{
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.axes-breakdown-list li{
  display: grid;
  grid-template-columns: auto 28px 1fr;
  gap: 8px 12px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.4;
}
.axes-breakdown-list .ax-letter{
  font-weight: 700;
  color: var(--accent);
  font-family: 'Courier New', monospace;
}
.axes-breakdown-list .ax-level{
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.axes-breakdown-list .ax-name{ color: var(--ink); }

.value-markers-result-list li{
  font-size: 12.5px;
  line-height: 1.4;
  padding-left: 14px;
  position: relative;
}
.value-markers-result-list li::before{
  content: '★';
  position: absolute;
  left: 0;
  color: var(--accent2);
  font-size: 11px;
}

/* =========================================================
   DISCLAIMER FOOTER (inside .result)
   ========================================================= */
.foot{
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(31, 26, 22, .10);
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.foot strong{
  color: var(--ink);
  margin-right: 4px;
}

/* =========================================================
   PPG REFERENCE TABLE — page-bottom static info section
   ========================================================= */
.ppg-ref{
  margin: 32px 0 16px;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .55);
}

.ppg-ref-heading{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 6px;
}

.ppg-ref-intro{
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}

.ppg-ref-table-wrap{
  overflow-x: auto;
  margin: 0 -4px;
}

.ppg-ref-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.ppg-ref-table th,
.ppg-ref-table td{
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(31, 26, 22, .08);
  vertical-align: middle;
}

.ppg-ref-table th{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1.5px solid rgba(31, 26, 22, .18);
}

.ppg-ref-range{
  font-family: 'Courier New', ui-monospace, monospace;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.ppg-ref-band{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.ppg-ref-dot{
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, .25);
}

.ppg-ref-row:last-child td{
  border-bottom: none;
}

.ppg-ref-note{
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  margin: 14px 0 0;
}

@media (max-width: 600px){
  .ppg-ref{ padding: 16px 14px 14px; }
  .ppg-ref-table th,
  .ppg-ref-table td{ padding: 6px 8px; font-size: 11.5px; }
  .ppg-ref-table th{ font-size: 10px; }
}

/* =========================================================
   CARD ERA ATTENTION — first-Grade nudge when "Not sure".
   Mirrors DYP's #fieldBack.back-layout-hint pattern.
   ========================================================= */
@keyframes card-era-attention{
  0%   { border-color: var(--line);     box-shadow: none; }
  20%  { border-color: var(--accent2);  box-shadow: 0 0 0 3px rgba(176, 138, 74, .18); }
  100% { border-color: var(--accent2);  box-shadow: 0 0 0 3px rgba(176, 138, 74, .18); }
}

#cardEraCard.cardera-attention{
  animation: card-era-attention .6s ease-out forwards;
}
#cardEraCard.cardera-attention .axis-name{
  color: var(--accent2);
  font-weight: 700;
}

/* =========================================================
   MISC
   ========================================================= */
.muted{ color: var(--muted); }