/* ==========================================================================
   TeamFlow — the whole design system, one file

   Replaces public/css/teamflow.css entirely.

     1  Tokens, reset, shell
     2  Surfaces, strip, next-up, rows, badges, controls
     3  Task detail, board, daily log, timeline
     4  Reports
     5  Lists — backlinks, projects, people, teams, roles, permissions
     6  Modals, forms, the Bootstrap control bridge
     7  Guide
     8  Bootstrap JS components — dropdown, offcanvas, modal
     9  Your day so far
    10  TinyMCE and the article body

   Bootstrap's stylesheet is not loaded. Its JavaScript still is, for the
   dropdown, the offcanvas and one modal — which is why the .show rules in
   section 8 matter.
   ========================================================================== */

/* ==========================================================================
   TeamFlow

   Ported from the redesign. Written as classes rather than the inline styles
   the design tool emits — inline styles cannot express hover, cannot be
   reused across 80 Blade views, and turn every markup change into a
   find-and-replace.

   Bootstrap is gone. Every list is CSS grid, every control is styled here.
   ========================================================================== */

:root {
    --ink-900:#17151F; --ink-700:#3C3849; --ink-500:#6E687C; --ink-300:#A6A0B2;
    --line:#E5E2EC; --line-soft:#F0EEF4;
    --paper:#F5F4F7; --surface:#FFFFFF; --surface-2:#FBFAFD;

    --brand:#6A0DAD; --brand-ink:#4A0878; --brand-soft:#EFE4FB; --brand-lift:#8B3FD6;

    --ok:#0F7C55;   --ok-soft:#E4F3ED;
    --warn:#9C5D00; --warn-soft:#FBF0DC;
    --stop:#B03028; --stop-soft:#FAE9E8;
    --info:#22589B; --info-soft:#E8F0F9;

    --ui:'Instrument Sans',system-ui,-apple-system,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

    --r:8px;          /* controls */
    --r-lg:14px;      /* cards */
    --sidebar:244px;
    --header:60px;
}

*, *::before, *::after { box-sizing:border-box; }

body {
    margin:0; background:var(--paper); color:var(--ink-900);
    font-family:var(--ui); font-size:14px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
}

a { color:var(--brand-ink); text-decoration:none; }
a:hover { color:var(--brand); }
::selection { background:var(--brand-soft); }

h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.02em; }

.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.dim  { color:var(--ink-500); }
.faint{ color:var(--ink-300); }
.push { margin-left:auto; }
.eyebrow {
    font-size:10.5px; font-weight:600; letter-spacing:.09em;
    text-transform:uppercase; color:var(--ink-500);
}

/* ==========================================================================
   SHELL
   ========================================================================== */

.shell { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:100vh; }

