/* ═══════════════════════════════════════════════════════════════════
   N·T DRIVE — Deco layer
   ═══════════════════════════════════════════════════════════════════
   Art Deco / Cassandre grammar over the operational cockpit.

   Principles applied, and why each is here:
   - GEOMETRY AS STRUCTURE. Stepped corners, double hairlines, chevrons.
     Deco is not ornament pasted on a rectangle; the shape IS the frame.
   - SIGNAL > NOISE. One accent. The amber is the only thing allowed to
     glow, so a number that glows is a number that changed meaning.
   - FUNCTIONAL TYPOGRAPHY. Numerals are Didone (Georgia stack) because a
     score must read as a FIGURE, and body is Geist because a label must
     read as text. Mixed roles, deliberate faces.
   - DRIVER CONTEXT. 48px minimum targets, no hover states (a hover sticks
     after a tap on a phone and leaves the row looking selected), and
     contrast raised for a screen read in sunlight.
   - MOTION IS A CUE. Transform/opacity only, stagger moves the eye DOWN a
     ranked list so the top row lands first, and prefers-reduced-motion is
     honoured for every one of them.

   Loaded AFTER tokens.css so it composes with the system rather than
   re-declaring it. Layering a visual treatment over a working system is
   only safe because every colour here is a token, never a literal.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Deco geometry: a 10px step reads as a chamfer at 430px wide. */
  --deco-step:10px;
  --deco-hair:rgba(245,165,36,.22);
  --deco-hair-strong:rgba(245,165,36,.45);
  --deco-ink:#F2EFE8;
  --deco-display:'Playfair Display','Didot','Bodoni 72',Georgia,serif;
  --tap:48px;
  --stagger:22ms;
  --deco-dur:260ms;
}

/* ── Display numerals: figures, not strings ───────────────────────── */
.earn-hero__num,
.mini-stat__earn,
.surge-chip__score,
.sheet-zone__score,
.earn-stat__v,
.profile-stat-tile-value{
  font-family:var(--deco-display);
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em;
  line-height:.95;
}

/* ── Stepped card: the frame is the decoration ────────────────────── */
.earn-hero,
.shift-card,
.team-row,
.earn-row,
.alert-item,
.zone-card,
.scenario-card,
.signal-card,
.toggles-card,
.schedule-card,
.value-card,
.profile-stat-tile,
.earn-stat{
  position:relative;
  border:1px solid var(--deco-hair);
  border-radius:2px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 42%),
    var(--color-surface-elevated);
  box-shadow:var(--shadow-sm);
}

/* The chamfer. A clipped top-left + bottom-right corner is the cheapest
   honest Deco gesture that does not depend on a font being present. */
.earn-hero::before,
.shift-card::before,
.earn-row::before,
.alert-item::before,
.zone-card::before,
.value-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:2px;
  -webkit-mask:
    linear-gradient(#000 0 0) top left / calc(100% - var(--deco-step)) 100% no-repeat,
    linear-gradient(#000 0 0) bottom right / calc(100% - var(--deco-step)) 100% no-repeat;
  -webkit-mask-composite:source-in;
  mask:
    linear-gradient(#000 0 0) top left / calc(100% - var(--deco-step)) 100% no-repeat,
    linear-gradient(#000 0 0) bottom right / calc(100% - var(--deco-step)) 100% no-repeat;
  mask-composite:intersect;
  background:
    linear-gradient(135deg,var(--deco-hair-strong) 0 1.5px,transparent 1.5px) top left / var(--deco-step) 1px no-repeat,
    linear-gradient(315deg,var(--deco-hair-strong) 0 1.5px,transparent 1.5px) bottom right / var(--deco-step) 1px no-repeat;
  background-color:transparent;
}

/* ── Double hairline: the Deco rule ───────────────────────────────── */
.earn-section-title,
.detail-section-title,
.section-label,
.sheet-header{
  position:relative;
  padding-bottom:8px;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:800;
  text-transform:upper;
  color:var(--color-accent);
}
.earn-section-title::after,
.detail-section-title::after,
.section-label::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--deco-hair);
}
.earn-section-title::after,
.detail-section-title::after{
  top:100%;
  height:3px;
  background:
    linear-gradient(var(--deco-hair) 0 0) left center / 42px 1px no-repeat,
    linear-gradient(var(--deco-hair) 0 0) right center / 12px 1px no-repeat;
  opacity:.9;
}

/* ── Accent is the only glow ───────────────────────────────────────── */
.earn-hero__verdict,
.surge-chip__verdict,
.sheet-zone__verdict,
.push-status{
  letter-spacing:.14em;
  font-weight:800;
  font-size:10px;
  text-transform:uppercase;
}
.nav-item.active .nav-icon{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--color-accent) 45%,transparent));}
.nav-item.active{color:var(--color-accent);}

