/* ═════════ Operational areas: Operations, Tasks, Clients, Members, Dashboards, Setup ═════════
   Flat, ruled, high-contrast. Numbers are the hero and every one is a link. No floating cards: sections are separated by rules. */
.page { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding: clamp(18px, 2.4vw, 32px) clamp(16px, 2.6vw, 40px) 72px; outline: 0; }
.page--sources { padding: 0; } .page--sources .sources { position: static; }
.page.rise > * { animation: rise .55s var(--ease-out) both; }
a { color: inherit; } .dim { color: var(--ink-3); font-style: normal; } .err { color: var(--alert); font-style: normal; } .ok { color: var(--ok); font-style: normal; } .up { color: var(--alert); } .down { color: var(--ok); }
[data-theme='light'] .up { color: #b30a1c; } code { font: 500 12px var(--font-mono); background: var(--bg-3); padding: 1px 6px; }
.mp { line-height: 1.5; margin: 6px 0 10px; } .foot { color: var(--ink-3); margin-top: 22px; text-transform: none; letter-spacing: .04em; font-size: 12px; line-height: 1.6; }
.sec { color: var(--ink-3); margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; font-weight: 600; } .cnt { font: 700 11px var(--font-mono); background: var(--ink); color: var(--bg); padding: 2px 7px; }
.lnk { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; padding: 4px 0; } .lnk:hover { color: var(--blue-hot); } [data-theme='light'] .lnk:hover { color: var(--blue); }
.lnk-danger { --edge: var(--alert) !important; }

/* page header */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1.5px solid var(--line-strong); margin-bottom: 22px; }
.ph__k { color: var(--ink-2); } .ph__k a { text-decoration: underline; text-underline-offset: 3px; } .ph__t { font: 900 clamp(34px, 5.6vw, 76px)/.92 var(--font-display); letter-spacing: -.055em; text-transform: uppercase; margin-top: 8px; overflow-wrap: anywhere; }
.ph__t--sm { font-size: clamp(24px, 3.4vw, 42px); } .ph__r { display: flex; gap: 10px; flex-wrap: wrap; } .ph__r--l { margin: 0 0 16px; } .ph--sub { margin-top: 4px; }
.hints { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 6px; } .hints li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-left: 4px solid var(--hit); background: var(--bg-3); font-size: 14px; } [data-theme='light'] .hints li { border-left-color: var(--blue); } .hints li.is-warn { border-left-color: var(--alert); }
.notice { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 14px; border-left: 4px solid var(--hit); background: var(--bg-3); margin: 12px 0; font-size: 14px; } [data-theme='light'] .notice { border-left-color: var(--blue); }
.note2 { color: var(--ink-3); margin: 10px 0; text-transform: none; letter-spacing: .04em; font-size: 12px; line-height: 1.5; }

/* the big numbers */
.bigs--6 .big { flex-basis: 30%; } .bigs--4 .big { flex-basis: 22%; } @media (min-width: 1240px) { .bigs .big { flex-basis: 13%; } .bigs--6 .big { flex-basis: 15%; } .bigs--4 .big { flex-basis: 22%; } }
.bigs { display: flex; flex-wrap: wrap; padding: 0 1.5px 1.5px 0; margin-bottom: 26px; }
.big { flex: 1 1 22%; padding: 14px 16px 12px; border: 1.5px solid var(--line-strong); margin: 0 -1.5px -1.5px 0; min-width: 0; position: relative; }
.big__n { display: block; min-width: 24px; font: 900 clamp(34px, 4.4vw, 62px)/1 var(--font-display); letter-spacing: -.055em; text-decoration: none; }
a.big__n:hover { color: var(--on-hit); background: var(--hit); } .big__l { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ink-2); font-size: 10.5px; letter-spacing: .12em; }
.big.is-alert .big__n { color: var(--alert); } .big.is-hit .big__n { color: var(--hit); display: inline-block; } [data-theme='light'] .big.is-hit .big__n { color: var(--ink); padding: 0 6px 0 0; background: linear-gradient(var(--hit), var(--hit)) 0 90% / 100% 34% no-repeat; }
.drill { text-decoration: none; transition: background .15s, color .15s; } .drill:hover, .cm:hover, a.tlink:hover { background: var(--hit); color: var(--on-hit); } [data-theme='light'] .drill:hover, [data-theme='light'] .cm:hover { background: var(--hit); }
.inl { font-weight: 700; } .warnl { color: var(--alert); text-decoration: underline; text-underline-offset: 3px; } .num { font-variant-numeric: tabular-nums; text-align: right; } a.num { text-decoration: none; }
.why { position: relative; width: 16px; height: 16px; border: 1.5px solid var(--ink-3); color: var(--ink-3); font: 700 10px/1 var(--font-mono); display: inline-grid; place-items: center; border-radius: 50%; flex: none; padding: 0; } .why:hover, .why:focus-visible { color: var(--ink); border-color: var(--ink); }
.why::after { content: ''; position: absolute; inset: -6px; }   /* 16px mark, 24px+ hit area (WCAG 2.5.8) */
.why-pop { --edge: var(--ink); --fill: var(--bg-2); position: fixed; z-index: 70; width: min(320px, calc(100vw - 16px)); padding: 12px 14px; font-size: 13.5px; line-height: 1.45; } .why-pop p { margin: 0; }