.sidebar {
    background:var(--ink-900); color:#A79FB8;
    position:sticky; top:0; height:100vh; overflow-y:auto;
    display:flex; flex-direction:column;
}
.sidebar::-webkit-scrollbar { width:6px; }
.sidebar::-webkit-scrollbar-thumb { background:#332C42; border-radius:3px; }

.brand {
    display:flex; align-items:center; gap:9px;
    padding:20px 20px 18px; color:#fff;
    font-weight:600; font-size:15.5px; letter-spacing:-.015em;
}
.brand:hover { color:#fff; }
.brand .mark { width:8px; height:8px; border-radius:2px; background:var(--brand-lift); }

.jump {
    display:flex; align-items:center; gap:8px; width:100%;
    margin:0 12px 6px; width:calc(100% - 24px);
    background:#221E2E; border:1px solid #2E2939; color:#7C7490;
    border-radius:var(--r); padding:7px 10px;
    font:inherit; font-size:12.5px; cursor:pointer; text-align:left;
}
.jump:hover { background:#282234; color:#A79FB8; }
.jump kbd { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:#5E566F; }

.nav { display:flex; flex-direction:column; padding:8px 0 24px; }
.nav h6 {
    color:#5E566F; font-size:10px; font-weight:600; letter-spacing:.11em;
    text-transform:uppercase; padding:14px 20px 6px; margin:0;
}
.nav a {
    display:flex; align-items:center; gap:10px;
    padding:7px 20px; color:#A79FB8; font-size:13px;
    border-left:2px solid transparent;
}
.nav a i { width:17px; font-size:14px; opacity:.85; }
.nav a:hover { background:#1F1B29; color:#fff; }
.nav a.on { background:#221C30; color:#fff; border-left-color:var(--brand-lift); font-weight:500; }

.nav .count {
    margin-left:auto; font-family:var(--mono); font-size:10.5px;
    background:#2E2939; color:#A79FB8; padding:1px 6px; border-radius:999px;
}
.nav .flag {
    margin-left:auto; font-size:10px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; background:#3B2E12; color:#E0B15A;
    padding:2px 6px; border-radius:4px;
}

.nav-minor { margin:20px 20px 0; padding-top:16px; border-top:1px solid #241F30; }
.nav-minor a { display:block; color:#7C7490; font-size:12.5px; padding:4px 0; border:0; }
.nav-minor a:hover { color:#fff; background:none; }

/* Header ------------------------------------------------------------- */

.topbar {
    background:rgba(255,255,255,.88); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding:0 28px; height:var(--header);
    display:flex; align-items:center; gap:16px;
    position:sticky; top:0; z-index:20;
}
.topbar h1 { font-size:18px; }
.topbar .sub { font-size:12.5px; color:var(--ink-500); }

.clock {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:999px; padding:5px 13px;
    font:inherit; font-size:12.5px; color:var(--ink-700); cursor:pointer;
}
.clock:hover { background:var(--line-soft); }
.clock.on { background:var(--ok-soft); border-color:#BFE3D4; color:var(--ok); }
.clock .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.clock.on .dot { animation:pulse 2s ease-in-out infinite; }
.clock .mono { opacity:.75; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }

.icon-btn {
    position:relative; background:none; border:0; padding:6px 8px;
    border-radius:var(--r); color:var(--ink-500); font-size:15px; cursor:pointer;
}
.icon-btn:hover { background:var(--line-soft); color:var(--ink-900); }
.icon-btn .badge-dot {
    position:absolute; top:2px; right:3px;
    min-width:16px; height:16px; padding:0 4px;
    background:var(--stop); color:#fff;
    font-family:var(--mono); font-size:9.5px;
    border-radius:999px; display:grid; place-items:center;
    border:2px solid #fff;
}

.whoami { display:flex; align-items:center; gap:9px; padding-left:12px; border-left:1px solid var(--line); }
.whoami .av {
    width:28px; height:28px; border-radius:var(--r);
    background:var(--brand-soft); color:var(--brand-ink);
    display:grid; place-items:center; font-size:12px; font-weight:600;
}
.whoami .name { font-size:12.5px; font-weight:500; }
.whoami .role { font-family:var(--mono); font-size:10px; color:var(--ink-500); }

main { padding:24px 28px 56px; }
.wrap { max-width:1400px; }

/* ==========================================================================
   SURFACES
   ========================================================================== */

.card {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); overflow:hidden;
}
.card-head {
    display:flex; align-items:center; gap:12px;
    padding:14px 18px 13px; border-bottom:1px solid var(--line-soft);
}
.card-head h2 { font-size:14px; }
.card-head .note { font-size:12.5px; color:var(--ink-300); }
.card-body { padding:18px; }
.card-foot { padding:13px 18px; border-top:1px solid var(--line-soft); background:var(--surface-2); }

.rail { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
.stack { display:flex; flex-direction:column; gap:20px; min-width:0; }

/* ==========================================================================
   STRIP — the five numbers
   ========================================================================== */

.strip {
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); overflow:hidden;
}
.strip > div {
    padding:13px 16px; border-right:1px solid var(--line-soft);
    display:flex; flex-direction:column; gap:2px;
}
.strip > div:last-child { border-right:0; }
.strip .k { font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-300); }
.strip .v { font-family:var(--mono); font-size:22px; letter-spacing:-.02em; }
.strip .v small { font-size:13px; color:var(--ink-500); }
.strip .v.warn { color:var(--warn); }
.strip .v.stop { color:var(--stop); }
.strip .v.ok   { color:var(--ok); }

/* ==========================================================================
   NEXT UP — the action list
   ========================================================================== */

.nextup {
    display:grid; grid-template-columns:auto minmax(0,1fr) auto;
    gap:14px; align-items:center;
    padding:14px 18px; border-bottom:1px solid var(--line-soft);
    color:var(--ink-900);
}
.nextup:last-child { border-bottom:0; }
.nextup:hover { background:var(--surface-2); color:var(--ink-900); }
.nextup .bar { width:4px; height:34px; border-radius:2px; background:var(--ink-300); }
.nextup.is-stop .bar { background:var(--stop); }
.nextup.is-warn .bar { background:var(--warn); }
.nextup.is-info .bar { background:var(--info); }
.nextup .title { font-size:14.5px; font-weight:500; }
.nextup .meta {
    display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px;
    font-size:12px; color:var(--ink-500); margin-top:3px;
}
.nextup .meta .key { font-family:var(--mono); color:var(--brand-ink); }
.nextup .right { display:flex; align-items:center; gap:8px; }
.nextup i.bi-chevron-right { color:var(--ink-300); font-size:11px; }

/* ==========================================================================
   ROWS — lists are grids, not tables
   ========================================================================== */

.rows-head, .row-item {
    display:grid; align-items:center; gap:0;
    padding:12px 18px; border-bottom:1px solid var(--line-soft);
}
.rows-head {
    font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-500); background:var(--surface-2); padding:10px 18px;
}
.row-item { color:var(--ink-900); }
.row-item:hover { background:var(--surface-2); color:var(--ink-900); }
.row-item:last-child { border-bottom:0; }

.row-title { min-width:0; display:flex; flex-direction:column; gap:2px; padding-right:16px; }
.row-title .t { font-size:13.5px; }
.row-title .m { font-size:11.5px; color:var(--ink-500); }

.row-group {
    display:flex; align-items:center; gap:9px;
    padding:10px 18px; background:#FDFCFE; border-bottom:1px solid var(--line-soft);
}
.row-group .name { font-size:12.5px; font-weight:600; }
.row-group .n { font-family:var(--mono); font-size:11px; color:var(--ink-500); }

/* Column templates. Named so the header and the rows cannot drift apart. */
.g-mytasks { grid-template-columns:88px minmax(0,1fr) 130px 120px 84px; }
.g-tasks   { grid-template-columns:92px minmax(0,1fr) 132px 92px 132px 90px 96px 40px; }

/* ==========================================================================
   BADGES
   ========================================================================== */

.pill {
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:500;
    padding:3px 9px; border-radius:6px; white-space:nowrap;
}
.pill-mute { background:var(--line-soft); color:var(--ink-700); }
.pill-ok   { background:var(--ok-soft);   color:var(--ok); }
.pill-warn { background:var(--warn-soft); color:var(--warn); }
.pill-stop { background:var(--stop-soft); color:var(--stop); }
.pill-info { background:var(--info-soft); color:var(--info); }
.pill-brand{ background:var(--brand-soft);color:var(--brand-ink); }
.pill .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

.key { font-family:var(--mono); font-size:12px; color:var(--brand-ink); }

.prio { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.prio-urgent { color:var(--stop); }
.prio-high   { color:var(--warn); }
.prio-medium { color:var(--ink-500); }
.prio-low, .prio-lowest { color:var(--ink-300); }

.overdue { color:var(--stop); font-weight:600; }

.av-sm {
    width:20px; height:20px; border-radius:6px;
    background:var(--line-soft); color:var(--ink-700);
    display:grid; place-items:center; font-size:9.5px; font-weight:600; flex:none;
}

/* ==========================================================================
   CONTROLS
   ========================================================================== */

.btn {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-700);
    border-radius:var(--r); padding:7px 12px;
    font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap;
}
.btn:hover { background:var(--line-soft); color:var(--ink-900); }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:500; padding:7px 14px; }
.btn-primary:hover { background:var(--brand-ink); border-color:var(--brand-ink); color:#fff; }
.btn-ghost { background:none; border-color:transparent; }
.btn-ghost:hover { background:var(--line-soft); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-danger { background:var(--stop); border-color:var(--stop); color:#fff; }
.btn:disabled { opacity:.5; cursor:default; }

.field { display:flex; flex-direction:column; gap:5px; }
.field > label { font-size:11.5px; color:var(--ink-700); }
.field .hint { font-size:11px; color:var(--ink-500); }
.field .error { font-size:11px; color:var(--stop); }

.input, .select, textarea.input {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); padding:7px 10px;
    font:inherit; font-size:13px; color:var(--ink-900); width:100%;
}
.input:focus, .select:focus {
    outline:none; border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-soft);
}
.input::placeholder { color:var(--ink-300); }
.input.is-invalid { border-color:var(--stop); }

.searchbox {
    display:flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); padding:7px 12px; width:280px;
}
.searchbox i { color:var(--ink-300); font-size:12px; }
.searchbox input { border:0; outline:none; font:inherit; font-size:13px; width:100%; background:none; color:var(--ink-900); }

.chip {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-700);
    border-radius:var(--r); padding:7px 12px;
    font:inherit; font-size:12.5px; cursor:pointer;
}
.chip:hover { background:var(--line-soft); }
.chip.on { background:var(--brand-soft); border-color:#D9C2F0; color:var(--brand-ink); }
.chip i { opacity:.5; font-size:9px; }

/* Tabs ---------------------------------------------------------------- */

.tabs {
    display:flex; align-items:flex-end; flex-wrap:wrap; gap:4px 12px;
    border-bottom:1px solid var(--line);
}
.tabs a {
    display:flex; align-items:center; gap:7px;
    padding:9px 2px 10px; margin-bottom:-1px;
    font-size:13px; color:var(--ink-500); border-bottom:2px solid transparent;
}
.tabs a:hover { color:var(--ink-900); }
.tabs a.on { color:var(--brand-ink); border-bottom-color:var(--brand); font-weight:500; }
.tabs .n {
    font-family:var(--mono); font-size:10.5px;
    background:var(--line-soft); color:var(--ink-500);
    padding:1px 6px; border-radius:999px;
}
.tabs a.on .n { background:var(--brand-soft); color:var(--brand-ink); }

/* Empty --------------------------------------------------------------- */

.empty { padding:52px 20px; text-align:center; }
.empty .rule { width:34px; height:1px; background:var(--line); margin:0 auto 14px; }
.empty .msg { font-size:13.5px; color:var(--ink-700); }
.empty .hint { font-size:12.5px; color:var(--ink-500); margin-top:5px; }

/* Flash --------------------------------------------------------------- */

.flash {
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 16px; margin-bottom:18px;
    background:var(--surface); border:1px solid var(--line);
    border-left:3px solid var(--brand); border-radius:var(--r-lg);
    font-size:13px;
}
.flash-success { border-left-color:var(--ok); }
.flash-error   { border-left-color:var(--stop); }
.flash-warning { border-left-color:var(--warn); }
.flash ul { margin:4px 0 0; padding-left:16px; color:var(--ink-500); font-size:12.5px; }

/* Pagination ---------------------------------------------------------- */

.pagination { display:flex; gap:6px; flex-wrap:wrap; padding:14px 0; margin:0; list-style:none; }
.pagination .page-link {
    display:grid; place-items:center; min-width:32px; height:32px; padding:0 9px;
    border:1px solid var(--line); border-radius:var(--r);
    background:var(--surface); color:var(--ink-700); font-size:12.5px;
}
.pagination .page-link:hover { background:var(--line-soft); }
.pagination .active .page-link { background:var(--brand); border-color:var(--brand); color:#fff; }
.pagination .disabled .page-link { opacity:.45; pointer-events:none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1440px) { .shell { grid-template-columns:216px minmax(0,1fr); } }

@media (max-width:1180px) {
    .rail { grid-template-columns:minmax(0,1fr); }
    .narrow-hide { display:none !important; }
    .g-mytasks { grid-template-columns:76px minmax(0,1fr) 118px 74px; }
    .g-tasks   { grid-template-columns:82px minmax(0,1fr) 120px 118px 78px; }
    .strip { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:900px) {
    .shell { grid-template-columns:1fr; }
    .sidebar { position:static; height:auto; }
    main { padding:16px; }
    .topbar { padding:0 16px; }
}

/* ==========================================================================
   Everything the remaining six screens need.
   ========================================================================== */

/* Grid templates. Named so a header row and its data rows share one
   definition and cannot drift apart. -------------------------------------- */

.g-articles { grid-template-columns:minmax(0,1fr) 150px 130px 130px 120px 56px 90px 96px; }
.g-tlrow    { grid-template-columns:104px 68px minmax(0,1fr) 96px 120px 190px; }
.g-timelog  { grid-template-columns:80px 140px 70px minmax(0,1fr); }
.g-dailylog { grid-template-columns:110px minmax(0,1fr) 70px 40px; }

/* ==========================================================================
   TASK DETAIL
   ========================================================================== */

.detail-rail { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }

.detail-head { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; }
.detail-head .crumbs {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:12px; color:var(--ink-500); margin-bottom:10px;
}
.detail-head h2 { font-size:23px; letter-spacing:-.025em; margin:0 0 14px; text-wrap:pretty; }
.detail-head .body {
    font-size:14.5px; line-height:1.7; color:var(--ink-700);
    margin:0; max-width:66ch; text-wrap:pretty; white-space:pre-wrap;
}
.detail-head .foot {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft);
    font-size:12px; color:var(--ink-500);
}

/* The status stepper. Reads as a path, which is what a workflow is —
   a row of unrelated pills would not say that. */
.stepper { display:flex; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.stepper span {
    font-size:12px; padding:5px 14px 5px 20px;
    background:var(--line-soft); color:var(--ink-500);
    clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%);
    margin-right:-8px;
}
.stepper span:first-child { padding-left:14px; clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); border-radius:6px 0 0 6px; }
.stepper span:last-child { margin-right:0; }
.stepper span.done { background:#E7DCF6; color:var(--brand-ink); }
.stepper span.now  { background:var(--brand); color:#fff; font-weight:500; }

.detail-row {
    display:flex; align-items:center; gap:12px;
    padding:10px 16px; border-bottom:1px solid var(--line-soft); font-size:12.5px;
}
.detail-row:last-child { border-bottom:0; }
.detail-row .k { color:var(--ink-500); }
.detail-row .v { margin-left:auto; text-align:right; }

.side-head {
    padding:13px 16px 11px; border-bottom:1px solid var(--line-soft);
    font-size:11px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-500);
}

.act-stack { display:flex; flex-direction:column; gap:8px; }
.act-stack .btn { justify-content:flex-start; padding:9px 14px; font-size:13px; }

.ev { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.ev:last-child { border-bottom:0; }
.ev .av {
    width:32px; height:32px; border-radius:9px;
    background:var(--line-soft); color:var(--ink-700);
    display:grid; place-items:center; font-size:11px; font-weight:600;
}
.ev .meta { font-size:12.5px; color:var(--ink-500); }
.ev .meta strong { color:var(--ink-900); font-weight:600; }
.ev .body { font-size:13.5px; line-height:1.6; color:var(--ink-700); white-space:pre-wrap; }

/* ==========================================================================
   BOARD
   ========================================================================== */

.board { display:flex; gap:14px; align-items:start; overflow-x:auto; padding-bottom:12px; }
.bcol { width:300px; flex:0 0 300px; }
.bcol-head { display:flex; align-items:center; gap:8px; padding:0 4px 8px; }
.bcol-head .name { font-size:13px; font-weight:600; }
.bcol-head .n {
    margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-500);
    background:#EAE7F0; padding:1px 7px; border-radius:999px;
}
.bcol-health { font-size:11px; color:var(--ink-300); padding:0 4px 8px; }
.bcol-body {
    background:#EDEBF2; border-radius:12px; padding:8px; min-height:240px;
    display:flex; flex-direction:column; gap:8px;
}
.bcol.over .bcol-body { background:var(--brand-soft); }

.bcard {
    background:var(--surface); border:1px solid var(--line);
    border-radius:10px; padding:11px 12px; cursor:grab;
}
.bcard:hover { border-color:var(--ink-300); }
.bcard:active { cursor:grabbing; }
.bcard.dragging { opacity:.4; }
.bcard.stuck { border-left:3px solid var(--warn); }
.bcard .top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.bcard .title { font-size:13px; line-height:1.5; margin-bottom:9px; text-wrap:pretty; }
.bcard .effort { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.bcard .effort .track { flex:1; height:4px; background:var(--line-soft); border-radius:999px; overflow:hidden; }
.bcard .effort .fill { display:block; height:100%; background:var(--ok); }
.bcard .effort.over .fill { background:var(--stop); }
.bcard .effort .mono { font-size:10.5px; color:var(--ink-500); }
.bcard .effort.over .mono { color:var(--stop); }
.bcard .who { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-500); }
.bcard .timing {
    margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft);
    font-size:10.5px; color:var(--ink-300);
}
.bcard .timing .warn { color:var(--warn); font-weight:500; }
.bcard .drop-hint {
    border:1px dashed var(--line); border-radius:8px;
    padding:20px 10px; text-align:center; font-size:11.5px; color:var(--ink-300);
}

/* ==========================================================================
   DAILY LOG
   ========================================================================== */

.log-head {
    display:flex; align-items:center; flex-wrap:wrap; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--line-soft);
}
.log-head .icon {
    width:36px; height:36px; border-radius:10px;
    background:var(--brand-soft); color:var(--brand-ink);
    display:grid; place-items:center; font-size:15px;
}
.log-fields {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:16px; padding:20px;
}
.log-fields label { display:flex; flex-direction:column; gap:5px; }
.log-fields .lbl {
    display:flex; align-items:baseline; gap:6px;
    font-size:12.5px; font-weight:500; color:var(--ink-700);
}
.log-fields .unit { font-size:11px; color:var(--ink-300); }
/* A number entry wants to be big and monospaced — you are reading it back
   as much as typing it. */
.log-fields input {
    border:1px solid var(--line); border-radius:9px; padding:10px 12px;
    font-family:var(--mono); font-size:16px; background:var(--surface);
    outline:none; width:100%;
}
.log-fields input:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.log-fields .help { font-size:11px; color:var(--ink-300); min-height:15px; }

textarea.note {
    width:100%; min-height:80px;
    border:1px solid var(--line); border-radius:10px; padding:11px 13px;
    font:inherit; font-size:13.5px; line-height:1.6; resize:vertical; outline:none;
}
textarea.note:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }

/* ==========================================================================
   TIMELINE
   ========================================================================== */

.tl-day-head { display:flex; align-items:baseline; gap:10px; padding:0 2px 8px; }
.tl-day-head .title { font-size:13.5px; font-weight:600; }
.tl-day-head .meta { font-family:var(--mono); font-size:11.5px; color:var(--ink-300); }
.tl-day-head .total { margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-500); }

.tl-row {
    display:grid; align-items:center; gap:0;
    padding:12px 18px; border-bottom:1px solid var(--line-soft); font-size:13px;
}
.tl-row:last-child { border-bottom:0; }
.tl-row:hover { background:var(--surface-2); }
.tl-row.brk { background:var(--surface-2); color:var(--ink-500); }
.tl-row.live { background:var(--brand-soft); }
.tl-row .auto {
    font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-300); border:1px solid var(--line);
    border-radius:3px; padding:0 4px;
}
.strip .v.hl { color:var(--warn); }
.strip > div.hl { background:#FEFBF4; }

.link-ok   { color:var(--ok); font-size:13px; background:none; border:0; cursor:pointer; padding:2px 4px; }
.link-stop { color:var(--stop); font-size:12px; background:none; border:0; cursor:pointer; padding:2px 4px; }
.link-mute { color:var(--ink-300); font-size:12px; background:none; border:0; cursor:pointer; padding:2px 4px; }
.link-ok:hover   { background:var(--ok-soft); border-radius:4px; }
.link-stop:hover { background:var(--stop-soft); border-radius:4px; }
.link-mute:hover { color:var(--ink-900); }

/* ==========================================================================
   WRITING DESK
   ========================================================================== */

.desk { display:grid; grid-template-columns:260px minmax(0,1fr) 300px; gap:16px; align-items:start; }
.desk.no-rail { grid-template-columns:260px minmax(0,1fr); }

.desk-bar {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:9px 14px; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-bottom:0;
    position:sticky; top:var(--header); z-index:10;
}
.desk-state { font-size:11.5px; font-family:var(--mono); padding:3px 9px; border-radius:999px; }
.desk-state[data-state="saved"]  { background:var(--ok-soft);   color:var(--ok); }
.desk-state[data-state="saving"] { background:var(--line-soft); color:var(--ink-500); }
.desk-state[data-state="dirty"]  { background:var(--warn-soft); color:var(--warn); }
.desk-state[data-state="error"]  { background:var(--stop-soft); color:var(--stop); }

.desk-track { width:120px; height:5px; background:var(--line-soft); border-radius:999px; overflow:hidden; }
.desk-track span { display:block; height:100%; width:0; background:var(--brand); transition:width .3s ease; }
.desk-track span.done { background:var(--ok); }



.brief-row { padding:12px 16px; border-bottom:1px solid var(--line-soft); font-size:12.5px; }
.brief-row:last-child { border-bottom:0; }
.brief-row .k {
    display:block; font-size:10px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-300); margin-bottom:3px;
}
.brief-row .pre { white-space:pre-wrap; color:var(--ink-700); line-height:1.55; }

.ratio .bar { display:flex; height:7px; border-radius:999px; overflow:hidden; background:var(--line-soft); margin-bottom:6px; }
.ratio .typed { background:var(--ok); }
.ratio .pasted { background:var(--warn); }
.ratio .legend { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-500); }

.paste-item { border-top:1px solid var(--line-soft); }
.paste-item:first-child { border-top:0; }
.paste-item summary {
    display:flex; justify-content:space-between; gap:8px; align-items:baseline;
    padding:9px 16px; cursor:pointer; font-size:11.5px;
}
.paste-item summary:hover { background:var(--surface-2); }
.paste-item.big summary .mono { color:var(--warn); font-weight:600; }
.paste-item pre {
    margin:0; padding:0 16px 12px; font-size:11.5px; line-height:1.55;
    white-space:pre-wrap; word-break:break-word; color:var(--ink-700);
    max-height:220px; overflow-y:auto;
}

@media (max-width:1180px) {
    .detail-rail { grid-template-columns:minmax(0,1fr); }
    .desk, .desk.no-rail { grid-template-columns:minmax(0,1fr); }
    .g-articles { grid-template-columns:minmax(0,1fr) 130px 110px 84px 90px; }
    .g-tlrow    { grid-template-columns:96px 62px minmax(0,1fr) 150px; }
}

/* ==========================================================================
   REPORTS
   ========================================================================== */

.rep-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items:start; }
.rep-grid.three { grid-template-columns:repeat(3, minmax(0,1fr)); }

/* A labelled bar list. Chosen over a donut on purpose: with six statuses you
   spend the whole time matching colours to a legend, and a bar already
   carries its own label and number. --------------------------------------- */

.barlist { padding:16px 18px; display:flex; flex-direction:column; gap:11px; }
.barrow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; align-items:baseline; }
.barrow .lbl { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.barrow .val { font-family:var(--mono); font-size:12.5px; color:var(--ink-700); }
.barrow .val small { color:var(--ink-300); font-size:11px; margin-left:4px; }
.barrow .track {
    grid-column:1 / -1;
    height:7px; background:var(--line-soft); border-radius:999px; overflow:hidden;
}
.barrow .fill { display:block; height:100%; border-radius:999px; }

.chart-wrap { padding:8px 14px 14px; }

.rep-lead { display:flex; align-items:baseline; gap:8px; }
.rep-lead .n { font-family:var(--mono); font-size:26px; letter-spacing:-.025em; }
.rep-lead .u { font-size:13px; color:var(--ink-500); }

.g-lead { grid-template-columns:minmax(0,1fr) 84px 92px; }
.g-comply { grid-template-columns:minmax(0,1fr) 90px 150px 64px; }

@media (max-width:1180px) {
    .rep-grid, .rep-grid.three { grid-template-columns:minmax(0,1fr); }
}

/* ==========================================================================
   Remaining screens. Append to public/css/teamflow.css
   ========================================================================== */

/* Grid templates ---------------------------------------------------------- */

.g-check    { grid-template-columns:minmax(0,1fr) 150px 150px 70px 84px; }
/* Owner sits between the check result and DR. Eight columns now. */
.g-backlink { grid-template-columns:minmax(0,1fr) 130px 150px 110px 52px 84px 74px 40px; }
.g-project  { grid-template-columns:minmax(0,1fr) 130px 110px 92px 84px 40px; }
.g-people   { grid-template-columns:minmax(0,1fr) 150px 140px 92px 40px; }
.g-role     { grid-template-columns:minmax(0,1fr) 110px 110px 40px; }
.g-writer   { grid-template-columns:minmax(0,1fr) 120px 92px 92px 100px 40px; }
.g-attend   { grid-template-columns:minmax(0,1fr) 90px 90px 100px minmax(0,1fr); }
.g-team     { grid-template-columns:minmax(0,1fr) 120px 100px 100px 40px; }

/* Two-column form + result layout, used by the link checker --------------- */
.split { display:grid; grid-template-columns:340px minmax(0,1fr); gap:20px; align-items:start; }

/* Notices ----------------------------------------------------------------- */

.notice {
    display:flex; align-items:flex-start; gap:10px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:12px; padding:13px 16px;
    font-size:12.5px; color:var(--ink-700); line-height:1.6;
}
.notice i { margin-top:2px; color:var(--ink-500); }
.notice.bad { background:#FEF7F6; border-color:#F0C7C4; font-size:13px; }
.notice.bad i { color:var(--stop); }
.notice strong { font-weight:600; }

/* File drop --------------------------------------------------------------- */

.filefield {
    display:flex; align-items:center; gap:10px;
    border:1px dashed #D7D3E0; border-radius:9px; padding:11px;
    font-size:12.5px; color:var(--ink-500); cursor:pointer;
}
.filefield:hover { border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft); }
.filefield input { display:none; }

textarea.mono-area {
    min-height:150px; border:1px solid var(--line); border-radius:10px;
    padding:11px 12px; font-family:var(--mono); font-size:12px;
    line-height:1.6; resize:vertical; outline:none; width:100%;
    background:var(--surface); color:var(--ink-900);
}
textarea.mono-area:focus { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }

.input.mono-input { font-family:var(--mono); font-size:12.5px; }

/* Rows that flag a regression -------------------------------------------- */
.row-item.was-live { background:var(--stop-soft); }
.row-item.was-live:hover { background:#F7DEDC; }

/* Avatar + name pair, used on people, writers and attendance ------------- */
.person { display:flex; align-items:center; gap:9px; min-width:0; }
.person .nm { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person .sub { font-size:11.5px; color:var(--ink-500); }

/* Permission groups ------------------------------------------------------- */
.perm-group { padding:14px 18px; border-bottom:1px solid var(--line-soft); }
.perm-group h3 { font-size:12.5px; margin-bottom:9px; }
.perm-list { display:flex; flex-wrap:wrap; gap:6px; }

/* Guide ------------------------------------------------------------------- */
.prose { max-width:70ch; font-size:14.5px; line-height:1.75; color:var(--ink-700); }
.prose h2 { font-size:19px; color:var(--ink-900); margin:32px 0 10px; }
.prose h3 { font-size:15px; color:var(--ink-900); margin:24px 0 8px; }
.prose p { margin:0 0 14px; }
.prose ul { margin:0 0 14px; padding-left:20px; }
.prose li { margin-bottom:6px; }
.prose code {
    font-family:var(--mono); font-size:12.5px;
    background:var(--line-soft); padding:1px 5px; border-radius:4px; color:var(--brand-ink);
}

/* Login ------------------------------------------------------------------- */
.auth-wrap { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) 480px; }
.auth-side {
    background:var(--ink-900); color:#A79FB8;
    padding:48px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth-side h2 { color:#fff; font-size:30px; letter-spacing:-.03em; line-height:1.25; max-width:16ch; }
.auth-side p { font-size:14px; line-height:1.7; max-width:44ch; margin-top:14px; }
.auth-side ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:13px; }
.auth-side li { display:flex; align-items:center; gap:9px; }
.auth-side li i { color:var(--brand-lift); }
.auth-form { display:grid; place-items:center; padding:40px; background:var(--paper); }
.auth-form .inner { width:100%; max-width:340px; }

@media (max-width:900px) {
    .split { grid-template-columns:minmax(0,1fr); }
    .auth-wrap { grid-template-columns:1fr; }
    .auth-side { display:none; }
}

/* ==========================================================================
   MODALS, FORMS, DESK
   ========================================================================== */

.tf-overlay {
    position:fixed; inset:0; z-index:1050;
    background:rgba(23,21,31,.42);
    display:flex; align-items:flex-start; justify-content:center;
    padding:7vh 20px 24px; overflow-y:auto;
}
.tf-dialog {
    width:100%; max-width:680px; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:0 18px 50px -14px rgba(23,21,31,.34);
}
.tf-dialog-head {
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    padding:16px 20px; border-bottom:1px solid var(--line-soft);
}
.tf-dialog-head h2 { font-size:16px; margin:0; }
.tf-dialog-head .sub { font-size:12px; color:var(--ink-500); margin-top:2px; }
.tf-dialog-body { padding:20px; }
.tf-dialog-foot {
    display:flex; align-items:center; gap:8px; justify-content:flex-end;
    padding:13px 20px; border-top:1px solid var(--line-soft);
    background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg);
}
.tf-dialog-foot .spacer { margin-right:auto; }

.tf-x { background:none; border:0; padding:2px; line-height:1; color:var(--ink-300); font-size:16px; cursor:pointer; }
.tf-x:hover { color:var(--ink-900); }

body.tf-modal-open { overflow:hidden; }

.tf-field-error { display:block; font-size:11px; color:var(--stop); margin-top:3px; }

.tf-skeleton {
    height:12px; border-radius:var(--r); margin-bottom:11px;
    background:linear-gradient(90deg,var(--line-soft) 25%,#EAE7F0 37%,var(--line-soft) 63%);
    background-size:400% 100%; animation:tf-shimmer 1.3s ease infinite;
}
@keyframes tf-shimmer { from { background-position:100% 0 } to { background-position:-100% 0 } }

.tf-toasts { position:fixed; right:18px; bottom:18px; z-index:1080; display:flex; flex-direction:column; gap:8px; }
.tf-toast {
    background:var(--ink-900); color:#fff; font-size:12.5px;
    padding:11px 15px; border-radius:var(--r);
    border-left:3px solid var(--ok);
    box-shadow:0 12px 30px -10px rgba(23,21,31,.5);
    transition:opacity .2s ease;
}
.tf-toast.is-error { border-left-color:var(--stop); }

/* Forms inside modals and on full pages ---------------------------------- */

.tf-form { display:flex; flex-direction:column; gap:15px; }
.tf-form .tf-field { display:flex; flex-direction:column; gap:5px; }
.tf-form .form-label { font-size:12px; font-weight:500; color:var(--ink-700); }
.tf-form .form-label .req { color:var(--stop); }
.tf-form .form-text { font-size:11px; color:var(--ink-500); line-height:1.5; }
.tf-form-page { max-width:680px; }

/* The old markup uses Bootstrap's control classes. Rather than rewrite
   fourteen forms, point those names at the new tokens. */
.form-control, .form-select {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); padding:8px 11px;
    font:inherit; font-size:13px; color:var(--ink-900); width:100%;
}
.form-control:focus, .form-select:focus {
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.form-control::placeholder { color:var(--ink-300); }
.form-control.is-invalid, .form-select.is-invalid { border-color:var(--stop); }
textarea.form-control { line-height:1.6; resize:vertical; }

.form-check { display:flex; align-items:flex-start; gap:9px; font-size:13px; }
.form-check-input { margin-top:3px; accent-color:var(--brand); }
.form-check-label { line-height:1.5; }

/* Bootstrap grid, only what the forms actually use ----------------------- */
.row { display:flex; flex-wrap:wrap; margin:0 -8px; }
.row > [class^="col-"], .row > [class*=" col-"] { padding:0 8px; }
.row.g-3 { gap:15px 0; }
.row.g-2 { gap:10px 0; }
.col-12 { flex:0 0 100%; max-width:100%; }

/* The full twelve, not a subset. Half the set was defined and the
   views used the other half — col-lg-9 and col-lg-3 on the request
   form got no basis at all and stacked, which is why its sidebar
   fell under the form instead of beside it. A column class that
   silently does nothing is worse than one that does not exist. */
.col-md-1 { flex:0 0 8.3333%; max-width:8.3333%; }
.col-md-2 { flex:0 0 16.6667%; max-width:16.6667%; }
.col-md-3 { flex:0 0 25%; max-width:25%; }
.col-md-4 { flex:0 0 33.3333%; max-width:33.3333%; }
.col-md-5 { flex:0 0 41.6667%; max-width:41.6667%; }
.col-md-6 { flex:0 0 50%; max-width:50%; }
.col-md-7 { flex:0 0 58.3333%; max-width:58.3333%; }
.col-md-8 { flex:0 0 66.6667%; max-width:66.6667%; }
.col-md-9 { flex:0 0 75%; max-width:75%; }
.col-md-10 { flex:0 0 83.3333%; max-width:83.3333%; }
.col-md-11 { flex:0 0 91.6667%; max-width:91.6667%; }
.col-md-12 { flex:0 0 100%; max-width:100%; }

.col-lg-1 { flex:0 0 8.3333%; max-width:8.3333%; }
.col-lg-2 { flex:0 0 16.6667%; max-width:16.6667%; }
.col-lg-3 { flex:0 0 25%; max-width:25%; }
.col-lg-4 { flex:0 0 33.3333%; max-width:33.3333%; }
.col-lg-5 { flex:0 0 41.6667%; max-width:41.6667%; }
.col-lg-6 { flex:0 0 50%; max-width:50%; }
.col-lg-7 { flex:0 0 58.3333%; max-width:58.3333%; }
.col-lg-8 { flex:0 0 66.6667%; max-width:66.6667%; }
.col-lg-9 { flex:0 0 75%; max-width:75%; }
.col-lg-10 { flex:0 0 83.3333%; max-width:83.3333%; }
.col-lg-11 { flex:0 0 91.6667%; max-width:91.6667%; }
.col-lg-12 { flex:0 0 100%; max-width:100%; }
@media (max-width:900px) {
    [class^="col-md-"], [class*=" col-md-"],
    [class^="col-lg-"], [class*=" col-lg-"] { flex:0 0 100%; max-width:100%; }
}



/* Bootstrap offcanvas and modal chrome. Their show/hide is further down. */
.offcanvas { background:var(--surface); }
.offcanvas-header { padding:16px 20px; border-bottom:1px solid var(--line-soft); }
.offcanvas-body { padding:18px 20px; }
.modal-content {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); color:var(--ink-900);
}
.modal-header, .modal-footer { padding:15px 20px; border-color:var(--line-soft); }
.modal-body { padding:20px; }
.btn-close {
    background:none; border:0; font-size:15px; color:var(--ink-300); cursor:pointer;
    width:24px; height:24px; opacity:1;
}
.btn-close::before { content:'\00d7'; }
.btn-close:hover { color:var(--ink-900); }

/* ==========================================================================
   GUIDE
   ========================================================================== */

.guide { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:36px; align-items:start; }

/* The opening claim, given room. Prose that starts flush under a header
   reads as a wall; one framed statement gives the eye somewhere to land. */
.guide-lead {
    background:var(--ink-900); color:#C9C2D6;
    border-radius:var(--r-lg); padding:26px 28px; margin-bottom:32px;
}
.guide-lead p { margin:0; font-size:15.5px; line-height:1.7; max-width:60ch; color:#C9C2D6; }
.guide-lead strong { color:#fff; font-weight:600; }

.guide-qs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:22px; background:#2E2939; border-radius:10px; overflow:hidden; }
.guide-qs > div { background:#1F1B29; padding:14px 16px; }
.guide-qs .n { font-family:var(--mono); font-size:11px; color:var(--brand-lift); }
.guide-qs .q { display:block; font-size:13.5px; color:#fff; font-weight:500; margin-top:4px; }
.guide-qs .a { display:block; font-size:11.5px; color:#8A8299; margin-top:3px; }

/* Contents. Sticky, because the page is long and the point of a guide is
   finding the bit you need. */
.guide-toc { position:sticky; top:calc(var(--header) + 24px); display:flex; flex-direction:column; gap:2px; }
.guide-toc h6 {
    font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-300); margin:0 0 8px;
}
.guide-toc a { font-size:12.5px; color:var(--ink-500); padding:4px 0; }
.guide-toc a:hover { color:var(--brand-ink); }

.prose h2:first-of-type { margin-top:0; }
.prose h2 { scroll-margin-top:calc(var(--header) + 20px); }

.rule-soft { height:1px; background:var(--line); margin:34px 0; border:0; }

@media (max-width:1100px) {
    .guide { grid-template-columns:minmax(0,1fr); }
    .guide-toc { display:none; }
    .guide-qs { grid-template-columns:1fr; }
}

/* ==========================================================================
   9  BOOTSTRAP JS COMPONENTS

   Bootstrap's stylesheet is not loaded, but its JavaScript still is — for the
   user dropdown, the desk's history drawer and the submit modal. That JS only
   toggles a `.show` class; the hiding was Bootstrap's CSS, which went away
   with the stylesheet.

   Without these four rules everything renders inline and permanently open,
   which is exactly what the user menu was doing on every page.
   ========================================================================== */

.dropdown { position:relative; }

.dropdown-menu {
    display:none;
    position:absolute; top:calc(100% + 6px); right:0; z-index:1000;

    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); box-shadow:0 12px 32px -12px rgba(23,21,31,.28);
    padding:6px; min-width:220px; list-style:none; margin:0;
}
.dropdown-menu.show { display:block; }

.dropdown-item {
    display:block; width:100%; text-align:left;
    padding:8px 11px; border:0; background:none;
    border-radius:var(--r); font:inherit; font-size:13px;
    color:var(--ink-900); cursor:pointer;
}
.dropdown-item:hover { background:var(--line-soft); }
.dropdown-item-text { padding:8px 11px; font-size:12px; color:var(--ink-500); }
.dropdown-divider { height:1px; background:var(--line-soft); margin:5px 0; border:0; }

/* Offcanvas and modal need real positioning, not just visibility.
   Bootstrap's stylesheet is gone, and only toggling visibility left the
   version-history drawer sitting in normal flow at the very bottom of the
   desk page — a "panel" you had to scroll past the editor to reach. Bootstrap
   JS supplies the .show class and injects the backdrop divs; everything about
   where they sit has to live here. */

.offcanvas {
    position:fixed; top:0; bottom:0; right:0; z-index:1045;
    display:flex; flex-direction:column;
    max-width:100%; background:var(--surface);
    border-left:1px solid var(--line);
    box-shadow:-18px 0 44px rgba(16,30,70,.13);
    visibility:hidden; transform:translateX(100%);
    transition:transform .26s ease, visibility .26s ease;
}
.offcanvas-start {
    right:auto; left:0; transform:translateX(-100%);
    border-left:0; border-right:1px solid var(--line);
    box-shadow:18px 0 44px rgba(16,30,70,.13);
}
.offcanvas.show { visibility:visible; transform:none; }

/* The header stays put and the body scrolls. A drawer listing forty versions
   must not push its own close button off the screen. */
.offcanvas-header { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.offcanvas-header .btn-close { margin-left:auto; }
.offcanvas-body { flex:1 1 auto; overflow-y:auto; }

.modal {
    position:fixed; inset:0; z-index:1055;
    display:none; overflow-y:auto;
    padding:6vh 16px 16px;
}
.modal.show { display:block; }
.modal-dialog { max-width:520px; margin:0 auto; }

.offcanvas-backdrop, .modal-backdrop {
    position:fixed; inset:0; background:rgba(16,30,70,.42);
}
.offcanvas-backdrop { z-index:1040; }
.modal-backdrop { z-index:1050; }
.offcanvas-backdrop.fade, .modal-backdrop.fade { opacity:0; transition:opacity .2s ease; }
.offcanvas-backdrop.show, .modal-backdrop.show { opacity:1; }

/* Utilities the Blade views still reference ------------------------------ */

.d-none { display:none !important; }
.d-flex { display:flex; }
.d-inline { display:inline; }
.collapse:not(.show) { display:none; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; }
.mb-0 { margin-bottom:0; } .mb-3 { margin-bottom:16px; } .mt-2 { margin-top:8px; }
.ms-auto { margin-left:auto; }
.text-end { text-align:right; }
.text-muted { color:var(--ink-500); }
.w-100 { width:100%; }
.small { font-size:12.5px; }


/* ==========================================================================
   YOUR DAY SO FAR — the per-task panel on the timeline
   ========================================================================== */

.tf-today-list { display:flex; flex-direction:column; gap:9px; }

.tf-today-row { display:flex; align-items:center; gap:12px; }
.tf-today-row .label { flex:0 0 300px; display:flex; align-items:center; gap:7px; min-width:0; }
.tf-today-row .label .k { font-family:var(--mono); font-size:11.5px; color:var(--brand-ink); }
.tf-today-row .label .title { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tf-today-row .bar {
    flex:1; height:8px; background:var(--line-soft);
    border-radius:999px; overflow:hidden; min-width:60px;
}
.tf-today-row .bar span { display:block; height:100%; background:var(--brand); border-radius:999px; }
.tf-today-row.is-running .bar span { animation:pulse 2s ease-in-out infinite; }

.tf-today-row .time { flex:0 0 90px; text-align:right; font-size:12.5px; }
.tf-today-row .time .dim { font-size:10.5px; }

.tf-today-acts { margin:-4px 0 2px 312px; display:flex; gap:4px; flex-wrap:wrap; }

.tf-today-gap {
    display:flex; align-items:center; gap:6px;
    margin-top:14px; padding-top:11px; border-top:1px solid var(--line-soft);
    font-size:12px; color:var(--ink-500);
}
.tf-today-gap .gap-warn { color:var(--warn); font-weight:500; }

@media (max-width:900px) {
    .tf-today-row .label { flex-basis:170px; }
    .tf-today-acts { margin-left:0; }
}


.desk-mount { min-height:340px; }

.tox-tinymce {
    border:1px solid var(--line) !important;
    border-radius:0 0 var(--r-lg) var(--r-lg) !important;
    border-top:0 !important;
}

/* Toolbar reads as part of the desk bar above it, not a separate strip. */
.tox .tox-editor-header {
    border-bottom:1px solid var(--line-soft) !important;
    box-shadow:none !important;
    padding:4px 8px !important;
}
.tox .tox-toolbar__primary { background:var(--surface) !important; }

.tox .tox-tbtn { border-radius:6px !important; height:30px !important; }
.tox .tox-tbtn:hover { background:var(--line-soft) !important; }
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
    background:var(--brand-soft) !important;
    color:var(--brand-ink) !important;
}
.tox .tox-tbtn svg { fill:var(--ink-700) !important; }
.tox .tox-tbtn--enabled svg { fill:var(--brand-ink) !important; }

.tox .tox-tbtn--select { font-size:12.5px !important; }
.tox .tox-toolbar__group { border:0 !important; padding:0 3px !important; }

/* Menus, quickbar and dialogs in the app's own language. */
.tox .tox-menu, .tox .tox-dialog {
    border:1px solid var(--line) !important;
    border-radius:var(--r-lg) !important;
    box-shadow:0 12px 32px -12px rgba(23,21,31,.28) !important;
}
.tox .tox-collection__item--active { background:var(--line-soft) !important; }
.tox .tox-collection__item--enabled { background:var(--brand-soft) !important; color:var(--brand-ink) !important; }

.tox .tox-button {
    background:var(--brand) !important; border-color:var(--brand) !important;
    border-radius:var(--r) !important; font-family:var(--ui) !important;
}
.tox .tox-button--secondary {
    background:var(--surface) !important; border-color:var(--line) !important;
    color:var(--ink-700) !important;
}

/* Read-only drafts should look read-only rather than merely refusing to type. */
.tox.tox-tinymce--disabled .tox-edit-area,
.tox .tox-edit-area__iframe { background:var(--surface) !important; }

.desk-fine { font-size:11px; color:var(--ink-300); margin:8px 2px 0; }

/* The article page and the version drawer share the editor's typography, so
   what a writer sees while typing is what gets published. */
.article-body { font-size:15.5px; line-height:1.8; color:var(--ink-900); max-width:68ch; }
.article-body > *:first-child { margin-top:0; }
.article-body p { margin:0 0 16px; }
.article-body h2 { font-size:23px; font-weight:600; letter-spacing:-.02em; margin:32px 0 12px; }
.article-body h3 { font-size:18px; font-weight:600; margin:26px 0 9px; }
.article-body ul, .article-body ol { margin:0 0 16px; padding-left:24px; }
.article-body li { margin-bottom:7px; }
.article-body blockquote {
    margin:0 0 16px; padding:10px 18px;
    border-left:3px solid var(--brand); background:var(--brand-soft); color:var(--ink-700);
}
.article-body a { color:var(--brand-ink); text-decoration:underline; }
.article-body hr { border:0; border-top:1px solid var(--line); margin:30px 0; }
/* ==========================================================================
   11  Keywords & clusters
   ========================================================================== */

/* Index grid. First column is the checkbox; it collapses politely when the
   viewer cannot bulk-edit because an empty span still holds the track. */
.g-keyword    { grid-template-columns:30px minmax(0,1fr) 72px 48px 92px 140px 92px 108px 84px 40px; }
.g-positions  { grid-template-columns:minmax(0,1fr) 160px 76px 64px 64px 96px; }
.g-cluster-kw { grid-template-columns:minmax(0,1fr) 76px 52px 92px 200px 108px 40px; }

@media (max-width:1180px) {
    .g-keyword    { grid-template-columns:30px minmax(0,1fr) 64px 84px 96px 36px; }
    .g-positions  { grid-template-columns:minmax(0,1fr) 72px 60px 88px; }
    .g-cluster-kw { grid-template-columns:minmax(0,1fr) 68px 84px 100px 36px; }
}

.g-keyword input[type="checkbox"],
#kw-check-all { accent-color:var(--brand); width:14px; height:14px; cursor:pointer; }

/* Difficulty score, coloured like a traffic light. A number alone means
   nothing to anyone who has not memorised the Ahrefs scale. */
.kd {
    font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums;
    display:inline-block; min-width:26px; text-align:center;
    padding:1px 5px; border-radius:5px;
}
.kd-easy { background:var(--ok-soft);   color:var(--ok); }
.kd-mid  { background:var(--warn-soft); color:var(--warn); }
.kd-hard { background:var(--stop-soft); color:var(--stop); }

/* Position movement. Up is green because up means a smaller number. */
.delta { font-family:var(--mono); font-size:10.5px; margin-left:4px; white-space:nowrap; }
.delta.up   { color:var(--ok); }
.delta.down { color:var(--stop); }

/* Bulk action bar — hidden until a row is ticked. */
.kw-bulkbar {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 16px; border-bottom:1px solid var(--line);
    background:var(--brand-soft); border-radius:var(--r-lg) var(--r-lg) 0 0;
    font-size:12.5px;
}
.kw-bulkbar strong { color:var(--brand-ink); font-weight:600; }

/* The weekly rank sheet's input. Wide enough for two digits, no spinners —
   arrow keys nudging a rank by accident is a wrong number saved silently. */
.pos-input {
    width:72px; text-align:right;
    font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.pos-input::-webkit-outer-spin-button,
.pos-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Cluster topic cards. */
.cluster-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:14px;
}
.cluster-card {
    display:flex; flex-direction:column; gap:6px;
    padding:16px; color:var(--ink-900);
    transition:border-color .12s ease, box-shadow .12s ease;
}
.cluster-card:hover {
    border-color:var(--brand-lift); color:var(--ink-900);
    box-shadow:0 4px 14px -8px rgba(106,13,173,.35);
}

/* Bare icon button for inline row actions (detach, etc.). */
.btn-bare {
    background:none; border:0; padding:2px 4px; cursor:pointer;
    color:var(--ink-300); font-size:12px; border-radius:5px;
}
.btn-bare:hover { color:var(--stop); background:var(--stop-soft); }

/* ==========================================================================
   12  Writing desk — the ask panel and the right rail
   ========================================================================== */

/* Card headers were used by the integrity panel and the task panel from the
   start but never had a rule, so they rendered as bare bold-ish text. */
.card-header {
    padding:11px 16px; border-bottom:1px solid var(--line);
    font-size:11.5px; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; color:var(--ink-500);
    display:flex; align-items:center;
}

/* The desk is three columns again, always — history belongs on screen. */
.desk { grid-template-columns:264px minmax(0,1fr) 316px; }

/* -------------------------------------------------------------- the ask -- */

.desk-ask { position:sticky; top:16px; max-height:calc(100vh - 92px); overflow-y:auto; }
.desk-ask::-webkit-scrollbar { width:5px; }
.desk-ask::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }

.ask-label {
    font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-300); margin-bottom:3px;
}

/* The keyword gets weight because it is the one thing that must stay in
   the writer's eye the whole time they are drafting. */
.ask-kw {
    font-family:var(--mono); font-size:13px; font-weight:500;
    color:var(--brand-ink); background:var(--brand-soft);
    padding:5px 9px; border-radius:var(--r); display:inline-block;
}

.ask-chip {
    font-size:11px; padding:2px 7px; border-radius:999px;
    background:var(--line-soft); color:var(--ink-700);
}

.ask-more > summary {
    font-size:11.5px; font-weight:600; color:var(--ink-700);
    cursor:pointer; padding:4px 0; list-style:none;
}
.ask-more > summary::-webkit-details-marker { display:none; }
.ask-more > summary::before { content:'▸ '; color:var(--ink-300); }
.ask-more[open] > summary::before { content:'▾ '; }

.ask-prose {
    font-size:12px; line-height:1.65; color:var(--ink-700);
    padding:4px 0 2px 12px; border-left:2px solid var(--line-soft);
}

.ask-task {
    display:flex; align-items:center; gap:8px; font-size:12px;
    padding:8px 10px; border:1px solid var(--line); border-radius:var(--r);
    color:var(--ink-700); text-decoration:none;
}
.ask-task:hover { border-color:var(--brand-lift); background:var(--surface-2); color:var(--ink-900); }

/* ------------------------------------------------------------- the rail -- */

.desk-rail {
    position:sticky; top:16px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); overflow:hidden;
    display:flex; flex-direction:column;
    max-height:calc(100vh - 92px);
}

.rail-tabs { display:flex; border-bottom:1px solid var(--line); flex-shrink:0; }

.rail-tab {
    flex:1; background:none; border:0; cursor:pointer;
    padding:11px 6px; font:inherit; font-size:12px; font-weight:500;
    color:var(--ink-500); border-bottom:2px solid transparent;
    display:flex; align-items:center; justify-content:center; gap:5px;
}
.rail-tab:hover { color:var(--ink-900); background:var(--surface-2); }
.rail-tab.is-on { color:var(--brand-ink); border-bottom-color:var(--brand); }

.rail-dot {
    min-width:16px; height:16px; padding:0 4px; border-radius:999px;
    background:var(--warn-soft); color:var(--warn);
    font-family:var(--mono); font-size:10px; line-height:16px;
}

.rail-pane { padding:12px 14px; overflow-y:auto; }
.rail-pane::-webkit-scrollbar { width:5px; }
.rail-pane::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }

/* Version rows, the shape the CMS people are used to: when, then how big. */
.rail-version {
    display:flex; flex-direction:column; gap:2px; width:100%;
    text-align:left; background:none; cursor:pointer; font:inherit;
    border:1px solid var(--line); border-radius:var(--r);
    padding:9px 11px; margin-bottom:7px;
}
.rail-version:hover { border-color:var(--brand-lift); background:var(--surface-2); }
.rail-version:first-child { border-color:var(--brand-soft); background:var(--brand-soft); }

.rv-when { font-size:12.5px; font-weight:600; color:var(--ink-900); }
.rv-meta { font-size:11px; color:var(--ink-500); }
.rv-note { font-size:10.5px; color:var(--brand-ink); margin-top:2px; }

/* Stats. */
.rail-stat-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
    border-radius:var(--r); overflow:hidden; margin-bottom:12px;
}
.rail-stat {
    background:var(--surface); padding:10px 6px; text-align:center;
    display:flex; flex-direction:column; gap:1px;
}
.rail-stat b {
    font-family:var(--mono); font-size:16px; font-weight:500;
    font-variant-numeric:tabular-nums; color:var(--ink-900);
}
.rail-stat span { font-size:10px; color:var(--ink-500); }

.rail-line {
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:12px; color:var(--ink-500);
    padding:6px 0; border-bottom:1px solid var(--line-soft);
}
.rail-line b { color:var(--ink-900); font-weight:500; }

.rail-sub {
    font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-300); margin:16px 0 8px;
}

/* Checks. Muted on purpose — this is advice, and advice that shouts gets
   ignored or gamed. Green for done, amber for worth a look, grey for
   not yet. Nothing is red, because nothing here is an error. */
.rail-checks { list-style:none; margin:0; padding:0; }

.chk {
    display:flex; gap:9px; align-items:flex-start;
    padding:8px 0; border-bottom:1px solid var(--line-soft);
}
.chk:last-child { border-bottom:0; }
.chk b { display:block; font-size:12px; font-weight:600; color:var(--ink-900); }
.chk em { display:block; font-size:11px; font-style:normal; color:var(--ink-500); line-height:1.5; }

.chk-mark {
    flex-shrink:0; width:17px; height:17px; border-radius:50%;
    font-size:10px; line-height:17px; text-align:center; font-weight:700;
}
.chk-ok   .chk-mark { background:var(--ok-soft);   color:var(--ok); }
.chk-warn .chk-mark { background:var(--warn-soft); color:var(--warn); }
.chk-todo .chk-mark { background:var(--line-soft); color:var(--ink-300); }

/* Stacked on narrow screens: the ask first, the editor next, the rail last.
   Sticky positioning is dropped there or the panels fight the page scroll. */
@media (max-width:1180px) {
    .desk { grid-template-columns:minmax(0,1fr); }
    .desk-ask, .desk-rail { position:static; max-height:none; }
}

