/* Kanban board styles — every colour, font, radius, and shadow comes from
   tokens.css (the RetailLab design system). The only values defined here are
   board-specific layout tokens (spacing, column width), declared below. */

/* Brand fonts, self-hosted (SIL Open Font License 1.1) */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('assets/fonts/SourceCodePro-Variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Montserrat-Variable.woff2') format('woff2-variations');
}

/* Board-level layout tokens (the design system defines no spacing scale,
   so the board declares its own — still variables, never magic numbers) */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --lane-width: 280px;
  --text-on-dark: #ffffff;   /* matches the DS global stylesheet's body colour */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--rl-font-body);
  font-size: var(--rl-text-body);
  background: var(--rl-retail-black);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* the page never scrolls; card lists scroll inside lanes */
}

/* ---- Header ---- */

.board-header {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.board-header h1 {
  font-family: var(--rl-font-heading);
  font-size: var(--rl-text-subhead);
  font-weight: 600;
}

.board-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Tasks / Notes switch -- a two-segment pill next to the title. */
.mode-toggle {
  display: inline-flex;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-pill);
  overflow: hidden;
}

.mode-btn {
  font-family: var(--rl-font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rl-text-muted);
  background: none;
  border: none;
  padding: var(--sp-1) var(--sp-4);
  cursor: pointer;
}

.mode-btn.on {
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
}

.filter-wrap { position: relative; }

.filter-btn {
  font-family: var(--rl-font-body);
  font-size: 0.875rem;
  color: var(--text-on-dark);
  background: var(--rl-surface-muted);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}

.filter-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-1));
  z-index: 15;
  width: 300px;
  max-width: 85vw;
  background: var(--rl-surface-card);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.filter-panel[hidden] { display: none; }

/* THE `hidden` ATTRIBUTE MUST ALWAYS WIN.
   The browser's built-in rule is [hidden] { display: none }, but ANY author
   `display:` beats it. .token-gate set `display: flex`, so the "Connect this
   board" overlay sat permanently on top of a fully working board -- fixed,
   inset:0, z-index 30 -- no matter what the JavaScript did. It cost most of
   2026-07-27 because every DOM check said `hidden` was true, which it was:
   the attribute was set and simply had no effect. .tag-pick had the same
   latent bug. This one rule closes it for every element, present and future. */
[hidden] { display: none !important; }

.filter-panel button {
  font-family: var(--rl-font-body);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-2);
  cursor: pointer;
  white-space: nowrap;
}

.filter-panel button.on {
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border-color: var(--rl-retail-lime);
}

.filter-panel .filter-clear {
  width: 100%;
  text-align: center;
  margin-top: var(--sp-2);
  color: var(--text-on-dark);
}

/* Done lane's header tools */
.head-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.clear-done {
  font-family: var(--rl-font-body);
  font-size: 0.75rem;
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-2);
  line-height: 1.6;
  cursor: pointer;
}

.clear-done:hover {
  color: var(--rl-yellow);
  border-color: var(--rl-yellow);
}

.status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--rl-text-muted);
}

.app-v {
  font-family: var(--rl-font-heading);
  font-size: 0.6875rem;
  color: var(--rl-text-muted);
}

.net-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--rl-radius-pill);
  background: var(--rl-retail-lime);   /* online */
}

.status.offline .net-dot { background: var(--rl-yellow); }
.status.offline .net-label { color: var(--rl-yellow); }

/* Tag picker under the add-form: toggleable chips, master list only */
/* The tag chips shown when Add is pressed. A task cannot be created without
   choosing at least one, so this is a step in the flow, not an optional extra. */
.sheet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.sheet-tags button {
  font-family: var(--rl-font-body);
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-3);
  cursor: pointer;
  white-space: nowrap;
}

.sheet-tags button.on {
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border-color: var(--rl-retail-lime);
}

.sheet-actions button:disabled {
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
  cursor: default;
}

.tag-pick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.tag-pick button {
  font-family: var(--rl-font-body);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-2);
  cursor: pointer;
  white-space: nowrap;
}

.tag-pick button.on {
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border-color: var(--rl-retail-lime);
}

