/* P3 Nurture admin console */
:root {
	--bg: #f6f7fb;
	--surface: #ffffff;
	--surface-2: #f9fafc;
	--border: #e8eaf1;
	--border-strong: #d7dae4;
	--text: #0f172a;
	--text-2: #475569;
	--muted: #8a93a6;
	--accent: #5b5bf6;
	--accent-600: #4a48e0;
	--accent-50: #eef0ff;
	--accent-100: #e0e3ff;
	--green: #0f9f6e; --green-50: #e7f7f0;
	--red: #e5484d; --red-50: #fdeeee;
	--amber: #c77c02; --amber-50: #fdf5e4;
	--blue: #2f7de1; --blue-50: #e9f2fd;
	--violet: #8b5cf6; --violet-50: #f2edff;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
	--shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04);
	--shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);
	--sidebar: 256px;
	--font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-600); }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.015em; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
.i { flex-shrink: 0; vertical-align: middle; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }

/* ---------- Shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
	width: var(--sidebar); position: fixed; inset: 0 auto 0 0; z-index: 30;
	background: #0d1024; color: #c5c9d9; display: flex; flex-direction: column;
	padding: 18px 14px; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; color: #fff; }
.brand-mark {
	width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff;
	background: linear-gradient(135deg, #7c7cff 0%, #5b5bf6 45%, #c35bf6 100%); box-shadow: 0 6px 18px rgba(91, 91, 246, .45);
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: #7d839c; margin-top: -2px; }
.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #5f6580; padding: 16px 12px 6px; font-weight: 600; }
.nav a {
	display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: #b3b8cc; font-weight: 500;
	transition: background .15s, color .15s; margin-bottom: 2px;
}
.nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav a.active { background: rgba(124,124,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(124,124,255,.25); }
.nav a.active .i { color: #a5a6ff; }
.nav .count { margin-left: auto; font-size: 11px; background: rgba(255,255,255,.08); padding: 1px 7px; border-radius: 99px; color: #cfd3e3; }
.sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.me .avatar { background: #262a45; color: #d9dcf0; }
.me-email { font-size: 12px; color: #d9dcf0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.me a { margin-left: auto; color: #7d839c; }
.me a:hover { color: #fff; }

.main { flex: 1; margin-left: var(--sidebar); min-width: 0; }
.topbar {
	position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 32px;
	background: rgba(246,247,251,.82); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--border);
}
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.crumbs a { color: var(--text-2); }
.crumbs .i { opacity: .5; }
.topsearch { margin-left: auto; position: relative; width: 300px; }
.topsearch input { width: 100%; padding: 9px 12px 9px 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font: inherit; }
.topsearch .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.menu-toggle { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--text); }
.content { padding: 28px 32px 64px; width: 100%; max-width: none; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; font-weight: 700; }
.page-head p { margin: 4px 0 0; color: var(--text-2); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Cards / grid ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 20px; }
.grid > .card, .grid > * > .card:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-head h2, .card-head h3 { font-size: 15px; font-weight: 650; }
.card-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.card-body { padding: 20px; }
.card-foot { padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); display: flex; gap: 8px; justify-content: flex-end; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.stack > * + * { margin-top: 20px; }

.stat { padding: 18px 20px; position: relative; overflow: hidden; }
.stat-label { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 550; }
.stat-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-50); color: var(--accent); }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-top: 12px; line-height: 1.1; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.stat.green .stat-icon { background: var(--green-50); color: var(--green); }
.stat.amber .stat-icon { background: var(--amber-50); color: var(--amber); }
.stat.violet .stat-icon { background: var(--violet-50); color: var(--violet); }
.stat.blue .stat-icon { background: var(--blue-50); color: var(--blue); }
.stat.red .stat-icon { background: var(--red-50); color: var(--red); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border-radius: 10px;
	font: inherit; font-weight: 600; font-size: 13.5px; line-height: 1; cursor: pointer; white-space: nowrap;
	border: 1px solid transparent; transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(91,91,246,.3), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-primary:hover { background: var(--accent-600); color: #fff; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: #c5c9d6; }
.btn-danger { background: var(--surface); color: var(--red); border-color: #f3c9ca; }
.btn-danger:hover { background: var(--red-50); color: var(--red); }
.btn-soft { background: var(--accent-50); color: var(--accent-600); }
.btn-soft:hover { background: var(--accent-100); color: var(--accent-600); }
.btn-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; }
.btn-icon { padding: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.linkbtn.danger { color: var(--red); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
label, .label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text); }
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=datetime-local], input[type=search], input[type=color], select, textarea {
	width: 100%; padding: 10px 12px; font: inherit; color: var(--text); background: var(--surface);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s;
}
input[type=color] { padding: 4px; height: 42px; cursor: pointer; }
/* The search box in the header has the magnifying glass inside it, so it needs
   the room back that the rule above takes away. This has to come after that
   rule, not before it, or the glass sits on top of the placeholder. */
.topsearch input[type=search] { padding: 9px 12px 9px 36px; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(91,91,246,.14); }
.row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline > input, .inline > select { width: auto; flex: 1; min-width: 140px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; margin: 0; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; }
.check + .check { margin-top: 7px; }
.check + .field, .check + .row, .field + .check, .row + .check { margin-top: 14px; }
.checks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.checkcard { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; font-weight: 550; margin: 0; }
.checkcard:has(input:checked) { border-color: var(--accent); background: var(--accent-50); }
.checkcard input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 550; margin: 0; }
.switch input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 99px; background: #d5d8e2; position: relative; cursor: pointer; transition: background .2s; margin: 0; flex-shrink: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }

/* Rich text editor (ColdFusion cftextarea richtext / CKEditor) */
.editor-wrap { border-radius: var(--radius-sm); overflow: hidden; }
.editor-wrap .cke { width: 100% !important; border-color: var(--border-strong) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; }
.editor-wrap .cke_top { background: var(--surface-2) !important; border-bottom-color: var(--border) !important; }
.editor-wrap .cke_bottom { background: var(--surface-2) !important; border-top-color: var(--border) !important; }
.editor-wrap .cke_chrome { border: 1px solid var(--border-strong) !important; }
.merge-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.merge-tags button { font-family: var(--mono); font-size: 11.5px; padding: 4px 8px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 7px; cursor: pointer; color: var(--text-2); }
.merge-tags button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-50); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
table.t td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr { transition: background .12s; }
table.t tbody tr:hover { background: #fafbff; }
table.t .num { text-align: right; font-variant-numeric: tabular-nums; }

/* A ticket nobody has opened yet, read the way an unread email reads */
table.t tbody tr.row-unseen td { font-weight: 600; }
table.t tbody tr.row-unseen td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.t tbody tr.row-unseen .cell-sub { font-weight: 400; }

/* "Wrong ticket?" under an attached email - out of the way until wanted */
details.comms-move > summary { cursor: pointer; list-style: none; display: inline-block; margin-top: 6px; }
details.comms-move > summary::-webkit-details-marker { display: none; }
details.comms-move > summary:hover { color: var(--accent); }
.cell-main { font-weight: 600; color: var(--text); }
.cell-main:hover { color: var(--accent); }
.cell-sub { font-size: 12px; color: var(--muted); }
.person { display: flex; align-items: center; gap: 11px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--accent-50); color: var(--accent-600); flex-shrink: 0; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty .i { color: var(--border-strong); margin-bottom: 10px; }
.empty h3 { color: var(--text); font-size: 15px; margin-bottom: 4px; }

/* ---------- Pills / chips ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill::first-letter { text-transform: uppercase; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-green { background: var(--green-50); color: var(--green); }
.pill-red { background: var(--red-50); color: var(--red); }
.pill-amber { background: var(--amber-50); color: var(--amber); }
.pill-blue { background: var(--blue-50); color: var(--blue); }
.pill-violet { background: var(--violet-50); color: var(--violet); }
.pill-gray { background: #f0f1f5; color: #5c6479; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 7px; font-size: 12px; font-weight: 550; background: #f1f2f7; color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; margin: 2px 4px 2px 0; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.chip form { display: inline; margin: 0; }
.chip button { background: none; border: 0; padding: 0; margin-left: 2px; cursor: pointer; color: var(--muted); display: inline-flex; }
.chip button:hover { color: var(--red); }
.chip.tag { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-600); }

/* ---------- Tabs / filters ---------- */
.tabs { display: flex; gap: 4px; padding: 4px; background: #eceef4; border-radius: 11px; width: fit-content; margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 7px 14px; border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: 13px; }
.tabs a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.filters input, .filters select { width: auto; min-width: 160px; padding: 8px 11px; }
.filters .grow { flex: 1; min-width: 220px; }
.bulkbar { display: none; gap: 10px; align-items: center; padding: 10px 16px; background: var(--accent-50); border-bottom: 1px solid var(--accent-100); flex-wrap: wrap; }
.bulkbar.show { display: flex; }
.bulkbar select { width: auto; padding: 6px 10px; }

/* ---------- Alerts / flash ---------- */
.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-weight: 550; border: 1px solid; }
.flash-success { background: var(--green-50); color: #0b6e4d; border-color: #bfe8d6; }
.flash-error { background: var(--red-50); color: #b42318; border-color: #f6caca; }
.flash-info { background: var(--blue-50); color: #1d5fb0; border-color: #c7dcf6; }
.flash-warn { background: var(--amber-50); color: #8a5500; border-color: #f1dcae; }
.callout { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-2); font-size: 13px; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 0 0 18px; position: relative; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--border); }
.tl-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f0f1f5; color: #6b7389; flex-shrink: 0; }
.tl-dot.opt_in, .tl-dot.resubscribed, .tl-dot.created { background: var(--green-50); color: var(--green); }
.tl-dot.opt_out, .tl-dot.email_failed, .tl-dot.sequence_stopped { background: var(--red-50); color: var(--red); }
.tl-dot.email_sent { background: var(--accent-50); color: var(--accent); }
.tl-dot.email_opened { background: var(--blue-50); color: var(--blue); }
.tl-dot.link_clicked { background: var(--violet-50); color: var(--violet); }
.tl-dot.tag_added, .tl-dot.sequence_enrolled, .tl-dot.sequence_completed { background: var(--amber-50); color: var(--amber); }
.tl-dot.note { background: var(--blue-50); color: var(--blue); }
.tl-dot.task_created { background: var(--amber-50); color: var(--amber); }
.tl-dot.task_completed, .tl-dot.group_added { background: var(--green-50); color: var(--green); }
a.tl-text { text-decoration: none; border-radius: 7px; margin: -3px -7px; padding: 3px 7px; transition: background .12s ease; }
a.tl-text:hover { background: var(--surface-2); }
.tl-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; }
.tl-row > :first-child { min-width: 0; flex: 1; }
.tl-row > :last-child { flex-shrink: 0; }
.tl-dot.action, .tl-dot.ticket_created { background: var(--amber-50); color: var(--amber); }
.file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; text-decoration: none; }
.file-chip:hover { border-color: var(--accent); color: var(--accent); }
.file-chip span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip-size { color: var(--muted); font-weight: 500; flex-shrink: 0; }
.private-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 560px) { .tl-row { flex-wrap: wrap; } }
.tl-body { min-width: 0; padding-top: 3px; }
.tl-text { font-weight: 550; color: var(--text); word-break: break-word; }
.tl-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Misc components ---------- */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 10px; }
.bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar span { display: block; width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #8b8bff, var(--accent)); min-height: 3px; }
.bar small { font-size: 10.5px; color: var(--muted); }
.progress { height: 6px; background: #eceef4; border-radius: 99px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.step-card { display: flex; gap: 16px; align-items: stretch; }
.step-rail { display: flex; flex-direction: column; align-items: center; width: 40px; flex-shrink: 0; }
.step-num { width: 34px; height: 34px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.step-num.off { background: #cfd3de; }
.step-line { flex: 1; width: 2px; background: var(--border); margin-top: 6px; }
.step-delay { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); background: #f0f1f5; padding: 4px 10px; border-radius: 99px; margin: 0 0 10px; }
.step-body { flex: 1; min-width: 0; padding-bottom: 22px; }
.step-body .card { margin: 0; }
.metric-inline { display: flex; gap: 18px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.metric-inline b { color: var(--text); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.media-item { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.media-thumb { aspect-ratio: 4/3; background: repeating-conic-gradient(#f2f3f7 0% 25%, #fff 0% 50%) 50% / 16px 16px; display: grid; place-items: center; overflow: hidden; }
.media-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.media-meta { padding: 10px 12px; font-size: 12px; }
.media-meta .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-actions { display: flex; gap: 6px; padding: 0 12px 12px; }
.dropzone { border: 2px dashed var(--border-strong); border-radius: 14px; padding: 28px; text-align: center; background: var(--surface-2); }
.codebox { background: #0d1024; color: #d6d9f0; border-radius: 12px; padding: 16px; font-family: var(--mono); font-size: 12px; overflow-x: auto; white-space: pre; line-height: 1.6; }
.preview-frame { width: 100%; height: 720px; border: 0; border-radius: 0 0 var(--radius) var(--radius); background: #f3f4f8; display: block; }
.device-toggle { display: flex; gap: 4px; }
.sep { height: 1px; background: var(--border); margin: 18px 0; }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(13,16,36,.45); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-backdrop.show { display: flex; }
.modal { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); width: 100%; max-width: 860px; max-height: 88vh; display: flex; flex-direction: column; }
.modal .card-body { overflow-y: auto; }

/* ---------- Login ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-art {
	background: radial-gradient(1200px 600px at 10% 10%, rgba(124,124,255,.35), transparent 60%), radial-gradient(900px 500px at 90% 90%, rgba(195,91,246,.28), transparent 60%), #0d1024;
	color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-art h2 { font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; max-width: 460px; }
.auth-art p { color: #aab0c8; max-width: 420px; font-size: 15px; }
.auth-form { display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { font-size: 24px; margin-bottom: 6px; }

@media (max-width: 1100px) {
	.grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-main { grid-template-columns: 1fr; }
	.grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.sidebar { transform: translateX(-100%); transition: transform .2s; }
	.sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
	.main { margin-left: 0; }
	.menu-toggle { display: inline-flex; }
	.topbar { padding: 0 16px; }
	.topsearch { width: auto; flex: 1; }
	.content { padding: 20px 16px 48px; }
	.grid-2, .grid-3, .row, .row-3 { grid-template-columns: 1fr; }
	.auth { grid-template-columns: 1fr; }
	.auth-art { display: none; }
	.crumbs { display: none; }
}
@media (max-width: 520px) {
	.grid-4, .grid-5 { grid-template-columns: 1fr; }
	.page-head h1 { font-size: 22px; }
}

/* ---------------------------------------------------------------------------
   Clickable rows: the whole row opens the record, not just the name.
   Real links, buttons and form controls inside the row still do their own
   thing, and selecting text never navigates.
--------------------------------------------------------------------------- */
tr.row-link { cursor: pointer; }
tr.row-link:hover { background: var(--surface-2); }
tr.row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
tr.row-link a.cell-main { text-decoration: none; }

/* A row that opens its own detail rather than going somewhere. The cursor says
   "this expands", not "this navigates". */
tr.row-payload { cursor: zoom-in; }
tr.row-payload:hover { background: var(--surface-2); }
tr.row-payload:has(details[open]) { cursor: zoom-out; background: var(--surface-2); }
tr.row-payload summary { cursor: pointer; }

/* A submission on the contact record: the form name and when, and the fields
   they actually typed when you open it. */
.sub-entry { border-bottom: 1px solid var(--border); padding: 10px 0; }
.sub-entry:last-child { border-bottom: 0; }
.sub-entry > summary { cursor: pointer; list-style: none; display: flex;
	flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sub-entry > summary::-webkit-details-marker { display: none; }
.sub-entry > summary::before { content: "\25B8"; color: var(--muted); margin-right: 4px;
	transition: transform .15s ease; display: inline-block; }
.sub-entry[open] > summary::before { transform: rotate(90deg); }
.sub-entry > summary:hover .cell-main { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Drop zone: drag files in, or click to choose. Handles several at once.
--------------------------------------------------------------------------- */
.dropzone { position: relative; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--surface-2);
  padding: 18px 16px; text-align: center; color: var(--text-2); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover { border-color: var(--accent); background: var(--accent-50); }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-50); border-style: solid; }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-label { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; }
.dropzone-hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
.dropzone-files { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; text-align: left; }
.dropzone-file { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.dropzone-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone-file .size { color: var(--muted); font-weight: 500; margin-left: auto; flex-shrink: 0; }
.dropzone-file .over { color: var(--red); }

/* A composer modal is taller than a normal one */
.modal.modal-lg { max-width: 680px; }
.modal-scroll { max-height: 62vh; overflow-y: auto; }

/* ---------------------------------------------------------------------------
   Confirmation modal: replaces the browser's confirm() box, which cannot be
   styled and is barely readable on a phone. Driven by data-confirm in app.js.
--------------------------------------------------------------------------- */
.modal.modal-sm { max-width: 420px; }
.confirm-text { color: var(--text-2); font-size: 14px; margin: 0; }

/* ---------------------------------------------------------------------------
   Lists on a phone: a table wide enough for a desktop turns into one card per
   row instead of a sideways scroll. Add class "t-stack" to the table and give
   every cell a data-label, which becomes the little heading beside its value.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
	table.t.t-stack thead { display: none; }
	table.t.t-stack, table.t.t-stack tbody, table.t.t-stack tr, table.t.t-stack td { display: block; width: 100%; }
	table.t.t-stack tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
	table.t.t-stack tr:last-child { border-bottom: 0; }
	table.t.t-stack td { border-bottom: 0; padding: 5px 16px; text-align: left; }
	table.t.t-stack td.num { text-align: left; }
	table.t.t-stack td[data-label]::before {
		content: attr(data-label); display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em;
		text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
	}
	table.t.t-stack td[data-label="."]::before { content: none; }
	table.t.t-stack td:first-child { padding-top: 12px; }
	table.t.t-stack td:last-child { padding-bottom: 12px; }
	table.t.t-stack .cell-main { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Touch: a finger is not a mouse pointer. On anything without hover - iPhone,
   iPad - controls get a 44px target, and a modal uses the full width and the
   real viewport height, so the keyboard cannot push its buttons off screen.
--------------------------------------------------------------------------- */
@media (hover: none) {
	.btn { min-height: 44px; }
	.btn-sm { min-height: 38px; }
	.btn-icon { min-width: 44px; }
	table.t td a.cell-main { display: inline-block; padding: 2px 0; }
	input[type="text"], input[type="email"], input[type="password"], input[type="search"],
	input[type="number"], input[type="date"], select, textarea { font-size: 16px; min-height: 44px; }
	textarea { min-height: 88px; }
}
@media (max-width: 640px) {
	.modal-backdrop { padding: 0; align-items: flex-end; }
	.modal { max-width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; }
	.modal-scroll { max-height: 60dvh; }
	.modal .card-foot { position: sticky; bottom: 0; background: var(--surface-2); }
	.page-head { flex-wrap: wrap; gap: 12px; }
	.page-head .actions { width: 100%; }
	.page-head .actions .btn { flex: 1; justify-content: center; }
	.card-head { flex-wrap: wrap; gap: 10px; }
	.filters { flex-wrap: wrap; }
}

/* An archived row reads as set aside, not as live data */
tr.is-archived td { opacity: .62; }
tr.is-archived .cell-main { font-style: italic; }

/* A field group that belongs to another channel or provider is hidden, not
   removed - it still posts the value it already had. */
[data-channel-fields][hidden], [data-provider-fields][hidden] { display: none !important; }
[data-ticket-mode-fields][hidden], #messageTicketLinkThread[hidden] { display: none !important; }

/* Reply sits with the message it answers, not in the page header */
.bubble-reply { margin-top: 6px; }
.bubble-row.in .bubble-reply { text-align: left; }
.bubble-reply .btn { opacity: .75; }
.bubble-row:hover .bubble-reply .btn, .bubble-reply .btn:focus-visible { opacity: 1; }
.reply-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--border); background: var(--surface-2); }
.reply-bar .small { color: var(--muted); margin: 0; }
@media (max-width: 640px) {
	.reply-bar .btn { width: 100%; justify-content: center; }
}

/* Contact picker: a search that becomes a chosen contact */
.contact-picker { position: relative; }
.contact-picker-chosen { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); }
.contact-picker-chosen[hidden], .contact-picker-input[hidden], .contact-picker-results[hidden] { display: none !important; }
.contact-picker-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.contact-picker-who .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* In the flow, not floating: a floating list is clipped by a modal's scroll box,
   and on a phone there is nowhere for it to float to. */
.contact-picker-results { margin-top: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-sm); max-height: 260px; overflow-y: auto; padding: 4px; }
.contact-picker-option { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; }
.contact-picker-option:hover, .contact-picker-option:focus { background: var(--accent-50); outline: none; }
.contact-picker-option .cell-sub { font-size: 12px; }
.contact-picker-empty { padding: 10px 12px; color: var(--muted); font-size: 13px; }
@media (hover: none) { .contact-picker-option { min-height: 44px; } }

/* A ticket's communications: theirs plain, ours marked with the accent */
.comms-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.comms-row:last-child { border-bottom: 0; }
.comms-out { border-left: 3px solid var(--accent); padding-left: 12px; }
.comms-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); }
.comms-meta b { color: var(--text); }
.comms-subject { font-weight: 600; margin: 4px 0 2px; }
.comms-body { white-space: pre-wrap; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }

/* A tag that is also a link to everything else carrying it */
a.chip.chip-link { text-decoration: none; }
a.chip.chip-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-50); }
.contact-picker-heading { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* "Who is this?" - a text from a number that is not on any contact yet */
.assign-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 20px; border-left: 4px solid var(--accent, #6d5efc); }
.assign-banner-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; min-width: 0; }
.assign-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
	.assign-banner-actions { width: 100%; }
	.assign-banner-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Tag picker: chips and a search box that browses every tag */
.tag-picker { position: relative; min-width: 0; }
.tag-picker-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 42px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); cursor: text; }
.tag-picker-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); }
.tag-picker-chips { display: contents; }
.tag-picker-chips .chip { margin: 0; }
.tag-picker-chips .chip button { font-size: 15px; line-height: 1; padding: 0 2px; }
.tag-picker .tag-picker-input { flex: 1 1 120px; min-width: 100px; border: 0 !important; box-shadow: none !important; outline: none; padding: 4px 2px !important; background: transparent; min-height: 0; }
.tag-picker-results { margin-top: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-sm); max-height: 260px; overflow-y: auto; padding: 4px; }
.tag-picker-results[hidden] { display: none !important; }
.tag-picker-option { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; }
.tag-picker-option:hover, .tag-picker-option:focus { background: var(--accent-50); outline: none; }
.tag-picker-option .cell-sub { font-size: 12px; }
.tag-picker-create { border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; }
.tag-picker-create .cell-main { color: var(--accent-600); }
@media (hover: none) { .tag-picker-option { min-height: 44px; } }
.inline .tag-picker { flex: 1 1 200px; }
@media (hover: none) { .tag-picker-chips .chip button { min-width: 28px; min-height: 28px; } }
.bulkbar .tag-picker { flex: 0 1 300px; }

/* Relationship chips: lead, customer, past customer, partner, vendor, team */
.rel-chip .rel-via { color: var(--muted); font-weight: 500; }
.rel-chip.rel-customer { background: #e8f7f1; border-color: #c4ead9; color: #0b7a55; }
.rel-chip.rel-team { background: #e8f1fa; border-color: #c7dcf0; color: #004a85; }
.nav a.nav-sub { padding-left: 34px; font-size: 13px; }
.nav a.nav-sub svg { width: 15px; height: 15px; }

/* Archive: the strip over an archived list or record */
.archive-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; background: #fff7e6; border: 1px solid #f3dfb5; color: #7a5200; font-size: 13px; }
.archive-notice-text { flex: 1 1 240px; min-width: 0; }
.archive-notice svg { flex: none; }
tr.is-archived td { color: var(--muted); }

/* Sidebar groups: a heading that opens and closes its links */
.nav-group { margin-top: 2px; }
.nav .nav-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit; border-radius: 8px; }
.nav .nav-toggle:hover { color: #cfd3e3; }
.nav .nav-toggle:focus-visible { outline: 2px solid rgba(124,124,255,.5); outline-offset: -2px; }
.nav .nav-toggle > span:first-child { flex: 1; }
.nav .nav-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; opacity: .7; }
.nav-group.is-open > .nav-toggle svg { transform: rotate(90deg); }
.nav-group > .nav-items { display: none; }
.nav-group.is-open > .nav-items { display: block; }
.nav .nav-group-count { margin-left: 0; font-size: 10px; letter-spacing: 0; text-transform: none; }
.nav-group.is-open .nav-group-count { display: none; }

/* ======================================================================
   Tall modals scroll inside themselves. The form between the heading and
   the buttons has to share the modal's height too, or the body grows past
   the bottom of the window and the Save button can't be reached. The
   heading and the buttons stay put; the fields between them scroll. Any
   modal laid out differently still scrolls as a whole.
   ====================================================================== */
.modal { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal > .card-head, .modal > form > .card-foot, .modal > .card-foot { flex: none; }
.modal > .card-body, .modal > form > .card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal > form > .card-body.modal-scroll { max-height: none; }
@media (max-width: 640px) {
	.modal { max-height: 92dvh; }
}

/* Contact details: every email, number and address, each with a label */
.methods { padding-top: 6px; }
.methods-kind { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.methods-kind:first-child { margin-top: 0; }
.method-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.method-row:last-of-type { border-bottom: 0; }
.method-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13.5px; }
.method-label { flex: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); border-radius: 7px; font: inherit; font-size: 11.5px; font-weight: 550; padding: 2px 8px; cursor: pointer; }
.method-label.is-empty { border-style: dashed; color: var(--muted); background: none; }
.method-label:hover { border-color: var(--accent); color: var(--accent); }
.method-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.method-actions form { margin: 0; display: inline; }
.method-actions button { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 2px 4px; font-size: 15px; line-height: 1; display: inline-flex; }
.method-actions button:hover { color: var(--accent); }
.method-actions .method-remove:hover { color: var(--red); }
.method-primary { color: var(--violet, #7c3aed); font-size: 15px; padding: 2px 4px; }
.method-none { padding: 2px 0 4px; }
@media (hover: none) { .method-actions button { min-width: 36px; min-height: 36px; justify-content: center; } }

/* ======================================================================
   Phone fixes
   ====================================================================== */
/* Grid and form columns shrink to the screen instead of growing to their widest content */
.card, .stack > *, .grid > *, .row > *, .field { min-width: 0; }
input, select, textarea { max-width: 100%; }
.card-body { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
	.grid-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
	.grid-2, .grid-3, .row, .row-3 { grid-template-columns: minmax(0, 1fr); }
	.page-head .actions { flex-wrap: wrap; }
	.filters { flex-wrap: wrap; }
	.filters > * { min-width: 0; }
	.filters select { flex: 1 1 140px; }
	.bulkbar > * { min-width: 0; }
	.card-head { flex-wrap: wrap; }
}

/* The menu on a phone: a close button, and the page dims behind it */
.sidebar-close { display: none; margin-left: auto; background: none; border: 0; color: #cfd3e3; cursor: pointer; padding: 8px; border-radius: 8px; }
.sidebar-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-scrim { display: none; }
@media (max-width: 860px) {
	.sidebar-close { display: inline-flex; }
	.sidebar-head { display: flex; align-items: center; }
	.sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(13,16,36,.45); z-index: 29; opacity: 0; pointer-events: none; transition: opacity .2s; }
	body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
	body.sidebar-open { overflow: hidden; }
	.sidebar { overflow-y: auto; }
}

/* Lists as cards on a phone: tidy up what the desktop table needed */
@media (max-width: 640px) {
	table.t.t-stack td, table.t.t-stack td .nowrap { white-space: normal; }
	table.t.t-stack td:empty { display: none; }
	table.t.t-stack td.right { text-align: left; }
	table.t.t-stack tr.row-link { cursor: pointer; }
	.table-wrap { overflow-x: visible; }
	table.t.t-stack .person { min-width: 0; }
}

/* Sign-in on a phone: the brand goes above the form */
.auth-mobile-brand { display: none; }
@media (max-width: 860px) {
	.auth-form { place-items: start center; padding-top: 40px; }
	.auth-mobile-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
	.auth-mobile-brand .brand-mark { width: 40px; height: 40px; }
	.auth-mobile-brand .brand-name { font-weight: 700; font-size: 17px; color: var(--text); }
	.auth-mobile-brand .brand-sub { font-size: 12.5px; color: var(--muted); }
}

/* Back, where the breadcrumbs were, on a phone */
.topbar-back { display: none; align-items: center; gap: 2px; color: var(--text); font-weight: 600; font-size: 14px; padding: 6px 8px 6px 2px; border-radius: 8px; min-width: 0; white-space: nowrap; }
.topbar-back svg { transform: rotate(180deg); flex: none; }
.topbar-back span { overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
@media (max-width: 860px) {
	.topbar-back { display: inline-flex; }
}

/* Card rows, compact: the name across the top, the rest two to a line */
@media (max-width: 640px) {
	table.t.t-stack tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 2px; padding: 12px 16px; position: relative; }
	table.t.t-stack tbody td { padding: 4px 0 !important; min-width: 0; }
	table.t.t-stack tbody td.stack-main { grid-column: 1 / -1; order: -1; padding-bottom: 6px !important; }
	table.t.t-stack tbody td.stack-main::before { content: none; }
	table.t.t-stack tbody tr:has(td.stack-check) td.stack-main { padding-right: 36px !important; }
	table.t.t-stack tbody td.stack-check { position: absolute; top: 12px; right: 12px; width: auto; padding: 0 !important; }
	table.t.t-stack tbody td.stack-check::before { content: none; }
	table.t.t-stack tbody td[data-label]::before { font-size: 10.5px; margin-bottom: 1px; }
}
.sidebar-head .sidebar-close { align-self: flex-start; margin-top: 4px; }

/* Metric cards that open the list behind the number */
a.card.stat-link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.card.stat-link:hover { border-color: var(--accent-100); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
a.card.stat-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.card.stat-link .stat-label::after { content: "\203A"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--muted); opacity: .6; }
a.card.stat-link .stat-label { display: flex; align-items: center; gap: 8px; }
a.card.stat-link.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); }
.filter-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--accent-50); border: 1px solid var(--accent-100); color: var(--accent-600); font-size: 13px; }
.filter-notice a { margin-left: auto; font-weight: 600; }
.sort-select { width: auto; }

/* Columns button on list pages */
details.col-picker { position: relative; display: inline-block; }
details.col-picker > summary { list-style: none; cursor: pointer; }
details.col-picker > summary::-webkit-details-marker { display: none; }
details.col-picker[open] > summary { background: var(--surface-2); }
.col-picker-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 240px; max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; text-align: left; }
.col-picker-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.col-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 6px; }
.col-picker-item:hover { background: var(--surface-2); }
.col-picker-item input { width: auto; margin: 0; }
.col-picker-note { font-size: 12px; color: var(--muted); margin: 8px 4px 10px; }
.col-picker-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Columns menu, part two: a name box beside each tick, and a default sort */
.col-picker-menu { width: 300px; }
.col-picker-hint { font-size: 12px; color: var(--muted); margin: 0 4px 8px; }
.col-picker-row { display: grid; grid-template-columns: 1fr 108px; align-items: center; gap: 8px; }
.col-picker-row .col-picker-item { min-width: 0; }
.col-picker-row .col-picker-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-picker-name { width: 100%; font-size: 13px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.col-picker-name::placeholder { color: var(--muted); opacity: .7; }
.col-picker-name:focus { outline: none; border-color: var(--accent); }
.col-picker-sort { width: 100%; font-size: 13px; padding: 5px 7px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.col-picker-actions { flex-wrap: wrap; }

/* The grip you drag to resize a column. Desktop only - the script adds it. */
table.t th { position: relative; }
.col-grip { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; }
.col-grip::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 4px; width: 1px; background: var(--border); opacity: 0; transition: opacity .12s ease; }
table.t th:hover .col-grip::after, .col-resizing .col-grip::after { opacity: 1; }
.col-grip:hover::after { background: var(--accent); opacity: 1; width: 2px; }
/* while dragging, nothing else on the page should highlight or select */
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing a, body.col-resizing .col-grip { pointer-events: none; }

/*
	A table nobody has resized is left exactly as it was - automatic layout,
	sized to its content. The moment one is resized it switches to fixed
	layout, because under the automatic algorithm a width on a cell is only a
	suggestion and the browser had been quietly overruling every drag.
*/
table.t.cols-sized { table-layout: fixed; }
table.t.cols-sized th { overflow: hidden; text-overflow: ellipsis; }
table.t.cols-sized td { overflow: hidden; }
table.t.cols-sized td .cell-main,
table.t.cols-sized td .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Source cell: the website as a chip, the form beside it, one line */
.src-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.src-site { flex: none; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); white-space: nowrap; }
.src-form { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
	.col-picker-menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
}

/* Clickable column headings */
table.t th a.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
table.t th a.th-sort:hover { color: var(--accent); }
table.t th a.th-sort .th-arrow { font-size: 11px; min-width: 8px; }
table.t th a.th-sort.is-sorted { color: var(--text); }
table.t th a.th-sort.is-sorted .th-arrow { color: var(--accent); }
table.t th a.th-sort:not(.is-sorted):hover .th-arrow::after { content: "\2195"; opacity: .5; }

/* "From this device" buttons beside the composer */
.device-send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.device-send-label { font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.modal .device-send { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }

/* Page browser under lists */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; width: 100%; }
.pager-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; text-decoration: none; }
a.pager-link:hover { border-color: var(--accent); color: var(--accent); }
.pager-link.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager-link.is-off { opacity: .4; cursor: default; }
.pager-gap { padding: 0 4px; color: var(--muted); }
.pager-jump { width: auto; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 13px; margin-left: 4px; }
@media (max-width: 640px) {
	.pager { justify-content: center; }
	.pager-num { display: none; }
	.pager-link.is-current { display: inline-flex; }
}

/* ---------------- Projects: timeline (Gantt) ---------------- */
.gantt { min-width: 720px; font-size: 13px; }
.g-head, .g-row { display: flex; align-items: stretch; }
.g-label { width: 260px; flex-shrink: 0; padding: 6px 10px 6px 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.g-head .g-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.g-num { color: var(--muted); font-size: 11px; width: 20px; flex-shrink: 0; text-align: right; }
.g-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.g-who { color: var(--muted); font-size: 11px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.g-track { position: relative; flex: 1; min-height: 32px; border-left: 1px solid var(--border); }
.g-row { border-top: 1px solid var(--border); }
.g-row:hover { background: var(--surface-2); }
.g-scale { height: 40px; }
.g-month { position: absolute; top: 2px; font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; padding-left: 3px; border-left: 1px solid var(--border); }
.g-day { position: absolute; top: 22px; font-size: 10px; color: var(--muted); padding-left: 2px; }
.g-week { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .6; }
.g-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #2563eb; opacity: .7; z-index: 2; }
.g-deadline { position: absolute; top: 0; bottom: 0; width: 2px; background: #dc2626; z-index: 2; }
.g-bar { position: absolute; top: 8px; height: 16px; border-radius: 6px; background: #c7c9fb; overflow: hidden; z-index: 1; min-width: 4px; }
.g-bar .g-fill { display: block; height: 100%; background: var(--accent); }
.g-bar.is-critical { background: #fca5a5; }
.g-bar.is-critical .g-fill { background: #dc2626; }
.g-bar.is-done { background: #86efac; }
.g-bar.is-done .g-fill { background: #16a34a; }
.g-bar.is-late { box-shadow: 0 0 0 2px #dc2626; }
.g-milestone { position: absolute; top: 9px; width: 14px; height: 14px; background: var(--text); transform: rotate(45deg); border-radius: 2px; z-index: 1; }
.g-milestone.is-critical { background: #dc2626; }
.g-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px 0 0; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.g-key { display: inline-block; width: 22px; height: 10px; border-radius: 4px; background: var(--accent); }
.g-key.is-critical { background: #dc2626; }
.g-key.is-done { background: #16a34a; }
.g-key-ms { display: inline-block; width: 10px; height: 10px; background: var(--text); transform: rotate(45deg); }
.g-key-line { display: inline-block; width: 2px; height: 14px; }
.g-key-line.today { background: #2563eb; }
.g-key-line.deadline { background: #dc2626; }
@media (max-width: 640px) { .g-label { width: 170px; } .g-who { display: none; } }

/* the "waits for" checklist in the task window */
.pred-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; background: var(--surface-2); }
.pred-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.pred-row:last-child { border-bottom: 0; }

/* ---------------- Client portal ---------------- */
.portal-body { background: var(--bg, #f5f6fa); min-height: 100vh; display: flex; flex-direction: column; }
.portal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.portal-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.portal-brand b { display: block; font-size: 15px; }
.portal-brand small { display: block; font-size: 12px; color: var(--muted); }
.portal-nav { display: flex; gap: 16px; font-size: 14px; font-weight: 600; }
.portal-nav a { color: var(--text-2); text-decoration: none; }
.portal-nav a:hover { color: var(--accent); }
.portal-main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 24px 16px 48px; flex: 1; }
.portal-h1 { font-size: 26px; font-weight: 700; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.portal-auth { max-width: 420px; margin: 40px auto; }
.portal-auth h1 { font-size: 24px; margin: 0 0 6px; }
.portal-foot { text-align: center; font-size: 12px; color: var(--muted); padding: 18px; }
.portal-step, .portal-project { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.portal-step:last-child, .portal-project:last-child { border-bottom: 0; }
.portal-step .cell-sub, .portal-project .cell-sub { display: block; }
.portal-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-50); color: var(--accent-600); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-step.is-done .portal-step-num { background: #dcfce7; color: #16a34a; }
.portal-step-dot { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
.portal-step-dot.is-task { background: var(--accent); }
.portal-task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.portal-task:last-child { border-bottom: 0; }
.portal-task .cell-sub { display: block; }
@media (max-width: 640px) { .portal-top { padding: 12px 16px; } .portal-task, .portal-project { flex-wrap: wrap; } }

/* ---------------- Client onboarding checklist (portal) - phone first ---------------- */
.onb-hero { display: flex; align-items: center; gap: 18px; margin: 4px 0 16px; }
.onb-hero h1 { font-size: 26px; margin: 0 0 4px; line-height: 1.2; }
.onb-hero p { margin: 0; color: var(--text-2); font-size: 15px; }
.onb-ring { --pct: 0; width: 92px; height: 92px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
	background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--border) 0); }
.onb-ring > span { width: 74%; height: 74%; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.onb-ring b { font-size: 20px; }
.onb-ring small { font-size: 11px; color: var(--muted); }
.onb-ring-sm { width: 54px; height: 54px; }
.onb-ring-sm b { font-size: 13px; }
.onb-helper { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; }
.onb-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-50); color: var(--accent-600); font-weight: 800; font-size: 18px; display: grid; place-items: center; flex-shrink: 0; }
.onb-helper-text { flex: 1; min-width: 0; }
.onb-helper-text b { display: block; }
.onb-helper-text span { display: block; font-size: 13px; color: var(--muted); }
.onb-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.onb-step { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; scroll-margin-top: 16px; }
.onb-step summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; min-height: 64px; }
.onb-step summary::-webkit-details-marker { display: none; }
.onb-num { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; background: var(--accent-50); color: var(--accent-600); }
.onb-step.is-done .onb-num { background: #dcfce7; color: #16a34a; }
.onb-step.is-sent .onb-num { background: #fef3c7; color: #b45309; }
.onb-title { flex: 1; min-width: 0; }
.onb-title b { display: block; font-size: 15.5px; line-height: 1.3; }
.onb-step.is-done .onb-title b { color: var(--muted); }
.onb-title small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.onb-chev { color: var(--muted); transition: transform .15s ease; flex-shrink: 0; }
.onb-step details[open] .onb-chev { transform: rotate(180deg); }
.onb-body { padding: 0 16px 18px 62px; display: flex; flex-direction: column; gap: 12px; }
.onb-instructions { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; }
.onb-note { margin: 0; font-size: 14px; color: var(--text-2); display: flex; gap: 8px; align-items: flex-start; }
.onb-small { margin: 0; font-size: 12.5px; color: var(--muted); }
.onb-btn { min-height: 46px; justify-content: center; font-size: 15px; width: 100%; }
.onb-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.onb-form textarea { width: 100%; font-size: 16px; }
.onb-invite { background: var(--bg, #f5f6fa); border: 1px dashed var(--border-strong, #cfd3de); border-radius: 12px; padding: 10px 12px; }
.onb-invite small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.onb-invite-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.onb-invite code { font-size: 15px; font-weight: 700; word-break: break-all; background: none; padding: 0; }
.onb-file { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border: 2px dashed var(--border-strong, #cfd3de); border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--text-2); position: relative; padding: 10px; text-align: center; }
.onb-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.onb-support .onb-channel { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.onb-support .onb-channel:last-of-type { border-bottom: 0; }
.onb-channel b { display: block; font-size: 14.5px; }
.onb-channel span { display: block; font-size: 13.5px; color: var(--accent-600); word-break: break-word; }
.onb-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 20px; text-decoration: none; color: var(--text); border: 1px solid var(--accent-50); }
.onb-banner-text { flex: 1; min-width: 0; }
.onb-banner-text b { display: block; }
.onb-banner-text small { display: block; color: var(--muted); font-size: 13px; }
@media (min-width: 720px) {
	.onb-btn { width: auto; align-self: flex-start; padding-left: 22px; padding-right: 22px; }
	.onb-steps { gap: 12px; }
}
@media (max-width: 420px) {
	.portal-brand > span:last-child { display: none; }
}
@media (max-width: 640px) {
	.portal-main { padding: 16px 12px 40px; }
	.onb-hero { gap: 14px; }
	.onb-hero h1 { font-size: 22px; }
	.onb-ring { width: 76px; height: 76px; }
	.onb-body { padding: 0 14px 16px 14px; }
	.onb-helper { flex-wrap: wrap; }
	.onb-helper .onb-btn { width: 100%; }
	.portal-nav { gap: 12px; font-size: 13px; }
	.portal-nav a { white-space: nowrap; }
	.portal-brand b { white-space: nowrap; }
	.portal-brand small { display: none; }
	.onb-ring b { font-size: 17px; }
}

/* ---------------------------------------------------------------------------
   The picker: a category, an item, an Add button, and what has been picked
   listed underneath with an X on each row. Used where a long list of
   checkboxes would otherwise take over the page (Website > Social proof).
   --------------------------------------------------------------------------- */
.picker-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.picker-pick select { flex: 1 1 160px; min-width: 0; }
.picker-pick .btn { flex: 0 0 auto; }
.picker-chosen { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.picker-row {
	display: flex; align-items: center; gap: 10px;
	background: var(--surface-2); border: 1px solid var(--border);
	border-radius: 9px; padding: 7px 8px 7px 12px; font-size: 14px;
}
.picker-row > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.picker-row .btn { flex: 0 0 auto; }
.picker-empty { margin: 2px 0 0; }
@media (max-width: 560px) {
	.picker-pick select { flex: 1 1 100%; }
	.picker-pick .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   The dashboard grid: four columns, each card taking one to four of them.
   A card's width is a class (span-1 .. span-4) so the page arrives already
   laid out, and app.js only changes the class when you press + or −.
   --------------------------------------------------------------------------- */
.dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dash-w { position: relative; min-width: 0; grid-column: span 1; }
.dash-w.span-1 { grid-column: span 1; }
.dash-w.span-2 { grid-column: span 2; }
.dash-w.span-3 { grid-column: span 3; }
.dash-w.span-4 { grid-column: span 4; }
.dash-w > .card { margin: 0; height: 100%; }

/* the handle and the width buttons: out of the way until the card is used */
.dash-tools {
	/* straddling the top edge, so it never lands on a View all button or a
	   heading inside the card */
	position: absolute; top: -13px; right: 10px; z-index: 3;
	display: flex; gap: 2px; padding: 2px;
	background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
	opacity: 0; transition: opacity .15s;
}
.dash-w:hover .dash-tools, .dash-w:focus-within .dash-tools { opacity: 1; }
.dash-btn {
	border: 0; background: none; color: var(--muted); cursor: pointer;
	width: 24px; height: 24px; border-radius: 6px; padding: 0;
	font-size: 15px; line-height: 1; font-family: inherit;
	display: inline-flex; align-items: center; justify-content: center;
}
.dash-btn:hover { background: var(--surface-2); color: var(--text); }
.dash-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
.dash-grip { cursor: grab; }
.dash-grip:active { cursor: grabbing; }

.dash-w.is-dragging { opacity: .45; }
.dash-w.is-dragging > .card { outline: 2px dashed var(--accent); outline-offset: 2px; }
body.dash-dragging { user-select: none; -webkit-user-select: none; }
body.dash-dragging .dash-tools { opacity: 1; }

/* narrower screens: the four columns become two, then one, and a card that
   was set wider than the grid simply fills it */
@media (max-width: 1100px) {
	.dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dash-w.span-3, .dash-w.span-4 { grid-column: span 2; }
}
@media (max-width: 700px) {
	.dash { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.dash-w, .dash-w.span-1, .dash-w.span-2, .dash-w.span-3, .dash-w.span-4 { grid-column: span 1; }
}
/* Rearranging is a desktop job, here as everywhere else. Below this the grid
   is one or two columns, where there is little to arrange and a drag is more
   likely to be a scroll that went wrong - so the tools are simply not there.
   Whatever was arranged on a desktop is still saved and comes back on one. */
@media (max-width: 1023px) {
	.dash-tools { display: none; }
}

/* ---------------------------------------------------------------------------
   The lesson list on a course

   One row per lesson, grouped into sections. The row is a link to the
   lesson's own page; only the grip starts a drag, so a stray swipe while
   reading never reorders a course.

   .is-dropping is put on the section a row is hovering over, so it is always
   obvious which one it would land in.
   --------------------------------------------------------------------------- */
.lesson-board { padding: 0; }
.lesson-group + .lesson-group { border-top: 1px solid var(--border); }
.lesson-group.is-dropping { background: var(--surface-2); }

.lesson-group-head {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 16px; background: var(--surface-2);
	border-bottom: 1px solid var(--border);
}
.lesson-group-head.lesson-group-plain { background: transparent; }
.lesson-group-title { flex: 1; min-width: 0; line-height: 1.3; }
.lesson-group-title .chip { margin-left: 6px; }

.lesson-drop { min-height: 10px; }
.lesson-empty {
	margin: 10px 16px; padding: 14px; text-align: center;
	color: var(--text-muted); font-size: 13px;
	border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
}

.lesson-row {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px 9px 8px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}
.lesson-row:last-child { border-bottom: 0; }
.lesson-row:hover { background: var(--surface-2); }
.lesson-row.is-off { opacity: .55; }
.lesson-row.is-dragging {
	opacity: .9; border-radius: var(--radius-sm);
	box-shadow: 0 10px 24px rgba(0,0,0,.18); border-bottom-color: transparent;
}

.lesson-grip {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 30px; padding: 0;
	background: none; border: 0; border-radius: var(--radius-sm);
	color: var(--text-muted); cursor: grab; touch-action: none;
}
.lesson-grip:hover { background: var(--surface-3); color: var(--text); }
.lesson-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lesson-grip.is-idle { cursor: default; opacity: .35; }
body.lesson-dragging { cursor: grabbing; user-select: none; }
body.lesson-dragging .lesson-grip { cursor: grabbing; }

.lesson-main {
	flex: 1; min-width: 0; display: block;
	color: inherit; text-decoration: none; line-height: 1.35;
}
.lesson-main:hover .lesson-title { text-decoration: underline; }
.lesson-title { display: block; font-weight: 500; }
.lesson-main .cell-sub { display: block; }
.lesson-meta { flex: none; display: flex; align-items: center; gap: 8px; }

@media (max-width: 680px) {
	.lesson-row { flex-wrap: wrap; }
	.lesson-main { flex-basis: 100%; order: 2; padding-left: 34px; }
	.lesson-meta { order: 3; padding-left: 34px; }
}

/* ---------------------------------------------------------------------------
   Rearranging a card row on a module page

   Desktop only. Below 1024px none of this exists: no grips, no widths, and
   the row is in the order the page was written in. That is on purpose - a
   row on a phone is one column, where there is nothing to arrange, and a
   drag there is usually a scroll that went wrong.

   The saved order arrives as CSS in the page, so nothing jumps after paint.
   --------------------------------------------------------------------------- */
.panel-tools { display: none; }

@media (min-width: 1024px) {
	[data-panel] > .panel-w { position: relative; min-width: 0; grid-column: span 1; }
	.panel-w > .card { margin: 0; height: 100%; }

	.panel-tools {
		position: absolute; top: -11px; right: 8px; z-index: 3;
		display: flex; gap: 2px; padding: 2px;
		background: var(--surface); border: 1px solid var(--border);
		border-radius: 999px; box-shadow: var(--shadow-sm);
		opacity: 0; transition: opacity .12s ease;
	}
	.panel-w:hover .panel-tools,
	.panel-w:focus-within .panel-tools { opacity: 1; }
	body.panel-dragging .panel-tools { opacity: 1; }

	.panel-btn {
		display: inline-flex; align-items: center; justify-content: center;
		width: 20px; height: 20px; padding: 0; font-size: 13px; line-height: 1;
		background: none; border: 0; border-radius: 999px;
		color: var(--text-muted); cursor: pointer;
	}
	.panel-btn:hover { background: var(--surface-3); color: var(--text); }
	.panel-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
	.panel-grip { cursor: grab; touch-action: none; }

	body.panel-dragging { cursor: grabbing; user-select: none; }
	body.panel-dragging .panel-grip { cursor: grabbing; }
	.panel-w.is-dragging { opacity: .45; }
	.panel-w.is-dragging > .card { outline: 2px dashed var(--accent); outline-offset: 2px; }
}

/* A chip used as a filter: clickable, and obvious when it is the one on. */
a.chip { text-decoration: none; cursor: pointer; }
a.chip:hover { background: var(--surface-3); border-color: var(--border-strong); }
a.chip.is-active {
	background: var(--accent); border-color: var(--accent); color: #fff;
}
a.chip.is-active .muted, a.chip.is-active svg { color: rgba(255,255,255,.75); }

/* A submission's whole payload, folded away until you want it. A scenario
   review posts about thirty-five figures: a truncated line of them tells you
   nothing, and a wall of them on every row tells you less. */
.payload-peek > summary {
	cursor: pointer; max-width: 420px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.payload-peek > summary::marker { color: var(--text-muted); }
.payload-peek[open] > summary { white-space: normal; margin-bottom: 8px; color: var(--text); }
.payload-table { margin: 0; font-size: 12px; }
.payload-table th {
	text-align: left; font-weight: 500; color: var(--text-muted);
	white-space: nowrap; padding: 3px 12px 3px 0; vertical-align: top;
}
.payload-table td { padding: 3px 0; word-break: break-word; }