/* PortCaptain Console (docs/console/PLAN.md): the management console's graphic layer, loaded last.
   Dark teal command rail · brass for what is selected or decisive · cream paper work sheets · painted-steel frames.
   Every rule is scoped to [data-ui="chartroom"] so Sjøfart (?ui=sjofart) never sees it. */

[data-ui="chartroom"] {
  --pc-sea: #0B3445;
  --pc-sea-2: #0D5668;
  --pc-ink: #102733;
  --pc-paper: #F2E8D0;
  --pc-paper-hi: #FAF4E4;
  --pc-brass: #C9973A;
  --pc-brass-hi: #E6B54C;
  --pc-teal: #2E8C8A;
  --pc-warn: #A32A1B;
  --pc-amber: #E6B54C;
  --pc-steel: #4F6B78;
  --pc-steel-dark: #22404D;
  --pc-rule: rgba(16, 39, 51, .28);
  /* the existing kit reads these: re-point them at the console palette */
  --cr-ink: var(--pc-ink);
  --cr-paper: var(--pc-paper);
  --cr-paper-hi: var(--pc-paper-hi);
  --cr-sea: var(--pc-sea);
  --cr-steel: #123B4B;
  --cr-teal: #1F6E6C;
  --cr-shout: var(--pc-warn);
  --pc-grain: url(../../../assets/console/paper-grain.svg);
  --pc-steel-face: linear-gradient(180deg, #2F5361 0%, #1C3C49 48%, #16323E 52%, #234856 100%);
  --pc-frame-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 -1px 0 rgba(0, 0, 0, .35) inset, 0 14px 30px rgba(0, 0, 0, .45);
}

/* ---- The sea ground behind everything ------------------------------------------------------ */
body[data-ui="chartroom"] {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(46, 140, 138, .22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 9px),
    var(--pc-sea);
}
[data-ui="chartroom"] .cr-app { background: transparent; }

/* ---- Command rail (top bar) ---------------------------------------------------------------- */
[data-ui="chartroom"] .cr-top {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #13495B 0%, #0D3A4A 55%, #0A2F3D 100%);
  border-bottom: 2px solid #071F29;
  box-shadow: 0 1px 0 rgba(201, 151, 58, .55), 0 6px 18px rgba(0, 0, 0, .45);
}
[data-ui="chartroom"] .cr-navtab {
  border-radius: 2px;
  font-family: var(--cr-cond);
  letter-spacing: .1em;
  transition: transform var(--cr-d-snap, 90ms) ease-out, background-color var(--cr-d-snap, 90ms);
}
[data-ui="chartroom"] .cr-navtab:not(.cr-brass) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18));
  box-shadow: inset 0 0 0 1px rgba(79, 107, 120, .7);
  color: var(--pc-paper);
}
[data-ui="chartroom"] .cr-navtab:not(.cr-brass):hover { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .1)); }
[data-ui="chartroom"] .cr-navtab:active,
[data-ui="chartroom"] .cr-plate:active,
[data-ui="chartroom"] .cr-ops__row:active { transform: translateY(1px); }
[data-ui="chartroom"] .cr-navtab__count {
  background: var(--pc-warn);
  color: #FFF4E6;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}
[data-ui="chartroom"] .cr-cash__figure { color: var(--pc-brass-hi); text-shadow: 0 1px 0 #071F29; }

/* ---- The desk: board + operations rail ------------------------------------------------------ */
[data-ui="chartroom"] .cr-desk {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  padding: 22px 26px 26px;
}
[data-ui="chartroom"] .cr-app[data-board="live"] .cr-desk { grid-template-columns: minmax(0, 1fr) 340px; }
[data-ui="chartroom"] .cr-app[data-board="live"] .cr-side { display: flex; }
/* the boards' own rails gave way to the one operations rail */
[data-ui="chartroom"] .cr-desk .crb-rail { display: none !important; }
[data-ui="chartroom"] .cr-desk .crb-now,
[data-ui="chartroom"] .cr-desk .crb-maintain { grid-template-columns: minmax(0, 1fr) !important; }

/* ---- Paper sheets in steel frames ------------------------------------------------------------ */
[data-ui="chartroom"] .cr-board { filter: none; }
/* The boards draw their paper as a background layer (.crb-sheet__bg) or as the sheet itself (Progress, Company):
   both become grained cream paper inside a painted-steel frame with corner rivets. */
[data-ui="chartroom"] #cr-board .crb-sheet__bg,
[data-ui="chartroom"] #cr-board .cr-sheet,
[data-ui="chartroom"] #cr-board .cr-prog.cr-paper,
[data-ui="chartroom"] #cr-board .cr-books.cr-paper {
  background: var(--pc-grain), linear-gradient(180deg, var(--pc-paper-hi) 0%, var(--pc-paper) 30%, #EADDBF 100%);
  border: 0;
  border-image: none;
  -webkit-mask-box-image: none;
  mask: none;
  border-radius: 2px;
  --pc-frame: 0 0 0 6px #1E414E, 0 0 0 7px #4F7383, 0 0 0 9px #0E2B37, 0 22px 40px rgba(0, 0, 0, .5);
  box-shadow: var(--pc-frame);
  --cr-sh: var(--pc-frame); /* sheets that opt into depth ([data-cr-depth]) take their shadow from --cr-sh (tokens.css) */
}
[data-ui="chartroom"] #cr-board .crb-sheet,
[data-ui="chartroom"] #cr-board .cr-prog.cr-paper,
[data-ui="chartroom"] #cr-board .cr-books.cr-paper { margin: 9px; }
/* rivets on the frame corners */
[data-ui="chartroom"] .cr-board .crb-sheet__bg::before,
[data-ui="chartroom"] .cr-board .cr-sheet::before {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  background:
    radial-gradient(circle at 3px 3px, #A9BEC7 0 1.5px, #2A4A57 2.3px, transparent 2.8px) left top / 8px 8px no-repeat,
    radial-gradient(circle at 5px 3px, #A9BEC7 0 1.5px, #2A4A57 2.3px, transparent 2.8px) right top / 8px 8px no-repeat,
    radial-gradient(circle at 3px 5px, #A9BEC7 0 1.5px, #2A4A57 2.3px, transparent 2.8px) left bottom / 8px 8px no-repeat,
    radial-gradient(circle at 5px 5px, #A9BEC7 0 1.5px, #2A4A57 2.3px, transparent 2.8px) right bottom / 8px 8px no-repeat;
}
[data-ui="chartroom"] .cr-board .cr-sheet { position: relative; }

/* ---- Section headings: stamped condensed caps, a brass rule ------------------------------------ */
[data-ui="chartroom"] .cr-board h1 {
  font-family: var(--cr-cond);
  font-weight: 800;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-ink);
}
[data-ui="chartroom"] .cr-board h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--pc-brass), var(--pc-brass-hi));
  box-shadow: 0 1px 0 rgba(122, 85, 24, .6);
}
[data-ui="chartroom"] .cr-board h2,
[data-ui="chartroom"] .cr-board .crb-h2 {
  font-family: var(--cr-cond);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6B4A12;
}

/* ---- Tables and rows on paper: thin ink rules, no heavy bands ----------------------------------- */
[data-ui="chartroom"] .cr-board table th {
  font-family: var(--cr-cond);
  letter-spacing: .08em;
  color: #5A4A2E;
  border-bottom: 2px solid var(--pc-ink);
}
[data-ui="chartroom"] .cr-board table td { border-bottom: 1px solid var(--pc-rule); }
[data-ui="chartroom"] .cr-board tbody tr:hover td { background: rgba(201, 151, 58, .08); }

/* ---- Hull plates sit on paper like engravings ---------------------------------------------------- */
[data-ui="chartroom"] .cr-hullplate { display: block; height: auto; max-width: 100%; }

/* ---- Operations rail ------------------------------------------------------------------------------ */
[data-ui="chartroom"] .cr-side {
  padding: 0;
  border: 0;
  background: var(--pc-steel-face);
  box-shadow: var(--pc-frame-shadow), 0 0 0 1px #0A2733;
  border-radius: 3px;
}
[data-ui="chartroom"] .cr-side__inner { padding: 0; background: none; }
[data-ui="chartroom"] .cr-ops {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 14px 18px;
  color: var(--pc-paper);
  font-family: var(--cr-body);
}
[data-ui="chartroom"] .cr-ops__fold {
  padding: 10px 10px 8px;
  background: rgba(7, 26, 34, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(79, 107, 120, .55);
  border-radius: 2px;
}
[data-ui="chartroom"] .cr-ops__head {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 6px;
  padding: 2px 2px 6px;
  border-bottom: 1px solid rgba(201, 151, 58, .45);
  font: 700 14px/1 var(--cr-cond);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pc-brass-hi);
  cursor: default;
}
[data-ui="chartroom"] button.cr-ops__head { cursor: pointer; }
[data-ui="chartroom"] button.cr-ops__head:hover span { text-decoration: underline; text-underline-offset: 3px; }
[data-ui="chartroom"] .cr-ops__count {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 11px;
  background: var(--pc-brass);
  color: #1A1204;
  font: 700 13px/1 var(--cr-cond);
  text-align: center;
  letter-spacing: 0;
}
[data-ui="chartroom"] .cr-ops__fold--orders .cr-ops__count { background: var(--pc-warn); color: #FFF4E6; }
[data-ui="chartroom"] .cr-ops__row,
[data-ui="chartroom"] .cr-ops__alert {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(79, 107, 120, .35);
  cursor: pointer;
  transition: background-color var(--cr-d-snap, 90ms);
}
[data-ui="chartroom"] .cr-ops__alert { grid-template-columns: 12px minmax(0, 1fr) auto; }
[data-ui="chartroom"] .cr-ops__row:last-child,
[data-ui="chartroom"] .cr-ops__alert:last-child { border-bottom: 0; }
[data-ui="chartroom"] .cr-ops__row:hover,
[data-ui="chartroom"] .cr-ops__alert:hover { background: rgba(201, 151, 58, .12); }
[data-ui="chartroom"] .cr-ops__row:focus-visible,
[data-ui="chartroom"] .cr-ops__alert:focus-visible,
[data-ui="chartroom"] .cr-ops__head:focus-visible,
[data-ui="chartroom"] .cr-ops__goal:focus-visible,
[data-ui="chartroom"] .cr-ops__more:focus-visible { outline: 3px solid var(--cr-focus, #FFD166); outline-offset: 2px; }
[data-ui="chartroom"] .cr-ops__hull .cr-hullplate,
[data-ui="chartroom"] .cr-ops__hull svg { width: 76px; height: auto; }
[data-ui="chartroom"] .cr-ops__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.25; color: #D9E3E6; }
[data-ui="chartroom"] .cr-ops__text b { font: 600 16px/1.1 var(--cr-serif); color: var(--pc-paper-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui="chartroom"] .cr-ops__text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-ui="chartroom"] .cr-ops__when { font: 600 14px/1 var(--cr-cond); color: #BFD0D6; white-space: nowrap; }
[data-ui="chartroom"] .cr-ops__when--danger { color: #FF9C88; }
[data-ui="chartroom"] .cr-ops__track { display: block; height: 4px; margin-top: 3px; background: rgba(242, 232, 208, .18); border-radius: 2px; overflow: hidden; }
[data-ui="chartroom"] .cr-ops__track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--pc-teal), #5FC4BE); transition: width var(--cr-d-move, 240ms) ease-out; }
[data-ui="chartroom"] .cr-ops__dot { width: 10px; height: 10px; border-radius: 50%; background: #8FB7C2; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
[data-ui="chartroom"] .cr-ops__alert--warn .cr-ops__dot { background: var(--pc-amber); }
[data-ui="chartroom"] .cr-ops__alert--danger .cr-ops__dot { background: #E0533D; }
[data-ui="chartroom"] .cr-ops__alert .cr-ops__text { white-space: normal; }
[data-ui="chartroom"] .cr-ops__more {
  all: unset;
  display: block;
  margin-top: 6px;
  padding: 6px 4px;
  font: 600 14px var(--cr-cond);
  letter-spacing: .06em;
  color: var(--pc-brass-hi);
  cursor: pointer;
}
[data-ui="chartroom"] .cr-ops__empty { margin: 4px 2px 2px; font-size: 14px; color: #A9BCC3; }
[data-ui="chartroom"] .cr-ops__calm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px;
  background: rgba(46, 140, 138, .2);
  box-shadow: inset 0 0 0 1px rgba(95, 196, 190, .45);
  font: 600 15px/1.3 var(--cr-body);
  color: #E4F2EF;
}
[data-ui="chartroom"] .cr-ops__calmmark { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #5FC4BE; box-shadow: 0 0 0 3px rgba(95, 196, 190, .25); }
[data-ui="chartroom"] .cr-ops__goal {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(201, 151, 58, .22), rgba(201, 151, 58, .08));
  box-shadow: inset 0 0 0 1px rgba(201, 151, 58, .6);
  cursor: pointer;
}
[data-ui="chartroom"] .cr-ops__goal span { font: 700 13px var(--cr-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--pc-brass-hi); }
[data-ui="chartroom"] .cr-ops__goal b { font: 600 16px/1.25 var(--cr-serif); color: var(--pc-paper-hi); }
[data-ui="chartroom"] .cr-ops__fleet { display: flex; justify-content: space-between; margin: 0; padding: 0 4px; font: 600 14px var(--cr-cond); letter-spacing: .08em; text-transform: uppercase; color: #A9BCC3; }

/* ---- Tablet: the rail folds under the board; phone: it hides (Now carries the same) ------------- */
@media (max-width: 1279px) {
  [data-ui="chartroom"] .cr-desk,
  [data-ui="chartroom"] .cr-app[data-board="live"] .cr-desk { grid-template-columns: minmax(0, 1fr); }
  [data-ui="chartroom"] .cr-app[data-board="live"] .cr-side { display: flex; }
  [data-ui="chartroom"] .cr-desk > .cr-side { grid-row: auto; }
  [data-ui="chartroom"] .cr-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  [data-ui="chartroom"] .cr-desk { padding: 10px 8px 16px; }
  [data-ui="chartroom"] .cr-app[data-board="live"] .cr-side { display: none; }
  [data-ui="chartroom"] .cr-board .crb-sheet__bg,
  [data-ui="chartroom"] .cr-board .cr-sheet { box-shadow: 0 0 0 3px #1E414E, 0 0 0 5px #0E2B37, 0 10px 20px rgba(0, 0, 0, .45); }
  [data-ui="chartroom"] .cr-board .crb-sheet { margin: 5px; }
  [data-ui="chartroom"] .cr-board h1 { font-size: 26px; }
}

/* ---- Motion: every transition here is one of the kit's durations, which reduced motion zeroes ---- */
@media (prefers-reduced-motion: reduce) {
  [data-ui="chartroom"] .cr-navtab,
  [data-ui="chartroom"] .cr-ops__row,
  [data-ui="chartroom"] .cr-ops__track > i { transition: none; }
}
[data-ui="chartroom"] [data-motion="reduced"] .cr-ops__track > i,
[data-ui="chartroom"][data-motion="reduced"] .cr-ops__track > i { transition: none; }

/* ---- Round 2 (R11): the rail never cuts content; it scrolls inside itself ------------------------------ */
@media (min-width: 1280px) {
  [data-ui="chartroom"] .cr-app[data-board="live"] .cr-side { max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #4F7383 transparent; }
  [data-ui="chartroom"] .cr-side::-webkit-scrollbar { width: 6px; }
  [data-ui="chartroom"] .cr-side::-webkit-scrollbar-thumb { background: #4F7383; border-radius: 3px; }
}

/* ---- Round 2 (R6): on a phone the sheet is plain paper: no steel frame, no margins ---------------------- */
@media (max-width: 760px) {
  [data-ui="chartroom"] .cr-desk { padding: 0; }
  [data-ui="chartroom"] #cr-board .crb-sheet__bg,
  [data-ui="chartroom"] #cr-board .cr-sheet,
  [data-ui="chartroom"] #cr-board .cr-prog.cr-paper,
  [data-ui="chartroom"] #cr-board .cr-books.cr-paper { --pc-frame: none; --cr-sh: none; box-shadow: none; border-radius: 0; }
  [data-ui="chartroom"] .cr-board .crb-sheet__bg::before,
  [data-ui="chartroom"] .cr-board .cr-sheet::before { display: none; }
  [data-ui="chartroom"] #cr-board .crb-sheet,
  [data-ui="chartroom"] #cr-board .cr-prog.cr-paper,
  [data-ui="chartroom"] #cr-board .cr-books.cr-paper,
  [data-ui="chartroom"] .cr-board .crb-sheet { margin: 0; padding: 12px; }
  [data-ui="chartroom"] .cr-navtab__count { background: var(--pc-warn); color: #FFFFFF; box-shadow: 0 0 0 2px var(--pc-ink); font-weight: 700; }
  [data-ui="chartroom"] .cr-navtab.cr-brass .cr-navtab__calm, [data-ui="chartroom"] .cr-navtab[aria-current] .cr-navtab__calm { color: var(--pc-ink); font-weight: 700; }
}