/* ── Driver-grade tap targets ──────────────────────────────────────── */
.nav-item{min-height:var(--tap);}
.nav-item,.shift-card__btn,.vote-btn,.zone-chip,.tier-card,.feedback-add-btn,
.surge-chip,.shift-selector__opt{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.nav-item:active,
.shift-card__btn:active,
.vote-btn:active,
.zone-chip:active,
.surge-chip:active{transform:scale(.97);}

/* No hover on a phone: it sticks after the tap and the row then looks
   permanently selected, which is a lie about the current state. */
@media (hover:hover) and (pointer:fine){
  .nav-item:hover,.zone-chip:hover,.vote-btn:hover{filter:brightness(1.12);}
}

/* ── Stagger: moves the eye DOWN the ranked list ────────────────────── */
.surge-chip,
.earn-row,
.sheet-zone,
.alert-item{
  animation:deco-in var(--deco-dur) cubic-bezier(.22,.61,.36,1) backwards;
}
.surge-chip:nth-child(1),.earn-row:nth-child(1),.sheet-zone:nth-child(1),.alert-item:nth-child(1){animation-delay:0ms}
.surge-chip:nth-child(2),.earn-row:nth-child(2),.sheet-zone:nth-child(2),.alert-item:nth-child(2){animation-delay:calc(var(--stagger)*1)}
.surge-chip:nth-child(3),.earn-row:nth-child(3),.sheet-zone:nth-child(3),.alert-item:nth-child(3){animation-delay:calc(var(--stagger)*2)}
.surge-chip:nth-child(4),.earn-row:nth-child(4),.sheet-zone:nth-child(4),.alert-item:nth-child(4){animation-delay:calc(var(--stagger)*3)}
.surge-chip:nth-child(5),.earn-row:nth-child(5),.sheet-zone:nth-child(5),.alert-item:nth-child(5){animation-delay:calc(var(--stagger)*4)}
.surge-chip:nth-child(6),.earn-row:nth-child(6),.sheet-zone:nth-child(6),.alert-item:nth-child(6){animation-delay:calc(var(--stagger)*5)}
.surge-chip:nth-child(n+7),.earn-row:nth-child(n+7),.sheet-zone:nth-child(n+7),.alert-item:nth-child(n+7){animation-delay:calc(var(--stagger)*6)}

@keyframes deco-in{
  from{opacity:0;transform:translate3d(0,10px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}

/* ── Reduced motion is a health accommodation, not a preference ─────── */
@media (prefers-reduced-motion:reduce){
  .surge-chip,.earn-row,.sheet-zone,.alert-item,
  .nav-item,.shift-card__btn,.zone-chip,.vote-btn,
  .shift-selector__opt,.feedback-add-btn,.btn{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  .nav-item.active .nav-icon{filter:none;}
}

/* ── Sunlight legibility: the cockpit is read outdoors ─────────────── */
@media (max-width:430px){
  .earn-row__name,.sheet-zone__name,.alert-title,.surge-chip__name{font-weight:700;}
  .earn-row__net,.sheet-zone__score,.surge-chip__score{font-size:22px;}
  .zone-card,.scenario-card,.signal-card{background:var(--color-surface-elevated);}
}