.lime { color: var(--rl-retail-lime); }

/* ---- Board = five lanes ---- */

/* Wide screens (default): all five lanes share the window — no sideways
   scroll, ever. Narrow screens (media query below): fixed-width lanes that
   scroll and snap sideways. */
.board {
  flex: 1;
  min-height: 0;   /* lets lanes size to the window instead of their content */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: 0 var(--sp-5) var(--sp-5);
}

/* The Notes board has three columns, not five. Only override at wide widths --
   below 1120px the rule below turns every board into horizontal-scroll columns,
   which suits 3 lanes as well as 5. */
@media (min-width: 1121px) {
  .board[data-mode="notes"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--lane-width), 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;   /* columns snap as you swipe */
  }
}

.lane {
  background: var(--rl-surface-card);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-card);
  padding: var(--sp-4);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;   /* heading + add-form stay put; .cards below gets the rest */
}

/* Done and Parked sit quieter than the active lanes */
.lane-quiet { background: var(--rl-surface-footer); }
.lane-quiet .card { opacity: 0.7; }

.lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lane-head h2 {
  font-family: var(--rl-font-heading);
  font-size: var(--rl-text-body);
  font-weight: 600;
}

.count {
  font-family: var(--rl-font-heading);
  font-size: var(--rl-text-body);
  background: var(--rl-retail-lime);
  color: var(--rl-retail-black);
  border-radius: var(--rl-radius-pill);
  min-width: 28px;
  text-align: center;
  padding: var(--sp-1) var(--sp-2);
  line-height: 1;
}

/* ---- Cards ---- */

.cards {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  min-height: 0;
  overflow-y: auto;   /* the scrolling happens here, under the pinned heading */
  overflow-x: hidden; /* never sideways: chip rows wrap instead */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

/* Slim, dark scrollbar to match the board (Chrome/Edge) */
.cards::-webkit-scrollbar { width: 8px; }
.cards::-webkit-scrollbar-track { background: transparent; }
.cards::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--rl-radius-pill);
}
.cards::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

.card {
  background: var(--rl-surface-muted);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: var(--sp-3);
  cursor: grab;
}

.card-title { line-height: 1.4; }

.card-meta {
  display: flex;
  flex-wrap: wrap;   /* many chips -> extra rows, never sideways overflow */
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.chip {
  font-family: var(--rl-font-body);
  color: var(--rl-retail-lime);
  border: 1px solid var(--rl-retail-lime);
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-2);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;   /* a chip never breaks mid-name; the ROW wraps */
}

.page {
  font-family: var(--rl-font-heading);
  font-size: 0.75rem;
  color: var(--rl-text-muted);
}

/* "[?]" cards: the page badge is a link to the handwritten page image */
a.page-link {
  color: var(--rl-retail-lime);
  text-decoration: underline;
}

/* ---- Drag and drop ---- */

/* The clone that follows the pointer — brand's hard lime shadow, no blur */
.card.ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  box-shadow: var(--rl-shadow-lime);
  cursor: grabbing;
}

/* The original card while its ghost is out: a dashed lime slot */
.card.placeholder {
  opacity: 0.4;
  border: 1px dashed var(--rl-retail-lime);
}

/* While a drag is live, never let the browser select text instead */
body.dragging-active { user-select: none; cursor: grabbing; }

/* An empty lane still needs surface area to drop onto */
.cards { min-height: 44px; }

/* ---- Error bar ---- */

.error-bar {
  margin: 0 var(--sp-5) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rl-yellow);
  border-radius: var(--rl-radius);
  color: var(--rl-yellow);
  font-size: 0.875rem;
}

/* ---- Add-task form (To Do lane) ---- */

.add-form {
  display: flex;
  gap: var(--sp-2);
}

.add-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--rl-font-body);
  font-size: 0.875rem;
  color: var(--text-on-dark);
  background: var(--rl-surface-muted);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: var(--sp-2) var(--sp-3);
}

.add-form input::placeholder { color: var(--rl-text-muted); }

.add-form input:focus {
  outline: none;
  border-color: var(--rl-retail-lime);
}