/* progress + status distribution */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; margin-bottom: 30px; align-items: start; }
.prg { margin-bottom: 18px; } .prg__h { display: flex; justify-content: space-between; align-items: baseline; } .prg__h b { font: 800 22px var(--font-display); letter-spacing: -.04em; } .prg__h b i { color: var(--ink-3); font-style: normal; }
.prg__t { height: 14px; margin-top: 8px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 6px); } .prg__t i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--hit) 0 3px, transparent 3px 6px); transition: width 1s var(--ease-out); } [data-theme='light'] .prg__t i { background: repeating-linear-gradient(90deg, var(--blue) 0 3px, transparent 3px 6px); }
.prg__s { color: var(--ink-3); margin-top: 6px; font-size: 10.5px; } .band__b h3 { color: var(--ink-3); margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
.sbar { display: flex; min-height: 64px; border: 1.5px solid var(--line-strong); } .sbar__s { min-width: 54px; padding: 8px 10px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1.5px solid var(--line-strong); text-decoration: none; color: var(--bg); background: var(--c, var(--ink-3)); transition: filter .15s, transform .2s; overflow: hidden; } .sbar__s:last-child { border-right: 0; }
.sbar__s b { font: 900 22px/1 var(--font-display); letter-spacing: -.04em; } .sbar__s span { font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sbar__s:hover { filter: brightness(1.15); transform: translateY(-2px); }
.st--backlog { --c: var(--r-backlog); } .st--active { --c: var(--r-active); } .st--approval { --c: var(--r-approval); } .st--done { --c: var(--r-done); } .st--container { --c: var(--r-container); } .st--x { --c: var(--ink-3); }
.sbar__s.st--approval, .sbar__s.st--done { color: var(--on-hit); } .sbar__s.st--x { color: var(--bg); } [data-theme='light'] .sbar__s.st--done { color: #fff; }
i.st { display: inline-block; width: 9px; height: 9px; background: var(--c, var(--ink-3)); flex: none; rotate: 45deg; }

.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-bottom: 8px; } .cols2--top { align-items: start; } .cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cap-block { border-top: 1.5px solid var(--line-strong); padding-top: 14px; } .cap-block h3 { color: var(--ink-3); display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.cap-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .cap-nums span { display: block; color: var(--ink-3); font-size: 10px; } .cap-nums b { font: 800 clamp(16px, 2vw, 24px) var(--font-display); letter-spacing: -.04em; }
.cap-bar { height: 14px; margin: 14px 0 8px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 6px); } .cap-bar__p { display: block; height: 100%; background: color-mix(in srgb, var(--ink-3) 50%, transparent); max-width: 100%; } .cap-bar__p i { display: block; height: 100%; background: var(--ok); } .cap-bar.is-over .cap-bar__p { background: var(--alert); }
.cap-sub { color: var(--ink-3); font-size: 10.5px; } .contrib { margin-top: 10px; } .contrib summary { cursor: pointer; color: var(--ink-2); padding: 4px 0; } .contrib__l { list-style: none; padding: 0; margin: 6px 0 0; max-height: 260px; overflow: auto; } .contrib__l li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .contrib__l a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contrib__l span { white-space: nowrap; font: 500 12px var(--font-mono); }

/* tables */
.tbl-wrap { overflow-x: auto; max-width: 100%; } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th, .tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .tbl thead th { font: 600 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1.5px solid var(--line-strong); white-space: nowrap; }
.tbl th.num, .tbl td.num { text-align: right; } .tbl tbody th { font-weight: 600; } .tbl tfoot th, .tbl tfoot td { border-top: 1.5px solid var(--line-strong); font-weight: 700; } .tbl--flush th, .tbl--flush td { padding: 7px 8px; } .tbl tr.is-off { opacity: .5; } .tbl .acts { white-space: nowrap; text-align: right; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--bg-3) 70%, transparent); } .rowname { font-weight: 700; text-decoration: none; } .rowname:hover { text-decoration: underline; text-underline-offset: 3px; }
.tot { font-weight: 800; }
.pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .pill2 { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 11px; border: 1.5px solid var(--line-strong); font: 600 13px var(--font-body); text-decoration: none; background: none; color: inherit; } .pill2 b { font: 700 12px var(--font-mono); } .pill2 i { font: 500 10px var(--font-mono); color: var(--ink-3); font-style: normal; text-transform: uppercase; letter-spacing: .08em; } a.pill2:hover, .pill2--btn:hover { background: var(--hit); color: var(--on-hit); border-color: var(--hit); } .pill2--btn { cursor: pointer; }
.chip2 { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font: 600 12.5px var(--font-body); border: 1.5px solid var(--line-strong); text-decoration: none; } a.chip2:hover { background: var(--hit); color: var(--on-hit); } .chip2 .x { color: var(--ink-3); font-size: 15px; line-height: 1; padding: 0 0 0 2px; } .chip2 .x:hover { color: var(--alert); }

/* empty / loading / error */
.empty { border: 1.5px dashed var(--line-strong); padding: 26px 24px; display: grid; gap: 10px; justify-items: start; } .empty__t { font: 800 clamp(18px, 2.2vw, 26px)/1.1 var(--font-display); letter-spacing: -.04em; } .empty p { max-width: 62ch; color: var(--ink-2); line-height: 1.55; }
.loading { display: flex; gap: 8px; padding: 40px 0; } .loading i { width: 12px; height: 12px; background: var(--hit); rotate: 45deg; animation: ld 1s var(--ease-io) infinite alternate; } [data-theme='light'] .loading i { background: var(--blue); } .loading i:nth-child(2) { animation-delay: .15s; } .loading i:nth-child(3) { animation-delay: .3s; } @keyframes ld { to { transform: translateY(-10px); opacity: .3; } }
.errbox { border: 1.5px solid var(--alert); padding: 14px 16px; display: grid; gap: 8px; justify-items: start; } .errbox .mono { color: var(--alert); } .errbox--inl { margin: 10px 0; border-width: 0 0 0 4px; background: var(--bg-3); }

/* task rows */
.trs { list-style: none; padding: 0; margin: 0; } .tr { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line); font-size: 14px; } .trs--big .tr { padding: 12px 6px; }
.tr:hover { background: color-mix(in srgb, var(--bg-3) 70%, transparent); } .tr__main { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; } .tr__t { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tr__main:hover .tr__t { text-decoration: underline; text-underline-offset: 3px; }
.tr__s { font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .tr__meta, .tr__list { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .tr__due { font: 500 12px var(--font-mono); text-align: right; white-space: nowrap; } .tr__due i { font-style: normal; color: var(--ink-3); margin-left: 8px; } .tr__due.is-late, .tr__due.is-late i { color: var(--alert); }
.trx { display: block; position: relative; } .trx .tr { border-bottom: 0; } .rsl { display: flex; gap: 6px; padding: 0 6px 8px 25px; border-bottom: 1px solid var(--line); } .rs { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border: 1.5px solid var(--line-strong); } .rs--tag { color: var(--blue-hot); border-color: var(--blue-hot); } [data-theme='light'] .rs--tag { color: var(--blue); border-color: var(--blue); }
.pri { font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }

/* tasks page: list tabs + filters */
.ltabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1.5px solid var(--line-strong); margin-bottom: 14px; } .ltab { display: flex; gap: 8px; align-items: baseline; padding: 10px 16px; white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 14px; color: var(--ink-2); border: 1.5px solid transparent; border-bottom: 0; margin-bottom: -1.5px; } .ltab b { font: 600 11px var(--font-mono); color: var(--ink-3); } .ltab:hover { color: var(--ink); } .ltab.is-on { background: var(--hit); color: var(--on-hit); border-color: var(--line-strong); } .ltab.is-on b { color: var(--on-hit); }
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 12px; } .flt, .ctl { display: grid; gap: 4px; min-width: 130px; } .flt span, .ctl span { color: var(--ink-3); font-size: 10px; } .flt--q { flex: 1 1 200px; } .ctl--w { width: 100%; }
/* :where() keeps this generic field style at zero specificity so the designed fields (.gate input, .palette__in input) are not overridden */
:where(select, input:not([type=checkbox]):not([type=radio]), textarea) { background: var(--bg-2); color: var(--ink); border: 1.5px solid var(--line-strong); padding: 9px 10px; font: 500 14px var(--font-body); border-radius: 0; min-width: 0; max-width: 100%; width: 100%; outline: 0; } :where(select, input, textarea):focus { border-color: var(--hit); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hit) 40%, transparent); } [data-theme='light'] :where(select, input, textarea):focus { border-color: var(--blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 30%, transparent); } textarea { resize: vertical; line-height: 1.45; } input[type=date] { font-family: var(--font-mono); font-size: 13px; }
.gate input:focus, .palette__in input:focus, [data-theme='light'] .gate input:focus, [data-theme='light'] .palette__in input:focus { box-shadow: none; }
/* chamfered controls clip an outline drawn outside them: draw the ring inside the shape */
.gate__go:focus-visible, .qa:focus-visible { outline: 3px solid var(--on-hit); outline-offset: -6px; } .qa:focus-visible { outline-color: var(--bg); } .qa:hover:focus-visible { outline-color: var(--on-hit); }
select:disabled, input:disabled, button:disabled { opacity: .45; cursor: not-allowed; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; } .fchip { padding: 4px 10px; font: 600 12px var(--font-body); border: 1.5px solid var(--ink); text-decoration: none; display: inline-flex; gap: 6px; } .fchip b { font-weight: 700; } .fchip:hover { background: var(--hit); color: var(--on-hit); border-color: var(--hit); } .fchip.is-on { background: var(--ink); color: var(--bg); } .fchip--clear { border-style: dashed; color: var(--ink-2); border-color: var(--line-strong); }
.pager { display: flex; justify-content: space-between; padding: 18px 0; color: var(--ink-2); } .pager a { text-decoration: underline; text-underline-offset: 3px; }
.checks { display: grid; gap: 6px; }

