:root {
  --bg: #e9e4d8;
  --panel: #2f3640;
  --panel-2: #3a4250;
  --ink: #232830;
  --muted: #6b7280;
  --line: rgba(0, 0, 0, .12);
  --accent: #ffd45e;
  --danger: #d64545;
  --radius: 10px;
  --shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; }

/* The hidden attribute is only a UA-level `display: none`, so any class rule
   that sets display beats it. Anything toggled with `hidden` must stay hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* There is no header. Everything that used to live in it - the app name, the
   search box, alerts - is in the sidebar now, and the board gets the full
   height of the window. */

/* The mark is logo.svg, so the drawing lives in one file and the favicon,
   the sidebar and the sign-in page cannot drift apart. */
.brand-mark {
  width: 26px; height: 26px; flex: none;
  display: block;
}

.badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* -------------------------------------------------------------- layout */

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex: none;
  /* Right gutter keeps the rows clear of the hide tab, which is fixed. */
  padding: 14px 40px 24px 12px;
  background: var(--panel-2);
  color: #e7eaf0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: margin-left .18s ease;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.layout.collapsed .sidebar { margin-left: -240px; }

/* The only thing left outside the sidebar: a slim handle to bring it back. */
.side-show {
  position: fixed;
  top: 400px;
  left: 0;
  z-index: 40;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, .25));
  transition: transform .15s ease;
}
.side-show:hover { transform: translateX(3px); }

.side-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* The mirror of .side-show, at the same height: the tab reads as one thing that
   moves to the screen edge when the menu closes and comes back when it opens. */
.side-hide {
  position: fixed;
  top: 400px;
  left: 210px;
  z-index: 26;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
  filter: drop-shadow(-2px 3px 3px rgba(0, 0, 0, .25));
  transition: transform .15s ease;
}
.side-hide svg { transform: scaleX(-1); }
.side-hide:hover { transform: translateX(-3px); }
/* Fixed, so it will not slide out with the sidebar - drop it instead. */
.layout.collapsed .side-hide { display: none; }

.side-search input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.side-search input::placeholder { color: rgba(255, 255, 255, .5); }
.side-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.side-brand:hover { background: rgba(255, 255, 255, .08); }
.side-brand .brand-mark { width: 30px; height: 30px; border-radius: 7px; }
.side-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.side-brand-text strong { font-size: 16px; }
.side-brand-sub {
  font-size: 11px;
  color: #93a0b4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-guest {
  align-self: flex-start;
  margin: -4px 0 8px 4px;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #93a0b4;
  font-size: 11px;
  cursor: pointer;
}
.side-guest:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #aeb6c4;
  margin-bottom: 8px;
}

/* The heading is the fold handle: same caret as a board's, same behaviour. */
.sect-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.sect-toggle:hover { color: #fff; }
.sect-toggle .caret { transition: transform .12s ease; }
.side-section.folded .sect-toggle .caret { transform: rotate(-90deg); }
/* Fold everything but the heading, which stays as the handle to unfold by. */
.side-section.folded > *:not(.side-head) { display: none; }

.alert-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .25);
}

/* A heading partway down a section needs air above it; the first one does not. */
.side-section .side-head + .side-link { margin-top: 0; }
.side-link + .side-head { margin-top: 14px; }

.mini-btn {
  border: 1px solid rgba(255, 255, 255, .2);
  background: transparent;
  color: #e7eaf0;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}
.mini-btn:hover { background: rgba(255, 255, 255, .12); }

.board-tree { list-style: none; margin: 0; padding: 0; }

.board-row { display: flex; align-items: stretch; gap: 2px; }

/* Collapse a board that has sub boards, without opening it. */
.board-toggle {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: #93a0b4;
  cursor: pointer;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .12s ease;
}
.board-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.board-toggle.collapsed { transform: rotate(-90deg); }
/* Keeps names aligned when a board has no children to collapse. */
.board-toggle.empty { visibility: hidden; cursor: default; }

.board-open {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: left;
  border: 0;
  background: transparent;
  color: #e7eaf0;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.board-open:hover { background: rgba(255, 255, 255, .1); }
/* Rides the row's top right corner, in the gutter the hide tab leaves free,
   so it never lands on the note count. */
.board-open .alert-dot { top: -1px; right: -10px; }
.board-open.active { font-weight: 600; }
.board-open.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* Where the dragged board would land - a line on the edge it will sit against. */
.board-open.drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.board-open.drop-after { box-shadow: inset 0 -3px 0 var(--accent); }

/* Board names are bordered plaques, same object as the titles and the handle.
   The plaque carries the board's own colour, so the tree reads as the colours
   you picked rather than as a list of identical rows. */
.board-open .board-name {
  padding: 2px 12px;
  background: var(--note-bg, transparent);
  color: #33291a;
  border: 0.5px solid rgba(0, 0, 0, .35);
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-open:hover .board-name { border-color: #111; }
/* The open board is the same colour, called out by weight rather than by hue. */
.board-open.active .board-name {
  border-color: #111;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}

.board-tree .kids { list-style: none; margin: 0; padding-left: 14px; }

.side-link {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: #e7eaf0;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.side-link:hover { background: rgba(255, 255, 255, .1); }
.side-link.active { background: rgba(255, 255, 255, .16); font-weight: 600; }

/* Every Management row is icon + label, so they line up as one column. */
.side-label { display: inline-flex; align-items: center; gap: 8px; }
.side-label svg { flex: none; }
.alerts-link.unread .side-label { color: #ffd9d9; }

.count {
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 12px;
}

.side-status {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.side-conn { font-size: 12px; color: #cdd4e0; }
/* The dot is the whole control - hide the disclosure triangle. */
.side-conn > summary {
  display: inline-flex;
  align-items: center;
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
}
.side-conn > summary::-webkit-details-marker { display: none; }
.side-conn .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ccf7f;
  box-shadow: 0 0 0 3px rgba(76, 207, 127, .2);
  flex: none;
}
.side-conn.offline { color: #ffb3b3; }
.side-conn.offline .dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(214, 69, 69, .25); }

.side-foot { margin: 6px 0 0; font-size: 11px; color: #93a0b4; }

.content { flex: 1; padding: 18px; min-width: 0; }

.view-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
/* The view title is a bordered plaque with a hard offset shadow - the same
   outlined-object language as the sidebar handle and the board names. */
.view-head h2 {
  margin: 0;
  font-size: 20px;
  padding: 5px 14px;
  /* The board title takes the board's colour; the other views have no colour
     of their own and stay white. */
  background: var(--note-bg, #fff);
  border: 2px solid #111;
  border-radius: 8px;
  box-shadow: 3px 3px 0 #111;
}
/* The pencil rides inside the plaque, at the end of the name. */
.view-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.title-edit { color: rgba(0, 0, 0, .55); }
.title-edit svg { display: block; margin: 0 auto; }
#board-title-text:focus { outline: 2px solid #111; outline-offset: 2px; border-radius: 3px; }

.view-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.crumbs { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.crumbs button {
  border: 0; background: none; color: var(--muted);
  cursor: pointer; padding: 0; text-decoration: underline;
}

.btn {
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  background: var(--panel);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { background: rgba(0, 0, 0, .06); }
.btn.danger { color: var(--danger); border-color: rgba(214, 69, 69, .4); }

/* Icon-only actions. Square, so the three read as one set; the label lives in
   aria-label and the tooltip rather than on screen. */
.icon-action {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: none;
}
.icon-action svg { display: block; }
.icon-action.danger:hover { background: rgba(214, 69, 69, .1); }

.hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.view > .meta { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.restore-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }

/* The input takes the whole bar; the two controls are icons so the command
   line stays as long as possible - commands run to a sentence. */
.bot-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.bot-bar input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 15px;
}
.bot-bar input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Minimal: an outline until it is on, so "off" is the quiet state. */
.bot-toggle {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.bot-toggle:hover { border-color: var(--ink); color: var(--ink); }
.bot-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.bot-toggle svg { display: block; }
.bot-toggle.off .wave { display: none; }
.bot-toggle:not(.off) .mute { display: none; }

.bot-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}
.bot-note svg { flex: none; }
.bot-note b { font-weight: 600; color: var(--ink); }

/* A transcript, so you can see what you asked as well as what it did. */
.bot-log {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px 14px;
  max-height: 60vh;
  overflow-y: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
}
.bot-line { white-space: pre-wrap; word-break: break-word; }
.bot-line.echo { color: var(--ink); font-weight: 600; margin-top: 8px; }
.bot-line.good { color: #1c6b3a; }
.bot-line.bad { color: var(--danger); }
.bot-line.dim { color: var(--muted); }
.empty { color: var(--muted); }

/* --------------------------------------------------------------- notes */

.notes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.note {
  --note-bg: #ffe680;
  background: var(--note-bg);
  border-radius: 3px;
  padding: 10px 12px 12px;
  box-shadow: var(--shadow);
  width: 240px;
  min-height: 150px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transform: rotate(-.4deg);
  transition: box-shadow .12s ease;
  cursor: grab;
  /* Native corner handle; the card stores whatever size you drag it to. */
  resize: both;
  overflow: auto;
  min-width: 180px;
  max-width: 900px;
  max-height: 900px;
}
.note:nth-child(even) { transform: rotate(.5deg); }
.note:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, .22); }
.note.dragging { opacity: .45; }
.note.drop-before { box-shadow: -4px 0 0 var(--panel), var(--shadow); }

.note.min {
  min-height: 0;
  height: auto !important;
  resize: horizontal;
}
.note.min .note-body,
.note.min .note-foot,
.note.min .note-due,
.note.min .note-move,
.note.min .note-meta,
.note.min .note-image { display: none; }

/* attached image */
.note-image {
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, .06);
  cursor: zoom-in;
  flex: none;
}
.note-image img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.note.drop-image { outline: 3px dashed rgba(0, 0, 0, .45); outline-offset: -4px; }
.note.uploading { opacity: .6; }

.note.done .note-name { text-decoration: line-through; opacity: .6; }

.note-head { display: flex; align-items: flex-start; gap: 6px; }

.note-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  background: transparent;
  outline: none;
  min-width: 0;
  padding: 2px 0;
}

.note-btn {
  border: 0;
  background: rgba(0, 0, 0, .07);
  border-radius: 5px;
  width: 22px; height: 22px;
  line-height: 1;
  cursor: pointer;
  color: rgba(0, 0, 0, .6);
  flex: none;
}
.note-btn:hover:not(:disabled) { background: rgba(0, 0, 0, .16); }
.note-btn:disabled { opacity: .35; cursor: not-allowed; }

.lock-btn svg { display: block; margin: 0 auto; }
.lock-btn.on { background: rgba(0, 0, 0, .55); color: #fff; }
.lock-btn.on:hover:not(:disabled) { background: rgba(0, 0, 0, .7); }

.note-meta {
  font-size: 11px;
  color: rgba(0, 0, 0, .45);
  margin-top: -4px;
  flex: none;
}

/* locked notes read as fixed, not broken */
.note.locked { box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), var(--shadow); cursor: default; }
.note.locked .note-name,
.note.locked .note-body { cursor: default; }
.note.locked .note-status:disabled,
.note.locked .swatch:disabled { opacity: .55; cursor: not-allowed; }
.note.locked .note-due input:disabled { opacity: .6; }

.note-body {
  flex: 1;
  border: 0;
  background: transparent;
  resize: none;
  outline: none;
  font-size: 14px;
  line-height: 1.45;
  min-height: 60px;
  width: 100%;
}

/* due date */
.note-due { display: flex; align-items: center; gap: 5px; flex: none; }
.note-due label { font-size: 11px; color: rgba(0, 0, 0, .55); }
.note-due input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 6px;
  background: rgba(255, 255, 255, .5);
  color: inherit;
}
.note-due input:focus { outline: 2px solid rgba(0, 0, 0, .35); outline-offset: 1px; }

.note.overdue .note-due input { border-color: var(--danger); background: rgba(255, 214, 214, .85); }
.note.due-soon .note-due input { border-color: #c99700; background: rgba(255, 234, 184, .85); }

/* move a note to another board */
.note-move { display: flex; align-items: center; gap: 5px; flex: none; }
.note-move label { font-size: 11px; color: rgba(0, 0, 0, .55); flex: none; }
.note-move .board-pick {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 6px;
  background: rgba(255, 255, 255, .5);
  color: inherit;
}
.note-move .board-pick:focus { outline: 2px solid rgba(0, 0, 0, .35); outline-offset: 1px; }
.note-move .board-pick:disabled { opacity: .6; cursor: not-allowed; }

.modal .note-move .board-pick { font-size: 14px; padding: 6px 8px; }

.job-table .board-pick {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  max-width: 200px;
}

.due-flag {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.due-flag.overdue { background: var(--danger); color: #fff; }
.due-flag.soon { background: #ffcf4d; color: #6b4a00; }

.note-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.note-status {
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  font-size: 12px;
  padding: 2px 6px;
}

.swatches { display: flex; gap: 4px; margin-left: auto; }
.swatch {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .2);
  cursor: pointer;
  padding: 0;
}
.swatch[aria-pressed="true"] { outline: 2px solid rgba(0, 0, 0, .55); outline-offset: 1px; }

/* Board colour picker: same swatches as a note, but it sits in the board
   header rather than being pushed to the right of a card foot. */
.board-swatches { margin-left: 0; margin-right: 4px; align-self: center; }
.board-swatches .swatch { width: 17px; height: 17px; }


.c-yellow { --note-bg: #ffe680; }
.c-pink   { --note-bg: #ffb3c6; }
.c-blue   { --note-bg: #a8d8ff; }
.c-green  { --note-bg: #b8e986; }
.c-orange { --note-bg: #ffc48c; }
.c-purple { --note-bg: #d3b7ff; }

/* ----------------------------------------------------- all boards page */

.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  align-items: start;
}

.board-card {
  text-align: left;
  border: 1px solid var(--line);
  /* The board's colour rides on the top edge: enough to tell cards apart at a
     glance, without tinting the pills sitting on top of it. */
  border-top: 5px solid var(--note-bg);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px 14px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .07);
  transition: transform .12s ease, box-shadow .12s ease;
}
.board-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.board-card.child { border-left: 4px solid var(--accent); }

.board-card-name { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.board-card-name .parent-of { font-size: 11px; color: var(--muted); font-weight: 400; }

.board-card-counts { display: flex; gap: 6px; flex-wrap: wrap; }

.pill {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .06);
  color: var(--ink);
}
.pill.todo { background: #e3e8f0; }
.pill.doing { background: #cfe6ff; }
.pill.done { background: #d7f0cd; }
.pill.overdue { background: #ffd6d6; color: #8a1f1f; font-weight: 600; }
.pill.soon { background: #ffeab8; color: #7a5300; font-weight: 600; }

.board-card-empty { color: var(--muted); font-size: 13px; }

.board-card-swatches { display: flex; gap: 3px; }
.board-card-swatches span {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .12);
}

/* ---------------------------------------------------------- list views */

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.rows li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rows li.unread { border-left: 4px solid var(--danger); }
.rows .meta { color: var(--muted); font-size: 12px; }
.rows .spacer { margin-left: auto; }
.rows.log li { font-size: 13px; padding: 7px 10px; }

.sub-head {
  margin: 26px 0 4px;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sub-head:first-of-type { margin-top: 10px; }

.table-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.table-tools input[type="search"] {
  flex: 1 1 240px;
  max-width: 340px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.sort-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: inherit;
  letter-spacing: inherit;
}
.sort-btn:hover { text-decoration: underline; }
.sort-btn.active { color: var(--ink); font-weight: 700; }
.sort-btn.active[data-dir="asc"]::after { content: " \2191"; }
.sort-btn.active[data-dir="desc"]::after { content: " \2193"; }

.table-scroll { overflow-x: auto; margin-bottom: 8px; }

.job-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 14px;
  min-width: 860px;
}
.job-table th, .job-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.job-table th { background: rgba(0, 0, 0, .04); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.job-table tbody tr:last-child td { border-bottom: 0; }
.job-table tbody tr:hover { background: rgba(0, 0, 0, .03); }
.job-table .note-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.job-table .swatch-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 7px; border: 1px solid rgba(0, 0, 0, .15); vertical-align: middle;
}
.job-table input[type="datetime-local"], .job-table select {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.job-table tr.overdue td { background: rgba(255, 214, 214, .5); }
.job-table tr.due-soon td { background: rgba(255, 234, 184, .45); }
.job-table tr.locked .note-cell a { color: var(--muted); }
.job-table .note-btn { background: rgba(0, 0, 0, .06); }
.job-table .empty-row td { color: var(--muted); text-align: center; white-space: normal; }

.job-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.job-form input, .job-form select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.job-form input[name="name"] { flex: 1 1 180px; }
.job-form input[name="noteText"] { flex: 1 1 220px; }

/* --------------------------------------------------------------- misc */

.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 20; }

/* ---------------------------------------------------------------- login */

.login-page { display: grid; place-items: center; min-height: 100vh; padding: 20px; }

.login-card {
  width: min(360px, 100%);
  transform: rotate(-1deg);
  padding: 24px;
  cursor: default;
  resize: none;
  overflow: visible;
  min-height: 0;
}
/* Logo and wordmark on one line: the notebook is the mark, so it gets the room
   to read as one rather than sitting above the title as decoration. */
.login-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.login-mark { display: block; width: 64px; height: 64px; flex: none; }
.login-title { min-width: 0; }
.login-card h1 { margin: 0; font-size: 26px; line-height: 1.1; }
.login-sub { margin: 2px 0 0 !important; color: rgba(0, 0, 0, .55); font-size: 13px; }

/* Two tabs drawn as the paper's own divider: underline the live one, no boxes. */
.login-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.login-tab {
  border: 0;
  background: none;
  padding: 7px 10px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 14px;
  color: rgba(0, 0, 0, .5);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.login-tab:hover { color: rgba(0, 0, 0, .8); }
.login-tab.on { color: #33291a; font-weight: 700; border-bottom-color: #33291a; }

.login-card form { display: grid; gap: 12px; }
.login-field { display: grid; gap: 4px; }
.login-field > span { font-size: 12px; font-weight: 600; color: rgba(0, 0, 0, .6); }
.login-card input {
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, .25);
  border-radius: 8px;
  background: rgba(255, 255, 255, .7);
  font: inherit;
}
.login-card input:focus { outline: 2px solid #33291a; outline-offset: 1px; }
.login-go { justify-self: stretch; padding: 11px; font-weight: 700; }

.login-hint { margin: 0 !important; color: rgba(0, 0, 0, .55) !important; font-size: 12px; }

/* A text button, not a link: it switches view rather than going anywhere, so it
   must not look like something that can be opened in a new tab. */
.login-link {
  justify-self: start;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: rgba(0, 0, 0, .6);
  text-decoration: underline;
  cursor: pointer;
}
.login-link:hover { color: #33291a; }
.login-sent {
  margin: 14px 0 0 !important;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .65);
  font-size: 13px;
  color: #33291a !important;
}
.login-error { margin: 14px 0 0 !important; color: #8a1f1f !important; font-weight: 600; }

/* ------------------------------------------------------- expanded note */

.modal-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }

.modal.note {
  position: relative;
  width: min(720px, 100%);
  max-width: none;
  max-height: calc(100vh - 40px);
  height: auto;
  transform: none;
  resize: none;
  cursor: default;
  overflow: auto;
  padding: 16px 18px 18px;
  gap: 12px;
}
.modal.note:hover { box-shadow: var(--shadow); }

.modal-head { display: flex; align-items: center; gap: 8px; }
.modal-head .note-name { font-size: 20px; }

.modal.note .note-body { min-height: 180px; font-size: 15px; }

.modal-image { position: relative; }
.modal-image img {
  display: block;
  width: 100%;
  max-height: 45vh;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(0, 0, 0, .08);
}
.modal-image .btn { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, .9); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--panel);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 50;
  font-size: 14px;
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    z-index: 25;
    overflow-y: auto;
    box-shadow: var(--shadow);
  }
  .layout.collapsed .sidebar { margin-left: -240px; }

  .side-show, .side-hide { top: 200px; }

  /* The menu is an overlay here, so the button has nothing to step around. */
  .layout:not(.collapsed) ~ .alert-fab { left: 20px; }

  .content { padding: 14px 12px 40px; }
  /* No corner-drag on touch: cards take the full column width instead. */
  .notes { display: block; }
  .note {
    transform: none;
    width: auto !important;
    max-width: none;
    height: auto !important;
    resize: none;
    margin-bottom: 14px;
  }
  .modal-wrap { padding: 10px; }
  .modal.note { max-height: calc(100vh - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* -------------------------------------------------------------- chat bot */

.bot-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--panel);
  border: none;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
}
.bot-fab:hover { filter: brightness(1.05); }

/* Same object as the chat button, mirrored to the other corner. */
.alert-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  border: none;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
}
.alert-fab:hover { filter: brightness(1.15); }
/* Clear of the menu while it is open; it overlays the menu otherwise. */
.layout:not(.collapsed) ~ .alert-fab { left: 260px; }
.fab-badge { position: absolute; top: -2px; right: -2px; }

.bot-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 380px;
  height: 560px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
}
.bot-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--panel-2);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.bot-panel-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.bot-panel-frame { flex: 1; border: none; }

@media (max-width: 480px) {
  .bot-panel {
    width: calc(100vw - 24px);
    height: calc(100vh - 100px);
    right: 12px;
    bottom: 12px;
  }
  .bot-fab { right: 12px; bottom: 12px; }
  .alert-fab, .layout:not(.collapsed) ~ .alert-fab { left: 12px; bottom: 12px; }
}