/* Button Main: lime, black text, hard black offset shadow (guidelines p.6) */
.add-form button {
  font-family: var(--rl-font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border: none;
  border-radius: var(--rl-radius-pill);
  padding: var(--sp-2) var(--sp-4);
  box-shadow: var(--rl-shadow-black);
  cursor: pointer;
}

.add-form button:hover { background: var(--rl-retail-lime-darker); }
.add-form button:active {
  transform: translateY(3px);
  box-shadow: 0 4px 0 var(--rl-retail-black);
}

/* ---- Mobile: one lane at a time, tabs to switch, tap-to-move ---- */

.lane-tabs { display: none; }   /* desktop never sees the tabs */

@media (max-width: 640px) {
  .board-header { padding: var(--sp-3) var(--sp-4); }

  .lane-tabs {
    display: flex;
    gap: var(--sp-1);
    padding: 0 var(--sp-3) var(--sp-3);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lane-tabs::-webkit-scrollbar { display: none; }

  .lane-tabs button {
    font-family: var(--rl-font-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rl-text-muted);
    background: var(--rl-surface-muted);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius-pill);
    padding: var(--sp-1) var(--sp-3);
    white-space: nowrap;
    cursor: pointer;
  }

  .lane-tabs button.on {
    color: var(--rl-retail-black);
    background: var(--rl-retail-lime);
    border-color: var(--rl-retail-lime);
  }

  .lane-tabs .tab-count { font-size: 0.75rem; }

  /* Only the active lane is shown, full width and full height */
  .board {
    display: flex;
    flex-direction: column;
    padding: 0 var(--sp-3) var(--sp-3);
  }
  .lane { display: none; }
  .lane.m-active { display: flex; flex: 1; min-height: 0; }

  .card { cursor: pointer; }   /* tap, not grab, on the phone */
}

/* ---- Editing a card's wording ----
   The reMarkable misreads handwriting, so a card's text has to be correctable:
   open the p.N link to see the real page, then fix the words here. */

.edit-btn {
  margin-left: auto;            /* push to the right of the meta row */
  font-family: var(--rl-font-heading);
  font-size: 0.6875rem;
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-2);
  line-height: 1.6;
  cursor: pointer;
  opacity: 0;                   /* quiet until the card is hovered */
  transition: opacity 0.12s ease;
}

.card:hover .edit-btn,
.edit-btn:focus-visible { opacity: 1; }

.edit-btn:hover {
  color: var(--rl-retail-lime);
  border-color: var(--rl-retail-lime);
}

/* Touch has no hover, so on the phone the button is always visible. */
@media (hover: none) {
  .edit-btn { opacity: 1; }
}

.card-edit { display: flex; flex-direction: column; gap: var(--sp-2); }

.card-edit textarea {
  width: 100%;
  font-family: var(--rl-font-body);
  font-size: var(--rl-text-body);
  line-height: 1.4;
  color: var(--text-on-dark);
  background: var(--rl-surface-muted);
  border: 1px solid var(--rl-retail-lime);
  border-radius: var(--rl-radius);
  padding: var(--sp-2);
  resize: vertical;
}

.card-edit textarea:focus { outline: none; }

.card-edit-actions { display: flex; gap: var(--sp-2); }

.card-edit-actions button {
  font-family: var(--rl-font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border: none;
  border-radius: var(--rl-radius-pill);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}

.card-edit-actions .cancel {
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
}

/* ---- Park countdown / Unparked flags ---- */

.flag {
  font-family: var(--rl-font-heading);
  font-size: 0.6875rem;
  line-height: 1.6;
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-2);
  white-space: nowrap;
}

/* How long until it returns. Muted -- it is a status, not a call to action. */
.flag-park {
  color: var(--rl-text-muted);
  border: 1px solid var(--rl-border);
}

/* Came back on its own and has not been dealt with yet: worth the eye. */
.flag-unparked {
  color: var(--rl-retail-black);
  background: var(--rl-yellow);
  border: 1px solid var(--rl-yellow);
}

/* ---- Meeting report ---- */

.report-wrap { position: relative; }