/* detail panel (uses .dossier shell) */
.d-open { color: var(--ink-2); text-decoration: none; } .d-open:hover { color: var(--ink); } .d-top { padding-right: 74px; } .d-crumbs { color: var(--ink-3); margin: -6px 0 14px; letter-spacing: .08em; font-size: 10.5px; }
.d-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; } .ctl { min-width: 110px; }
.kvs { display: grid; gap: 0; border-top: 1.5px solid var(--line-strong); } .kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: start; } .kv > span { color: var(--ink-3); padding-top: 6px; font-size: 10px; } .kv input[type=date] { width: auto; }
.asg, .tagl, .belong { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .asg-ed { margin-top: 6px; } .asg-l { display: grid; gap: 6px; padding: 8px 0; border: 0; } .asg-l legend { color: var(--ink-3); } .asg-l label, .chk { display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; } form.inrow { display: flex; gap: 6px; margin-top: 6px; } form.inrow .btn { padding: 8px 12px; }
input[type=checkbox], input[type=radio] { accent-color: var(--hit); width: 16px; height: 16px; flex: none; } [data-theme='light'] input[type=checkbox] { accent-color: var(--blue); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; } .desc textarea { min-height: 140px; } .desc + .lnk { margin-top: 6px; }
.tms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--line-strong); } .tm { padding: 10px 12px; border-right: 1.5px solid var(--line-strong); min-width: 0; } .tm:last-child { border-right: 0; } .tm span { display: block; color: var(--ink-3); font-size: 9.5px; } .tm b { display: block; font: 800 20px var(--font-display); letter-spacing: -.04em; margin: 4px 0 2px; } .tm i { font-size: 11px; font-style: normal; } .tm.is-err { background: color-mix(in srgb, var(--alert) 14%, transparent); }
.diffs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: var(--ink-3); text-transform: none; font-size: 12px; letter-spacing: .02em; } .diffs b { font-weight: 700; margin-left: 4px; }
.belong .pill2 { flex-wrap: wrap; } .rel { list-style: none; padding: 0; display: grid; gap: 4px; font-size: 14px; } .rel li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); } .rel .mono { color: var(--ink-3); min-width: 74px; font-size: 10px; } .rel a { text-underline-offset: 3px; }
.cms { list-style: none; padding: 0; display: grid; gap: 10px; } .cms li { padding: 10px 12px; background: var(--bg-3); border-left: 3px solid var(--line-strong); } .cms li.is-reply { margin-left: 18px; } .cm__h { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .cm__h i { font-size: 11px; font-style: normal; } .cmform { display: grid; gap: 8px; margin-top: 10px; justify-items: start; }
.dx { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; } .dx summary { cursor: pointer; list-style: none; padding: 10px 0; margin: 0 !important; color: var(--ink-2); } .dx summary::before { content: '+'; display: inline-block; width: 16px; } .dx[open] > summary::before { content: '−'; }
.syncbox { padding: 10px 12px; border-left: 4px solid var(--ok); background: var(--bg-3); margin: 6px 0 10px; font-size: 13.5px; } .syncbox.is-warn { border-left-color: var(--hit); } .syncbox p { margin: 4px 0 0; } .d-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.d-title { text-wrap: balance; overflow-wrap: anywhere; } .d-h { display: flex; align-items: center; gap: 8px; }

/* review */
.rvgrid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: start; } .rvq { position: sticky; top: 0; } .rq { list-style: none; padding: 0; display: grid; gap: 0; border: 1.5px solid var(--line-strong); }
.rq__i { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1.5px solid var(--line-strong); text-decoration: none; } .rq li:last-child .rq__i { border-bottom: 0; } .rq__i b { font-size: 14.5px; } .rq__i span { color: var(--ink-3); font-size: 10px; } .rq__i:hover { background: var(--bg-3); } .rq__i.is-on { background: var(--hit); color: var(--on-hit); } .rq__i.is-on span { color: var(--on-hit); } .rq__i u { text-decoration: none; font: 700 10.5px var(--font-mono); text-transform: uppercase; }
.rv { display: grid; gap: 22px; } .rv h2 { font: 800 clamp(22px, 2.6vw, 34px)/1.1 var(--font-display); letter-spacing: -.045em; margin: 6px 0 8px; } .rv h3 { color: var(--ink-3); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; } .rv__m { color: var(--ink-2); font-size: 14px; } .rv__time { border-top: 1.5px solid var(--line-strong); padding-top: 14px; }
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border: 1.5px solid var(--ink); padding: 18px; } .decide__l, .decide__r { display: grid; gap: 12px; align-content: start; } .decide__a { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .decide h3 { margin: 0; } .chk--big { font-weight: 700; font-size: 15px; }

/* clients / members */
.mship { display: flex; flex-wrap: wrap; gap: 0; border: 1.5px solid var(--line-strong); } .mship > div { flex: 1 1 100px; padding: 12px 14px; border-right: 1.5px solid var(--line-strong); } .mship > div:last-child { border-right: 0; } .mship b { display: block; font: 900 30px var(--font-display); letter-spacing: -.05em; } .mship span { color: var(--ink-3); font-size: 10px; }
.kvline { margin: 12px 0; font-size: 14px; line-height: 1.6; } .ents { list-style: none; padding: 0; display: grid; gap: 0; } .ents li { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .ents b { font-size: 10px; padding: 2px 6px; text-align: center; border: 1.5px solid currentColor; } .ents [data-cat=issue] b { color: var(--alert); } .ents [data-cat=positive] b { color: var(--ok); } .ents [data-cat=note] b { color: var(--ink-2); }
.rate { font: 900 22px var(--font-display); letter-spacing: -.04em; }
.bk { list-style: none; padding: 0; margin: 0; } .bk-row, .hb-row, .pg-row, .rk-row, .wl-row, .lg-row, .cap-row { display: grid; align-items: center; gap: 10px; padding: 7px 4px; text-decoration: none; }
.bk-row { grid-template-columns: minmax(80px, 1.2fr) minmax(0, 2fr) 34px; } .bk-t, .hb-t, .pg-t, .rk-t, .wl-t, .cap-t { height: 10px; background: var(--bg-3); display: block; } .bk-t i, .hb-t i, .rk-t i, .wl-t i { display: block; height: 100%; background: var(--s0); } .bk-l, .hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .bk-row b, .hb-v { text-align: right; font: 700 13px var(--font-mono); }

/* dashboards + charts */
.dlist { list-style: none; padding: 0; border-top: 1.5px solid var(--line-strong); } .dlist a { display: flex; justify-content: space-between; align-items: center; padding: 18px 6px; border-bottom: 1.5px solid var(--line-strong); text-decoration: none; } .dlist b { font: 800 clamp(20px, 2.6vw, 32px) var(--font-display); letter-spacing: -.04em; } .dlist a:hover { background: var(--hit); color: var(--on-hit); } .dlist a:hover span { color: var(--on-hit); }
.wgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--line-strong); border-left: 1.5px solid var(--line-strong); } .wg { grid-column: span 6; border-right: 1.5px solid var(--line-strong); border-bottom: 1.5px solid var(--line-strong); padding: 14px 16px 18px; min-width: 0; } .wg--s { grid-column: span 4; } .wg--l { grid-column: span 12; }
.wg__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .wg__h h2 { font: 800 15px var(--font-display); letter-spacing: -.02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wg__h .mono { color: var(--ink-3); font-size: 9.5px; } .wg__a { display: flex; opacity: .35; transition: opacity .2s; } .wg:hover .wg__a, .wg:focus-within .wg__a { opacity: 1; }
.ib { width: 28px; height: 28px; border: 1.5px solid var(--line-strong); font: 700 14px var(--font-mono); display: grid; place-items: center; margin-left: -1.5px; background: var(--bg); } .ib:hover:not(:disabled) { background: var(--hit); color: var(--on-hit); }
.cempty, .cnote, .cerr { color: var(--ink-3); font-size: 13.5px; padding: 10px 0; } .cnote { font-size: 10px; } .cerr { color: var(--alert); }
.k-one { display: grid; gap: 4px; } .k-num { text-decoration: none; } .k-num b { font: 900 clamp(48px, 7vw, 92px)/1 var(--font-display); letter-spacing: -.06em; } .k-l { color: var(--ink-2); } .k-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 14px; } .k-sum b { font: 900 clamp(28px, 3.4vw, 46px)/1 var(--font-display); letter-spacing: -.05em; } .k-sum .mono { display: block; color: var(--ink-3); font-size: 9.5px; margin-top: 4px; }
.hbar { list-style: none; padding: 0; margin: 0; } .hb-row { grid-template-columns: minmax(70px, 1fr) minmax(0, 2.2fr) 54px; } .hbar--st .hb-row, .hbar--st li { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, 2.2fr) 54px; gap: 10px; align-items: center; padding: 7px 4px; } .hbar--st .hb-t { display: flex; background: none; min-width: 0; } .seg { display: grid; place-items: center; height: 22px; min-width: 4px; overflow: hidden; color: #fff; font: 700 10.5px var(--font-mono); text-decoration: none; border-right: 1.5px solid var(--bg); } .seg:hover { filter: brightness(1.2); }
.hb-row:hover .hb-t i { background: var(--ink); } .legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); } .legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; } .legend--col { flex-direction: column; flex-wrap: nowrap; margin: 0; }
.lg-row { grid-template-columns: 14px minmax(0, 1fr) auto 40px; padding: 4px 0; } .lg-row i { margin: 0; } .lg-row em { font-style: normal; color: var(--ink-3); font: 500 11px var(--font-mono); text-align: right; }
.vbar, .lchart { width: 100%; height: auto; max-height: 240px; overflow: visible; } .vb { transition: opacity .15s; } a:hover .vb { opacity: .7; } .vbv, .vbl, .ax { font: 500 5.4px var(--font-mono); fill: var(--ink-2); } .vbv { fill: var(--ink); font-weight: 700; } .grid { stroke: var(--line); stroke-width: .3; } .ln { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; } .ar { opacity: .18; } .pt { fill: var(--bg); stroke-width: 1; vector-effect: non-scaling-stroke; } a:hover .pt { fill: var(--ink); }
.donut { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 18px; align-items: center; } .dn { transition: opacity .15s; } a:hover .dn { opacity: .75; } .dn-n { font: 900 13px var(--font-display); fill: var(--ink); } .dn-l { font: 500 4px var(--font-mono); fill: var(--ink-3); text-transform: uppercase; }
.prog, .rank, .wl, .cap { list-style: none; padding: 0; margin: 0; } .pg-row { grid-template-columns: minmax(70px, .9fr) minmax(0, 2fr) auto 42px; } .pg-t { background: repeating-linear-gradient(90deg, var(--line-strong) 0 3px, transparent 3px 6px); } .pg-t i { display: block; height: 100%; background: var(--ok); } .pg-v { font: 700 12.5px var(--font-mono); } .pg-row em { font: 500 11px var(--font-mono); color: var(--ink-3); font-style: normal; text-align: right; }
.rk-row { grid-template-columns: 26px minmax(70px, 1fr) minmax(0, 1.6fr) 54px; } .rk-row em { font: 700 11px var(--font-mono); font-style: normal; color: var(--ink-3); } .rk-row b { text-align: right; font: 700 13px var(--font-mono); }
.cmp-r { padding: 8px 0; border-bottom: 1px solid var(--line); } .cmp-l { font-weight: 700; } .cmp-b { display: grid; grid-template-columns: 110px minmax(0, 1fr) 54px; gap: 8px; align-items: center; padding: 3px 0; } .cmp-b .mono { font-size: 9.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmp-t { height: 9px; background: var(--bg-3); } .cmp-t i { display: block; height: 100%; } .cmp-b b { text-align: right; font: 700 12.5px var(--font-mono); }
.wl-row { grid-template-columns: minmax(70px, 1fr) minmax(0, 1.6fr) 28px 62px auto; } .wl-row em { font: 500 12px var(--font-mono); font-style: normal; color: var(--ink-2); text-align: right; } .wl-row b { text-align: right; font: 800 15px var(--font-display); } .wl-row u, .cap-row u { text-decoration: none; font: 600 10px var(--font-mono); color: var(--alert); text-transform: uppercase; white-space: nowrap; }
.cap-row { grid-template-columns: minmax(70px, .9fr) minmax(0, 2fr) 62px auto auto; } .cap-t { position: relative; background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px); height: 14px; } .cap-t i { position: absolute; left: 0; top: 0; height: 100%; } .cap-p { width: var(--pl); background: var(--s1); opacity: .55; } .cap-d { width: var(--dn); background: var(--ok); } .cap-a { width: var(--av); background: none !important; border-right: 3px solid var(--ink); } .cap-row b { font: 800 14px var(--font-display); text-align: right; } .cap-row em { font: 500 11px var(--font-mono); color: var(--ink-3); font-style: normal; white-space: nowrap; }
.tl { display: grid; gap: 2px; } .tl-h, .tl-r { display: grid; grid-template-columns: repeat(var(--n), minmax(26px, 1fr)); position: relative; } .tl-h span { font: 500 9px var(--font-mono); color: var(--ink-3); text-transform: uppercase; padding: 2px; border-left: 1px solid var(--line); } .tl-h .is-today { color: var(--ink); border-left-color: var(--hit); font-weight: 700; }
.tl-r { height: 26px; align-items: center; text-decoration: none; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / var(--n))); } .tl-bar { grid-row: 1; height: 14px; background: var(--r-active); opacity: .8; min-width: 6px; } .tl-r[data-role=done] .tl-bar { background: var(--r-done); } .tl-r[data-role=approval] .tl-bar { background: var(--r-approval); } .tl-bar.is-late { background: var(--alert); } .tl-t { grid-row: 1; font-size: 12px; font-weight: 600; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; mix-blend-mode: normal; } .tl-r:hover { background-color: var(--bg-3); }
.tbl .cm { text-decoration: none; } .more { display: inline-block; margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; }