/* The writing record moved inside the Stats tab, so its own card chrome would
   be a card inside a card. Flattened here rather than by editing the partial,
   which is still used as-is anywhere else it appears. */
.rail-pane .desk-integrity .card { border:0; border-radius:0; }
.rail-pane .desk-integrity .card-header { display:none; }
.rail-pane .desk-integrity .card-body { padding:0; }

/* ==========================================================================
   13  Content briefs
   ========================================================================== */

.g-brief { grid-template-columns:minmax(0,1fr) 190px 74px 128px 110px 92px; }

@media (max-width:1180px) {
    .g-brief { grid-template-columns:minmax(0,1fr) 120px 88px; }
}

/* The queue chips carry their own counts, so the number needs to sit
   quietly beside the label rather than competing with it. */
.chip .mono.dim { font-size:10.5px; margin-left:3px; }

/* .ask-label, .ask-kw, .ask-chip, .ask-prose and .ask-task are defined in
   section 12 for the writing desk. Reused here deliberately: a brief should
   read the same on the page where it is written as on the desk where it is
   worked from, or people stop trusting that they are the same document. */
a.ask-kw { text-decoration:none; }
a.ask-kw:hover { background:#E4D0F7; }

/* ==========================================================================
   14  Editorial calendar
   ========================================================================== */

.cal-nav { display:flex; align-items:center; gap:4px; }

.cal-legend { display:flex; align-items:center; gap:14px; font-size:11.5px; color:var(--ink-500); }
.cal-legend span { display:flex; align-items:center; gap:5px; }

.cal-key { width:9px; height:9px; border-radius:2px; display:inline-block; }
.cal-key.k-due       { background:var(--line); border:1px solid var(--ink-300); }
.cal-key.k-scheduled { background:var(--info-soft); border:1px solid var(--info); }
.cal-key.k-published { background:var(--ok-soft); border:1px solid var(--ok); }

/* Seven day columns plus a narrow load gutter on the right. The gutter is
   part of the same grid rather than a separate table, so a tall week keeps
   its summary aligned with its own row. */
.cal-head, .cal-week {
    display:grid;
    grid-template-columns:repeat(7, minmax(0,1fr)) 72px;
}

.cal-head {
    border-bottom:1px solid var(--line);
    background:var(--surface-2);
}
.cal-head span {
    padding:9px 10px; font-size:11px; font-weight:600;
    letter-spacing:.04em; text-transform:uppercase; color:var(--ink-500);
}

.cal-week { border-bottom:1px solid var(--line); }
.cal-week:last-child { border-bottom:0; }

.cal-day {
    min-height:118px; padding:6px; border-right:1px solid var(--line-soft);
    display:flex; flex-direction:column; gap:4px;
}
.cal-day.is-out     { background:var(--surface-2); }
.cal-day.is-out .cal-date { color:var(--ink-300); }
.cal-day.is-weekend { background:var(--surface-2); }
.cal-day.is-today   { background:var(--brand-soft); }

/* Drop target. Deliberately loud — a drag with no visible target is a
   guess about where the card will land. */
.cal-day.is-over {
    background:var(--brand-soft);
    box-shadow:inset 0 0 0 2px var(--brand);
}

.cal-date {
    font-size:11.5px; font-weight:600; color:var(--ink-700);
    display:flex; justify-content:space-between; align-items:center;
    padding:0 2px 2px;
}
.cal-day.is-today .cal-date { color:var(--brand-ink); }
.cal-date .mono { font-size:10px; }

/* The card. A left stripe in the brand colour, because "which brand is this
   week mostly for" is a glance question and reading domains is not a glance. */
.cal-card {
    display:block; text-decoration:none; cursor:pointer;
    border:1px solid var(--line); border-left:3px solid var(--stripe, var(--brand));
    border-radius:6px; padding:5px 7px; background:var(--surface);
    color:var(--ink-900); min-width:0;
}
.cal-card:hover { border-color:var(--brand-lift); border-left-color:var(--stripe, var(--brand)); background:var(--surface-2); }
.cal-card[draggable="true"] { cursor:grab; }
.cal-card[draggable="true"]:active { cursor:grabbing; }

.cal-card.is-dragging { opacity:.4; }
.cal-card.is-pending  { opacity:.6; pointer-events:none; }

.cc-title {
    display:block; font-size:11.5px; font-weight:500; line-height:1.35;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cc-meta {
    display:block; font-size:10px; color:var(--ink-500);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Which of the three dates put it here. The tint is faint on purpose: the
   brand stripe is the loud signal, this is the qualifier. */
.cal-card.k-scheduled { background:var(--info-soft); }
.cal-card.k-published { background:var(--ok-soft); }
.cal-card.k-published .cc-title { text-decoration:line-through; text-decoration-color:var(--ink-300); }

/* A deadline in the past that has not shipped. */
.cal-card.is-late { background:var(--stop-soft); border-color:#EFC9C6; }
.cal-card.is-late .cc-title { color:var(--stop); }

/* Weekly load gutter. */
.cal-wk {
    padding:8px 6px; background:var(--surface-2);
    border-left:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:1px; font-size:10px; color:var(--ink-500); text-align:center;
}
.cal-head .cal-wk {
    font-size:11px; font-weight:600; letter-spacing:.04em;
    text-transform:uppercase; padding:9px 6px;
}
.cal-wk b { font-size:15px; color:var(--ink-900); font-weight:500; }
.cal-wk.is-heavy { background:var(--warn-soft); }
.cal-wk.is-heavy b { color:var(--warn); }

/* The unscheduled tray. */
.cal-tray { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }

.cal-tray-item {
    border:1px solid var(--line); border-left:3px solid var(--stripe, var(--brand));
    border-radius:var(--r); padding:9px 11px;
    display:flex; flex-direction:column; gap:3px;
}
.cal-tray-item .cc-title { font-size:12.5px; color:var(--ink-900); text-decoration:none; }
.cal-tray-item .cc-title:hover { color:var(--brand-ink); }

.cal-tray-form { display:flex; gap:6px; margin-top:5px; }
.cal-tray-form .form-control { font-size:12px; padding:4px 8px; }

/* Narrow screens get a scrollable grid rather than seven unreadable slivers.
   Squeezing a month into 380px produces a calendar nobody can use; a
   horizontal scroll at least keeps the cards legible. */
.cal-wrap { overflow:hidden; }

@media (max-width:1180px) {
    .cal-wrap { overflow-x:auto; }
    .cal-wrap .cal-head, .cal-wrap .cal-week { min-width:900px; }
}

/* ==========================================================================
   15  Pages and the SEO performance report
   ========================================================================== */

/* Eight columns, because the header emits eight spans.
   It was still declaring the seven it had before impressions, clicks and CTR
   were added — so grid ran out of tracks, "KEYWORDS" and "STATUS" ended up
   sharing one, and the last cell wrapped onto its own line. A grid template
   and the markup that fills it have to be changed together; they were not. */
.g-page       { grid-template-columns:minmax(0,1fr) 100px 72px 64px 84px 84px 96px 36px; }
.g-page-kw    { grid-template-columns:minmax(0,1fr) 170px 76px 96px 64px; }
.g-seo-cluster{ grid-template-columns:minmax(0,1fr) 84px 96px 62px 66px 82px 84px 72px; }
.g-seo-move   { grid-template-columns:minmax(0,1fr) 46px 20px 46px 62px; }

@media (max-width:1180px) {
    .g-page       { grid-template-columns:minmax(0,1fr) 84px 64px 36px; }
    .g-page-kw    { grid-template-columns:minmax(0,1fr) 68px 84px 56px; }
    .g-seo-cluster{ grid-template-columns:minmax(0,1fr) 62px 62px 74px 66px; }
}

/* Headline strip. Up green, down red, everything else neutral — the eye
   should find the two numbers that carry the news. */
.seo-headline {
    display:flex; flex-wrap:wrap; gap:34px; align-items:baseline;
}
.seo-stat { display:flex; flex-direction:column; gap:1px; }
.seo-stat b {
    font-size:22px; font-weight:500; letter-spacing:-.02em;
    font-variant-numeric:tabular-nums; color:var(--ink-900);
}
.seo-stat span { font-size:11px; color:var(--ink-500); }
.seo-stat.is-up b   { color:var(--ok); }
.seo-stat.is-down b { color:var(--stop); }

/* Gaps. Each one is a link to the screen that fixes it — a number with
   nowhere to click is a number nobody acts on. */
.seo-gaps { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; }

.seo-gap {
    display:flex; flex-direction:column; gap:1px; text-decoration:none;
    border:1px solid var(--line); border-radius:var(--r); padding:11px 13px;
    color:var(--ink-900);
}
.seo-gap:hover { border-color:var(--brand-lift); background:var(--surface-2); color:var(--ink-900); }
.seo-gap b { font-size:19px; font-weight:500; font-variant-numeric:tabular-nums; }
.seo-gap span { font-size:11px; color:var(--ink-500); line-height:1.4; }
.seo-gap.is-warn { border-color:#EBD5A8; background:var(--warn-soft); }
.seo-gap.is-warn b { color:var(--warn); }

/* ==========================================================================
   16  Dashboard — the role-shaped desk
   ========================================================================== */

/* A thin coloured edge is the only thing that differs between the three
   desks. Making an SEO dashboard look like a different application from a
   content dashboard would be a nice demo and a bad product — the people
   using them sit next to each other and talk about the same work. */
.desk-panel { border-top:2px solid var(--brand); }
.desk-panel.is-seo     { border-top-color:var(--info); }
.desk-panel.is-content { border-top-color:var(--brand); }
.desk-panel.is-writer  { border-top-color:var(--ok); }

.desk-stats {
    display:flex; flex-wrap:wrap; gap:1px;
    background:var(--line-soft);
    border-bottom:1px solid var(--line-soft);
}
.desk-stat {
    flex:1 1 96px; background:var(--surface);
    padding:13px 14px; display:flex; flex-direction:column; gap:1px;
}
.desk-stat b {
    font-size:20px; font-weight:500; letter-spacing:-.02em;
    font-variant-numeric:tabular-nums; color:var(--ink-900);
}
.desk-stat span { font-size:10.5px; color:var(--ink-500); }
.desk-stat.is-ok   b { color:var(--ok); }
.desk-stat.is-stop b { color:var(--stop); }
.desk-stat.is-warn b { color:var(--warn); }
.desk-stat.is-info b { color:var(--info); }

/* Jobs. Each row is a link to the screen that clears it. */
.desk-jobs { display:flex; flex-direction:column; }

.desk-job {
    display:flex; align-items:center; gap:11px;
    padding:11px 18px; border-bottom:1px solid var(--line-soft);
    color:var(--ink-900); text-decoration:none; font-size:13px;
}
.desk-job:last-child { border-bottom:0; }
.desk-job:hover { background:var(--surface-2); color:var(--ink-900); }

.desk-job b {
    min-width:34px; font-size:15px; font-weight:500;
    font-variant-numeric:tabular-nums; color:var(--ink-500);
}
.desk-job span { flex:1; min-width:0; }
.desk-job i { color:var(--ink-300); font-size:11px; }

.desk-job.is-stop b { color:var(--stop); }
.desk-job.is-warn b { color:var(--warn); }
.desk-job.is-info b { color:var(--info); }
.desk-job.is-ok   b { color:var(--ok); }

.desk-clear {
    padding:16px 18px; font-size:12.5px; color:var(--ink-500);
    border-bottom:1px solid var(--line-soft);
}

/* Writer load. The bar is relative to the busiest person, not to some
   invented capacity figure — the useful comparison is between colleagues,
   and nobody has ever agreed what a writer's weekly ceiling is. */
.desk-load { padding:14px 18px; border-bottom:1px solid var(--line-soft); }

.load-row {
    display:grid; grid-template-columns:74px minmax(0,1fr) 62px 26px 68px;
    align-items:center; gap:9px; padding:4px 0; font-size:12px;
}
.load-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.load-bar { height:7px; background:var(--line-soft); border-radius:999px; overflow:hidden; }
.load-bar span { display:block; height:100%; background:var(--brand); border-radius:999px; }
.load-num { text-align:right; font-size:11px; }

.desk-more {
    display:block; padding:12px 18px; font-size:12.5px;
    color:var(--brand-ink); text-decoration:none; background:var(--surface-2);
}
.desk-more:hover { background:var(--brand-soft); color:var(--brand-ink); }

@media (max-width:1180px) {
    .load-row { grid-template-columns:66px minmax(0,1fr) 56px 58px; }
    .load-row .load-num.dim { display:none; }
}

/* ==========================================================================
   17  Brief form — combobox and AI reference blocks
   ========================================================================== */

/* Searchable select. Positioned relative so the list can hang off it, and
   z-index above the cards below or the dropdown renders behind the next
   panel — which looks exactly like the list failing to open. */
.cbx { position:relative; }

.cbx-list {
    position:absolute; z-index:40; top:100%; left:0; right:0; margin-top:4px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); box-shadow:0 12px 28px -12px rgba(23,21,31,.28);
    max-height:264px; overflow-y:auto; padding:4px;
}
.cbx-list::-webkit-scrollbar { width:5px; }
.cbx-list::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }

.cbx-opt {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; text-align:left; background:none; border:0; cursor:pointer;
    font:inherit; font-size:13px; color:var(--ink-900);
    padding:7px 10px; border-radius:6px;
}
.cbx-opt:hover { background:var(--surface-2); }
.cbx-opt em {
    font-style:normal; font-family:var(--mono); font-size:11px;
    color:var(--ink-300); flex-shrink:0;
}

/* The add row. Visually distinct because it does something different from
   the rows above it — it writes to the database. */
.cbx-opt.cbx-add {
    color:var(--brand-ink); font-weight:500;
    border-top:1px solid var(--line-soft); border-radius:0 0 6px 6px;
    margin-top:4px; padding-top:9px;
}
.cbx-opt.cbx-add:hover { background:var(--brand-soft); }
.cbx-opt.cbx-add:disabled { opacity:.6; cursor:default; }

.cbx-note { padding:9px 10px; font-size:12px; color:var(--ink-500); }
.cbx-note.cbx-err { color:var(--stop); }

/* Chips for the multi-select. Sit above the input rather than inside it:
   inside is prettier and breaks the moment somebody picks eight keywords. */
.cbx-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }

.cbx-chip {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--brand-soft); color:var(--brand-ink);
    font-size:12px; padding:3px 4px 3px 9px; border-radius:999px;
}
.cbx-chip button {
    background:none; border:0; cursor:pointer; padding:0 4px;
    color:var(--brand-ink); opacity:.6; font-size:14px; line-height:1;
}
.cbx-chip button:hover { opacity:1; }

/* AI reference blocks. */
.ai-ref {
    border:1px solid var(--line); border-radius:var(--r-lg);
    padding:12px; margin-bottom:12px; background:var(--surface-2);
}
.ai-ref-head { display:flex; align-items:center; gap:8px; margin-bottom:9px; }

.ai-ref-badge {
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    background:var(--brand-soft); color:var(--brand-ink);
    font-family:var(--mono); font-size:11px; line-height:22px; text-align:center;
}
.ai-ref-head .form-control { flex:1; }
.ai-ref-head .ai-ref-remove { flex-shrink:0; color:var(--ink-500); }
.ai-ref-head .ai-ref-remove:hover { color:var(--stop); }

.ai-ref .tox-tinymce { border-radius:var(--r) !important; border-color:var(--line) !important; }

/* Reference blocks as read, on the brief page and on the desk. */
.ai-ref-show { margin-bottom:8px; }
.ai-ref-show > summary {
    font-size:12.5px; font-weight:600; color:var(--brand-ink);
    cursor:pointer; padding:6px 0; list-style:none;
}
.ai-ref-show > summary::-webkit-details-marker { display:none; }
.ai-ref-show > summary::before { content:'▸ '; color:var(--ink-300); }
.ai-ref-show[open] > summary::before { content:'▾ '; }
.ai-ref-show .article-body {
    font-size:13px; line-height:1.7; color:var(--ink-700);
    background:var(--surface-2); border:1px solid var(--line-soft);
    border-radius:var(--r); padding:12px 14px;
    max-height:420px; overflow-y:auto;
}

/* Same thing in the desk's narrow left panel, so it cannot push the editor
   off screen no matter how much was pasted in. */
.ask-prose.ask-ai { max-height:280px; overflow-y:auto; padding-right:6px; }
.ask-prose.ask-ai h2 { font-size:14px; margin:12px 0 5px; }
.ask-prose.ask-ai h3 { font-size:13px; margin:10px 0 4px; }
.ask-prose.ask-ai ul, .ask-prose.ask-ai ol { padding-left:18px; margin:0 0 8px; }
.ask-prose.ask-ai p { margin:0 0 8px; }

/* ==========================================================================
   18  Brief form — layout and chrome
   ========================================================================== */

/* The form used to run the full width of the viewport, which put a working
   title field nine hundred pixels wide next to help text nobody reads at
   that length. Constrained, with the rail beside it. */
.brief-layout {
    display:grid; grid-template-columns:minmax(0,1fr) 288px;
    gap:18px; align-items:start; max-width:1180px;
}
.brief-main { display:flex; flex-direction:column; gap:16px; min-width:0; }

.brief-rail { position:sticky; top:16px; }

/* Labels and help text are scoped to .tf-form in section 6, so anything
   outside it renders at browser default. These make the two safe to use
   anywhere, which is what everyone assumed they already did. */
.form-label { font-size:12px; font-weight:500; color:var(--ink-700); display:block; margin-bottom:5px; }
.form-label .req { color:var(--stop); }
.form-text  { font-size:11px; color:var(--ink-500); line-height:1.5; margin-top:5px; }

/* Numbered section headers. The number is doing real work: it says the page
   has an order and roughly how much of it is left. */
.bf-sec-head {
    display:flex; align-items:flex-start; gap:11px;
    padding:14px 18px 13px; border-bottom:1px solid var(--line-soft);
}
.bf-sec-head h3 { margin:0; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.bf-sec-head p  { margin:2px 0 0; font-size:11.5px; color:var(--ink-500); line-height:1.45; }

.bf-step {
    flex-shrink:0; width:23px; height:23px; border-radius:50%;
    background:var(--brand-soft); color:var(--brand-ink);
    font-family:var(--mono); font-size:11.5px; font-weight:500;
    line-height:23px; text-align:center;
}

/* Unit suffix inside a field, so "1200" and "words" read as one thing
   instead of a number with an orphaned caption under it. */
.bf-suffix { position:relative; }
.bf-suffix .form-control { padding-right:52px; }
.bf-suffix span {
    position:absolute; right:11px; top:50%; transform:translateY(-50%);
    font-size:11.5px; color:var(--ink-300); pointer-events:none;
}
.bf-suffix input::-webkit-outer-spin-button,
.bf-suffix input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.bf-outline { line-height:1.75; }
.bf-mono { font-family:var(--mono); font-size:12px; }

/* The add-a-block panel. Dashed and full width because this is the thing on
   the page people most want and least expect to find. */
.bf-add {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    width:100%; padding:18px 14px; cursor:pointer;
    background:var(--surface-2); border:1px dashed var(--line);
    border-radius:var(--r-lg); font:inherit; color:var(--ink-700);
}
.bf-add:hover { border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink); }
.bf-add i { font-size:15px; }
.bf-add span { font-size:13px; font-weight:500; }
.bf-add em { font-style:normal; font-size:11px; color:var(--ink-500); }
.bf-add:hover em { color:var(--brand-ink); opacity:.75; }

/* Readiness checklist. Ticks fill in as you type, so "what is missing" is
   answered before you press anything rather than after. */
.bf-check { list-style:none; margin:0; padding:0; }

.bf-check li {
    display:flex; align-items:center; gap:9px;
    padding:6px 0; font-size:12.5px; color:var(--ink-500);
}
.bf-check li i {
    flex-shrink:0; width:16px; height:16px; border-radius:50%;
    border:1.5px solid var(--line); background:var(--surface);
    position:relative; transition:background .12s ease, border-color .12s ease;
}
.bf-check li.is-done { color:var(--ink-900); }
.bf-check li.is-done i { background:var(--ok); border-color:var(--ok); }
.bf-check li.is-done i::after {
    content:''; position:absolute; left:4.5px; top:1.5px;
    width:4px; height:8px; border:solid #fff; border-width:0 1.6px 1.6px 0;
    transform:rotate(45deg);
}

.bf-actions {
    display:flex; flex-direction:column; gap:8px;
    border-top:1px solid var(--line-soft);
}
.bf-actions .btn { width:100%; justify-content:center; }

/* Under the rail's breakpoint the checklist would be a long way from the
   fields it describes, so it goes back above the form and stops sticking. */
@media (max-width:1180px) {
    .brief-layout { grid-template-columns:minmax(0,1fr); }
    .brief-rail { position:static; order:-1; }
    .bf-actions { flex-direction:row; align-items:center; }
    .bf-actions .btn { width:auto; }
}

/* ==========================================================================
   19  Keyword targets — chips with an occurrence count
   ========================================================================== */

/* The card clips its children so its rounded corners stay clean, which also
   cut the combobox dropdown off at the section boundary. The brief form has
   no images or overflowing content to contain, so it opts out. */
.brief-main .card,
.brief-main .card-body { overflow:visible; }

/* Chip carrying a term and its target count. The number sits INSIDE the chip
   rather than in a column beside it: a separate column means reading across
   to work out which number belongs to which term, and that falls apart at
   four keywords. */
.cbx-chip { padding:2px 4px 2px 9px; }
.cbx-chip-kw { line-height:1.4; }

.cbx-chip-x { opacity:.45; font-size:10px; margin:0 1px 0 3px; }

.cbx-chip-n {
    width:38px; border:0; border-radius:5px; padding:1px 4px;
    background:rgba(255,255,255,.75); color:var(--brand-ink);
    font-family:var(--mono); font-size:11px; font-variant-numeric:tabular-nums;
    text-align:center; -moz-appearance:textfield;
}
.cbx-chip-n:focus { outline:2px solid var(--brand); outline-offset:1px; background:#fff; }
.cbx-chip-n::-webkit-outer-spin-button,
.cbx-chip-n::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* Read-only version, on the brief page and the writer's desk. */
.kwt-list { display:flex; flex-wrap:wrap; gap:5px; }

.kwt {
    display:inline-flex; align-items:center; gap:5px;
    background:var(--line-soft); color:var(--ink-700);
    font-size:11.5px; padding:3px 4px 3px 9px; border-radius:999px;
}
.kwt-kw { line-height:1.4; }
.kwt-n {
    background:var(--surface); color:var(--ink-500);
    font-size:10.5px; padding:1px 5px; border-radius:999px;
}

/* Primary terms carry weight, because a writer scanning this needs to know
   which one the page actually has to rank for. */
.kwt.is-primary { background:var(--brand-soft); color:var(--brand-ink); font-weight:500; }
.kwt.is-primary .kwt-n { background:rgba(255,255,255,.8); color:var(--brand-ink); }

/* ==========================================================================
   20  Work tab bar
   ========================================================================== */

/* Sits between the page header and the page body, so the four views read as
   one place with four states rather than four destinations. Sticky, because
   on the board and a long task list the tabs are the only way back and
   scrolling to the top to find them is friction for nothing. */
.work-tabs {
    display:flex; align-items:center; gap:2px;
    padding:0 28px; background:var(--surface);
    border-bottom:1px solid var(--line);
    overflow-x:auto; scrollbar-width:none;

    /* Sticks BELOW the header, not on top of it. .topbar is already
       sticky at top:0 with z-index 20, so anything sharing those values
       slides underneath it and disappears the moment you scroll. */
    position:sticky; top:var(--header); z-index:19;
}
.work-tabs::-webkit-scrollbar { display:none; }

.work-tabs a {
    display:flex; align-items:center; gap:6px; white-space:nowrap;
    padding:11px 13px 10px; font-size:13px; color:var(--ink-500);
    text-decoration:none; border-bottom:2px solid transparent;
    margin-bottom:-1px;
}
.work-tabs a:hover { color:var(--ink-900); }
.work-tabs a.on { color:var(--brand-ink); border-bottom-color:var(--brand); font-weight:500; }

.work-tabs a i { font-size:13px; opacity:.7; }
.work-tabs a.on i { opacity:1; }

.work-tabs .n {
    font-family:var(--mono); font-size:10.5px;
    background:var(--line-soft); color:var(--ink-500);
    padding:1px 6px; border-radius:999px;
}
.work-tabs a.on .n { background:var(--brand-soft); color:var(--brand-ink); }

@media (max-width:1180px) {
    .work-tabs { padding:0 14px; }
    .work-tabs a { padding:10px 10px 9px; font-size:12.5px; }
}

/* ==========================================================================
   21  Modal chrome and the shared field / note classes

   The Bootstrap stylesheet is not loaded, only its JavaScript, so every
   class its markup uses has to exist here. Several did not:

     .modal-header   had padding and a border COLOUR but no border WIDTH and
                     no display:flex — so the close button fell onto its own
                     line under the title and there was no rule beneath it
     .modal-title    no rule at all, so it rendered as a browser h5
     .modal-footer   same as the header, and its buttons were left-aligned
     .field > span   the label rule targets `.field > label`, and these
                     markups use a span, so the caption was unstyled
     textarea.note   no rule anywhere — a bare browser textarea in the
                     submit modal, on tasks/show and on articles/show
   ========================================================================== */

.modal-header {
    display:flex; align-items:center; gap:12px;
    border-bottom:1px solid var(--line-soft);
}
.modal-title { margin:0; font-size:15px; font-weight:600; letter-spacing:-.01em; }

/* The header is flex now, so the close button pushes itself right rather
   than needing to be last in a block flow. */
.modal-header .btn-close { margin-left:auto; flex-shrink:0; }

.btn-close {
    display:flex; align-items:center; justify-content:center;
    line-height:1; border-radius:6px;
}
.btn-close:hover { background:var(--line-soft); }

.modal-footer {
    display:flex; align-items:center; justify-content:flex-end; gap:8px;
    border-top:1px solid var(--line-soft); background:var(--surface-2);
    border-radius:0 0 var(--r-lg) var(--r-lg);
}

.modal-body > p { margin:0 0 14px; font-size:13px; line-height:1.6; }
.modal-body > p:last-child { margin-bottom:0; }

/* A label written as .field wrapping a span caption. Same shape as
   .field > label, which the rest of the app uses. */
.field > span { font-size:12px; font-weight:500; color:var(--ink-700); }

/* The note textarea. Used in the submit modal, on the task page and on the
   article page, and styled in none of them. Matches .form-control so a
   comment box does not look like a different application from every other
   input beside it. */
textarea.note {
    width:100%; min-height:84px; resize:vertical;
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); padding:9px 11px;
    font:inherit; font-size:13px; line-height:1.6; color:var(--ink-900);
}
textarea.note::placeholder { color:var(--ink-300); }
textarea.note:focus {
    outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}

/* .note as a caption outside a .card-head — teams/assign, tasks/show,
   projects/show and articles/show all use it that way. The scoped
   .card-head .note rule is more specific and still wins where it applies. */
span.note { font-size:12.5px; color:var(--ink-500); }

/* The dialog sat hard against the top of its 6vh padding. A little breathing
   room, and a shadow so it reads as lifted off the backdrop rather than
   painted onto it. */
.modal-dialog { margin:0 auto 6vh; }
.modal-content { box-shadow:0 24px 60px -20px rgba(23,21,31,.45); }

/* ==========================================================================
   22  Review box on the brief page
   ========================================================================== */

/* Loud on purpose. This is the one thing on the page that is somebody's
   turn, and a review that sits unanswered is the most expensive kind of
   delay in the whole pipeline — the writer has already done the work. */
.review-box {
    margin-top:12px; padding:12px 13px;
    background:var(--warn-soft); border:1px solid #EBD5A8;
    border-radius:var(--r-lg);
}
.review-box p { margin:0 0 9px; font-size:12px; line-height:1.55; color:var(--ink-700); }
.review-box p:last-child { margin-bottom:0; }

.review-head {
    display:flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:600; letter-spacing:.03em;
    text-transform:uppercase; color:var(--warn); margin-bottom:6px;
}

.review-box textarea.note { min-height:62px; font-size:12.5px; background:var(--surface); }

.review-acts { display:flex; gap:7px; margin-top:9px; }
.review-acts .btn { flex:1; justify-content:center; }

/* Sent back and done are states, not prompts, so they lose the urgency. */
.review-box.is-back { background:var(--info-soft); border-color:#C9DCF2; }
.review-box.is-back .review-head { color:var(--info); }

.review-box.is-done { background:var(--ok-soft); border-color:#BFE3D4; }
.review-box.is-done .review-head { color:var(--ok); }

/* ==========================================================================
   23  Click-to-insert, outline lines, AI reference prose
   ========================================================================== */

/* Keyword chips as buttons. Same shape as the read-only .kwt so the writer's
   panel and the brief page still look like one system. */
button.kwt {
    border:0; cursor:pointer; font:inherit; font-size:11.5px;
    transition:transform .08s ease, background .12s ease;
}
button.kwt:hover { background:var(--brand-soft); color:var(--brand-ink); }
button.kwt.is-primary:hover { background:#E4D0F7; }
button.kwt:active { transform:scale(.96); }

/* Confirmation you can see without looking away from the editor. */
.did-insert { animation:tf-inserted .7s ease; }
@keyframes tf-inserted {
    0%   { background:var(--ok); color:#fff; }
    100% { background:var(--line-soft); color:var(--ink-700); }
}
.no-insert { animation:tf-refused 1.4s ease; }
@keyframes tf-refused {
    0%, 40% { background:var(--stop-soft); color:var(--stop); }
    100%    { background:var(--line-soft); color:var(--ink-700); }
}

/* The outline, one line per section. */
.ask-outline { display:flex; flex-direction:column; gap:2px; padding:2px 0; }

.ol-line {
    display:flex; align-items:flex-start; gap:7px; width:100%;
    text-align:left; background:none; border:0; cursor:pointer; font:inherit;
    padding:5px 7px; border-radius:6px; color:var(--ink-900);
}
.ol-line:hover { background:var(--brand-soft); }
.ol-line i { margin-left:auto; font-size:10px; opacity:0; color:var(--brand-ink); }
.ol-line:hover i { opacity:1; }

.ol-tag {
    flex-shrink:0; font-family:var(--mono); font-size:9px;
    background:var(--line-soft); color:var(--ink-500);
    padding:2px 4px; border-radius:4px; line-height:1.2; margin-top:1px;
}
.ol-line.is-h3 .ol-tag { opacity:.65; }
.ol-line.is-h3 { padding-left:16px; }

.ol-text { font-size:12px; line-height:1.45; min-width:0; }

/* A line that is not a heading is a note, not an action. */
.ol-note {
    font-size:11.5px; color:var(--ink-500); line-height:1.5;
    padding:3px 7px 3px 24px;
}

/* AI reference, read as prose. The whole reason to store rich text is that
   a ChatGPT answer without its headings and lists is a wall nobody reads. */
.ask-ref > summary { color:var(--brand-ink); }
.ask-ref > summary i { font-size:10px; margin-right:2px; }

.ask-ai.article-body {
    max-height:320px; overflow-y:auto;
    font-size:12.5px; line-height:1.65; color:var(--ink-700);
    background:var(--surface-2); border:1px solid var(--line-soft);
    border-radius:var(--r); padding:11px 13px; margin-top:4px;
}
.ask-ai.article-body::-webkit-scrollbar { width:5px; }
.ask-ai.article-body::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }

.ask-ai.article-body h2 { font-size:13.5px; font-weight:600; margin:14px 0 5px; color:var(--ink-900); }
.ask-ai.article-body h3 { font-size:12.5px; font-weight:600; margin:11px 0 4px; color:var(--ink-900); }
.ask-ai.article-body > *:first-child { margin-top:0; }
.ask-ai.article-body p  { margin:0 0 9px; }
.ask-ai.article-body ul,
.ask-ai.article-body ol { margin:0 0 9px; padding-left:19px; }
.ask-ai.article-body li { margin-bottom:4px; }
.ask-ai.article-body table { width:100%; border-collapse:collapse; margin:0 0 9px; font-size:11.5px; }
.ask-ai.article-body th,
.ask-ai.article-body td { border:1px solid var(--line); padding:4px 6px; text-align:left; }
.ask-ai.article-body th { background:var(--line-soft); font-weight:600; }

/* ==========================================================================
   24  SEO pipeline
   ========================================================================== */

.pipe-stage {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); overflow:hidden;
}

/* Only stage one is anybody's turn. The others are status, and status that
   shouts is status people learn to ignore. */
.pipe-stage.is-now { border-color:#EBD5A8; }
.pipe-stage.is-now .pipe-head { background:var(--warn-soft); }
.pipe-stage.is-now .pipe-n { background:var(--warn); color:#fff; }
.pipe-stage.is-quiet { background:var(--surface-2); }

.pipe-head {
    display:flex; align-items:flex-start; gap:11px;
    padding:13px 18px; border-bottom:1px solid var(--line-soft);
}
.pipe-head h3 { margin:0; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.pipe-head p  { margin:2px 0 0; font-size:11.5px; color:var(--ink-500); line-height:1.45; }

.pipe-n {
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    background:var(--brand-soft); color:var(--brand-ink);
    font-family:var(--mono); font-size:11px; line-height:22px; text-align:center;
}
.pipe-count {
    margin-left:auto; font-family:var(--mono); font-size:12px;
    color:var(--ink-500); background:var(--surface); border:1px solid var(--line);
    padding:1px 8px; border-radius:999px;
}

.pipe-row {
    display:flex; align-items:center; gap:16px;
    padding:12px 18px; border-bottom:1px solid var(--line-soft);
}
.pipe-row:last-child { border-bottom:0; }
.pipe-row:hover { background:var(--surface-2); }

.pipe-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }

.pipe-title {
    font-size:13.5px; font-weight:500; color:var(--ink-900);
    text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.pipe-title:hover { color:var(--brand-ink); }

.pipe-meta {
    font-size:11.5px; color:var(--ink-500);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pipe-meta a { color:var(--ink-500); }

/* The action, inline. The note field is wide because a one-word reason is
   worse than none, and a narrow box asks for a one-word reason. */
.pipe-act { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.pipe-act .form-control { width:260px; font-size:12.5px; padding:6px 10px; }
.pipe-act .btn { white-space:nowrap; }

.pipe-nums { display:flex; gap:20px; flex-shrink:0; }
.pipe-nums span { display:flex; flex-direction:column; align-items:flex-end; gap:0; }
.pipe-nums b {
    font-size:15px; font-weight:500; font-variant-numeric:tabular-nums;
    color:var(--ink-900); line-height:1.2;
}
.pipe-nums em { font-style:normal; font-size:10px; color:var(--ink-500); }

.pipe-nodata {
    flex-shrink:0; max-width:320px; text-align:right;
    font-size:11.5px; color:var(--ink-500); line-height:1.5;
}

.pipe-empty { padding:16px 18px; font-size:12.5px; color:var(--ink-500); }

@media (max-width:1180px) {
    .pipe-row { flex-direction:column; align-items:stretch; gap:9px; }
    .pipe-act { flex-wrap:wrap; }
    .pipe-act .form-control { width:100%; }
    .pipe-nums { justify-content:space-between; }
    .pipe-nodata { text-align:left; max-width:none; }
}

/* Live-since field in the pipeline's publish row. Narrow, because it is the
   exception rather than the normal case — most publishes are happening now. */
.pipe-date { width:150px !important; flex-shrink:0; }

/* ==========================================================================
   25  Metric window selector
   ========================================================================== */

.metric-window {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    font-size:12px;
}
.mw-label { color:var(--ink-500); margin-right:2px; }

/* The lag note earns its place: a "today" number that looks low is almost
   always just not counted yet, and without saying so somebody goes looking
   for a bug in the importer. */
.mw-note { color:var(--ink-300); font-size:11px; margin-left:6px; }

/* Inside the pipeline's Live stage it sits in its own strip, so the numbers
   below it are unambiguously the window above. */
.pipe-filter {
    padding:9px 18px; background:var(--surface-2);
    border-bottom:1px solid var(--line-soft);
}

@media (max-width:1180px) {
    .mw-note { display:none; }
}

/* ==========================================================================
   26  URL lookup — query table
   ========================================================================== */

.g-query { grid-template-columns:minmax(0,1fr) 100px 72px 64px 84px; }

@media (max-width:1180px) {
    .g-query { grid-template-columns:minmax(0,1fr) 84px 60px 72px; }
}