/* Chart Room tokens and materials (board B10, docs/chart-room/README.md "Visual tokens").
   Every rule is scoped under [data-ui="chartroom"], so Sjøfart never sees any of it.
   Fonts are declared by fonts.css; raster materials live in assets/chartroom/. */

[data-ui="chartroom"] {
  /* ---- Colour ---------------------------------------------------------------------- */
  --cr-ink: #172B36;
  --cr-ink-2: #2C373B;
  --cr-ink-3: #3F392E;          /* quiet labels on paper, 7:1+ on #EFE3C8 */
  --cr-paper: #EFE3C8;
  --cr-paper-hi: #FBF5E6;
  --cr-bone: #FBF7EE;
  --cr-brass: #C9973A;
  --cr-brass-hi: #E6B54C;
  --cr-brass-dark: #7A5518;
  --cr-brass-ink: #1A1204;      /* text on brass */
  --cr-sea: #0A2230;
  --cr-steel: #0C2A3A;
  --cr-well: #0F2733;           /* the dark rail a steel control sits in */
  --cr-steel-text: #E6EEF1;
  --cr-cream-text: #F2E8D0;
  --cr-amber: #D98A2B;
  --cr-amber-hi: #F2B866;
  --cr-teal: #0F4644;
  --cr-shout: #86230F;
  --cr-shout-hi: #9A2A17;
  --cr-focus: #FFD166;
  --cr-rule: rgba(23, 43, 54, .16);

  /* Hatching = can't yet */
  --cr-hatch-paper: repeating-linear-gradient(135deg, #DDD3BD 0 5px, #D3C7AC 5px 10px);
  --cr-hatch-steel: repeating-linear-gradient(135deg, #26485A 0 5px, #0F1F27 5px 10px);
  --cr-hatch-steel-deep: repeating-linear-gradient(135deg, #13262F 0 5px, #0F1F27 5px 10px);
  /* Text on the hatches, 7:1 or better against both stripes (measured in the lane report):
     paper #2B271F: 8.87 on #D3C7AC, 10.0 on #DDD3BD;
     steel #E6EEF1: 8.28 on #26485A, 14.3 on #0F1F27; 11.6+ on the deep steel hatch. */
  --cr-hatch-text-paper: #2B271F;
  --cr-hatch-text-steel: #E6EEF1;

  /* Focus: one gold ring with an ink gap */
  --cr-ring: 0 0 0 2px var(--cr-sea), 0 0 0 6px var(--cr-sea);

  /* ---- Type ------------------------------------------------------------------------ */
  --cr-serif: 'Libre Caslon Text', Georgia, serif;
  --cr-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cr-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --cr-stencil: 'Big Shoulders Stencil Display', 'Arial Narrow', sans-serif;
  --cr-t-floor: 15px;
  --cr-target: 44px;

  /* ---- Motion: Sjøfart's four durations; nothing animates on its own ------------------ */
  --cr-ease: var(--pc-ease, cubic-bezier(0.22, 0.8, 0.3, 1));
  --cr-d-snap: var(--pc-d-snap, 140ms);
  --cr-d-move: var(--pc-d-move, 240ms);
  --cr-d-ink: var(--pc-d-ink, 450ms);
  --cr-d-camera: var(--pc-d-camera, 600ms);

  font-family: var(--cr-body);
  font-size: var(--cr-t-floor);
  color: var(--cr-ink);
}

@media (prefers-reduced-motion: reduce) {
  [data-ui="chartroom"] { --cr-d-snap: 0ms; --cr-d-move: 0ms; --cr-d-ink: 0ms; --cr-d-camera: 0ms; }
}
[data-ui="chartroom"][data-motion="reduced"],
[data-ui="chartroom"] [data-motion="reduced"] { --cr-d-snap: 0ms; --cr-d-move: 0ms; --cr-d-ink: 0ms; --cr-d-camera: 0ms; }

/* ---- Materials ----------------------------------------------------------------------- */

/* Paper sheet */
[data-ui="chartroom"] .cr-paper {
  background: var(--cr-paper) url(../../../assets/chartroom/paper.jpg) center / cover no-repeat;
}
/* The dark rail (top bar, side rails) */
[data-ui="chartroom"] .cr-rail {
  background:
    radial-gradient(ellipse 80% 60% at 22% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .3) 100%),
    linear-gradient(rgba(10, 26, 35, .3), rgba(10, 26, 35, .3)),
    #1B3441 url(../../../assets/chartroom/rail.jpg) 0 0 / 512px 512px repeat;
  color: var(--cr-cream-text);
}
/* Enamel panel on steel */
[data-ui="chartroom"] .cr-enamel {
  background: rgba(9, 25, 34, .9);
  border-top: 1px solid rgba(0, 0, 0, .6);
  border-bottom: 1px solid rgba(143, 166, 176, .22);
  --cr-sh: inset 0 0 0 1px rgba(143, 166, 176, .28), inset 0 2px 8px rgba(0, 0, 0, .55);
}
/* Riveted steel frame */
[data-ui="chartroom"] .cr-steel {
  border: 16px solid transparent;
  border-image: url(../../../assets/chartroom/steel-frame.png) 32 stretch;
}
[data-ui="chartroom"] .cr-rack {
  border: 12px solid transparent;
  border-image: url(../../../assets/chartroom/steel-frame.png) 32 stretch;
}
/* Brass: chosen things */
[data-ui="chartroom"] .cr-brass {
  background: var(--cr-brass) url(../../../assets/chartroom/brass.png) center / 100% 100% no-repeat;
  color: var(--cr-brass-ink);
}
/* Sheet frame and deckled edge */
[data-ui="chartroom"] .cr-frame {
  border: 20px solid transparent;
  border-image: url(../../../assets/chartroom/sheet-frame.png) 40 round;
}
[data-ui="chartroom"] .cr-deckle {
  -webkit-mask-box-image: url(../../../assets/chartroom/deckle.png) 40 / 20px round;
}
/* The dark well a steel control sits in */
[data-ui="chartroom"] .cr-well {
  display: inline-flex;
  padding: 6px;
  background: var(--cr-well);
}
/* Medals */
[data-ui="chartroom"] .cr-medal--propeller { background: url(../../../assets/chartroom/medal-propeller.png) center / 100% 100% no-repeat; }
[data-ui="chartroom"] .cr-medal--brush { background: url(../../../assets/chartroom/medal-brush.png) center / 100% 100% no-repeat; }
[data-ui="chartroom"] .cr-medal--snow { background: url(../../../assets/chartroom/medal-snow.png) center / 100% 100% no-repeat; }
[data-ui="chartroom"] .cr-chart-thumb { background: var(--cr-sea) url(../../../assets/chartroom/chart-thumb.jpg) center / cover no-repeat; }

/* Screen-reader-only text */
[data-ui="chartroom"] .cr-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Shadows and radii: the Sjøfart guard rail ----------------------------------------
   Sjøfart zeroes every radius and shadow under .pc-app with an unlayered !important rule.
   A Chart Room element that wants depth OPTS IN with the [data-cr-depth] attribute (every
   kit builder in controls.js adds it; hand-written markup such as .cr-enamel panels adds it
   too) and puts its shadow and radius in --cr-sh / --cr-r. The layered !important rule below
   applies them: a layered important declaration outranks an unlayered important one, so the
   element keeps its depth inside .pc-app. It matches only opted-in Chart Room elements, so
   nothing leaks the other way. An element without the attribute gets no depth from here.

   APPROVED GLOBAL EXCEPTION: the two @property registrations are document-global by nature
   (CSS cannot scope them). They only register the Chart Room's own --cr-sh / --cr-r names as
   non-inheriting, so a shadow never cascades into a control's children; nothing else in the
   page uses those names. They are the only unscoped statements in the Chart Room CSS. */
@property --cr-sh { syntax: '*'; inherits: false; }
@property --cr-r { syntax: '*'; inherits: false; }

@layer chartroom-depth {
  [data-ui="chartroom"] [data-cr-depth] {
    box-shadow: var(--cr-sh, none) !important;
    border-radius: var(--cr-r, 0) !important;
  }
}