/* setup */
.setupnav, .setupnavwrap .setupnav { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1.5px solid var(--line-strong); margin-bottom: 14px; } .setupnavwrap { padding: clamp(14px, 2vw, 24px) clamp(16px, 2.6vw, 40px) 0; } .setupnav a { padding: 10px 16px; font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); white-space: nowrap; margin-bottom: -1.5px; border: 1.5px solid transparent; border-bottom: 0; } .setupnav a:hover { color: var(--ink); } .setupnav a.is-on { background: var(--hit); color: var(--on-hit); border-color: var(--line-strong); }
.sg { border-top: 1.5px solid var(--line-strong); padding: 16px 0 22px; display: grid; gap: 12px; } .sg h2 { font: 800 clamp(16px, 1.8vw, 22px) var(--font-display); letter-spacing: -.035em; display: flex; align-items: center; gap: 10px; } .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .row2.is-off { opacity: .4; } .row3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; } .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; margin: 8px 0; }
.sf-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 14px 0; background: linear-gradient(transparent, var(--bg) 40%); }
.secb { border: 1.5px solid var(--line-strong); padding: 12px; margin-bottom: 10px; display: grid; gap: 10px; } .secb__h { display: flex; gap: 10px; align-items: end; } .secb__h .ctl { flex: 1; } .secb__m { display: grid; gap: 8px; justify-items: start; }
.mrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 30px; gap: 6px; width: 100%; align-items: center; } .mrow--s { grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 30px; } .mrow .ib { margin: 0; }
.mrows { display: grid; gap: 6px; justify-items: start; } .mrows > .mono { color: var(--ink-3); font-size: 10px; }
.sw { position: relative; display: inline-block; width: 38px; height: 20px; } .sw input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; } .sw i { position: absolute; inset: 0; border: 1.5px solid var(--line-strong); background: var(--bg-3); transition: background .2s; } .sw i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 13px; height: 13px; background: var(--ink-3); transition: transform .25s var(--ease-out), background .2s; } .sw input:checked + i { background: var(--hit); border-color: var(--hit); } .sw input:checked + i::after { transform: translateX(18px); background: var(--on-hit); } .sw input:focus-visible + i { outline: 2px solid var(--hit); outline-offset: 2px; }
.bdg { display: inline-block; padding: 2px 7px; font: 700 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid currentColor; white-space: nowrap; } .bdg--ok { color: var(--ok); } .bdg--warn { color: #d9a400; } [data-theme='light'] .bdg--warn { color: #8f6a00; } .bdg--err { color: var(--alert); } .bdg--x { color: var(--ink-3); }
.iss { list-style: none; padding: 0; } .iss__i { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: start; border-left: 4px solid var(--ink-3); padding-left: 12px; } .iss__i[data-sev=error] { border-left-color: var(--alert); } .iss__i[data-sev=warn] { border-left-color: var(--hit); } .iss__s { color: var(--ink-3); } .iss__i p { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; } .iss__a { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.json { font: 400 11.5px/1.5 var(--font-mono); background: var(--bg-3); padding: 12px; overflow: auto; max-height: 340px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 10px; } .insp { display: grid; }
.disc { margin-bottom: 8px; } .hier { list-style: none; padding: 0; display: grid; gap: 2px; } .hier li { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; font-size: 14px; } .hier li .mono { width: 56px; color: var(--ink-3); font-size: 9.5px; } .hier--folder { padding-left: 16px !important; } .hier--list { padding-left: 32px !important; }
.impact { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; } .impact li { display: grid; grid-template-columns: minmax(90px, 1fr) 3fr; gap: 12px; padding: 7px 10px; border-left: 3px solid var(--line-strong); background: var(--bg-3); font-size: 13.5px; } .impact li.is-note { border-left-color: var(--hit); } .impact span { color: var(--ink-2); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 72%, transparent); animation: fade .2s both; }
.modal__box { --edge: var(--ink); --fill: var(--bg-2); width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; animation: rise .35s var(--ease-out) both; } .modal__box--wide { width: min(1040px, 100%); }
.mbody { padding: 24px 26px 22px; display: grid; gap: 14px; } .mbody--ed { gap: 12px; } .mh { font: 800 22px var(--font-display); letter-spacing: -.04em; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .mh i { font-size: 10px; } .mact { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; margin-top: 6px; } .mact .mp { margin: 0 auto 0 0; }
.seg2 { display: flex; flex-wrap: wrap; border: 1.5px solid var(--line-strong); } .seg2 button { flex: 1 1 auto; padding: 10px 12px; font: 700 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; border-right: 1.5px solid var(--line-strong); } .seg2 button:last-child { border-right: 0; } .seg2 button[aria-checked=true] { background: var(--hit); color: var(--on-hit); } .seg2 button:hover:not([aria-checked=true]) { background: var(--bg-3); }
.seg2--cat button[data-c=issue][aria-checked=true] { background: var(--alert); color: #fff; } .seg2--cat button[data-c=positive][aria-checked=true] { background: var(--ok); color: var(--bg); }
.ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } .ed__f { display: grid; gap: 12px; align-content: start; } .ed__p { position: sticky; top: 0; border: 1.5px dashed var(--line-strong); padding: 14px; min-height: 200px; overflow: auto; max-height: 60vh; } .ed__p > .mono { color: var(--ink-3); margin-bottom: 10px; } .rfpv { font-size: 13.5px; display: grid; gap: 10px; }

/* strip extras */
.qa { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--ink); color: var(--bg); font: 700 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background .2s, color .2s; } .qa b { font-size: 16px; line-height: 1; } .qa:hover { background: var(--hit); color: var(--on-hit); } .qa--icon { padding: 7px 12px; }
.strip__link { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; justify-content: center; } .strip__conf { min-width: 0; } .conf { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-2); text-decoration: none; font: 500 10.5px var(--font-mono); letter-spacing: .06em; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conf:hover { color: var(--ink); } .strip__r { align-items: center; }
.conf .sdot { flex: none; }

@media (max-width: 1100px) {
  .band, .cols2, .cols3 { grid-template-columns: minmax(0, 1fr); gap: 22px; } .rvgrid { grid-template-columns: minmax(0, 1fr); } .rvq { position: static; } .rq { grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); overflow-x: auto; } .rq__i { border-bottom: 0; border-right: 1.5px solid var(--line-strong); }
  .tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; } .tr__list { display: none; } .decide { grid-template-columns: minmax(0, 1fr); } .ed { grid-template-columns: minmax(0, 1fr); } .ed__p { position: static; max-height: none; } .strip__conf { display: none; } .wg, .wg--s { grid-column: span 12; }
}
@media (max-width: 760px) {
  .page { padding: 16px 14px 90px; } .ph__t { font-size: clamp(30px, 11vw, 48px); } .big { flex-basis: 42%; } .cap-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .tr__meta { grid-column: 1; font-size: 12px; } .tr__due { grid-row: 1 / span 2; grid-column: 2; } .tr__s { display: none; } .tms { grid-template-columns: minmax(0, 1fr); } .tm { border-right: 0; border-bottom: 1.5px solid var(--line-strong); } .tm:last-child { border-bottom: 0; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv > span { padding-top: 0; } .row2 { grid-template-columns: minmax(0, 1fr); } .mrow, .mrow--s { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; } .mrow > :nth-child(1) { grid-column: 1 / -1; } .donut { grid-template-columns: minmax(0, 1fr); } .cmp-b { grid-template-columns: 80px minmax(0, 1fr) 46px; } .iss__i { grid-template-columns: minmax(0, 1fr); } .iss__a { justify-content: flex-start; }
  .mbody { padding: 18px 16px; } .filters .flt { flex: 1 1 140px; } .wl-row, .cap-row { grid-template-columns: minmax(60px, 1fr) minmax(0, 1.4fr) 54px; } .wl-row em, .wl-row u, .cap-row em, .cap-row u { display: none; } .qa:not(.qa--icon) { display: none; } .ph { gap: 12px; }
  .ents li { grid-template-columns: 70px 1fr; } .ents li i { grid-column: 2; } .setupnavwrap { padding: 12px 14px 0; } .why-pop { width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) { .page.rise > *, .loading i, .modal, .modal__box { animation: none !important; } }

/* health */
.hl { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 18px 0 22px; border-bottom: 1.5px solid var(--line-strong); margin-bottom: 20px; --st: var(--ok); } .hl--warning { --st: var(--hit); } [data-theme='light'] .hl--warning { --st: #8f6a00; } .hl--critical { --st: var(--alert); } .hl--unknown { --st: var(--ink-3); }
.hl h2 { font: 900 clamp(34px, 6vw, 84px)/.95 var(--font-display); letter-spacing: -.055em; text-transform: uppercase; color: var(--st); margin: 8px 0; } .hl__a { display: flex; gap: 10px; flex-wrap: wrap; } .hl p { max-width: 70ch; }
.hfs { list-style: none; padding: 0; } .hf { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 14px 0 14px 12px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--ink-3); } .hf[data-level=critical] { border-left-color: var(--alert); } .hf[data-level=warning] { border-left-color: var(--hit); } .hf__l { color: var(--ink-3); } .hf p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; } .hf__r { color: var(--ink) !important; }
@media (max-width: 760px) { .hf { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.ents__a { display: flex; gap: 14px; white-space: nowrap; } .ents li > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }

.prg__t { position: relative; } .prg__f, .prg__a { position: absolute; left: 0; top: 0; bottom: 0; } .prg__a { background: var(--ok) !important; opacity: .95; }
.prg__s .inl { text-decoration: underline; text-underline-offset: 3px; }

.stnow { margin: -4px 0 12px; font-size: 14px; } .stnow b { font-weight: 800; }

/* alerts + bell */
.bell { position: relative; display: inline-grid; place-items: center; width: 38px; height: 34px; color: var(--ink-2); text-decoration: none; border: 1.5px solid var(--line-strong); } .bell svg { width: 18px; height: 18px; } .bell:hover { color: var(--ink); border-color: var(--ink); }
.bell b { position: absolute; top: -8px; right: -8px; min-width: 18px; padding: 1px 4px; background: var(--hit); color: var(--on-hit); font: 700 10.5px/14px var(--font-mono); text-align: center; } .bell.is-crit b { background: var(--alert); color: #fff; } .bell.has-new svg { animation: bell-ring 1.6s var(--ease-out) 1; transform-origin: 50% 8%; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }
.fsep { width: 1.5px; background: var(--line-strong); margin: 0 4px; }
.als { list-style: none; padding: 0; } .al { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 12px; align-items: start; padding: 14px 8px 14px 0; border-bottom: 1px solid var(--line); border-left: 4px solid var(--ink-3); padding-left: 12px; } .al[data-level=critical] { border-left-color: var(--alert); } .al.is-new { border-left-color: var(--hit); background: color-mix(in srgb, var(--hit) 7%, transparent); }
.al__i { font-size: 22px; line-height: 1; color: var(--ink-2); } .al__b { display: grid; gap: 3px; text-decoration: none; min-width: 0; } .al__b:hover b { text-decoration: underline; text-underline-offset: 3px; } .al__k { color: var(--ink-3); font-size: 10px; } .al__b b { font: 800 16px/1.2 var(--font-display); letter-spacing: -.03em; } .al__t { color: var(--ink-2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .al__m { color: var(--ink-3); font-size: 10px; white-space: nowrap; padding-top: 4px; }
.al1__b { font-size: 18px; line-height: 1.4; max-width: 60ch; margin-bottom: 4px; }
@media (max-width: 760px) { .al { grid-template-columns: 26px minmax(0, 1fr); } .al__m, .al__a { grid-column: 2; } .bell { width: 36px; height: 34px; } }

.ntf { display: grid; gap: 8px; border: 1.5px dashed var(--line-strong); padding: 14px 16px; } .ntf__s { display: flex; gap: 10px; align-items: center; margin: 0; } .ntf__a { display: flex; gap: 10px; flex-wrap: wrap; }

/* other sources */
.os__b { border-top: 1.5px solid var(--line-strong); padding: 22px 0 8px; margin-top: 8px; --st: var(--ink-3); } .os__h { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.os__k { color: var(--ink-3); font-size: 10px; } .os__t { font: 900 clamp(26px, 4vw, 48px)/1 var(--font-display); letter-spacing: -.05em; text-transform: uppercase; margin-top: 6px; }
.os__s { display: grid; gap: 2px; max-width: 46ch; } .os__s b { font: 800 20px var(--font-display); letter-spacing: -.03em; text-transform: uppercase; color: var(--st); } .os__s span { color: var(--ink-2); font-size: 14px; line-height: 1.4; } .os__s .mono { color: var(--ink-3); font-size: 10px; }
.os__s--ok { --st: var(--ok); } .os__s--hit { --st: var(--hit); } [data-theme='light'] .os__s--hit { --st: #8f6a00; } .os__s--alert { --st: var(--alert); } .os__s--blue { --st: var(--blue-hot); } [data-theme='light'] .os__s--blue { --st: var(--blue); }
.os__a { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.pick__g { color: var(--ink-3); margin: 12px 0 4px; font-size: 10px; } .pick__l { list-style: none; padding: 0; margin: 0; } .pick__l li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 8px 0; border-bottom: 1px solid var(--line); } .pick__l li.is-off { opacity: .55; } .pick__o { display: flex; gap: 14px; flex-wrap: wrap; } .chk--s { font-size: 12.5px; color: var(--ink-2); }

/* ═════ timeline ═════ */
.seg2__a { flex: 1 1 auto; padding: 9px 14px; font: 700 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-right: 1.5px solid var(--line-strong); text-align: center; } .seg2__a:last-child { border-right: 0; } .seg2__a.is-on { background: var(--hit); color: var(--on-hit); } .seg2__a:hover:not(.is-on) { background: var(--bg-3); } .btn--s { padding: 9px 14px; }
.tlc { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin-bottom: 12px; } .tlc__n { display: flex; gap: 8px; }
.tlg { border: 1.5px solid var(--line-strong); margin: 8px 0 4px; } .tlg__scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; max-height: 70vh; overflow-y: auto; }
.tlg__h, .tlg__r { display: grid; grid-template-columns: 168px repeat(var(--n), minmax(44px, 1fr)); min-width: calc(168px + var(--n) * 44px); } .tlg__h { position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1.5px solid var(--line-strong); }
.tlg__c { position: sticky; left: 0; z-index: 2; background: var(--bg); padding: 6px 10px; border-right: 1.5px solid var(--line-strong); font-size: 13px; display: flex; gap: 8px; align-items: baseline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tlg__c a { font-weight: 700; text-decoration: none; overflow: hidden; text-overflow: ellipsis; } .tlg__c a:hover { text-decoration: underline; }
.tlg__d { display: grid; place-items: center; padding: 6px 0; border-left: 1px solid var(--line); line-height: 1.1; } .tlg__d b { font: 800 15px var(--font-display); } .tlg__d i { font: 500 9.5px var(--font-mono); color: var(--ink-3); text-transform: uppercase; font-style: normal; } .tlg__d.is-today, .tlg__x.is-today { background: color-mix(in srgb, var(--hit) 16%, transparent); } .tlg__d.is-today b { color: var(--ink); } .tlg__d.is-we { color: var(--ink-3); }
.tlg__dens .tlg__c { color: var(--ink-3); font-size: 10px; white-space: normal; line-height: 1.25; align-items: center; } .tlg__x { border-left: 1px solid var(--line); display: grid; place-items: center; min-height: 34px; } .tlg__x a { display: grid; place-items: center; width: 100%; height: 100%; text-decoration: none; line-height: 1.1; padding: 3px 0; } .tlg__x a:hover { background: var(--hit); color: var(--on-hit); } .tlg__x b { font: 800 14px var(--font-display); } .tlg__x i, .tlg__x em { font: 500 9.5px var(--font-mono); color: var(--ink-3); font-style: normal; } .tlg__x a:hover i, .tlg__x a:hover em { color: var(--on-hit); }
.tlg__lane { border-top: 1.5px solid var(--line-strong); } .tlg__lh { background: var(--bg-3); } .tlg__lh .tlg__c { background: var(--bg-3); } .tlg__load em { color: var(--ink-2); }
.tlg__b { position: relative; min-height: 30px; align-items: center; } .tlg__bg { border-left: 1px solid var(--line); height: 100%; } .tlg__bg.is-we { background: color-mix(in srgb, var(--ink-3) 8%, transparent); } .tlg__bg.is-today { background: color-mix(in srgb, var(--hit) 16%, transparent); }
.tlb { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; height: 22px; margin: 4px 2px; padding: 0 8px; min-width: 0; text-decoration: none; font: 600 12px var(--font-body); background: var(--c, var(--ink-3)); color: var(--bg); overflow: hidden; white-space: nowrap; border: 1.5px solid var(--c, var(--ink-3)); } .tlb span { overflow: hidden; text-overflow: ellipsis; }
.tlb.st--approval, .tlb.st--done { color: var(--on-hit); } [data-theme='light'] .tlb.st--done, [data-theme='light'] .tlb.st--active { color: #fff; } .tlb.is-late { background: var(--alert); border-color: var(--alert); color: #fff; }
.tlb--due, .tlb--start { background: transparent; color: var(--ink); border-color: transparent; padding-left: 0; } .tlb--due .tlb__m, .tlb--start .tlb__m { width: 10px; height: 10px; background: var(--c); rotate: 45deg; flex: none; margin-left: 2px; } .tlb--due.is-late .tlb__m { background: var(--alert); } .tlb--start .tlb__m { background: transparent; border: 2px solid var(--c); } .tlb__m { display: none; } .tlb--due .tlb__m, .tlb--start .tlb__m { display: block; }
/* markers are text on the page background, never on a filled bar: keep their label ink in every stage/theme/late state */
.tlb.tlb--due, .tlb.tlb--start, [data-theme='light'] .tlb.tlb--due, [data-theme='light'] .tlb.tlb--start { color: var(--ink); background: transparent; border-color: transparent; } .tlb.tlb--due.is-late { color: var(--alert); font-weight: 800; }
.tlb:hover, .tlb:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 4; }
.tlx { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: 14px; } .tla { display: none; } .tla .sec.is-today { color: var(--ink); }
@media (max-width: 760px) { .tlg { display: none; } .tla { display: block; } .tlc { align-items: stretch; } }

/* ═════ projects ═════ */
.pj { border-top: 1.5px solid var(--line-strong); } .pj__r { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 2fr) minmax(130px, .8fr) minmax(160px, 1.2fr); gap: 8px 22px; padding: 16px 6px; border-bottom: 1.5px solid var(--line-strong); align-items: center; } .pj__t { text-decoration: none; display: grid; gap: 4px; min-width: 0; } .pj__t b { font: 800 clamp(16px, 1.7vw, 22px)/1.15 var(--font-display); letter-spacing: -.035em; overflow-wrap: anywhere; } .pj__t:hover b { text-decoration: underline; text-underline-offset: 4px; } .pj__t span { color: var(--ink-3); font-size: 10px; } .pj__p .mono { margin-top: 6px; color: var(--ink-2); font-size: 10.5px; text-transform: none; letter-spacing: .03em; } .pj__d { color: var(--ink-2); font-size: 10.5px; } .pj__m { display: flex; flex-wrap: wrap; gap: 5px; } .pj--c .pj__r { grid-template-columns: minmax(160px, 1.2fr) minmax(200px, 2fr); padding: 10px 6px; }
.pjb { display: flex; height: 14px; border: 1.5px solid var(--line-strong); background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px); } .pjb a { display: block; min-width: 0; } .pjb__f { background: var(--ok); } .pjb__w { background: var(--r-approval); } .pjb__o { background: var(--r-active); opacity: .55; } .pjb a:hover { filter: brightness(1.2); }
.pj__r > * { min-width: 0; } .pj__p .mono { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .pj__r { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
@media (max-width: 760px) { .pj--c .pj__r { grid-template-columns: minmax(0, 1fr); } }

/* ═════ executive ═════ */
.dens { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: end; height: 150px; border-bottom: 1.5px solid var(--line-strong); padding-top: 12px; } .dens__c { position: relative; display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-decoration: none; align-items: end; justify-items: center; } .dens__c i { display: block; width: 100%; background: var(--s1); min-height: 0; align-self: end; transition: filter .15s; } .dens__c:hover i { filter: brightness(1.25); background: var(--hit); } .dens__c b { font: 700 11px var(--font-mono); } .dens__c em { font: 500 9.5px var(--font-mono); color: var(--ink-3); font-style: normal; }
.srcs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1.5px solid var(--line-strong); margin: 0; } .src { display: grid; gap: 3px; padding: 12px 14px; border-right: 1.5px solid var(--line-strong); text-decoration: none; height: 100%; --st: var(--ink-3); } .src b { font: 800 16px var(--font-display); letter-spacing: -.03em; } .src span { color: var(--ink-3); font-size: 9.5px; } .src em { font-style: normal; font-weight: 700; color: var(--st); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; } .src:hover { background: var(--bg-3); } .src--ok { --st: var(--ok); } .src--hit { --st: var(--hit); } [data-theme='light'] .src--hit { --st: #8f6a00; } .src--alert { --st: var(--alert); } .src--blue { --st: var(--blue-hot); } [data-theme='light'] .src--blue { --st: var(--blue); }
.proj { margin-top: 36px; padding: 20px 22px 26px; border: 2px dashed var(--ink-3); background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--ink-3) 7%, transparent) 14px 15px); } .proj__h h2 { font-size: 13px; color: var(--ink); } .proj__h p { color: var(--ink-2); max-width: 78ch; margin: 6px 0 16px; font-size: 14px; line-height: 1.5; } .proj__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-bottom: 14px; }
.pjc, .sch { background: var(--bg); border: 1.5px solid var(--line-strong); padding: 16px 18px; min-width: 0; } .pjc { border-style: dashed; } .pjc.is-thin { opacity: .92; } .pjc__k { display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: 10.5px; } .tagp { background: var(--ink); color: var(--bg); padding: 3px 8px; font-size: 10px; letter-spacing: .14em; } .tagp--s { background: var(--blue); color: #fff; }
.pjc__w { margin: 8px 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); } .pjc__r { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; } .pjc__r b { font: 900 clamp(34px, 4vw, 56px)/1 var(--font-display); letter-spacing: -.05em; } .pjc__r span { font: 700 14px var(--font-mono); text-transform: uppercase; } .pjc__r i { color: var(--ink-3); font-style: normal; font-size: 13px; } .pjc__d { color: var(--ink-2); margin: 4px 0 0; font-size: 10.5px; text-transform: none; } .pjc__n { margin: 10px 0 0; font-size: 15px; line-height: 1.45; }
.pjc__dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; } .pjc__dl dt { color: var(--ink-3); padding-top: 2px; font-size: 10px; } .pjc__dl dd { margin: 0; } .pjc__bars { display: flex; gap: 4px; align-items: end; height: 54px; } .pjc__w1 { display: grid; grid-template-rows: 1fr auto; width: 26px; height: 100%; text-decoration: none; justify-items: center; } .pjc__w1 i { display: block; width: 100%; background: var(--s1); align-self: end; } .pjc__w1 b { font: 700 10px var(--font-mono); } .pjc__w1:hover i { background: var(--hit); }
.sch__l { list-style: none; padding: 0; margin: 8px 0; } .sch__row { display: grid; grid-template-columns: 80px minmax(60px, 1fr) minmax(62px, auto) auto; gap: 10px; align-items: center; padding: 7px 4px; text-decoration: none; } a.sch__row:hover { background: var(--bg-3); } .sch__row em { font: 500 11px var(--font-mono); font-style: normal; color: var(--ink-3); } .sch__row b { font: 800 14px var(--font-display); text-align: right; white-space: nowrap; } .sch__t { position: relative; height: 12px; background: var(--bg-3); } .sch__t i { display: block; height: 100%; background: var(--s1); } .sch__t u { position: absolute; top: -3px; bottom: -3px; border-left: 3px solid var(--ink); text-decoration: none; }
@media (max-width: 760px) { .proj { padding: 14px 12px 18px; } .proj__g { grid-template-columns: minmax(0, 1fr); } .pjc__dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .sch__row { grid-template-columns: 70px minmax(0, 1fr) minmax(54px, auto); } .sch__row em { display: none; } .srcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }