/* 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);
}

.tag-filter {
  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-2);
}

.status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  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 */
.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);
}

@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 */
}

/* ---- 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;
}