.report-btn {
  font-family: var(--rl-font-body);
  font-size: 0.875rem;
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border: none;
  border-radius: var(--rl-radius);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}

.report-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-1));
  z-index: 15;
  width: 300px;
  max-width: 85vw;
  background: var(--rl-surface-card);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.report-panel button {
  font-family: var(--rl-font-body);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-2);
  cursor: pointer;
  white-space: nowrap;
}

.report-panel button.on {
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border-color: var(--rl-retail-lime);
}

.report-panel .report-send {
  width: 100%;
  margin-top: var(--sp-2);
  font-family: var(--rl-font-heading);
  font-weight: 600;
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border-color: var(--rl-retail-lime);
  padding: var(--sp-1) var(--sp-3);
}

.report-panel .report-send:disabled {
  color: var(--rl-text-muted);
  background: none;
  border-color: var(--rl-border);
  cursor: default;
}

.report-note { font-size: 0.75rem; color: var(--rl-text-muted); }

/* ---- Tagging a card from the allowed list ---- */

/* A tag chip is a <button> so it can be tapped, but it must look EXACTLY like
   the old <span>. Only browser button chrome is neutralised here: no font, no
   colour, no border, no padding -- those all come from .chip above, and
   restating them here (an earlier `font: inherit` did) silently resets .chip's
   font-size and line-height, which is what changed the look. */
.chip-btn {
  background: none;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.chip-empty {
  color: var(--rl-text-muted);
  background: none;
  border: 1px dashed var(--rl-border);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rl-border);
}

.card-tags button {
  font-family: var(--rl-font-body);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--rl-text-muted);
  background: none;
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-pill);
  padding: 0 var(--sp-2);
  cursor: pointer;
  white-space: nowrap;
}

.card-tags button.on {
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border-color: var(--rl-retail-lime);
}

.card-tags .card-tags-done {
  width: 100%;
  margin-top: var(--sp-1);
  color: var(--text-on-dark);
}

.card-tags-empty {
  font-size: 0.6875rem;
  color: var(--rl-text-muted);
}

/* ---- Token gate (first run of an installed app) ---- */

.token-gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--rl-retail-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  text-align: center;
}

.token-gate h2 {
  font-family: var(--rl-font-heading);
  font-size: var(--rl-text-subhead);
  font-weight: 600;
}

.token-gate p {
  max-width: 360px;
  font-size: 0.875rem;
  color: var(--rl-text-muted);
  line-height: 1.5;
}

.token-gate input {
  width: 100%;
  max-width: 360px;
  font-family: var(--rl-font-body);
  font-size: 0.875rem;
  color: var(--text-on-dark);
  background: var(--rl-surface-muted);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: var(--sp-3);
}

.token-gate input:focus {
  outline: none;
  border-color: var(--rl-retail-lime);
}

.token-gate button {
  font-family: var(--rl-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--rl-retail-black);
  background: var(--rl-retail-lime);
  border: none;
  border-radius: var(--rl-radius-pill);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: var(--rl-shadow-black);
  cursor: pointer;
}

.token-gate .gate-error { color: var(--rl-yellow); }

.token-gate .gate-version {
  font-family: var(--rl-font-heading);
  font-size: 0.6875rem;
  color: var(--rl-text-muted);
}

/* ---- Mobile action sheet (styled everywhere, shown only via JS) ---- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 20;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  background: var(--rl-surface-card);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius-card) var(--rl-radius-card) 0 0;
  padding: var(--sp-4);
}

.sheet-title {
  font-size: 0.875rem;
  color: var(--rl-text-muted);
  margin-bottom: var(--sp-3);
}

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sheet-actions button {
  font-family: var(--rl-font-body);
  font-size: 1rem;
  color: var(--text-on-dark);
  background: var(--rl-surface-muted);
  border: 1px solid var(--rl-border);
  border-radius: var(--rl-radius);
  padding: var(--sp-3);
  cursor: pointer;
  text-align: left;
}

.sheet-actions button:active { background: var(--rl-surface-footer); }

.sheet-actions .sheet-cancel {
  background: none;
  border: none;
  color: var(--rl-text-muted);
  text-align: center;
}