@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --navy: #252d52; --pink: #e0046f; --bg: #f3f3f3; --border: #b5b5b5; --text: #1f2330; --muted: #6b6f7b;
  --green: #43a646; --orange: #ff8d00; --blue: #1e8bf1; --red: #bf2424;
  --red-bg: #fdeaea; --amber-bg: #fff3dc; --amber: #8a5a00;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 "Open Sans", system-ui, sans-serif; background: var(--navy); color: var(--text); }

/* ---- top bar ---- */
.topbar { display: flex; align-items: center; gap: 10px; min-height: 59px; padding-right: 20px; color: #fff; flex-wrap: wrap; }
.brand { display: flex; align-items: center; padding: 0 22px 0 24px; }
.brand img { height: 30px; display: block; }
.topbar nav { display: flex; align-self: stretch; }
.topbar nav a { display: flex; align-items: center; padding: 0 15px; color: #fff; text-decoration: none; }
.topbar nav a.active { background: var(--pink); }
.spacer { flex: 1; }
.search { width: 180px; padding: 8px 16px; border: 0; border-radius: 999px; background: #fff; font: inherit; color: var(--text); }
.pill { padding: 6px 14px; border: 1px solid #fff; border-radius: 999px; color: #fff; text-decoration: none; font-size: 13px; }
a.pill:hover { background: rgba(255,255,255,.15); }
#user:empty { display: none; }

/* ---- page shell ---- */
.shell { margin-left: 24px; padding: 20px; background: var(--bg); border-radius: 24px 0 0 0; flex: 1 0 auto; }

/* Pages with a footer: the footer sits at the bottom of the screen even when the page is short. */
body.has-footer { display: flex; flex-direction: column; min-height: 100vh; }
.footer { display: flex; gap: 20px; padding: 14px 24px 18px; font-size: 13px; }
.footer a { color: #c5cde0; text-decoration: none; }
.footer a:hover, .footer a.active { color: #fff; text-decoration: underline; }
.panel { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 16px 20px; margin-bottom: 16px; }
.panel h2 { margin: 0 0 12px; font-size: 26px; font-weight: 400; }
h2 span { font-size: 18px; color: var(--muted); }

/* ---- stat tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.tile { background: #fff; border: 1px solid var(--border); border-radius: 4px; text-align: center; padding: 14px 8px 0; overflow: hidden; }
.tile .label { font-weight: 600; }
.tile .num { font-size: 40px; line-height: 1.2; font-weight: 400; margin-bottom: 10px; }
.tile::after { content: ""; display: block; height: 14px; margin: 0 -8px; background: var(--c); }

/* ---- needs attention ---- */
#attention { border-color: var(--red); }
#attention h2 { color: var(--red); font-size: 20px; font-weight: 600; }
#attention ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#attention li { display: flex; align-items: center; gap: 10px; }
#attention li a { color: var(--text); text-decoration: underline; cursor: pointer; flex: 1; }

/* ---- board ---- */
/* The columns share the page width, so the board never scrolls sideways. --cols is set from the number of columns.
   Wide screens: all in one row. Smaller screens: balanced rows (4 + 3). Phones: one column. */
#board { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 12px; align-items: start; padding-bottom: 8px; }
@media (max-width: 1179px) { #board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { #board { grid-template-columns: 1fr; } }
.column { min-width: 0; background: #ebebeb; border: 1px solid var(--border); border-radius: 4px; padding: 0 8px 8px; min-height: 140px; }
.column.over { outline: 2px dashed var(--blue); }
.column h3 { margin: 0 -8px 10px; padding: 10px 12px 8px; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 6px; overflow-wrap: anywhere; background: #fff; border-bottom: 5px solid var(--c); border-radius: 3px 3px 0 0; }
.column h3 span { color: var(--muted); font-weight: 400; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin-bottom: 8px; cursor: grab; overflow-wrap: anywhere; }
.card:hover { border-color: var(--navy); }
.card.dragging { opacity: .4; }
.card.due { border-left: 5px solid var(--red); }
/* The "Follow up on" date has arrived: the whole card goes red, with a red "Follow up" badge */
.card.follow-up { background: var(--red-bg); border-color: var(--red); }
.card.follow-up:hover { border-color: var(--red); filter: brightness(.97); }
.card .name { font-weight: 600; }
.card .meta { color: var(--muted); font-size: 12px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; background: #eceef2; color: var(--muted); }
.badge.due { background: var(--red-bg); color: var(--red); font-weight: 600; }
.badge.followup { background: var(--red); color: #fff; font-weight: 600; }
.badge.soon { background: var(--amber-bg); color: var(--amber); }

/* ---- buttons ---- */
button { font: inherit; padding: 6px 16px; border: 0; background: var(--pink); color: #fff; border-radius: 4px; cursor: pointer; }
button:hover { filter: brightness(.92); }
button.btn-done, a.btn-done { background: var(--green); }
a.btn-done { color: #fff; text-decoration: none; display: inline-block; }

#new-enquiry { border-radius: 999px; padding: 7px 16px; font-size: 14px; }

/* ---- enquiry page ---- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-head h1 { margin: 6px 0 2px; font-size: 32px; font-weight: 400; }
.back { color: var(--navy); font-size: 13px; text-decoration: none; }
.back:hover { text-decoration: underline; }
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.col { display: grid; gap: 16px; }
.col > .panel { margin-bottom: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.form-actions .form-error { margin: 0; }
.quick-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.quick-links .btn, .secondary-link { text-decoration: none; background: var(--navy); color: #fff; padding: 6px 16px; border-radius: 4px; }
.form-actions .secondary-link { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.page dl.facts { display: grid; grid-template-columns: 140px 1fr; gap: 6px 10px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.page dl.facts dt { color: var(--muted); }
.page dl.facts dd { margin: 0; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; padding: 10px 24px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.25); z-index: 10; }
.page .panel h2 { margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.page .panel .rms-title { margin-top: 4px; }
.page .reminder { margin-bottom: 12px; }
.page h3 { font-weight: 600; font-size: 16px; border-bottom: 5px solid var(--pink); padding-bottom: 6px; }
.page dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; margin: 12px 0; }
.page dt { color: var(--muted); }
.page dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.page label { display: grid; gap: 4px; margin: 10px 0; font-weight: 600; font-size: 12px; }
.page input, .page select, .page textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--border); border-radius: 4px; width: 100%; }
.page .activity { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.page .activity li { padding-left: 10px; border-left: 3px solid var(--navy); }
.page .activity .when { color: var(--muted); font-size: 12px; }
.page .form-error { color: var(--red); margin: 8px 0 0; min-height: 1em; }
.page .muted, .muted { color: var(--muted); font-size: 12px; margin: 2px 0; }
.rms-title { font-weight: 600; }
.rms-value { font-size: 28px; margin-top: 6px; }
.rms-value small { font-size: 12px; color: var(--muted); }
.rms-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rms-actions .btn { text-decoration: none; background: var(--navy); color: #fff; padding: 6px 16px; border-radius: 4px; }
button.secondary { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.rms-search { display: flex; gap: 8px; }
.page .rms-search input { flex: 1; }
.rms-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.rms-results li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.badge.source { background: var(--navy); color: #fff; font-weight: 600; }
.badge.task { background: #eef2f6; color: var(--navy); font-weight: 600; }
.badge.task.due { background: var(--red-bg); color: var(--red); }
.badge.ads { background: #e1f4e3; color: #1d6b25; font-weight: 600; }
.badge.assignee { background: #e8ecf8; color: var(--navy); font-weight: 600; }
.badge.rms { background: #e1f1fd; color: #0b5c99; font-weight: 600; }
.page label.choice { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; }
.page label.choice input { width: auto; }
.rms-create { margin-top: 12px; }
.page .danger-zone { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
button.danger { background: #fff; color: var(--red); border: 1px solid var(--red); }
.page .reminder { background: var(--red-bg); color: var(--red); padding: 8px 10px; border-radius: 4px; margin: 8px 0; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.page .reminder.soon { background: var(--amber-bg); color: var(--amber); }

/* ---- login ---- */
body.login { display: grid; place-items: center; min-height: 100vh; }
body.login main { background: #fff; padding: 32px 48px 40px; border-radius: 4px; text-align: center; min-width: 300px; }
body.login .logo { height: 44px; display: block; margin: 0 auto; }
body.login h1 { margin: 12px 0 20px; font-weight: 400; font-size: 26px; }
body.login .google { display: inline-block; padding: 10px 24px; background: var(--pink); color: #fff; border-radius: 4px; text-decoration: none; font-weight: 600; }
body.login #error { color: var(--red); max-width: 280px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }

  .shell { margin-left: 0; border-radius: 16px 16px 0 0; padding: 12px; }
  .topbar { padding: 8px 12px 10px; }
  .brand { padding: 0 8px 0 0; }
  .search { order: 5; width: 100%; }
}

.topbar nav a:not(.active):hover { background: rgba(255,255,255,.12); }
.settings-panel { max-width: 640px; }
.stage-row { display: grid !important; grid-template-columns: 180px 1fr; align-items: center; gap: 12px; }
.stage-row small { font-weight: 400; color: var(--muted); }
.page dl.facts.nolines { border-top: 0; padding-top: 0; margin-top: 8px; }
.code-box { width: 100%; font: 12px/1.45 ui-monospace, Menlo, monospace; padding: 10px; border: 1px solid var(--border); border-radius: 4px; background: #fafafa; resize: vertical; }
.settings-panel.wide { max-width: 900px; }

/* ---- settings: board columns ---- */
.col-row { display: grid; grid-template-columns: auto 44px minmax(120px, 1fr) auto auto auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.col-move { display: flex; flex-direction: column; line-height: 1; }
.col-move .icon-btn { font-size: 11px; padding: 1px 6px; }
.col-move .icon-btn:disabled, .icon-btn:disabled { opacity: .3; cursor: default; }
.page .col-row input.col-color { width: 44px; height: 34px; padding: 2px; cursor: pointer; }
.page .col-row .col-finished { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; font-size: 13px; white-space: nowrap; }
.page .col-row .col-finished input { width: auto; }
.col-count { white-space: nowrap; }
.col-add { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.page .col-add select { width: auto; }
.move-box { margin: 12px 0; padding: 12px 14px; background: var(--amber-bg); border: 1px solid var(--orange); border-radius: 4px; display: grid; gap: 8px; }
.page .move-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-weight: 400; font-size: 14px; }
.page .move-row select { width: auto; }
@media (max-width: 640px) { .col-row { grid-template-columns: auto 44px 1fr; } .col-row > :nth-child(n+4) { grid-column: 3; } }

/* ---- enquiry page: notes next to tasks ---- */
.grid-even { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.grid-even > .panel { margin-bottom: 0; }
.history { margin-top: 16px; }
.page .notes h2 .count { font-weight: 400; color: var(--muted); font-size: 16px; }
.note-add { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.note-add button { justify-self: start; }
.page .note-add select, .page .note-head select { width: auto; max-width: 100%; }
.notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.note { border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; background: #fff; }
.note-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 6px; }
.note-head .when { color: var(--muted); font-size: 12px; flex: 1; min-width: 120px; }
.page .note-head select { font-size: 12px; padding: 3px 6px; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.type-badge { display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
@media (max-width: 900px) { .grid-even { grid-template-columns: 1fr; } }

/* ---- tasks ---- */
.tasks-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tasks-head h2 { margin: 0; }
.tasks-head h2 span { font-weight: 400; color: var(--muted); font-size: 16px; }
.tasks-filters { display: flex; align-items: center; gap: 12px; }
.tasks-head button { white-space: nowrap; flex: none; }
.tasks select, .tasks input { font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; }
.page .tasks-done-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; margin: 0 0 8px; white-space: nowrap; }
.page .tasks-done-toggle input { width: auto; }
.task-brief { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; color: var(--muted, #6b778a); font-size: 13px; white-space: nowrap; }
.task-board.brief { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.task-board.brief .task-col .task { cursor: default; }
.task-board.brief .task-brief { grid-column: 2; justify-content: flex-start; }
.task-board.brief .task-col .see-all { margin-top: 8px; }
.task-board.brief .task-col-title { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; padding: 0 2px 6px; font-size: 14px; font-weight: 600; border-bottom: 4px solid var(--c, var(--navy)); }
.task-board.brief .task-col-title a { color: var(--navy); text-decoration: none; }
.task-board.brief .task-col-title span { color: var(--muted); font-weight: 400; }
.task-sections { display: grid; gap: 16px; }
.page .task-section-title { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); border-bottom: 3px solid var(--c, var(--border)); padding-bottom: 4px; }
.task-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.task-col { background: #ebebeb; background: color-mix(in srgb, var(--c, #6b778a) 10%, #ebebeb); border: 1px solid var(--border); border-radius: 4px; padding: 10px; min-width: 0; }
.task-col.over { outline: 2px dashed var(--blue); }
.page .task-col-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 2px 6px; font-size: 14px; font-weight: 600; border-bottom: 4px solid var(--c, var(--navy)); }
.page input.task-col-color { flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 2px solid #fff; border-radius: 50%; cursor: pointer; background: none; box-shadow: 0 0 0 1px var(--border); }
.task-col-color::-webkit-color-swatch-wrapper { padding: 0; }
.task-col-color::-webkit-color-swatch { border: 0; border-radius: 50%; }
.task-col-color::-moz-color-swatch { border: 0; border-radius: 50%; }
.page .task-col-title span { color: var(--muted); font-weight: 400; }
.page .task-col-title a { color: var(--navy); }
.task-col-add { display: block; width: 100%; margin-bottom: 8px; text-align: left; background: #fff; color: var(--muted); border: 1px dashed var(--border); font-weight: 400; }
.task-col-add:hover { color: var(--navy); border-color: var(--navy); filter: none; }
.task-col .task { cursor: grab; }
.task.dragging { opacity: .4; }
.task-col-body .task-enquiry { margin-left: 4px; }
/* With a mouse the column already says which group a task is in (and you drag to move it), so the dropdown is hidden to keep cards short.
   Touch screens can't drag, so they keep the dropdown. */
@media (hover: hover) and (pointer: fine) { .task-board.by-group .task-group { display: none; } }
.task-col-new { background: transparent; border-style: dashed; display: grid; place-items: center; min-height: 80px; }
.task-enquiry { margin: 10px 0 0 16px; padding-left: 12px; border-left: 3px solid var(--border); }
.task-enquiry:first-child { margin-top: 0; }
.task-sections .task-list + .task-enquiry { margin-top: 12px; }
.page .task-enquiry-title, .task-board.brief .task-enquiry-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.page .task-enquiry-title a, .page .task-section-title a, .task-board.brief .task-enquiry-title a { color: var(--navy); }
.page .task-enquiry-title span, .task-board.brief .task-enquiry-title span { color: var(--muted); font-weight: 400; }
.page .task-section-title span { color: var(--muted); font-weight: 400; }
#tasks-slot { margin-top: 16px; }
.group-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.group-row input { width: 100%; }
.group-row.with-color { grid-template-columns: 44px 1fr auto auto; }
.page .group-row input.col-color { width: 44px; height: 34px; padding: 2px; cursor: pointer; }
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.task input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.task-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; overflow-wrap: anywhere; }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.task-controls select, .task-controls input { width: auto; max-width: 150px; font-size: 12px; padding: 4px 6px; }
.icon-btn { background: none; color: var(--muted); border: 0; font-size: 20px; line-height: 1; padding: 0 6px; }
.icon-btn:hover { color: var(--red); filter: none; }
.see-all { display: inline-block; margin-top: 10px; color: var(--navy); font-size: 13px; }
/* Narrow places (phones, and the enquiry page's side column): the controls go under the title instead of beside it. */
.col .task, .grid-even .task, .task-col .task { grid-template-columns: auto 1fr; }
.col .task-controls, .grid-even .task-controls, .task-col .task-controls { grid-column: 1 / -1; justify-content: flex-start; }
@media (max-width: 640px) {
  .task { grid-template-columns: auto 1fr; }
  .task-controls { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Linking tasks to opportunities */
.task-controls .opp-btn { background: #fff; color: var(--navy); border: 1px dashed var(--navy); font-size: 12px; padding: 4px 8px; border-radius: 4px; }
.task-controls .opp-btn.set { background: #eef2f6; border-style: solid; font-weight: 600; }
.task-col-sub { margin: -4px 2px 8px; font-size: 13px; }
.opp-dialog { width: min(560px, 92vw); border: 1px solid var(--border); border-radius: 6px; padding: 0 0 16px; background: var(--bg); overflow: hidden; }
.opp-dialog h3 { margin: 0; padding: 16px 20px; background: var(--navy); color: #fff; font-size: 18px; font-weight: 600; border: 0; }
.opp-dialog > :not(h3) { margin-left: 20px; margin-right: 20px; }
.opp-dialog .rms-search { margin-top: 16px; }
.opp-dialog .rms-results { max-height: 50vh; overflow: auto; }
.opp-dialog .rms-search input { flex: 1; min-width: 0; width: auto; }

/* Opportunity tasks: a second list under the main one, and short cards on the homepage */
.opp-tasks { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.page h3.task-subhead, .task-subhead { margin: 0 0 4px; font-size: 18px; font-weight: 600; border-bottom: 0; padding-bottom: 0; }
.task-subhead span { color: var(--muted); font-weight: 400; }
.opp-tasks > h3.task-subhead { margin-bottom: 12px; }
.task-subgroup { margin-top: 10px; }
.task-subgroup:first-child { margin-top: 0; }
.page .task-subgroup-title, .task-board.brief .task-subgroup-title { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); border-bottom: 3px solid var(--c, var(--border)); padding-bottom: 3px; }
.page .task-subgroup-title span, .task-board.brief .task-subgroup-title span { color: var(--muted); font-weight: 400; }
.task-board.brief .task-col-title { flex-wrap: wrap; }


/* "+ Add task" side panel and the opportunity picker. They sit outside the page container, so they carry the page's
   field and label styles themselves: navy header bar like the top bar, a white card for the fields, a footer for the buttons. */
.drawer, .opp-dialog { font: 14px/1.45 "Open Sans", system-ui, sans-serif; color: var(--text); }
.drawer label, .drawer .drawer-field, .opp-dialog label { display: grid; gap: 4px; margin: 10px 0; font-weight: 600; font-size: 12px; }
.drawer input, .drawer select, .drawer textarea, .opp-dialog input { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--border); border-radius: 4px; width: 100%; max-width: none; background: #fff; }
.drawer .form-error, .opp-dialog .form-error { color: var(--red); margin: 4px 0 0; font-weight: 400; }
.drawer .muted, .opp-dialog .muted { color: var(--muted); font-size: 12px; margin: 2px 0; font-weight: 400; }
.drawer::backdrop, .opp-dialog::backdrop { background: rgba(0, 0, 0, .35); }

.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: none; width: min(420px, 100vw); border: 0; padding: 0; background: var(--bg); box-shadow: -4px 0 24px rgba(0, 0, 0, .25); animation: drawer-in .18s ease-out; }
.drawer[open] { display: flex; flex-direction: column; }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: 59px; padding: 0 12px 0 20px; background: var(--navy); color: #fff; }
.drawer-head h3 { margin: 0; font-size: 18px; font-weight: 600; color: #fff; border: 0; padding: 0; }
.drawer-head .icon-btn { color: #fff; font-size: 26px; }
.drawer-head .icon-btn:hover { color: #fff; opacity: .7; }
.drawer-body { flex: 1; overflow: auto; padding: 16px 20px; }
.drawer-body .panel { margin: 0; padding: 6px 20px 10px; }
.drawer-foot { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #fff; border-top: 1px solid var(--border); }
.drawer-opp { display: flex; align-items: center; gap: 6px; }
.drawer-opp .opp-pick { flex: 1; text-align: left; overflow-wrap: anywhere; font-weight: 400; padding: 7px 9px; border: 1px solid var(--border); color: var(--text); }
.drawer-opp .opp-pick:hover { border-color: var(--navy); filter: none; }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }

/* Drag a group column by its handle to reorder the groups */
.task-col-handle { flex: none; cursor: grab; color: var(--muted); font-size: 16px; line-height: 1; user-select: none; padding: 0 2px; }
.task-col-handle:hover { color: var(--navy); }
.task-col.dragging { opacity: .5; }

/* Click a task's title to edit it; details and checklist show under the title */
.task-title.editable { cursor: pointer; }
.task-title.editable:hover { text-decoration: underline dotted; }
.task-details { flex: 1 1 100%; color: var(--muted); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.task-checklist { flex: 1 1 100%; list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; }
.task-checklist label { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 400; margin: 0; cursor: pointer; }
.task .task-checklist input[type=checkbox] { width: 14px; height: 14px; margin: 2px 0 0; flex: none; }
.task-checklist li.done label { color: var(--muted); text-decoration: line-through; }
.drawer textarea { resize: vertical; }
.check-list { display: grid; gap: 6px; }
.check-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; }
.check-row.over { outline: 2px dashed var(--blue); outline-offset: 2px; }
.check-row.dragging { opacity: .5; }
.check-handle { cursor: grab; color: var(--muted); font-size: 16px; line-height: 1; user-select: none; }
.check-handle:hover { color: var(--navy); }
.drawer .check-row input[type=checkbox] { width: 16px; height: 16px; padding: 0; margin: 0; }

/* Current RMS attachments (view only) */
.attachments h2 .count { font-weight: 400; color: var(--muted); font-size: 16px; }
.attachments-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.attachments-list li { display: grid; gap: 1px; overflow-wrap: anywhere; }
.attachments-list a { color: var(--blue); font-weight: 600; }

/* The Current RMS card while it fetches the latest pricing */
.rms.refreshing { opacity: .65; }
.rms.refreshing::after { content: "Updating from Current RMS\2026"; display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* Editing a note in place */
.note-edit-btn { padding: 1px 10px; font-size: 12px; }
.note-edit { margin-top: 6px; }
.note-edit .form-actions { margin-top: 8px; }

/* Rich text notes: the editor and the saved note */
.rich-box { border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.rich-box:focus-within { outline: 2px solid var(--blue); outline-offset: 0; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); background: #f7f7f7; border-radius: 4px 4px 0 0; }
.rich-tool { padding: 2px 8px; font-size: 12px; border-radius: 3px; }
.rich-tool.tool-bold { font-weight: 800; }
.rich-tool.tool-italic { font-style: italic; }
.rich-tool.tool-underline { text-decoration: underline; }
.rich-tool.tool-strike { text-decoration: line-through; }
.rich-editor { min-height: 84px; max-height: 320px; overflow: auto; padding: 8px 10px; outline: none; overflow-wrap: anywhere; }
.rich-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.rich p, .rich div, .rich-editor p, .rich-editor div { margin: 0 0 6px; }
.rich > :last-child { margin-bottom: 0; }
.rich ul, .rich ol, .rich-editor ul, .rich-editor ol { margin: 0 0 6px; padding-left: 22px; }
.rich a, .rich-editor a { color: var(--blue); text-decoration: underline; }
.note-text.rich { white-space: normal; }