/* The website's dark palette, kept to a few tokens so every screen reads as one app. */
:root {
  --bg: #0E2A2B; --panel: #143637; --panel2: #0B2122; --line: #1F4A4B; --text: #E3F3F0; --muted: #A9CFCA; --accent: #A8E8E8; --danger: #F7A8A8; --warn: #F2C94C;
  --radius: 12px; --gap: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, .btn { background: var(--accent); color: var(--bg); border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
button.ghost, .btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--line); }
button.tiny { padding: 3px 9px; font-size: 13px; }
button:disabled { opacity: .4; cursor: default; }
input, select, textarea { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; width: 100%; }
textarea { resize: vertical; margin: 8px 0; }
label.check { display: flex; gap: 6px; align-items: center; color: var(--muted); }
label.check input { width: auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.err { color: var(--danger); }
.r { text-align: right; }
.mt { margin-top: 20px; }
.warn { color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 700; }

/* Brand mark: the website's logo (public/logo/cs-mark.svg, copied from the website repo). */
.logo { display: inline-block; vertical-align: middle; width: 28px; height: 28px; }
.logo.big { width: 72px; height: 72px; margin-bottom: 14px; }

.centre { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.centre h1 { font-size: 30px; margin: 0 0 8px; }

header.bar { display: flex; align-items: center; gap: var(--gap); padding: 10px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; }
header.bar .brand { font-weight: 800; letter-spacing: .02em; display: flex; gap: 8px; align-items: center; color: var(--text); }
header.bar .icons { margin-left: auto; display: flex; gap: 6px; align-items: center; }
header.bar .bell { position: relative; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--accent); font-size: 16px; text-decoration: none; padding: 0; }
.iconbtn:hover { background: var(--panel); text-decoration: none; }
.badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: var(--bg); border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; }
.drop { position: absolute; right: 0; top: 40px; width: 320px; max-width: 90vw; max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; z-index: 10; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.drop a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.drop a.unread { background: var(--panel2); }
.drop a:hover { background: var(--line); text-decoration: none; }
nav.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav.tabs a { padding: 6px 12px; border-radius: 8px; color: var(--muted); white-space: nowrap; }
nav.tabs a.on { background: var(--panel); color: var(--text); }

.timerbar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--panel2); border-bottom: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.timerbar a { color: var(--text); flex: 1 1 200px; }
.timerbar .clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); }
.timerbar .stops { display: flex; gap: 6px; }
.timerbar .stops button { padding: 4px 10px; font-size: 13px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #00C27A; box-shadow: 0 0 0 0 rgba(0,194,122,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 8px rgba(0,194,122,0); } }

main.page { max-width: 1200px; margin: 0 auto; padding: 16px; min-width: 0; }
h1.h { font-size: 24px; margin: 4px 0 14px; }
.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.head h1 { margin: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap); }
.panel h2 { margin: 0 0 12px; font-size: 16px; }
.panel.scroll { overflow-x: auto; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row > * { flex: 1 1 160px; }
.row > button, .row > .btn, .row > label, .row > span, .row > select { flex: 0 1 auto; }
.row.tight { gap: 6px; }
.row.tight > * { flex: 0 1 auto; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: 6px 12px; }
.seg button.on { background: var(--panel); color: var(--text); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
tr:last-child td { border-bottom: 0; }
tr.total td { font-weight: 800; border-top: 1px solid var(--line); }
td.stale { background: rgba(242,201,76,.18); }
table.small td { padding: 5px 4px; font-size: 13px; }
table.levels input, table.levels select { padding: 5px 8px; }
.chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #0b1f20; white-space: nowrap; }
.status { font-weight: 800; }
.cls { font-size: 12px; border-radius: 6px; padding: 2px 6px; width: auto; }
.cls.billed { color: #00C27A; } .cls.training { color: var(--warn); } .cls.deleted { color: var(--danger); }
select.cls { background: var(--panel2); }

.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cards a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--text); }
.cards a:hover { border-color: var(--accent); text-decoration: none; }

/* Kanban: columns scroll sideways on a phone and sit in a row on a desktop. */
.kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; scroll-snap-type: x proximity; }
.col { flex: 0 0 240px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 120px; scroll-snap-align: start; }
.col h3 { margin: 0 0 10px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; color: var(--text); }
.card:hover { border-color: var(--accent); text-decoration: none; }
.card b { display: block; margin-bottom: 6px; line-height: 1.3; }
.card .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.people { display: inline-flex; gap: 2px; margin-top: 6px; }
.av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--text); font-size: 11px; font-weight: 700; }

.moves { margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--gap); }
.brief.team { border-left: 3px solid var(--warn); }
.brief.inner { border-left: 3px solid var(--danger); }
.prose p { margin: 0 0 8px; white-space: pre-wrap; }
.events { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.events li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.events li:last-child { border: 0; }
.events .note { color: var(--muted); font-style: italic; padding-left: 12px; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
dt { color: var(--muted); } dd { margin: 0; }
dd input { width: auto; padding: 4px 8px; }
ul.plain { list-style: none; padding: 0; margin: 0 0 8px; }
ul.plain li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.editable { cursor: text; } .editable .pen { color: var(--muted); font-size: 12px; opacity: 0; } .editable:hover .pen { opacity: 1; }
h1 .editable input { font-size: 24px; font-weight: 700; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: var(--gap); }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; }
.stat b { font-size: 22px; } .stat span { color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  .grid2 { grid-template-columns: 1fr; }
  header.bar { flex-wrap: wrap; } header.bar .icons { margin-left: auto; display: flex; gap: 6px; align-items: center; }
header.bar .bell { position: relative; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--accent); font-size: 16px; text-decoration: none; padding: 0; }
.iconbtn:hover { background: var(--panel); text-decoration: none; }
.badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: var(--bg); border-radius: 999px; font-size: 11px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 4px; }
.drop { position: absolute; right: 0; top: 40px; width: 320px; max-width: 90vw; max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; z-index: 10; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.drop a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.drop a.unread { background: var(--panel2); }
.drop a:hover { background: var(--line); text-decoration: none; }
  nav.tabs { order: 3; flex-basis: 100%; }
  th:nth-child(n+5), td:nth-child(n+5) { display: none; }
  table.levels th, table.levels td { display: table-cell; }
}

/* Sub-navigation inside a page (Team: People / Skills / Time off / Invoices). */
nav.sub { display: flex; gap: 2px; margin: -4px 0 12px; overflow-x: auto; }
nav.sub a { padding: 5px 10px; border-radius: 8px; color: var(--muted); font-size: 14px; white-space: nowrap; }
nav.sub a.on { background: var(--panel); color: var(--text); }
.st.requested, .st.submitted, .st.queried { color: var(--warn); } .st.approved, .st.paid { color: #00C27A; } .st.declined { color: var(--danger); }
.profile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 6px 0; }
.profile h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.profile li { justify-content: space-between; }
.dots { display: inline-flex; gap: 3px; }
.dot-btn { width: 14px; height: 14px; border-radius: 50%; padding: 0; background: var(--line); border: 0; }
.dot-btn.on { background: var(--accent); }
.dot-btn:disabled { cursor: default; opacity: 1; }
.days { display: flex; gap: 8px; flex-wrap: wrap; }

/* Calendar month grid. */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dow { color: var(--muted); font-size: 12px; text-align: center; padding: 4px 0; }
.cal .day { min-height: 84px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 4px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.cal .day.pad { background: transparent; border-color: transparent; }
.cal .day.today { border-color: var(--accent); }
.cal .n { color: var(--muted); }
.cal .ev { display: block; padding: 1px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .ev.due { background: var(--panel); color: var(--text); border-left: 3px solid var(--accent); }
.cal .ev.off { background: rgba(242,201,76,.2); color: var(--warn); }
.cal .ev.off.requested { opacity: .6; border: 1px dashed var(--warn); }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } .cal .day { min-height: 56px; } .cal .ev { font-size: 11px; } }

.warn-box { border: 1px solid var(--warn); color: var(--warn); border-radius: 10px; padding: 8px 12px; }
.onboarding .steps { list-style: none; padding: 0; margin: 0; }
.onboarding .steps li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.onboarding .steps li.done label { color: var(--muted); text-decoration: line-through; }
.notices { background: var(--panel2); border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.notices h3 { margin: 8px 0 4px; font-size: 14px; } .notices p { margin: 0 0 8px; color: var(--muted); }
ol.closing { list-style: none; padding: 0; margin: 0 0 12px; }
ol.closing li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
ol.closing li.done { color: var(--muted); }
ol.closing .tickmark { width: 22px; flex: 0 0 22px; font-weight: 800; color: var(--accent); }

/* Chat. */
.chat .msgs { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; }
.msg { max-width: 85%; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; align-self: flex-start; }
.msg.mine { align-self: flex-end; background: var(--line); }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg .body { white-space: pre-wrap; word-break: break-word; }
.chat.team { border-left: 3px solid var(--warn); } .chat.tim { border-left: 3px solid var(--danger); }
.badge.inline { position: static; display: inline-grid; vertical-align: middle; margin-left: 4px; }
.threads { list-style: none; padding: 0; margin: 0; }
.threads li a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); color: var(--text); }
.threads li:last-child a { border: 0; }

.attention.hot { border-color: var(--danger); }
.attention li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.attention li:last-child { border: 0; }
.attention li.high a { color: var(--danger); }
.attention .who { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }

.dlist > li { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
.notes-box { background: var(--panel2); border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.notes-box li { display: grid; grid-template-columns: 22px 60px 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; }
.notes-box li.done .nb { text-decoration: line-through; color: var(--muted); }
.notes-box .pin { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 13px; }
.notes-box input[type=checkbox] { width: auto; }
.applicant { background: var(--panel2); border-radius: 10px; padding: 10px 14px; }
.applicant p { margin: 4px 0 8px; }
.hr h3 { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
tr.due td { background: rgba(242,201,76,.12); }
.stat.hot { border-color: var(--danger); }

/* Activity feed. */
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); align-items: baseline; font-size: 14px; }
.feed li.day { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding-top: 12px; border: 0; }
.feed li:last-child { border: 0; }
.feed .who { font-weight: 600; }
.feed .t { font-variant-numeric: tabular-nums; }
.card .upd { flex-basis: 100%; font-size: 11px; }

/* Studio live view. */
.filters { margin-bottom: 10px; }
.tier-group { margin-bottom: 18px; }
.tier-group h2 { display: flex; gap: 10px; align-items: center; font-size: 15px; margin: 0 0 8px; }
table.live { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.live td, table.live th { padding: 8px 8px; }
table.live tr.mine td:nth-child(2) a { color: var(--text); font-weight: 700; }
.nowrap { white-space: nowrap; }
.pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.pct.good { color: #00C27A; } .pct.warn { color: var(--warn); } .pct.bad { color: var(--danger); }
.clogo { width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; margin-right: 6px; object-fit: cover; }
.stats.compact .stat { padding: 8px 12px; } .stats.compact .stat b { font-size: 18px; }
.stat.link { color: var(--accent); text-decoration: none; }
.panel.hot { border-color: var(--danger); }
@media (max-width: 760px) { table.live th:nth-child(n+5), table.live td:nth-child(n+5) { display: none; } table.live th:last-child, table.live td:last-child { display: table-cell; } }

.rates-box { background: var(--panel2); border-radius: 10px; padding: 10px 12px; }

/* Client brand. */
.brandbar { height: 56px; border-radius: var(--radius); margin: -4px 0 12px; background-size: cover; background-position: center; opacity: .9; }
.brand-h { display: flex; align-items: center; gap: 10px; }
.clogo.big { width: 36px; height: 36px; border-radius: 8px; }
.swatch { display: inline-block; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); }
.header-preview { width: 100%; max-height: 120px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field.wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .fields { grid-template-columns: 1fr; } }

/* Chat mentions: the "@" picker sits above the input; names in messages are picked out */
.picker-row { position: relative; flex-wrap: wrap }
.picker { position: absolute; bottom: calc(100% + 6px); left: 0; list-style: none; margin: 0; padding: 4px; background: var(--panel, #0f2a2a); border: 1px solid var(--line, #1f4a48); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 5; min-width: 200px }
.picker li button { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 6px 10px; border-radius: 6px; cursor: pointer; font: inherit }
.picker li button:hover, .picker li:first-child button { background: rgba(255,255,255,.07) }
.mention { color: var(--accent, #9be3d7); font-weight: 600 }

/* Running timers in the Studio: the bar above the table, the names under a project, and figures that count up */
.livebar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.live-who { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; color: var(--muted); }
.live-who .dot { width: 7px; height: 7px; }
.clock { font-variant-numeric: tabular-nums; }
.ticking { font-variant-numeric: tabular-nums; }
table.live tr.running td { background: rgba(0,194,122,.04); }

/* Business view: tiles, charts and the by-client table */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.tiles.small4 .tile .value { font-size: 20px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.tile .label { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.tile .value { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tile.good .value { color: #00C27A; } .tile.warn .value { color: var(--warn); } .tile.bad .value { color: var(--danger); }
.tile .up { color: #00C27A; } .tile .down { color: var(--danger); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chart-wrap { width: 100%; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .grid.target { stroke: var(--muted); stroke-dasharray: 3 4; }
.chart .tick { fill: var(--muted); font-size: 11px; }
.chart .val { fill: var(--text); font-size: 11px; font-weight: 700; }
.chart .val.neg { fill: var(--danger); }
.chart .bar.rev, .legend .sw.rev { fill: #2A9D8A; background: #2A9D8A; }
.chart .bar.cost, .legend .sw.cost { fill: #CF7A2B; background: #CF7A2B; }
.chart g.hot .bar { filter: brightness(1.2); }
.chart .line { fill: none; stroke: #2A9D8A; stroke-width: 2; stroke-linejoin: round; }
.chart .pt { fill: #2A9D8A; stroke: var(--panel); stroke-width: 2; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.tip { font-size: 13px; min-height: 20px; margin-top: 6px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.bar-cell { width: 18%; } .hbar { display: block; height: 8px; border-radius: 4px; background: #2A9D8A; opacity: .8; }
tr.total td { border-top: 1px solid var(--line); font-weight: 700; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } .two { grid-template-columns: 1fr; } }

/* Studio home: the logo is the home tab; the My work / Everything toggle sits beside the title */
header.bar .brand.on { color: var(--accent); }
.studio-head { align-items: center; margin-bottom: 8px; }
.studio-head .h { margin: 0; }
.seg.big a { padding: 7px 14px; color: var(--muted); font-weight: 600; }
.seg.big a.on { background: var(--panel); color: var(--text); }
/* Chats as an inbox */
.threads li { display: flex; align-items: center; gap: 8px; }
.threads li a { flex: 1; }
.threads li.unread b { color: var(--text); }
.threads .preview { max-width: 60ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.threads .tick { flex: none; }

/* Layout: a collapsible side menu beside the page */
.layout { display: block; }
.layout.with-side { display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.side { position: sticky; top: 57px; align-self: start; height: calc(100vh - 57px); overflow-y: auto; padding: 14px 10px 24px 14px; border-right: 1px solid var(--line); background: var(--bg); }
.side h3 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 8px 6px; display: flex; justify-content: space-between; }
.side h3:first-child { margin-top: 0; }
.side .menu { list-style: none; margin: 0; padding: 0; }
.side .menu a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--muted); font-size: 14px; }
.side .menu a:hover { background: var(--panel); text-decoration: none; color: var(--text); }
.side .menu a.on { background: var(--panel); color: var(--text); font-weight: 600; }
.side .boards .sw { flex: none; width: 14px; height: 14px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; }
.side .boards .sw img { width: 14px; height: 14px; object-fit: cover; }
.side .boards .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .find { width: 100%; margin: 0 0 6px; padding: 6px 8px; font-size: 13px; }
.side .foot { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.burger { font-size: 18px; }
@media (max-width: 900px) {
  .layout.with-side { grid-template-columns: 1fr; }
  .layout.with-side .side { position: fixed; left: 0; top: 57px; width: 260px; z-index: 6; box-shadow: 12px 0 30px rgba(0,0,0,.4); }
}

/* Beside the menu, the page fills its column (auto margins alone let a grid item grow to its max-width) */
.layout.with-side main.page { width: 100%; }

/* People as links, and the person page */
a.who { color: inherit; } a.who:hover { color: var(--accent); }
a.av { text-decoration: none; }
table.months tr.on td { background: rgba(168,232,232,.06); }
.st.submitted { background: var(--warn); color: var(--bg); } .st.paid { background: #00C27A; color: var(--bg); }

/* View switch and the bar that shows when the screen is lowered */
.viewswitch { position: relative; }
.iconbtn.wide { width: auto; padding: 0 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.iconbtn.wide.on { background: var(--warn); color: var(--bg); border-color: var(--warn); }
.view-drop { width: 360px; padding: 10px; }
.view-drop p { margin: 0 0 8px; }
.row-btn { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; margin: 2px 0; font-weight: 600; }
.row-btn:hover { background: var(--panel2); } .row-btn.on { border-color: var(--accent); }
.row-btn .muted { display: block; font-weight: 400; }
.viewbar { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--warn); color: var(--bg); font-size: 14px; position: sticky; top: 57px; z-index: 4; }
.viewbar .dot { background: var(--bg); box-shadow: none; animation: none; width: 8px; height: 8px; }
.viewbar button { border-color: var(--bg); color: var(--bg); }
@media (max-width: 760px) { .iconbtn.wide { font-size: 0; width: 36px; padding: 0; } .iconbtn.wide::before { content: '👁'; font-size: 16px; } }

/* The door, calmer attention, section menus */
.door { max-width: 520px; text-align: center; }
.door .panel { text-align: left; margin: 16px 0; }
.door .ok { color: #00C27A; font-weight: 600; }
.chip.soft { background: var(--panel2); color: var(--muted); font-weight: 500; margin-right: 4px; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.side .leads .grp { padding: 6px 8px 2px; }
.side .boards .val { margin-left: auto; white-space: nowrap; }
.tiny-select { width: auto; padding: 2px 4px; font-size: 11px; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.side-note { margin: 6px 8px; }
tr.on td { background: rgba(168,232,232,.06); }
.mt { margin-top: 12px; }

/* To chase */
.chase-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.chase h3 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 6px 0; }
.leads li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.leads li:last-child { border-bottom: 0; }
.leads li.on { background: rgba(168,232,232,.04); }
.leads .grow { flex: 1; }
.score { display: inline-grid; place-items: center; min-width: 30px; height: 24px; border-radius: 6px; background: var(--panel2); font-weight: 800; font-size: 12px; padding: 0 6px; }
.score.good { background: #00C27A; color: var(--bg); } .score.warn { background: var(--warn); color: var(--bg); }
.signals { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.why { margin-top: 8px; font-size: 14px; }
.why blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--panel2); border-radius: 0 8px 8px 0; white-space: pre-wrap; }
.strip { margin: 0 0 10px; }
@media (max-width: 900px) { .chase-grid { grid-template-columns: 1fr; } }

/* Lead cards stack vertically; the first row wraps */
.chase .leads li { display: block; }
.chase .leads li > .row { flex-wrap: wrap; row-gap: 4px; }
.chase .leads .why { display: block; }

/* Needs a look: tick and hand-off; Tagged for you */
.attention li { position: relative; flex-wrap: wrap; }
.attention .acts { margin-left: auto; display: inline-flex; gap: 4px; }
.attention .handoff { flex-basis: 100%; margin: 6px 0 2px 28px; }
.attention .handoff select, .attention .handoff input { width: auto; flex: 1; }
.tagged li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tagged li:last-child { border-bottom: 0; }
.tagged li a { flex: 1; }

/* Calendar views */
.cal-head { align-items: center; flex-wrap: wrap; gap: 8px; }
.cal-head .h { margin: 0; font-size: 20px; }
.cal.week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal.week .day { min-height: 220px; }
.cal.week .ev { white-space: normal; }
.cal.compact .day { min-height: 56px; font-size: 11px; }
.cal .day.past { opacity: .75; }
.cal .ev.due.late { border-left-color: var(--danger) !important; }
.cal .ev.off { background: rgba(242,201,76,.18); color: var(--text); }
.cal .ev.off.requested { opacity: .7; border: 1px dashed var(--warn); }
.cal .ev.fu { background: rgba(168,232,232,.12); color: var(--text); }
.cal-key .ev { display: inline-block; margin-right: 6px; padding: 0 6px; }
.chase .rule { margin: -4px 0 10px; }
.small-dot { width: 7px; height: 7px; }
.warn { color: var(--warn); }
code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* API usage */
.caps { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.spark .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.spark .bar { width: 100%; background: #2A9D8A; border-radius: 3px 3px 0 0; min-height: 0; }
.spark .bar-col span { font-size: 11px; margin-top: 2px; }
@media (max-width: 760px) { .caps { grid-template-columns: 1fr 1fr; } }
table.services td { vertical-align: top; }
table.services tr.has-err td:first-child { border-left: 3px solid var(--danger); }

/* My work: the week strip, comparisons */
.week { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.week h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.cmp { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.cmp h3 { margin: 0 0 8px; }
.row.wrap { flex-wrap: wrap; }
button.on-pick { border-color: var(--accent); color: var(--text); }
@media (max-width: 900px) { .week { grid-template-columns: 1fr; } }

/* Meetings */
.meetings li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.meetings .when { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; min-width: 44px; }
.cal .ev.meeting { background: rgba(168,232,232,.14); color: var(--text); border-left: 3px solid var(--accent); }

/* Phones: tables scroll inside their panel instead of stretching the page; rows wrap; nothing is nowrap-trapped */
main.page { overflow-x: clip; }
nav.sub { max-width: 100%; min-width: 0; }
.indent { padding-left: 22px !important; }
.side .menu.sub { margin: 0 0 4px 10px; border-left: 1px solid var(--line); padding-left: 2px; }
.side .menu.sub a { padding: 4px 8px; font-size: 13px; }
.attention li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.attention li > a { flex: 1 1 60%; min-width: 0; }
.attention .meta { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 760px) {
  .panel table, table.live, table.small { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .panel table thead, .panel table tbody, .panel table tr { display: table; width: 100%; table-layout: auto; }
  .row { flex-wrap: wrap; }
  .tile .value { font-size: 22px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .attention li > a { flex-basis: 100%; }
  .attention .meta { margin-left: 28px; }
  .tagged li { flex-wrap: wrap; } .tagged li a { flex-basis: 100%; order: 3; }
  .threads li a { flex-wrap: wrap; } .threads .preview { white-space: normal; }
  .spark .bar-col span { display: none; } .spark { overflow: hidden; }
  .chase-grid { grid-template-columns: 1fr; }
  .studio-head { flex-wrap: wrap; }
  .seg.big a { padding: 6px 10px; }
  table.live th:nth-child(n+5), table.live td:nth-child(n+5) { display: table-cell; }
}
/* Phones: the warning's icon and text share a line; who and the buttons sit under it, to the right */
@media (max-width: 760px) {
  .attention li > a { flex: 1 1 0; flex-basis: 0; }
  .attention .meta { flex-basis: 100%; justify-content: flex-end; margin-left: 0; }
  .livebar { flex-wrap: wrap; } .livebar > b, .livebar > .dot { white-space: nowrap; }
}

/* Team board */
.find-wide { max-width: 420px; }
table.board td { vertical-align: top; }
table.board tr.on td { background: rgba(168,232,232,.05); }
table.board tr.detail td { background: var(--panel2); }
.loadcell { min-width: 200px; }
.loadbar { position: relative; height: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 4px 0; }
.loadbar .fill { height: 100%; background: #2A9D8A; }
.loadbar .fill.warn { background: var(--warn); } .loadbar .fill.bad { background: var(--danger); } .loadbar .fill.low { background: #5B8DEF; }
.loadbar .over { position: absolute; top: 0; left: 0; height: 100%; background: repeating-linear-gradient(45deg, rgba(247,168,168,.9) 0 4px, transparent 4px 8px); }
b.bad { color: var(--danger); } b.warn { color: var(--warn); } b.good { color: #00C27A; } b.low { color: #5B8DEF; }
.offstrip { display: inline-flex; gap: 2px; }
.offstrip .cell { width: 10px; height: 14px; border-radius: 2px; background: var(--panel2); border: 1px solid var(--line); }
.offstrip .cell.we { opacity: .45; } .offstrip .cell.off { background: var(--warn); border-color: var(--warn); } .offstrip .cell.today { outline: 1px solid var(--accent); }
details.panel summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details.manage { margin-top: 12px; }
/* Skills grid */
table.grid th.rot { height: 110px; vertical-align: bottom; white-space: nowrap; }
table.grid th.rot > span { display: inline-block; transform: rotate(-60deg); transform-origin: left bottom; width: 20px; font-weight: 500; color: var(--muted); }
table.grid td.cell { text-align: center; padding: 3px; }
.lv { display: inline-grid; place-items: center; width: 26px; height: 22px; border-radius: 5px; font-size: 11px; font-weight: 700; color: var(--bg); }
.lv0 { background: transparent; } .lv1 { background: rgba(42,157,138,.25); color: var(--muted); } .lv2 { background: rgba(42,157,138,.45); color: var(--text); } .lv3 { background: rgba(42,157,138,.7); } .lv4 { background: rgba(42,157,138,.88); } .lv5 { background: #2A9D8A; }
table.grid td.thin b { color: var(--danger); }

/* Phones: the team board keeps its columns and scrolls sideways; hand-off suggestions read as one line each */
@media (max-width: 760px) { table.board thead, table.board tbody, table.board tr { min-width: 720px; } }
.panel.hot ul.plain li { display: block; } .panel.hot ul.plain li a { white-space: nowrap; margin-left: 6px; }

/* Timeline (Gantt): a sticky label column and a scrolling track of days */
.gantt-bar { margin-bottom: 8px; }
.gantt { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grow { display: flex; align-items: stretch; border-top: 1px solid var(--line); min-width: max-content; }
.grow.head { border-top: 0; position: sticky; top: 0; z-index: 3; background: var(--panel); }
.glabel { flex: none; width: 240px; position: sticky; left: 0; z-index: 2; background: var(--panel); padding: 6px 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; font-size: 13px; overflow: hidden; }
.glabel a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glabel .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtrack { position: relative; flex: none; display: flex; height: 44px; }
.grow.head .gtrack { height: 40px; }
.gd { flex: none; width: 28px; border-right: 1px solid rgba(255,255,255,.04); position: relative; }
.gd.we { background: rgba(255,255,255,.03); }
.gd.today { box-shadow: inset 2px 0 0 var(--accent); }
.gd u { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); text-decoration: none; }
.gd.today u { color: var(--accent); font-weight: 700; }
.gwk { position: absolute; top: 2px; font-size: 11px; color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.ggroup .ghead { position: sticky; left: 0; padding: 8px 10px 4px; font-size: 13px; background: var(--panel2); border-top: 1px solid var(--line); max-width: 100vw; }
.gbar { position: absolute; top: 9px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--accent-bar, var(--accent)) 35%, var(--panel2)); border: 1px solid var(--accent-bar, var(--accent)); color: var(--fg); font-size: 11px; line-height: 24px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.gbar span { position: relative; } .gbar em { font-style: normal; color: var(--muted); }
.gbar .done { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-bar, var(--accent)); opacity: .45; }
.gbar.late { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }
.gbar.runs-on { border-right-style: dashed; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gbar.waiting { background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 4px, transparent 4px 8px); border-style: dashed; border-color: var(--muted); color: var(--muted); }
.gbar.nobody { background: transparent; border: 1px dashed var(--warn); color: var(--warn); }
.gdue { position: absolute; top: 0; transform: translateX(-50%); color: var(--accent); font-size: 12px; line-height: 12px; z-index: 1; }
.gdue.late { color: var(--danger); }
@media (max-width: 760px) { .glabel { width: 150px; font-size: 12px; } }

/* Efficiency chart: training bars and the line swatch in the legend */
.chart .bar.train { fill: #5B8DEF; opacity: .8; }
.legend .sw.train { background: #5B8DEF; }
.legend .sw.line { background: var(--accent); height: 3px; margin-top: 5px; }

/* Timeline readings: the slower tail behind the bar, the faster notch inside it, idle bars dashed */
.gslow { position: absolute; top: 12px; height: 20px; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent-bar, var(--accent)) 30%, transparent) 0 3px, transparent 3px 6px); opacity: .8; }
.gfast { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fg); opacity: .7; }
.gbar.idle { border-style: dashed; }

/* Status pills, one colour per status; as a menu they open a small drop */
.sp { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--sc); background: color-mix(in srgb, var(--sc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); line-height: 16px; }
button.sp.menu { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; } button.sp.menu i { font-style: normal; opacity: .7; font-size: 11px; }
.sp.big { font-size: 13px; padding: 6px 12px; gap: 6px; } .sp.big b { font-size: 16px; }
.spwrap { position: relative; display: inline-block; }
.drop.sp-drop { left: 0; right: auto; top: 26px; width: 240px; padding: 4px; }
.drop.sp-drop .row-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.status-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.status-strip .strip-sum { margin-left: auto; }
/* Flags */
.flagb { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.flagb.critical { background: #E5484D; color: #fff; } .flagb.high { background: #E0A82E; color: #1a1200; }
button.flagb.pick { cursor: pointer; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 12px; padding: 2px 7px; }
button.flagb.pick.critical { background: #E5484D; color: #fff; border-style: solid; border-color: #E5484D; } button.flagb.pick.high { background: #E0A82E; color: #1a1200; border-style: solid; border-color: #E0A82E; }
tr.flag-critical td:first-child, .card.flag-critical { box-shadow: inset 3px 0 0 #E5484D; } tr.flag-high td:first-child, .card.flag-high { box-shadow: inset 3px 0 0 #E0A82E; }
/* Sortable headers */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.sortable:hover { color: var(--text); } th.sortable.on { color: var(--accent); } th.sortable i { font-style: normal; font-size: 11px; }
/* By status: one stacked bar per board */
.stacks { display: flex; flex-direction: column; gap: 6px; }
.stackrow { display: grid; grid-template-columns: 240px 1fr; gap: 12px; align-items: center; }
.stacklabel { min-width: 0; } .stacklabel a { font-weight: 600; }
.stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 1px; min-width: 24px; }
.stack .seg { display: flex; align-items: center; justify-content: center; min-width: 18px; background: var(--sc); color: #0b1f20; font-size: 11px; font-weight: 700; text-decoration: none; }
.stack .seg.stale { background: repeating-linear-gradient(135deg, var(--sc) 0 6px, color-mix(in srgb, var(--sc) 55%, #000) 6px 10px); }
.seg-key.stale { display: inline-block; width: 28px; height: 12px; vertical-align: middle; border-radius: 3px; background: repeating-linear-gradient(135deg, #7A8CA3 0 6px, #46525f 6px 10px); margin: 0 4px 0 10px; }
@media (max-width: 760px) { .stackrow { grid-template-columns: 1fr; gap: 4px; } .status-strip .strip-sum { margin-left: 0; flex-basis: 100%; } }
/* Team dashboard */
.hstack { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--panel2); border: 1px solid var(--line); margin: 4px 0; }
.hstack i { display: block; height: 100%; } .hstack .b { background: #2A9D8A; } .hstack .t { background: #5B8DEF; } .hstack .d { background: #CF7A2B; }
.worked { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; } .worked .wk { white-space: nowrap; }
.spark-line { vertical-align: middle; margin-right: 6px; } .spark-line path { fill: none; stroke: var(--accent); stroke-width: 1.5; } .spark-line circle { fill: var(--accent); }
table.dash .detail .two { align-items: start; }
.filters select { width: auto; max-width: 100%; }

/* Growth balance */
.recs li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); line-height: 1.45; } .recs li:first-child { border-top: 0; }
.recs .mark { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.recs li.tone-bad .mark { background: var(--danger); } .recs li.tone-warn .mark { background: var(--warn); } .recs li.tone-good .mark { background: #00C27A; }
.balance { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.brow { display: grid; grid-template-columns: 70px 1fr minmax(180px, 40%); gap: 12px; align-items: center; }
.blabel { font-weight: 600; } .bval { font-weight: 700; }
.btrack { position: relative; height: 22px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; overflow: visible; }
.bfill { height: 100%; border-radius: 5px; } .bfill.supply { background: #2A9D8A; } .bfill.demand { background: #5B8DEF; } .bfill.demand.over { background: var(--danger); }
.bmark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--fg); opacity: .8; }
@media (max-width: 760px) { .brow { grid-template-columns: 1fr; gap: 4px; } }

/* Reduced-hours periods and the capacity-ahead strip */
.offstrip .cell.reduced { background: repeating-linear-gradient(45deg, var(--warn) 0 3px, transparent 3px 6px); border-color: var(--warn); }
.cal .ev.off.reduced { background: repeating-linear-gradient(45deg, rgba(224,168,46,.35) 0 4px, rgba(224,168,46,.12) 4px 8px); }
.ahead { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding: 4px 0; }
.awk { flex: 1 1 0; min-width: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
.abar { width: 100%; height: 90px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.afill { width: 100%; background: #2A9D8A; } .afill.warn { background: var(--warn); } .afill.bad { background: var(--danger); }
.row.wrap { flex-wrap: wrap; }
.alost { color: var(--warn); font-weight: 700; } .alost.bad { color: var(--danger); }
.row.wrap > input, .row.wrap > select, .row.wrap > label { width: auto; flex: 0 1 auto; } .row.wrap > input[type=date] { width: 150px; } .row.wrap > input[name=note] { flex: 1 1 160px; }

/* Capacity tab: one bar per person */
.caprows { display: flex; flex-direction: column; gap: 6px; }
.caprow { display: grid; grid-template-columns: 220px 1fr minmax(220px, 34%); gap: 12px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); }
.caprow:first-child { border-top: 0; }
.caprow.nofit { opacity: .45; } .caprow.fits .caplabel { box-shadow: inset 3px 0 0 #00C27A; padding-left: 8px; }
.captrack { position: relative; height: 22px; }
.capcap { position: absolute; left: 0; top: 0; height: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; }
.capload { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px 0 0 6px; background: #2A9D8A; }
.capload.warn { background: var(--warn); } .capload.bad { background: var(--danger); } .capload.low { background: #5B8DEF; }
.capover { position: absolute; top: 0; height: 100%; background: repeating-linear-gradient(45deg, rgba(247,168,168,.9) 0 4px, transparent 4px 8px); border-radius: 0 6px 6px 0; }
.capneed { position: absolute; top: 3px; height: 16px; background: rgba(255,255,255,.35); border: 1px dashed rgba(255,255,255,.7); border-radius: 4px; }
.capval { font-size: 13px; }
.lvlpill { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); }
@media (max-width: 760px) { .caprow { grid-template-columns: 1fr; gap: 4px; } }

/* Avatars: a photo, or initials on a colour that follows the name */
.avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .02em; vertical-align: middle; flex: none; }
.avatar.xs { width: 20px; height: 20px; font-size: 11px; }
.avatar.big { width: 64px; height: 64px; font-size: 22px; }
.people .av .avatar { width: 24px; height: 24px; }
.msg .who .avatar { margin-right: 2px; }
.iconbtn.me-btn { padding: 0; width: 36px; display: grid; place-items: center; }
.profile-card .row { align-items: flex-start; gap: 20px; }
.pc-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pc-name { display: flex; flex-direction: column; gap: 8px; min-width: 240px; flex: 1; }
label.btn.tiny { cursor: pointer; }
.face { display: inline-flex; align-items: center; gap: 6px; } .side .boards .avatar { flex: none; }
.invite-made { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; }
.invite-made code { word-break: break-all; background: var(--panel2); padding: 4px 8px; border-radius: 6px; }
.btn.tiny { padding: 4px 10px; font-size: 12px; }

/* Onboarding calendar event colours */
.ev.ob { border-left: 3px solid var(--muted); background: var(--panel); }
.ev.ob.interview { border-left-color: #8E6CE0; } .ev.ob.call { border-left-color: #5B8DEF; } .ev.ob.meeting { border-left-color: #2A9D8A; } .ev.ob.fu { border-left-color: var(--warn); }
.book { margin: 6px 0 10px; } .book input[type=datetime-local] { width: auto; }

/* Onboarding boards */
.kanban.pipe .col { flex: 0 0 260px; }
.kanban.pipe .col h3 { text-transform: none; letter-spacing: 0; align-items: center; }
.pcard { cursor: pointer; } .pcard.on { border-color: var(--accent); } .pcard.invited { border-style: dashed; }
.pcard .between { justify-content: space-between; align-items: flex-start; }
.mt-s { margin-top: 6px; }
.pcard .empty { padding: 4px 0; }
.ownbtn { width: 24px; height: 24px; border-radius: 50%; padding: 0; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; }
.ownbtn.none { border: 1px dashed var(--line); color: var(--muted); font-weight: 700; }
.scorechip { display: inline-block; padding: 0 6px; border-radius: 6px; background: #2A9D8A; color: #0b1f20; font-weight: 700; font-size: 11px; }
.obprog .ok { color: #00C27A; } .obprog span { margin-right: 6px; }
.next input.err { border-color: var(--danger); color: var(--danger); }
.detail-panel { border-color: var(--accent); }
@media (max-width: 760px) { .kanban.pipe .col { flex: 0 0 85vw; } }
.side-seg { margin-bottom: 8px; } .side-seg button { flex: 1; padding: 4px 8px; font-size: 12px; }

/* Phone layout: one menu button, a places strip under the header, lists in sheets */
.mmenu { margin-left: auto; position: relative; }
.badge.inline { position: static; margin-left: 8px; }
.mnav { position: sticky; top: 57px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
.mnav-strip { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mnav-strip::-webkit-scrollbar { display: none; }
.mnav-strip a { flex: none; padding: 5px 10px; border-radius: 999px; font-size: 13px; color: var(--muted); border: 1px solid transparent; white-space: nowrap; }
.mnav-strip a.on { background: var(--panel); color: var(--text); font-weight: 600; border-color: var(--line); }
.mnav-drop { flex: none; background: var(--panel); color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 600; }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 10px 14px 30px; }
.sheet-body .find { width: 100%; margin: 0 0 8px; padding: 10px 12px; font-size: 16px; }
.sheet-list a { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 15px; }
.sheet-list a .sw { flex: none; width: 16px; height: 16px; border-radius: 4px; overflow: hidden; display: grid; place-items: center; } .sheet-list a .sw img { width: 16px; height: 16px; object-fit: cover; }
.sheet-list a .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-list a.unread { background: var(--panel2); } .sheet-list a span:last-child { flex: none; }
.sheet-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 15px; cursor: pointer; }
.sheet-row.profile-row .avatar { width: 40px; height: 40px; font-size: 15px; }
.sheet-h { margin: 14px 6px 4px; }
.sheet-foot { margin-top: 20px; }
@media (max-width: 760px) {
  .burger { display: none; }
  header.bar { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; }
  header.bar .brand { font-size: 15px; } header.bar .brand .logo { width: 24px; height: 24px; }
  nav.tabs { order: 0; flex-basis: auto; flex: 1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  nav.tabs a { padding: 6px 8px; font-size: 14px; white-space: nowrap; }
  .layout main.page { padding: 10px 12px 40px; }
  .viewswitch .drop { position: static; width: 100%; max-width: none; margin-top: 8px; }
}
@media (max-width: 760px) { .sheet .iconbtn.wide { font-size: 14px; width: auto; padding: 0 12px; } .sheet .iconbtn.wide::before { content: none; } .sheet .viewswitch { width: 100%; } }

/* Phone section switch in the header */
.section-pick { position: relative; }
.section-pick button.brand { background: transparent; border: 0; padding: 4px 6px; font: inherit; font-weight: 800; font-size: 16px; color: var(--accent); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.section-pick .caret { font-style: normal; font-size: 12px; opacity: .7; }
.drop.section-drop { left: 0; right: auto; width: 200px; top: 44px; }
.drop.section-drop a { font-size: 15px; font-weight: 600; } .drop.section-drop a.on { background: var(--panel2); color: var(--accent); }
@media (max-width: 760px) { header.bar { z-index: 20; } }

/* The clock button: lit while a timer runs */
.clockbtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; max-width: 240px; }
.clockbtn .nm { overflow: hidden; text-overflow: ellipsis; }
.clockbtn.on { border-color: #00C27A; color: #00C27A; background: rgba(0,194,122,.1); font-weight: 700; }
.clockbtn.on .dot { background: #00C27A; box-shadow: 0 0 0 0 rgba(0,194,122,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,194,122,.6); } 70% { box-shadow: 0 0 0 8px rgba(0,194,122,0); } 100% { box-shadow: 0 0 0 0 rgba(0,194,122,0); } }
.mnav .clockbtn { flex: none; height: 30px; padding: 0 8px; }

/* Modal dialogs */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.modal { width: 100%; max-width: 480px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal-body { padding: 14px; } .modal-body .field { margin-bottom: 10px; } .modal-body .row { margin-top: 12px; }
button.danger { background: var(--danger); color: #fff; }
tr.edit-row td { background: var(--panel2); }
@media (max-width: 760px) { .modal-back { padding: 0; align-items: end; } .modal { max-width: none; border-radius: 14px 14px 0 0; } }

/* Business › Breakdown */
.totals-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.totals-pair .vs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 150px; padding: 0 10px; }
.totals-pair .vs b { font-size: 26px; } .vsbar { width: 100%; height: 8px; background: #2A9D8A; border-radius: 6px; overflow: hidden; margin: 6px 0 2px; } .vsbar i { display: block; height: 100%; background: #CF7A2B; }
.donuts .panel { min-width: 0; }
.donut { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: center; }
.donut svg { width: 180px; height: 180px; } .donut-v { font-size: 15px; font-weight: 800; fill: var(--text); } .donut-l { font-size: 11px; fill: var(--muted); }
.legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legend-list li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; align-items: center; padding: 3px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.legend-list li.hot, .legend-list li:hover { background: var(--panel2); } .legend-list .sw { width: 12px; height: 12px; border-radius: 3px; } .legend-list .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-wrap { height: 8px; background: var(--panel2); border-radius: 6px; overflow: hidden; margin: 4px 0; } .hbar-wrap .hbar { display: block; height: 100%; background: #2A9D8A; } .hbar-wrap .hbar.cost { background: #CF7A2B; }
.warn-text { color: var(--warn); }
@media (max-width: 760px) { .totals-pair { grid-template-columns: 1fr; } .donut { grid-template-columns: 1fr; justify-items: center; } }
@media (max-width: 760px) { table.bd thead, table.bd tbody, table.bd tr { min-width: 760px; } table.bd th:nth-child(n+5), table.bd td:nth-child(n+5) { display: table-cell; } }
.danger-text { color: var(--danger); }

/* Timer warning bar and the quiet nudge */
.timer-warn { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(229,72,77,.12); border-bottom: 1px solid var(--danger); font-size: 14px; }
.timer-warn .ic { font-size: 18px; } .timer-warn .txt { flex: 1; min-width: 0; }
.nudge { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.4); font-size: 13px; max-width: 94vw; flex-wrap: wrap; justify-content: center; }
.clsmove { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.clsmove .tiny { padding: 1px 6px; font-size: 11px; }
@media (max-width: 760px) { .timer-warn { flex-wrap: wrap; } }

/* ---------- the client board: cover, tabs, cards, chat room, cover picker ---------- */
.cover { position: relative; border-radius: var(--radius); margin: -4px 0 12px; background: var(--panel); border-left: 6px solid var(--accent-c); min-height: 64px; background-size: cover; background-position: center; overflow: hidden; }
.cover.has-photo { min-height: 160px; border-left: 0; }
.cover.has-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,42,43,.15), rgba(14,42,43,.85)); }
.cover-in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; min-height: inherit; }
.cover.has-photo .cover-in { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.cover.has-photo .cover-in h1, .cover.has-photo .cover-link { color: #fff; }
.cover .brand-h { margin: 0; }
.cover.has-photo .ghost, .cover.has-photo .ghost.btn { border-color: rgba(255,255,255,.5); color: #fff; backdrop-filter: blur(4px); background: rgba(14,42,43,.35); text-shadow: none; }
.cover .cog.on { background: var(--panel); color: var(--text); }
.cover .warn { font-size: 13px; }
.board-tabs { align-items: center; }
.board-tabs .seg.right { margin-left: auto; }
.badge.inline { position: static; display: inline-grid; vertical-align: middle; margin-left: 2px; }
.card .bubble { color: var(--muted); font-size: 12px; text-decoration: none; }
.card .bubble.fresh { color: var(--accent); font-weight: 700; }
.card .bubble:hover { color: var(--text); }
.card .live { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.card .live .dot { width: 8px; height: 8px; }
.card .live .people .avatar { outline: 2px solid #00C27A; }
.live-who { font-size: 13px; color: var(--muted); font-weight: 400; display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.people-time { margin-bottom: 10px; } .people-time td .dot { width: 8px; height: 8px; margin-left: 4px; }
.chatroom { display: grid; grid-template-columns: 280px 1fr; gap: var(--gap); align-items: start; }
.chatroom-list { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chatroom-list li button { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 12px; display: grid; gap: 2px; color: var(--text); position: relative; }
.chatroom-list li:last-child button { border-bottom: 0; }
.chatroom-list li button b { font-size: 14px; padding-right: 28px; }
.chatroom-list li button .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatroom-list li.on button { background: var(--bg); }
.chatroom-list li.fresh button b { color: var(--accent); }
.chatroom-list li.team button { border-left: 3px solid var(--warn); }
.chatroom-list li.tim button { border-left: 3px solid #8E6CE0; }
.chatroom-list li .badge.inline { position: absolute; right: 10px; top: 12px; }
.chatroom-main .panel.chat { margin-bottom: 0; }
.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.cover-opt { aspect-ratio: 16 / 9; background-size: cover; background-position: center; border: 2px solid var(--line); border-radius: 8px; padding: 0; cursor: pointer; }
.cover-opt:hover { border-color: var(--accent); }
.settings-tabs { margin-top: -6px; }
.chip.good { background: #00C27A; }
@media (max-width: 760px) {
  .cover.has-photo { min-height: 120px; }
  .chatroom { grid-template-columns: 1fr; }
  .board-tabs .seg.right { margin-left: 0; }
}

/* ---------- guide, files (Drive inside the board), workspaces ---------- */
.crumb { margin: 0 0 6px; }
.guide .panel.soft { border-style: dashed; }
.guide-sec.empty { opacity: .85; }
.guide-sec .head { margin-bottom: 4px; }
.swatch.big { width: 28px; height: 28px; border-radius: 8px; display: inline-block; border: 1px solid var(--line); }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.peek p { margin: 4px 0; }
ul.links li { margin: 3px 0; }
.drive iframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.drive.compact iframe { height: 320px; }
.drive-bar { margin-bottom: 8px; justify-content: space-between; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ws-card { display: grid; gap: 4px; padding: 14px; border-radius: 10px; border: 1px solid var(--line); border-left: 5px solid var(--accent-c); background: var(--bg); background-size: cover; background-position: center; color: var(--text); min-height: 96px; align-content: end; text-decoration: none; }
.ws-card:hover { border-color: var(--accent); text-decoration: none; }
.ws-card b { font-size: 16px; display: flex; align-items: center; gap: 6px; }
.ws-card .dot { width: 8px; height: 8px; }
.menu.boards li.sub a { padding-left: 26px; }
.menu.boards li.sub .sw { width: 10px; height: 10px; }
@media (max-width: 760px) { .drive iframe { height: 380px; } }

/* ---------- Needs a look: one row per thing, the client on top, the message under it, tags and actions ---------- */
ul.look { list-style: none; margin: 0; padding: 0; }
ul.look li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); white-space: normal; }
ul.look li:last-child { border-bottom: 0; }
ul.look .ic { font-size: 16px; line-height: 1.4; }
ul.look .what { display: grid; gap: 3px; min-width: 0; }
ul.look .what a, ul.look .what span { white-space: normal; overflow-wrap: anywhere; }
ul.look .head { font-weight: 700; color: var(--text); font-size: 14px; }
ul.look li.high .head { color: var(--danger); }
ul.look .body { font-size: 14px; line-height: 1.4; }
ul.look .body:is(a) { color: var(--text); }
ul.look .tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
ul.look .tags .who { text-transform: uppercase; letter-spacing: .06em; }
ul.look .tags .chip { font-size: 11px; padding: 0 8px; }
ul.look .acts { display: inline-flex; gap: 4px; }
ul.look .handoff { grid-column: 2 / -1; margin-top: 4px; }
ul.look .handoff select, ul.look .handoff input { width: auto; flex: 1; min-width: 120px; }
.attention .head .chip { margin-top: 4px; }
@media (max-width: 760px) {
  .attention > .head { flex-wrap: wrap; }
  .timer-warn .txt { flex-basis: 100%; }
  .timer-warn .txt .row { margin-top: 8px; }
}
.sheet-list a.add { color: var(--accent); font-weight: 600; } .sheet-list a.add .sw { background: transparent; border: 1px dashed var(--accent); color: var(--accent); font-size: 11px; line-height: 1; }


/* ---------- built for humans: the rules this app follows, from Apple's Human Interface Guidelines ----------
   Legibility: nothing under 11px, body 16px on phones, no light weights. Controls: 44px targets on touch, 28px with a
   pointer. Feedback: hover and focus answer at once, nothing animates for its own sake, and Reduce Motion is honoured.
   Colour: the accent means "you can press this", red means harm, yellow means caution; never colour alone.
   Safe areas on phones. Everything else in docs/design.md. */
:root { --tap: 28px; --t-cap: 12px; --t-foot: 13px; --t-sub: 14px; --t-body: 15px; --t-head: 16px; --t-title: 24px; }
@media (pointer: coarse) { :root { --tap: 44px; --t-body: 16px; } html, body { font-size: 16px; } }
button, .btn { min-height: var(--tap); transition: background-color .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease; }
button.tiny, .btn.tiny { min-height: 28px; padding: 3px 10px; }
@media (pointer: coarse) { button.tiny, .btn.tiny { min-height: 40px; padding: 6px 12px; } .iconbtn { width: 44px; height: 44px; } input, select, textarea { min-height: 44px; font-size: 16px; } .sheet-list a, .menu a, nav.sub a, nav.tabs a { min-height: 44px; display: flex; align-items: center; } }
a, .card, .ws-card, .iconbtn, nav.sub a, nav.tabs a { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
button:focus-visible, .btn:focus-visible, .iconbtn:focus-visible { outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
button.danger.solid { background: var(--danger); color: var(--bg); border: 0; }
main.page { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.sheet-body { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.mnav { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }

/* Toasts: what just happened, at the bottom, out of the way, gone by itself. Undo where there is an undo. */
.toasts { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(480px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.35); font-size: var(--t-sub); animation: toast-in .18s ease-out; }
.toast span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast.ok { border-color: #00C27A; } .toast.ok::before { content: '✓'; color: #00C27A; font-weight: 800; }
.toast.bad { border-color: var(--danger); } .toast.bad::before { content: '!'; color: var(--danger); font-weight: 800; }
.toast.info::before { content: 'i'; color: var(--accent); font-weight: 800; font-style: italic; }
.toast .x { background: transparent; border: 0; color: var(--muted); min-height: 28px; width: 28px; padding: 0; font-size: 16px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Asks: a small dialog for a decision. The safe choice is first on the left; the risky one is red and named for what it does. */
.modal-back.ask { z-index: 70; animation: fade-in .15s ease-out; }
.modal-back.ask .modal { animation: pop-in .18s ease-out; }
.ask-title { margin: 0 0 6px; font-size: 18px; }
.ask-row { justify-content: flex-end; }
.modal-body .field textarea, .modal-body .field input { margin: 4px 0 0; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }

/* Loading: the shape of what is coming, so the page never looks broken while it waits. */
.skeleton { display: grid; gap: 10px; padding: 6px 0; }
.skeleton span { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 0%, var(--panel2) 50%, var(--line) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton.small { gap: 6px; } .skeleton.small span { height: 10px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Reduce Motion: no pulsing, no shimmer, no entrances; things simply appear. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .skeleton span { background: var(--line); }
}
/* Increase Contrast: brighter separators and secondary text. */
@media (prefers-contrast: more) { :root { --line: #3A6E6F; --muted: #CFE7E3; } }

/* ---------- workflow round: estimate countdown, flagged time, account lead, nudges, guide inbox ---------- */
.timerbar .left { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.timerbar .left.warn { color: var(--warn); border-color: var(--warn); }
.timerbar .left.bad { color: var(--danger); border-color: var(--danger); }
.estbar { height: 6px; background: var(--panel2); border-radius: 999px; overflow: hidden; margin: 6px 0 2px; max-width: 220px; }
.estbar .fill { height: 100%; background: var(--accent); }
.estbar .fill.warn { background: var(--warn); } .estbar .fill.bad { background: var(--danger); }
.chip.flagchip { background: transparent; color: var(--danger); border: 1px solid var(--danger); font-size: 11px; padding: 0 8px; }
.panel.warn-panel { border-color: var(--danger); }
.leadchip { display: inline-flex; align-items: center; gap: 6px; }
.panel.nudge { border-color: var(--warn); }
.panel.nudge textarea { margin-top: 10px; }
.row.between { justify-content: space-between; }
.pins li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pins li:last-child { border-bottom: 0; }
.pins .quote { font-style: italic; }

/* ---------- who holds it, on hold, the manager check, cover ---------- */
.holder { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text); white-space: nowrap; }
.holder.off { color: var(--danger); }
.holder-row { margin-top: 6px; }
.holderbar { margin: 0 0 10px; align-items: center; }
.holderbar .holder { font-size: 14px; }
.chip.holdchip { background: transparent; color: var(--warn); border: 1px solid var(--warn); font-size: 11px; padding: 0 8px; margin-left: 6px; }
.card.held { opacity: .75; border-style: dashed; }
.panel.mcheck { border-color: #8E6CE0; }
.cover-banner { background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 var(--gap); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- chat reactions and edits; the System tab ---------- */
.reacts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.react { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; min-height: 24px; }
.react.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel2)); }
.react-add { position: relative; display: inline-flex; }
.react-pick { position: absolute; bottom: 100%; left: 0; display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px; box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 5; }
.react-pick button { background: transparent; border: 0; font-size: 18px; padding: 2px 4px; min-height: 30px; }
.react-pick button:hover { transform: scale(1.15); }
.msg .reacts .ghost.tiny { opacity: .6; } .msg:hover .reacts .ghost.tiny { opacity: 1; }
.edit-msg input { flex: 1; }
.system .caps td.w { width: 35%; }
.system .lead-line { font-size: 15px; }
.system code { font-size: 12px; color: var(--muted); }
.system .stack li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.system .stack li:last-child { border-bottom: 0; }
.react-pick .more { font-size: 14px; color: var(--muted); }
.react-pick.grid { flex-direction: column; align-items: stretch; border-radius: 12px; padding: 8px; width: 290px; max-width: 80vw; gap: 6px; }
.react-pick.grid .grp { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.react-pick.grid .grp b { width: 100%; font-size: 11px; color: var(--muted); font-weight: 600; }

/* Your rates (client Costs tab) and the currency picker. */
.your-rates table td:first-child { white-space: nowrap; }
.your-rates .saving { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 10px; background: color-mix(in srgb, var(--accent, #5B8DEF) 14%, transparent); }
.cur-pick { width: auto; }

/* Settings › Workspaces: one row each, coloured edge, order buttons, actions to the right (wrapping on a phone). */
.ws-list { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.ws-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--line); border-left: 4px solid var(--accent-c); border-radius: 12px; flex-wrap: wrap; }
.ws-move { display: flex; flex-direction: column; gap: 2px; }
.ws-main { flex: 1 1 220px; min-width: 0; }
.ws-acts { display: flex; gap: .35rem; flex-wrap: wrap; }
.ws-edit { flex: 1 1 260px; display: grid; gap: .4rem; }
.ws-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; }
@media (max-width: 640px) { .ws-add { grid-template-columns: 1fr; } }
.ws-card .ws-about { opacity: .9; }
.ws-card .ws-flag { color: var(--warn, #F2994A); font-weight: 600; }

/* At a glance (My work): one row of counts; tap one to open its list underneath. */
.glance { padding: .7rem .8rem; }
.glance-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.glance .gl { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font-weight: 500; }
.glance .gl b { font-weight: 700; }
.glance .gl i { font-style: normal; opacity: .6; font-size: .8em; }
.glance .gl.on { background: color-mix(in srgb, var(--accent, #5B8DEF) 18%, transparent); border-color: color-mix(in srgb, var(--accent, #5B8DEF) 50%, var(--line)); }
.glance .gl.hot { border-color: #E5484D; }
.glance-body { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.glance-calm { margin: 0; }

/* Status pill with who holds it now, and the menu's greyed steps with the reason. */
.spcell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.spcell .holder { font-size: .78rem; opacity: .85; white-space: nowrap; }
.spcell .holder.client { color: #E0A82E; }
.spcell .holder i { font-style: normal; font-size: .7rem; border: 1px solid currentColor; border-radius: 6px; padding: 0 4px; margin-left: 2px; opacity: .8; }
.sp.menu.pending { opacity: .6; }
.sp-why { border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .3rem; }
.sp-drop .row-btn.off { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; opacity: .55; cursor: default; padding: .3rem .5rem; }
.sp-drop .row-btn.off .small { white-space: normal; max-width: 220px; }

.holder-chip { font-size: .8rem; white-space: nowrap; }
.holder-chip.client { color: #E0A82E; }
/* Inside the glance the group's icon is on the button above, so each row is just the item and its actions. */
.glance ul.look li { grid-template-columns: minmax(0, 1fr) auto; }
.glance ul.look .handoff { grid-column: 1 / -1; }
@media (max-width: 640px) { .glance .gl { padding: .28rem .55rem; font-size: .85rem; gap: .25rem; } .glance-bar { gap: .3rem; } }

/* ‹ October 2026 › month stepper. */
.month-step { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.month-step b { min-width: 8.5em; text-align: center; }

/* Sub-items: progress bar (approved, with the client, in the works) and the item table. */
.subbar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; background: var(--line); margin: .2rem 0 .6rem; }
.subbar .ok { background: #00C27A; } .subbar .rev { background: #E0A82E; } .subbar .wip { background: #2A9D8A; opacity: .7; }
.sub-table tr.closed td { opacity: .6; }
.sub-prog { font-size: .78rem; opacity: .85; white-space: nowrap; }

.sub-row td { background: color-mix(in srgb, var(--line) 25%, transparent); font-size: .9em; }
.sub-indent { opacity: .5; margin-left: .3rem; }
.sub-toggle { margin-left: .3rem; }
.card .sub-prog { display: block; margin-top: 2px; }
.sub-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* My chats: a project's sub-item chats folded into one card. */
.threads li.group { display: block; }
.threads .group-head { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; gap: .5rem; padding: .55rem .2rem; background: none; border: 0; color: inherit; }
.threads .sub-threads { margin: 0 0 .4rem 1.2rem; border-left: 2px solid var(--line); padding-left: .6rem; }
.subitems form.row input { flex: 1 1 260px; }

/* Project page tabs, in the order the work happens. */
.ptabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin: .8rem 0 .9rem; overflow-x: auto; scrollbar-width: none; }
.ptabs a { padding: .55rem .8rem; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; white-space: nowrap; font-weight: 500; }
.ptabs a.on { color: var(--text); border-bottom-color: var(--accent, #5B8DEF); }
.ptab-body.wide { grid-template-columns: 1fr; }
.ptab-body.wide > aside { display: none; }
.time-panel { overflow-x: auto; }
.time-panel table { min-width: 520px; }
.people-list li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.people-list li span { flex: 1; min-width: 0; }
.add-item { margin-bottom: .6rem; }
.add-item input { flex: 1 1 260px; }
aside .panel { overflow-wrap: anywhere; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; flex: none; }

/* Items folded inside a board card. */
.card .card-sub { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 2px 0; color: inherit; cursor: pointer; font: inherit; }
.card-items { list-style: none; margin: .3rem 0 .4rem; padding: .3rem 0 0; border-top: 1px dashed var(--line); display: grid; gap: .3rem; }
.card-items li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .82rem; cursor: pointer; }
.card-items li .nm { flex: 1 1 100%; }
.card-items .sp { font-size: .72rem; }

/* Who's this for? */
.holder-box { max-width: 560px; }
.who-group h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .9rem 0 .4rem; }
.who-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.who-chip, .who-sug { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .65rem .3rem .3rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.who-chip:hover, .who-sug:hover, .who-chip:focus-visible { border-color: var(--accent, #5B8DEF); }
.who-chip.sug { border-color: color-mix(in srgb, var(--accent, #5B8DEF) 60%, var(--line)); }
.who-sug { width: 100%; border-radius: 12px; padding: .5rem; margin-top: .5rem; background: color-mix(in srgb, var(--accent, #5B8DEF) 12%, transparent); }

/* Documents: brief, team doc, 1:1 Tim. Read view first; edit view block by block. */
.doc { line-height: 1.55; }
.doc > * { margin: 0 0 .7rem; }
.doc .doc-h1 { font-size: 1.35rem; margin-top: .4rem; }
.doc h3 { font-size: 1.1rem; margin-top: .9rem; }
.doc h4 { font-size: .98rem; margin-top: .7rem; }
.doc blockquote { border-left: 3px solid var(--line); padding-left: .8rem; color: var(--muted); }
.doc .callout { padding: .6rem .8rem; border-radius: 10px; background: color-mix(in srgb, #5B8DEF 14%, transparent); }
.doc .callout.warn { background: color-mix(in srgb, #E0A82E 16%, transparent); }
.doc .callout.ok { background: color-mix(in srgb, #00C27A 14%, transparent); }
.doc code { background: color-mix(in srgb, var(--line) 60%, transparent); padding: 0 .3em; border-radius: 4px; }
.doc .checklist { list-style: none; padding-left: 0; }
.doc .checklist li.done span { text-decoration: line-through; opacity: .6; }
.doc .checklist label { display: flex; gap: .5rem; align-items: flex-start; }
.doc-table { overflow-x: auto; }
.doc-table table { border-collapse: collapse; min-width: 100%; }
.doc-table td, .doc-table th { border: 1px solid var(--line); padding: .35rem .5rem; vertical-align: top; text-align: left; }
.doc-table th { background: color-mix(in srgb, var(--line) 40%, transparent); }
.doc figure { margin: 0 0 .9rem; }
.doc figure img { max-width: 100%; border-radius: 8px; display: block; }
.doc figure:not(.wide) img { max-height: 520px; width: auto; }
.doc figcaption { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.link-card { display: flex; flex-direction: column; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.doc-edit { display: grid; gap: .5rem; margin-bottom: .6rem; }
.block-edit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem; align-items: start; padding: .35rem; border: 1px dashed var(--line); border-radius: 10px; }
.block-edit .bctl { display: flex; flex-direction: column; gap: 2px; }
.block-edit textarea.grow { width: 100%; resize: vertical; min-height: 2.4rem; }
.block-edit .doc-h-in.l1 { font-size: 1.3rem; font-weight: 700; } .block-edit .doc-h-in.l2 { font-size: 1.1rem; font-weight: 700; }
.table-edit td input { min-width: 90px; } .table-edit input.th { font-weight: 700; } .table-edit .tctl { border: 0; }
.img-edit { max-width: 100%; max-height: 260px; border-radius: 8px; display: block; margin-bottom: .3rem; }
.add-bar { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .4rem 0 .8rem; }
.tpl-pick { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .5rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .6rem; }
.doc-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .45rem .6rem; margin-bottom: .7rem; border-radius: 10px; background: color-mix(in srgb, var(--line) 30%, transparent); }
.doc-tabs { display: flex; gap: .25rem; align-items: center; overflow-x: auto; margin-bottom: .6rem; scrollbar-width: none; }
.doc-tabs .dtab { white-space: nowrap; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.doc-tabs .dtab.on { background: color-mix(in srgb, var(--accent, #5B8DEF) 18%, transparent); border-color: color-mix(in srgb, var(--accent, #5B8DEF) 50%, var(--line)); }
.more-items { min-width: 260px; max-height: 320px; overflow-y: auto; }
.more-items .row-btn { display: flex; justify-content: space-between; gap: .5rem; width: 100%; }
.buildlog .log-form { display: grid; gap: .4rem; margin-bottom: .8rem; }
.log-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.log-pics { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.log-pics img { max-height: 140px; max-width: 220px; border-radius: 6px; border: 1px solid var(--line); }
.check-edit .row { flex-wrap: nowrap; } .check-edit input[type=checkbox] { width: auto; flex: none; } .check-edit input:not([type=checkbox]) { flex: 1; }
.doc .checklist input[type=checkbox] { width: auto; flex: none; margin-top: .3em; }
.doc-tabs { flex-wrap: wrap; overflow: visible; }

/* Bulk changes: ticks and the bar that appears. */
.tickcol { width: 28px; }
input.tick { width: auto; margin: 0; }
tr.ticked td { background: color-mix(in srgb, var(--accent, #5B8DEF) 10%, transparent); }
.bulk-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .7rem; margin-bottom: .6rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent, #5B8DEF) 50%, var(--line)); background: var(--panel, #12302f); }
.bulk-bar .tpl-inline { display: inline-flex; flex-wrap: wrap; gap: .3rem; }

.tier-toggles { display: inline-flex; gap: .3rem; }
.tier-tog { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .45rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.tier-tog.off { opacity: .4; }
.tier-tog.off .chip { filter: grayscale(1); }
.warn-text { color: #E0A82E; }

/* By status: each block names its status. */
.stack .seg { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 .35rem; min-width: 0; }
.stack .seg b { font-weight: 700; }

/* Exact Cloudflare usage: 30 days of rows read, with the free daily limit as a line. */
.cf-days { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 90px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.cf-days span { flex: 1; background: color-mix(in srgb, var(--accent, #5B8DEF) 70%, transparent); border-radius: 2px 2px 0 0; min-height: 2px; }
.cf-days span.hot { background: #E5484D; }
.cf-days .cf-limit { position: absolute; left: 0; right: 0; border-top: 1px dashed #E0A82E; }

.usage-table { width: 100%; }
.usage-table th, .usage-table td { white-space: nowrap; }
.usage-table td.w { width: 35%; }

/* The document editor (Tim, 3 Nov): one page you type into, like a Google Doc. Toolbar on top, paper below. */
.docsheet { min-width: 0; }
.doc-toolbar { position: sticky; top: 64px; z-index: 4; display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 12px 12px 0 0; background: var(--panel, #12302f); }
.doc-toolbar.ro { position: static; min-height: 2rem; }
.doc-toolbar select { width: auto; padding: .25rem .4rem; font-size: .85rem; }
.doc-toolbar .tb { min-width: 2rem; height: 2rem; padding: 0 .45rem; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.doc-toolbar .tb.wide { font-size: .8rem; }
.doc-toolbar .tb:hover, .doc-toolbar .tb:focus-visible { border-color: var(--line); background: color-mix(in srgb, var(--line) 35%, transparent); }
.doc-toolbar .tsep { width: 1px; align-self: stretch; margin: .2rem .25rem; background: var(--line); }
.doc-toolbar .doc-state { margin-left: auto; padding: 0 .3rem; white-space: nowrap; }
.docpaper { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; padding: 1.4rem clamp(1rem, 4vw, 2.6rem) 2rem; background: color-mix(in srgb, var(--panel, #12302f) 70%, transparent); }
.doc-titlebar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .8rem; }
.doc-titlebar h2 { margin: 0; }
.docedit { min-height: 320px; outline: none; }
.docedit.can { cursor: text; }
.docedit:empty::before, .docedit > p:only-child:has(br:only-child)::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.docedit:empty::before { display: block; }
.docedit h1 { font-size: 1.5rem; margin-top: .4rem; } .docedit h2 { font-size: 1.2rem; margin-top: 1rem; } .docedit h3 { font-size: 1.02rem; margin-top: .8rem; }
.docedit table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.docedit td, .docedit th { border: 1px solid var(--line); padding: .35rem .5rem; vertical-align: top; text-align: left; min-width: 80px; }
.docedit th { background: color-mix(in srgb, var(--line) 40%, transparent); }
.docedit a { color: var(--accent, #5B8DEF); }
.docedit hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.docedit ul[data-check] { list-style: none; padding-left: 0; }
.docedit ul[data-check] li { position: relative; padding-left: 1.7rem; }
.docedit ul[data-check] li::before { content: ''; position: absolute; left: .1rem; top: .25em; width: 1rem; height: 1rem; border: 1.5px solid var(--muted); border-radius: 4px; cursor: pointer; }
.docedit ul[data-check] li[data-done]::before { content: '✓'; display: grid; place-items: center; font-size: .75rem; color: #fff; background: #00C27A; border-color: #00C27A; }
.docedit ul[data-check] li[data-done] { text-decoration: line-through; opacity: .6; }
.docedit figure { margin: 0 0 .9rem; }
.docedit figure img { max-width: 100%; max-height: 520px; border-radius: 8px; display: block; }
.docedit figure.wide img { max-height: none; width: 100%; }
.docedit figcaption { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.docedit aside[data-tone] { padding: .6rem .8rem; border-radius: 10px; background: color-mix(in srgb, #5B8DEF 14%, transparent); }
.docedit aside[data-tone=warn] { background: color-mix(in srgb, #E0A82E 16%, transparent); }
.docedit aside[data-tone=ok] { background: color-mix(in srgb, #00C27A 14%, transparent); }
.doc-with-chat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 1rem; align-items: start; }
.doc-chat { position: sticky; top: 64px; min-width: 0; }
.doc-chat .chat .msgs { max-height: calc(100vh - 300px); }
@media (max-width: 1000px) { .doc-with-chat { grid-template-columns: 1fr; } .doc-chat { position: static; } }

/* Systems (Tim, 3 Nov): what needs attention, fullest first. The lighter bar is where the period ends at this pace. */
.loadbar .proj { position: absolute; top: 0; left: 0; height: 100%; background: color-mix(in srgb, #2A9D8A 35%, transparent); }
.loadbar .proj.warn { background: color-mix(in srgb, var(--warn) 40%, transparent); }
.loadbar .proj.bad { background: color-mix(in srgb, var(--danger) 40%, transparent); }
.loadbar .fill { position: relative; }
nav.sub.sub2 { margin-top: -.4rem; font-size: .9rem; }
.att-head.bad { border-color: var(--danger); } .att-head.warn { border-color: var(--warn); } .att-head.ok { border-color: #2A9D8A; }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-list li { border-top: 1px solid var(--line); }
.att-list li:first-child { border-top: 0; }
.att-list a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .7rem; align-items: start; padding: .65rem .2rem; color: inherit; text-decoration: none; }
.att-list a:hover { background: color-mix(in srgb, var(--line) 25%, transparent); }
.att-main { display: grid; gap: .15rem; min-width: 0; }
.att-list.compact a { padding: .45rem .2rem; }
.att-list.compact .att-main > .muted.small:last-child { display: none; }
.lvl-pill { display: inline-block; text-align: center; padding: .1rem .4rem; border-radius: 999px; font-size: .75rem; font-weight: 700; border: 1px solid var(--line); }
.lvl-pill.bad { background: color-mix(in srgb, var(--danger) 25%, transparent); border-color: var(--danger); }
.lvl-pill.warn { background: color-mix(in srgb, var(--warn) 25%, transparent); border-color: var(--warn); }
.lvl-pill.info { color: var(--muted); }
.lvl-pill.ok { color: #2A9D8A; border-color: color-mix(in srgb, #2A9D8A 50%, var(--line)); }
.lvl.ok { color: #2A9D8A; } .lvl.info { color: var(--muted); }
.table-scroll { overflow-x: auto; max-width: 100%; }

/* The demo site says so on every page (src/site.js): a striped amber bar under the header. */
.demobar { padding: .45rem 1rem; font-size: .88rem; color: #1b1300; background: repeating-linear-gradient(135deg, #F2C94C 0 14px, #F5D46A 14px 28px); border-bottom: 1px solid #c9a227; }
.demobar a { color: #1b1300; font-weight: 700; margin-left: .4rem; }

/* Real | Demo switch in Settings › Studio: each side is a link to that site's same page. */
.seg.site-switch a { display: inline-block; padding: .3rem .9rem; border-radius: 999px; text-decoration: none; color: inherit; font-weight: 600; }
.seg.site-switch a.on { background: var(--accent, #5B8DEF); color: #fff; }
.seg.site-switch a:last-child.on { background: #F2C94C; color: #1b1300; }

/* Find clients (Tim, 4 Nov): channels at the top, suggestions as open cards with Good and Not a fit. */
.channels { display: grid; gap: .6rem; }
.channel { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; }
.channel .switch { display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; }
.channel .switch input, .chip-toggle input { width: auto; margin: 0; }
.chip-toggle { display: inline-flex; gap: .3rem; align-items: center; padding: .2rem .65rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; cursor: pointer; }
.chip-toggle.on { border-color: color-mix(in srgb, var(--accent, #5B8DEF) 60%, var(--line)); background: color-mix(in srgb, var(--accent, #5B8DEF) 14%, transparent); }
.sugg-list > li { padding: .8rem 0; border-top: 1px solid var(--line); }
.sugg-list > li:first-child { border-top: 0; }
.sugg-list .why-line { margin: .35rem 0 .2rem; }
.sugg-list details.draft summary { cursor: pointer; color: var(--muted); }
.sugg-list blockquote { border-left: 3px solid var(--line); padding-left: .7rem; margin: .4rem 0; }
.good-btn { background: #00C27A; border-color: #00C27A; color: #04210f; font-weight: 700; }
.reasons { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.chip-btn { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.chip-btn:hover { border-color: var(--danger); }
ul.plain.sugg-list > li { display: block; }
.sugg-list > li > .row { flex-wrap: wrap; }
.sugg-list .signals { margin-top: .35rem; }
.chip-toggle.off { opacity: .55; cursor: default; }

/* The finder's live run (Tim, 4 Nov): a progress bar and each step as it happens. */
.run-panel .head { align-items: flex-start; }
.run-panel button.big { padding: .6rem 1.4rem; font-size: 1rem; font-weight: 700; }
.run-panel.live { border-color: color-mix(in srgb, var(--accent, #5B8DEF) 60%, var(--line)); }
.run-progress { margin-top: .6rem; display: grid; gap: .45rem; }
.run-progress .bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); overflow: hidden; }
.run-progress .bar i { display: block; height: 100%; border-radius: 999px; background: #00C27A; transition: width .6s ease; }
.run-progress .bar.moving i { background: linear-gradient(90deg, #00C27A, #5B8DEF, #00C27A); background-size: 200% 100%; animation: runbar 1.6s linear infinite; }
@keyframes runbar { from { background-position: 200% 0; } to { background-position: 0 0; } }
.run-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; }
.run-log li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .4rem; align-items: start; }
.run-log li .mark { color: #00C27A; text-align: center; }
.run-log li.bad .mark { color: var(--danger); }
.run-log li.bad span:last-child { color: var(--danger); }
.run-log li.done { font-weight: 700; }
.run-log li.now { color: var(--muted); }
.run-log .spin { width: .8rem; height: .8rem; margin-top: .2rem; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent, #5B8DEF); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .run-progress .bar.moving i, .run-log .spin { animation: none; } }

/* Pay rates (Tim, 4 Nov): Current and History tabs, a clear form. */
.rates-box { display: grid; gap: .55rem; }
.rates-now td, .rates-now th { padding: .3rem .5rem; }
.rates-form { display: grid; gap: .4rem; padding: .6rem; border: 1px solid var(--line); border-radius: 10px; }
.special-rates { border-top: 1px solid var(--line); padding-top: .5rem; }

/* Requests rounds and client quotes (Tim, 4 Nov). */
.new-request { display: grid; gap: .5rem; }
.pre { white-space: pre-wrap; }
.round summary { cursor: pointer; }
.round-items { display: grid; gap: .6rem; padding-left: 1.2rem; }
.round-items li { display: grid; gap: .25rem; }
.round-items li.st-declined { opacity: .6; }
.quote-list { display: grid; gap: .6rem; }
.quote-list blockquote { margin: 0; font-style: italic; }
.quote-list li.concern blockquote { color: var(--muted); }
.quotes.wide { grid-column: 1 / -1; }
.small-tiles .tile { padding: .4rem .6rem; }
.quote-list li { display: block; }

/* Request screenshots: a small preview; the full picture opens in a new tab. */
.shot-thumb { max-height: 90px; max-width: 160px; border: 1px solid var(--line); border-radius: 6px; display: block; }

/* Phone app prompt and guide; where the exchange rate comes from (Tim, 4 Nov). */
.install-strip { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.install-steps { display: grid; gap: .45rem; padding-left: 1.2rem; }
.install-mine { border-color: var(--accent, #A8E8E8); }
.fx-note summary { cursor: pointer; }
.fx-note p { margin: .4rem 0 0; }