/* Sketch skin — translates the working app into the wireframe's paper-and-pen vocabulary.
   Loaded AFTER app.css to override visual styling while preserving structure & behavior. */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Nunito:wght@400;500;600;700;800&family=Architects+Daughter&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper:        #f6f1e7;
  --paper-2:      #efe8d8;
  --paper-3:      #e8e0cb;
  --bg:           #f6f1e7;
  --bg-2:         #efe8d8;
  --surface:      #fbf7ec;
  --surface-2:    #f3eddd;
  --border:       #b8b0a0;
  --border-2:     #2a2722;
  --ink:          #1f1d1a;
  --ink-2:        #5a544b;
  --ink-3:        #8a8478;
  --rule:         #2a2722;
  --rule-soft:    #b8b0a0;
  --accent:       oklch(0.62 0.13 35);   /* terracotta */
  --accent-bg:    color-mix(in oklab, oklch(0.62 0.13 35) 18%, var(--paper));
  --warm:         oklch(0.55 0.16 35);
  --warm-bg:      color-mix(in oklab, oklch(0.62 0.13 35) 22%, var(--paper));
  --yellow:       oklch(0.55 0.13 90);
  --yellow-bg:    color-mix(in oklab, oklch(0.86 0.12 95) 55%, var(--paper));
  --cool:         oklch(0.55 0.09 200);
  --cool-bg:      color-mix(in oklab, oklch(0.62 0.08 200) 22%, var(--paper));
  --danger:       oklch(0.5 0.18 25);
  --shadow:       1px 1.5px 0 rgba(31,29,26,0.10);
  --shadow-lg:    2px 3px 0 rgba(31,29,26,0.12), 4px 6px 18px rgba(31,29,26,0.10);
  --hand:         'Nunito', system-ui, sans-serif;
  --headline:     'Caveat', 'Nunito', cursive;
  --note:         'Nunito', system-ui, sans-serif;
  --font:         'Nunito', system-ui, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, monospace;
  --radius-irreg-1: 6px 8px 5px 9px / 8px 5px 9px 6px;
  --radius-irreg-2: 5px 7px 4px 8px / 7px 4px 8px 5px;
  --radius-irreg-3: 4px 6px 3px 7px / 6px 3px 7px 4px;
}

body {
  font-family: var(--hand);
  font-size: 13px;
  background: var(--paper);
  color: var(--ink);
  /* faint paper grain */
  background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-soft); border-radius: 5px; border: 2px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* ─── Sidebar ─────────────────────────── */
.sidebar {
  background: color-mix(in oklab, var(--paper) 70%, #ddd4bd);
  border-right: 1.5px solid var(--rule-soft);
  padding: 12px 10px;
  width: 230px;
  background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 4px 4px, auto;
}
.sb-section {
  font-family: var(--note);
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 12px 6px 4px;
  font-weight: 700;
}
.sb-section button {
  font-family: var(--hand);
  font-size: 16px;
  border: 1.25px solid var(--rule-soft);
  border-radius: 50% 60% 55% 65% / 60% 50% 65% 55%;
  width: 20px; height: 20px;
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.sb-section button:hover { background: var(--paper-2); border-color: var(--rule); color: var(--ink); }
.sb-item {
  padding: 5px 8px;
  border-radius: 4px 6px 3px 7px / 6px 3px 7px 4px;
  font-family: var(--hand);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  border: 1.25px solid transparent;
}
.sb-item:hover { background: rgba(31,29,26,0.04); color: var(--ink); }
.sb-item.active {
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  border: 1.25px solid var(--rule);
  color: var(--ink);
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.08);
  font-weight: 700;
}
.sb-item .count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  border: 1.25px solid var(--rule-soft);
  padding: 0 5px;
  border-radius: 8px 10px 7px 11px / 10px 7px 11px 8px;
  background: var(--paper);
}
.sb-color {
  width: 10px; height: 10px;
  border-radius: 50% 60% 55% 65% / 60% 50% 65% 55%;
  border: 1.25px solid var(--rule);
}

/* ─── Main + Topbar ───────────────────── */
.main { background: var(--paper); }
.topbar {
  height: auto;
  min-height: 62px;
  background: var(--paper);
  border-bottom: 1.5px solid var(--rule-soft);
  padding: 0 18px;
  gap: 14px;
  align-items: baseline;
}
/* Keep the sidebar header's bottom rule flush with the topbar's — this skin
   grows .topbar to min-height:62px (baseline-aligned title) and gives
   .sidebar a 12px top padding that pushes .sb-top down, so both need
   compensating here (not in the base stylesheet, which doesn't know about
   either override). */
.sb-top { height: 62px; margin-top: -12px; }
.topbar h1 {
  font-family: var(--hand);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
  align-self: center;
}
.topbar .sub {
  align-self: center;
  white-space: nowrap;
}
.topbar .sub {
  font-family: var(--note);
  font-size: 12px;
  color: var(--ink-3);
}

/* View picker — looks like tabs torn from a notebook */
.viewpicker {
  background: var(--paper-2);
  border: 1.5px solid var(--rule-soft);
  border-radius: var(--radius-irreg-2);
  padding: 3px;
  gap: 2px;
}
.viewpicker button {
  font-family: var(--hand);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 11px;
  color: var(--ink-2);
  border-radius: 4px 6px 3px 7px / 6px 3px 7px 4px;
}
.viewpicker button.active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  border: 1.25px solid var(--rule);
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.08);
}

/* Buttons — hand-drawn boxes */
.btn {
  font-family: var(--hand);
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 11px;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-irreg-2);
  color: var(--ink);
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.08);
}
.btn:hover {
  background: var(--paper-2);
  transform: translate(-0.5px, -0.5px);
  box-shadow: 1.5px 2px 0 rgba(31,29,26,0.10);
}
.btn:active {
  transform: translate(0.5px, 0.5px);
  box-shadow: 0.5px 0.5px 0 rgba(31,29,26,0.08);
}
.btn-primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn-primary:hover { background: #000; color: var(--paper); }
.btn-ghost {
  background: transparent;
  border: 1.5px dashed var(--rule-soft);
  box-shadow: none;
}
.btn-ghost:hover { background: var(--paper-2); border-style: solid; }
.btn-danger { color: var(--danger); border-color: var(--danger); }

/* Group pill */
.group-pill {
  background: var(--paper-2);
  border: 1.25px solid var(--rule-soft);
  border-radius: var(--radius-irreg-2);
  padding: 3px;
  font-family: var(--hand);
  font-size: 12px;
}
.group-pill .lab {
  font-family: var(--note);
  color: var(--ink-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 4px 3px 8px;
}
.group-pill button {
  font-family: var(--hand);
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 4px 6px 3px 7px / 6px 3px 7px 4px;
  color: var(--ink);
  white-space: nowrap;
}
.group-pill button:hover { background: var(--paper); }
.group-pill button.on { background: var(--ink); color: var(--paper); }
.group-pill button.on:hover { background: var(--ink-2); color: var(--paper); }

/* ─── Board ──────────────────────────── */
.board-wrap { background: var(--paper); padding: 14px; }
.board { gap: 10px; }
.lane-stack { gap: 10px; }

/* Lane row = the strip. Top + bottom + right borders, rounded right corners.
   The LEFT side is provided by the sticky label (which has rounded-left
   corners), so the row itself is left-open. The label's top+bottom borders
   align with the row's via negative vertical margin, so the horizontal
   lines flow continuously through the label and out across the lane. */
.lane-row {
  gap: 0;
  background: var(--paper);
  border: 1.25px solid var(--rule-soft);
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 8px 5px;
  border-bottom-right-radius: 5px 9px;
  padding: 0;
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.06);
}

/* Lane label = the rounded-left "cap" of the strip. Sticky to the left
   edge so it stays visible while scrolling. Its top+bottom borders are
   stretched to overlap the row's via margin:-1.25px so the lines fuse into
   one continuous horizontal stroke. Right edge has a dashed divider.
   No LEFT border — the rounded top-left + bottom-left corners are drawn
   by the top/bottom borders curving in; a visible left-edge line would
   double up against the row's interior and read as an extra notch. */
.lane-label {
  background: var(--paper);
  border-top: 1.25px solid var(--rule-soft);
  border-bottom: 1.25px solid var(--rule-soft);
  border-left: none;
  border-right: 1.25px dashed var(--rule-soft);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-family: var(--hand);
  font-size: 14px;
  font-weight: 800;
  width: 110px;
  padding: 12px 12px;
  margin: -1.25px 0;
  /* Subtle drop-shadow only on the right — indicates the label is floating
     over the columns when scrolled. */
  box-shadow: 4px 0 10px -2px rgba(31,29,26,0.10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.lane-label .lane-meta {
  font-family: var(--note);
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Columns: separated by dashed dividers inside the lane card. The row has
   padding:0 so the column provides its own breathing room around tiles. */
.column {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 10px 8px;
  width: 270px;
  gap: 8px;
}
.lane-row > .column + .column,
.board-columns > .column + .column {
  border-left: 1.25px dashed var(--rule-soft);
}
.column.drop-target {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}

/* Flat (non-grouped) board: border wraps only the columns, not the add-column button */
.board-columns {
  background: var(--paper);
  border: 1.25px solid var(--rule-soft);
  border-radius: var(--radius-irreg-1);
  padding: 8px;
  gap: 0; /* columns touch; dashed border-left provides the visual divider */
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.06);
  align-items: stretch;
}

/* Sidebar resize handle — sketch flavour */
.sb-resize-handle:hover,
.sb-resize-handle.dragging {
  background: color-mix(in oklab, var(--rule) 12%, transparent);
}
.col-head {
  font-family: var(--hand);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0 0 8px;
}
.col-head .count {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--paper);
  border: 1.25px solid var(--rule-soft);
  padding: 1px 7px;
  border-radius: 8px 10px 7px 11px / 10px 7px 11px 8px;
}

/* Cards — like index cards with hand-drawn borders */
.card {
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-irreg-2);
  padding: 9px 11px;
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.12);
  font-family: var(--hand);
  transition: transform 0.08s, box-shadow 0.08s;
}
.card:hover {
  border-color: var(--rule);
  transform: translate(-0.5px, -1px) rotate(-0.15deg);
  box-shadow: 2px 3px 0 rgba(31,29,26,0.14);
}
.card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}
.card-title {
  font-family: var(--hand);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 6px;
  letter-spacing: -0.1px;
}
.card-meta {
  font-family: var(--note);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  gap: 8px;
}
.add-card {
  font-family: var(--hand);
  font-size: 13px;
  color: var(--ink-3);
  padding: 6px 9px;
  border-radius: var(--radius-irreg-3);
  border: 1.25px dashed transparent;
}
.add-card:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule-soft);
}

/* Chips — hand-drawn pill tags */
.chip {
  font-family: var(--hand);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--paper);
  color: var(--ink-2);
  border: 1.25px solid var(--rule-soft);
  border-radius: 12px 14px 11px 15px / 14px 11px 15px 12px;
  line-height: 1.35;
}
.chip.warm {
  background: color-mix(in oklab, oklch(0.62 0.13 35) 22%, var(--paper));
  color: var(--ink);
  border-color: var(--accent);
}
.chip.yellow {
  background: color-mix(in oklab, oklch(0.86 0.12 95) 55%, var(--paper));
  color: var(--ink);
  border-color: oklch(0.7 0.12 95);
}
.chip.cool {
  background: color-mix(in oklab, oklch(0.62 0.08 200) 22%, var(--paper));
  color: var(--ink);
  border-color: var(--cool);
}
.chip.accent {
  background: color-mix(in oklab, oklch(0.62 0.13 35) 18%, var(--paper));
  color: var(--ink);
  border-color: var(--accent);
}

.prio-dot {
  width: 10px; height: 10px;
  border-radius: 50% 60% 55% 65% / 60% 50% 65% 55%;
  border: 1px solid rgba(0,0,0,0.15);
}
.prio-high { background: oklch(0.62 0.16 35); }
.prio-med  { background: oklch(0.86 0.12 95); }
.prio-low  { background: var(--ink-3); }

/* ─── Side panel ─────────────────────── */
.sp-overlay.open { background: rgba(31,29,26,0.06); }
.side-panel {
  width: 460px;
  background: var(--paper);
  background-image: radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px);
  background-size: 4px 4px;
  border-left: 1.5px solid var(--rule);
  box-shadow: -3px 0 0 rgba(31,29,26,0.04), -8px 0 24px rgba(31,29,26,0.10);
}
.sp-head {
  border-bottom: 1.5px solid var(--rule-soft);
  font-family: var(--note);
  font-size: 12px;
  color: var(--ink-2);
  padding: 14px 18px;
}
.sp-body { padding: 18px; }
.sp-body h2 {
  font-family: var(--hand);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
  border-radius: var(--radius-irreg-3);
  margin: 0 0 14px -6px;
  padding: 4px 6px;
}
.sp-body h2:hover { background: var(--paper-2); border: 1.25px dashed var(--rule-soft); }
.sp-body h2[contenteditable="true"]:focus { background: var(--paper); border: 1.5px solid var(--accent); }

.sp-section { margin-top: 22px; }
.sp-section-title {
  font-family: var(--note);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1.25px dashed var(--rule-soft);
  white-space: nowrap;
  gap: 8px;
}
.sp-section-title > span:first-child { white-space: nowrap; }

.field-row {
  font-family: var(--hand);
  font-size: 13px;
  padding: 6px 0;
}
.field-row .field-label {
  font-family: var(--note);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
}
.field-row .field-label .ctag {
  font-family: var(--note);
  font-size: 9px;
  color: var(--accent);
  border: 1.25px solid var(--accent);
  border-radius: 3px 4px 3px 5px;
  padding: 0 4px;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.3px;
}
.field-row .field-value input,
.field-row .field-value select {
  font-family: var(--hand);
  font-size: 13px;
  background: transparent;
  border: 1.25px solid transparent;
  border-radius: var(--radius-irreg-3);
  padding: 4px 7px;
  color: var(--ink);
}
.field-row .field-value input:hover,
.field-row .field-value select:hover {
  background: var(--paper-2);
  border-color: var(--rule-soft);
}
.field-row .field-value input:focus,
.field-row .field-value select:focus {
  background: var(--paper);
  border-color: var(--accent);
  outline: none;
}

/* Subtasks */
.subtask {
  border-bottom: 1px dashed var(--rule-soft);
  padding: 7px 0;
}
.subtask input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--rule);
  border-radius: 2px 3px 2px 4px;
  background: var(--paper);
  position: relative;
  cursor: pointer;
}
.subtask input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  left: 0; top: -8px;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.subtask .st-text {
  font-family: var(--hand);
  font-size: 13.5px;
  border-radius: var(--radius-irreg-3);
  padding: 3px 5px;
}
.subtask .st-text:hover { border: 1.25px solid var(--rule-soft); background: var(--paper-2); }
.subtask.done .st-text {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ink-2);
}
.subtask .st-del { color: var(--ink-3); }
.subtask .st-del:hover { background: var(--paper-2); color: var(--danger); }

.add-inline {
  font-family: var(--hand);
  font-size: 13px;
  background: transparent;
  border: 1.5px dashed var(--rule-soft);
  border-radius: var(--radius-irreg-3);
  padding: 6px 10px;
  color: var(--ink-3);
  margin-top: 6px;
}
.add-inline:hover {
  border-color: var(--rule);
  color: var(--ink);
  background: var(--paper-2);
}

.notes-area {
  font-family: var(--hand);
  font-size: 14px;
  line-height: 1.6;
  background: var(--paper);
  background-image:
    repeating-linear-gradient(transparent, transparent 22px, rgba(58, 96, 152, 0.18) 22px, rgba(58, 96, 152, 0.18) 23px);
  border: 1.5px solid var(--rule-soft);
  border-radius: var(--radius-irreg-2);
  padding: 8px 12px;
  color: var(--ink);
  min-height: 100px;
}
.notes-area:focus { background: var(--paper); border-color: var(--rule); outline: none; }

/* Worklog progress bar */
.worklog-bar {
  height: 6px;
  background: var(--paper-2);
  border: 1.25px solid var(--rule-soft);
  border-radius: 4px;
  overflow: hidden;
}
.worklog-bar > span { background: var(--ink); }
.worklog-bar.over > span { background: var(--accent); }

/* Timer button */
.timer-btn {
  font-family: var(--hand);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-irreg-2);
  border: 1.5px solid var(--ink);
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.20);
}
.timer-btn.running {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* Popover — looks like a folded sticky note */
.popover {
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-irreg-2);
  box-shadow: 2px 3px 0 rgba(31,29,26,0.12), 5px 8px 24px rgba(31,29,26,0.16);
  padding: 5px;
  font-family: var(--hand);
}
.popover .item {
  font-family: var(--hand);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--radius-irreg-3);
}
.popover .item:hover { background: var(--paper-2); }
.popover .sep { background: var(--rule-soft); height: 1px; }

/* Inputs in general */
input[type="text"], input[type="number"], input[type="date"], input[type="url"], textarea, select {
  font-family: var(--hand);
}
input:focus, textarea:focus, select:focus {
  outline: 1.5px solid var(--accent);
  outline-offset: -1px;
}

/* ─── List view ──────────────────────── */
.list-table {
  font-family: var(--hand);
  font-size: 13.5px;
}
.list-table th {
  font-family: var(--note);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-3);
  background: var(--paper);
  border-bottom: 1.5px solid var(--rule);
  padding: 10px 14px;
  font-weight: 400;
}
.list-table td {
  border-bottom: 1px dashed var(--rule-soft);
  padding: 9px 14px;
}
.list-table tbody tr:hover { background: var(--paper-2); }
.list-table .stage-row td {
  font-family: var(--hand);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  background: var(--paper-2);
  color: var(--ink);
  border-bottom: 1.5px solid var(--rule);
}

/* ─── Calendar ────────────────────────── */
.cal-grid {
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-irreg-1);
  overflow-x: hidden; overflow-y: auto;
  background: var(--paper);
}
.cal-head-row {
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--rule);
}
.cal-head-row > .cal-head {
  font-family: var(--note);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--ink-3);
  background: transparent;
  border-bottom: none;
  border-right: 1px dashed var(--rule-soft);
  padding: 7px 12px;
}
.cal-head-row > .cal-head:last-child { border-right: none; }
.cal-week {
  border-bottom: 1px dashed var(--rule-soft);
  min-height: 120px;
}
.cal-week:last-child { border-bottom: none; }
.cal-cell {
  font-family: var(--hand);
  padding: 5px 7px 2px;
}
.cal-daybg { background: var(--paper); }
.cal-daybg.other { background: var(--paper-2); }
.cal-cell .day-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.cal-cell.today .day-num {
  font-family: var(--hand);
  font-size: 13px;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50% 60% 55% 65% / 60% 50% 65% 55%;
  width: 22px; height: 22px;
}
.cal-span-bar {
  font-family: var(--hand);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid rgba(31,29,26,0.18);
  box-shadow: 0 1px 0 rgba(31,29,26,0.10);
}
.cal-span-bar.bar-starts               { border-radius: 8px 3px 3px 8px; }
.cal-span-bar.bar-ends                 { border-radius: 3px 8px 8px 3px; }
.cal-span-bar.bar-starts.bar-ends      { border-radius: 8px; }
.cal-more-chip {
  font-family: var(--hand);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px dashed var(--rule-soft);
}
.cal-more-chip:hover { background: var(--paper); color: var(--ink); }

.tl-group-label,
.tl-group-row {
  font-family: var(--hand);
  font-size: 12px;
  font-weight: 800;
  background: var(--paper-2);
  border-bottom: 1.25px solid var(--rule);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Timeline ────────────────────────── */
.tl-wrap {  border: 1.5px solid var(--rule);
  border-radius: var(--radius-irreg-1);
  background: var(--paper);
}
.tl-left { border-right: 1.5px solid var(--rule); background: var(--paper-2); }
.tl-left-head {
  font-family: var(--note);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-3);
  border-bottom: 1.5px solid var(--rule);
  font-weight: 400;
  height: 48px;
}
.tl-row-label {
  font-family: var(--hand);
  font-size: 13px;
  border-bottom: 1px dashed var(--rule-soft);
  height: 34px;
}
.tl-row-label:hover { background: var(--paper); }
.tl-head { height: 48px; background: var(--paper-2); border-bottom: 1.5px solid var(--rule); }
.tl-band {
  font-family: var(--hand);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  border-right: 1px dashed var(--rule-soft);
}
.tl-band.minor {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-3);
}
.tl-row { border-bottom: 1px dashed var(--rule-soft); height: 34px; }
.tl-grid-line { background: var(--rule-soft); opacity: 0.6; }
.tl-today { background: var(--accent); width: 2px; }
.tl-bar {
  font-family: var(--hand);
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px 6px 3px 7px / 6px 3px 7px 4px;
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.10);
}
.tl-bar .fill { opacity: 0.35; }

/* ─── Settings ───────────────────────── */
.settings-page { padding: 28px; }
.settings-page h2 {
  font-family: var(--hand);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.settings-page .sub {
  font-family: var(--note);
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.settings-card {
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-irreg-1);
  padding: 16px;
  box-shadow: 1px 1.5px 0 rgba(31,29,26,0.10);
  margin-bottom: 20px;
}
.row-edit {
  background: var(--paper-2);
  border: 1.25px solid var(--rule-soft);
  border-radius: var(--radius-irreg-3);
  padding: 7px 10px;
  font-family: var(--hand);
}
.row-edit .grip { color: var(--ink-3); font-size: 14px; }
.row-edit input[type="text"] {
  font-family: var(--hand);
  font-size: 13.5px;
  padding: 3px 5px;
  border-radius: 3px;
}
.row-edit input[type="text"]:focus { background: var(--paper); border: 1.25px solid var(--accent); }
.row-edit .type-pill {
  font-family: var(--note);
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
  background: var(--paper);
  border: 1.25px solid var(--rule-soft);
  border-radius: 3px 4px 3px 5px;
  padding: 1px 6px;
  color: var(--ink-2);
}

/* Toast — torn paper note */
.toast {
  font-family: var(--hand);
  font-size: 13px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-irreg-2);
  padding: 9px 16px;
  box-shadow: 2px 3px 0 rgba(31,29,26,0.20), 5px 8px 24px rgba(31,29,26,0.18);
}

/* Tilt cards by tiny random amounts using nth-child for organic feel */
.col-cards .card:nth-child(3n) { transform: rotate(-0.18deg); }
.col-cards .card:nth-child(3n+1) { transform: rotate(0.12deg); }
.col-cards .card:nth-child(3n+2) { transform: rotate(-0.06deg); }
.col-cards .card:hover { transform: translate(-0.5px, -1.5px) rotate(-0.3deg) !important; }
.col-cards .card.dragging { transform: rotate(2deg) !important; }