/* ============================================================================
   Coheris — the Axioma reference's slate shell, blue accents and compact surfaces.
   DevExtreme's Material theme is recoloured to the same blue (dx.material.blue.light.css). Legacy token names below
   remain aliases so existing pages take on the new palette without changing widgets.
   ============================================================================ */

:root {
    /* brand */
    --accent: hsl(213 94% 45%);
    --accent-hover: hsl(213 94% 38%);
    --accent-wash: #eff6ff;
    --dx-accent: var(--accent);
    --teal: var(--accent);
    --teal-dark: var(--accent-hover);
    --teal-darker: #1e3a5f;
    --teal-light: hsl(213 94% 55%);
    --teal-wash: var(--accent-wash);
    --teal-wash-2: #dbeafe;

    /* ink + surface */
    --ink: hsl(215 25% 12%);
    --body: hsl(215 25% 20%);
    --muted: hsl(215 16% 37%);
    --bg: hsl(210 20% 98%);
    --card: #ffffff;
    --line: hsl(214 20% 88%);
    --line-2: #cbd5e1;

    /* sidebar */
    --side-bg: hsl(217 33% 14%);
    --side-bg-2: hsl(217 33% 14%);
    --side-ink: hsl(210 17% 82%);
    --side-ink-dim: #94a3b8;
    --side-active: hsl(217 33% 20%);
    --side-border: hsl(217 25% 22%);

    /* semantic */
    --ok: #1a7f4b;
    --ok-wash: #dcf2e6;
    --warn: #c47f00;
    --warn-wash: #fcefd2;
    --err: #b3261e;
    --err-wash: #f8e0de;
    --info: var(--teal);

    /* shape */
    --r-sm: 6px;
    --r: 8px;
    --r-lg: 8px;
    --shadow: 0 1px 2px rgb(15 23 42 / 4%);
    --shadow-lg: 0 8px 24px rgb(15 23 42 / 12%);

    --sidebar-w: 256px;
    --topbar-h: 56px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --clause-list-w: 288px;
    --reader-type: 16px;
    --reader-leading: 1.75;

    --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--body);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-dark); }

code, .mono { font-family: var(--mono); }
code {
    background: var(--teal-wash);
    color: var(--teal-dark);
    padding: 0.08rem 0.36rem;
    border-radius: 5px;
    font-size: 0.85em;
}

/* ============================================================================
   App shell
   ============================================================================ */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    background: var(--side-bg);
    color: var(--side-ink);
    display: flex;
    flex-direction: column;
    padding: 0;
    border-right: 1px solid var(--side-border);
    overflow: hidden;
}

.brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.6rem;
    padding: 0 var(--space-6);
    min-height: var(--topbar-h);
    border-bottom: 1px solid var(--side-border);
    text-decoration: none;
    color: #fff;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: none;
}
.brand-name { font-weight: 600; font-size: 18px; letter-spacing: -0.3px; color: #fff; }

.nav { display: flex; flex: 1; min-height: 0; overflow-y: auto; flex-direction: column; gap: 2px; padding: 0 var(--space-3) var(--space-4); }
.navlink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    color: var(--side-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background .14s, color .14s;
}
.navlink .ico { width: 19px; height: 19px; fill: currentColor; opacity: 0.85; flex: 0 0 auto; }
.navlink:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-area.active > .navlink {
    color: #fff;
    box-shadow: none;
}
.navlink.active .ico { opacity: 1; }

/* D-083: the line before the admin-only Settings area */
.nav-sep { height: 1px; margin: 0.6rem 0.7rem; background: rgba(255, 255, 255, .12); }

/* The hidden attribute always hides, whatever display a class sets (pages toggle .hidden on buttons and boxes). */
[hidden] { display: none !important; }

/* D-083: the Claims & time bars stand-in */
.coming-next { max-width: 70ch; }
.coming-next p { margin: 0 0 0.6rem; }
.coming-next p:last-child { margin: 0; }

/* D-084: the contract-based SWOT */
.swot-wrap { display: flex; flex-direction: column; gap: 0.7rem; }
.swot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
/* One row: the page's script moves what doesn't fit under "More". */
.swot-tabs { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 0; min-width: 0; }
.swot-tabs .swot-item { flex: 0 0 auto; flex-wrap: nowrap; max-width: 100%; }
.swot-tabs .swot-item-title { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swot-tabs .swot-flag { flex: none; white-space: nowrap; }
.swot-archived.swot-more .swot-item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.3rem; width: 100%; }
.swot-more .swot-item-title { flex-basis: 100%; overflow-wrap: anywhere; }
.swot-more > div { max-height: 60vh; overflow-y: auto; }
.swot-item {
    text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.6rem;
    background: #fff; cursor: pointer; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font: inherit; color: inherit;
}
.swot-item:hover { border-color: var(--teal); }
.swot-item.active { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.swot-item-title { font-weight: 600; color: var(--ink); }
.swot-archived { position: relative; }
.swot-archived summary { cursor: pointer; font-size: 0.86rem; color: var(--muted); }
.swot-archived > div { position: absolute; right: 0; z-index: 15; width: 340px; max-width: 80vw; display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; padding: 0.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.swot-archived .swot-item { flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; }
.swot-archive > div { display: flex; flex-direction: column; gap: 0.4rem; }
.swot-vactions .swot-archive { display: inline-flex; }
.swot-vactions:has(.swot-archive.open) { flex-basis: 100%; }
.swot-archive.open { flex: 1 1 100%; }
.swot-flag { align-self: center; font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; background: var(--teal-wash); color: var(--teal-dark); }
.swot-flag.warn { background: #fff4e0; color: #8a5a00; }
.swot-flag.ok { background: #ecfdf5; color: #064e3b; }
.swot-new { display: flex; flex-direction: column; gap: 0.4rem; }
.swot-form-title { font-weight: 600; }
.swot-input { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; }
.swot-check { display: block; font-size: 0.88rem; }
.swot-detail { min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.swot-version { display: flex; flex-direction: column; gap: 0.6rem; }
.swot-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.swot-status .actbtns { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.swot-about > summary { cursor: pointer; font-size: 0.82rem; color: var(--teal-dark); }
.swot-about[open] { order: 10; flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.5rem 0.7rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.swot-vhead { font-weight: 600; color: var(--ink); }
.swot-origin { font-size: 0.82rem; color: var(--teal-dark); font-weight: 600; }
.swot-stale { background: #fff8eb; border: 1px solid #f3d9a4; border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.88rem; }
.swot-stale ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.swot-fresh { color: var(--ok); }
.swot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
/* The quadrants' colours are the mock-up's: a pale band, a dark word in the same family, and a soft border. The band stays in view under the top bar while its box scrolls. */
.swot-box { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.swot-qhead { position: sticky; top: 48px; z-index: 5; display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); border-radius: 9px 9px 0 0; font-weight: 600; }
.swot-qicon { display: inline-flex; }
.swot-qcount { margin-left: auto; }
.swot-qbody { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0.8rem; }
.swot-box.q-Strength { border-color: #a7f3d0; }
.swot-box.q-Strength .swot-qhead { background: #ecfdf5; color: #064e3b; border-bottom-color: #a7f3d0; }
.swot-box.q-Weakness { border-color: #fde68a; }
.swot-box.q-Weakness .swot-qhead { background: #fffbeb; color: #78350f; border-bottom-color: #fde68a; }
.swot-box.q-Opportunity { border-color: #bfdbfe; }
.swot-box.q-Opportunity .swot-qhead { background: #eff6ff; color: #1e3a8a; border-bottom-color: #bfdbfe; }
.swot-box.q-Threat { border-color: #fecaca; }
.swot-box.q-Threat .swot-qhead { background: #fef2f2; color: #7f1d1d; border-bottom-color: #fecaca; }
.swot-point { border-bottom: 1px solid var(--line); padding-bottom: 0.45rem; }
.swot-point:last-of-type { border-bottom: none; }
.swot-ptext { font-size: 0.92rem; color: var(--ink); }
.swot-ptext p { margin: 0 0 0.3rem; }
.swot-ptext ul { margin: 0 0 0.3rem; padding-left: 1.1rem; }
.swot-ptext li { margin-bottom: 0.15rem; }
.swot-part { margin-top: 0.35rem; font-size: 0.86rem; }
.swot-plabel { font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.swot-sources-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; }
.swot-sources-name { font-size: 0.72rem; color: var(--muted); margin-right: 0.1rem; }
.swot-pmeta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; margin-top: 0.25rem; }
.swot-pmeta .chip { text-decoration: none; font-size: 0.72rem; background: var(--teal-wash); color: var(--teal-dark); border-radius: 20px; padding: 0.12rem 0.6rem; }
.swot-porigin { font-size: 0.72rem; color: var(--muted); }
.swot-nosrc { font-size: 0.72rem; color: #8a5a00; }
.swot-ptools { display: flex; gap: 0.3rem; margin-top: 0.3rem; align-items: center; }
.swot-sources { width: 100%; font-size: 0.82rem; }
.swot-history ul { margin: 0.3rem 0 0; padding-left: 1.2rem; font-size: 0.86rem; color: var(--muted); }
.btn.small { padding: 0.2rem 0.55rem; font-size: 0.8rem; }
.small { font-size: 0.82rem; }
@media (max-width: 760px) { .swot-grid { grid-template-columns: 1fr; } .swot-qhead { position: static; } .swot-status .actbtns { margin-left: 0; } .swot-tabs { flex-basis: 100%; } .swot-tabs .swot-item-title { max-width: 120px; } .swot-archived > div { right: auto; left: 0; } }

/* D-071 part 1: the contractor team roster */
.team { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.team-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.team-row input[type=text] { flex: 1 1 240px; padding: 0.35rem 0.5rem; font: inherit; }
.team-row select { padding: 0.35rem 0.5rem; font: inherit; }
.team-left td { color: var(--muted); }

/* ---- main column ---- */
.app-main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-6);
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.topbar-context { color: var(--muted); font-size: 13px; text-decoration: none; }
.topbar-context:hover { color: var(--accent); text-decoration: underline; }
.nav-toggle-cb, .nav-toggle-btn { display: none; }
.nav-toggle-btn svg { width: 22px; height: 22px; fill: var(--ink); }

.authbox { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.topbtn {
    color: var(--teal-dark);
    text-decoration: none;
    padding: 0.34rem 0.7rem;
    border-radius: 7px;
    border: 1px solid var(--line-2);
    background: #fff;
    transition: border-color .14s, background .14s;
}
.topbtn:hover { border-color: var(--teal); background: var(--teal-wash); }
.topbtn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.topbtn.primary:hover { background: var(--teal-dark); }

.content { flex: 1; padding: var(--space-6); min-width: 0; }

.footer {
    padding: 1.1rem 1.8rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
}

/* ============================================================================
   Page header / typography
   ============================================================================ */
h1 { margin: 0 0 var(--space-1); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.3px; }
h2 { color: var(--ink); font-size: 18px; font-weight: 600; }
h3 { color: var(--ink); font-size: 16px; font-weight: 600; }
.lede { color: var(--muted); margin: 0 0 var(--space-4); max-width: 100ch; font-size: 14px; }
.lede code { font-size: 0.82em; }
/* D-066: where a control is left out because the person lacks the Editor or Decider permission */
.perm-note { font-size: 0.85rem; margin: 0.25rem 0 0.75rem; max-width: 70ch; }
.section { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; color: var(--ink); font-weight: 600; }
.muted { color: var(--muted); font-weight: 400; }
.totals { color: var(--muted); font-size: 0.88rem; }

/* keep historical container usable (now full-bleed) */
.container { max-width: none; margin: 0; padding: 0; }

/* ============================================================================
   Buttons / chips / badges
   ============================================================================ */
.btn, .signin {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--teal);
    color: #fff;
    border: 1px solid var(--teal);
    border-radius: var(--r-sm);
    padding: 0.46rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .14s, box-shadow .14s;
}
.btn:hover, .signin:hover { background: var(--teal-dark); box-shadow: 0 3px 12px rgba(14, 124, 134, .3); }
.btn.ghost { background: #fff; color: var(--teal-dark); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--teal-wash); box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ============================================================================
   Cards / stat tiles / dashboard tiles
   ============================================================================ */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.1rem 1.15rem;
    box-shadow: var(--shadow);
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.9rem;
    margin: 1.3rem 0;
}
.stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .14s, box-shadow .14s, border-color .14s;
}
.stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(var(--teal-light), var(--teal));
    opacity: 0;
    transition: opacity .14s;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--teal-wash-2); }
.stat:hover::before { opacity: 1; }
.stat .num { font-size: 1.95rem; font-weight: 800; color: var(--teal); line-height: 1.1; }
.stat .lbl { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; }

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.1rem;
    margin-top: 0.6rem;
}
.tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.15rem 1.2rem;
    box-shadow: var(--shadow);
}
.tiletitle {
    font-size: 0.95rem;
    margin: 0 0 0.9rem;
    color: var(--ink);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tiletitle::before {
    content: "";
    width: 4px; height: 16px;
    border-radius: 3px;
    background: linear-gradient(var(--teal-light), var(--teal));
}
.chart { height: 300px; }

.reality { list-style: none; margin: 0; padding: 0; }
.reality li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.reality li:last-child { border-bottom: none; }
.reality .rdate { display: inline-block; color: var(--teal-dark); font-weight: 600; font-size: 0.76rem; margin-right: 0.5rem; }

.links { list-style: none; margin: 0; padding: 0; }
.links li { padding: 0.1rem 0; }
.links a {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--teal-dark); text-decoration: none; padding: 0.55rem 0.2rem;
    border-bottom: 1px solid var(--line); font-weight: 500;
}
.links li:last-child a { border-bottom: none; }
.links a:hover { color: var(--teal); }

/* legacy .cards / .card num/lbl (compat) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.card .num { font-size: 1.9rem; font-weight: 800; color: var(--teal); }
.card .lbl { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ============================================================================
   Banners / prompts
   ============================================================================ */
.signin-prompt {
    background: var(--warn-wash);
    border: 1px solid #f0d9a8;
    border-left: 4px solid var(--warn);
    border-radius: var(--r-sm);
    padding: 0.9rem 1.05rem;
    margin: 1rem 0;
}
.phase-banner {
    background: var(--teal-wash);
    border: 1px solid var(--line-2);
    border-left: 4px solid var(--teal);
    border-radius: var(--r-sm);
    padding: 0.9rem 1.05rem;
    margin: 1.25rem 0;
    font-size: 0.93rem;
}
.db-ok { color: var(--ok); font-weight: 600; }
.db-err {
    background: var(--err-wash);
    border: 1px solid #f3c6c2;
    border-left: 4px solid var(--err);
    border-radius: var(--r-sm);
    padding: 1rem;
}
.db-err pre { white-space: pre-wrap; font-size: 0.8rem; color: #7a1a14; margin: 0.5rem 0 0; }
.text-danger { color: var(--err); }
.contracts-line { margin-top: 1rem; font-size: 0.95rem; }

/* ============================================================================
   DataGrid host — full width, standard tall height
   ============================================================================ */
/* height is set in JS (window.gridFillHeight) so it stays pinned to the viewport whether or
   not the trial banner is present; this is just a safety floor. */
.grid-host { min-height: 360px; }
/* tune the vendored material-teal grid to the app surface */
.dx-datagrid { border-radius: var(--r); }
.dx-datagrid-headers { background: #f1f5f9; }
.dx-datagrid .dx-row > td { font-size: 0.88rem; }

/* ============================================================================
   Generic table (stakeholders)
   ============================================================================ */
table.grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 0.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
}
table.grid th, table.grid td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid tr:last-child td { border-bottom: none; }
table.grid th { background: var(--teal-wash); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--teal-dark); font-weight: 700; }
table.grid tbody tr:hover td { background: #fafdfd; }
table.grid .sub { font-size: 0.78rem; color: var(--muted); }
/* a wide table scrolls inside its own box on a narrow screen, not the whole page */
@media (max-width: 1000px) { .table-scroll { overflow-x: auto; } }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rolechip {
    display: inline-block;
    background: var(--teal-wash);
    color: var(--teal-dark);
    border: 1px solid var(--teal-wash-2);
    border-radius: 20px;
    padding: 0.12rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 600;
    margin: 0.12rem 0.2rem 0.12rem 0;
}
.rolechip.sm { font-size: 0.72rem; }
.roleon { font-size: 0.86rem; margin: 0.2rem 0; }

/* ============================================================================
   Hierarchy tree
   ============================================================================ */
.tree-flat { margin: 0.5rem 0; position: relative; }
.treenode {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.95rem;
    margin: 0.4rem 0;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    position: relative;
    flex-wrap: wrap;
    transition: border-color .14s, box-shadow .14s;
}
.treenode:hover { border-color: var(--teal-wash-2); box-shadow: var(--shadow-lg); }
/* connector elbow for nested nodes */
.treenode.child::before {
    content: "";
    position: absolute;
    left: -1.1rem; top: 50%;
    width: 0.9rem; height: 2px;
    background: var(--line-2);
}
.treenode .rank {
    display: inline-grid; place-items: center;
    min-width: 30px; height: 26px;
    background: linear-gradient(135deg, var(--teal), var(--teal-dark));
    color: #fff; font-size: 0.74rem; font-weight: 800;
    border-radius: 7px; padding: 0 0.4rem;
}
.treenode .ctitle { font-weight: 700; color: var(--ink); }
.treenode .ctype {
    font-size: 0.74rem; color: var(--teal-dark); background: var(--teal-wash);
    border-radius: 5px; padding: 0.1rem 0.45rem; font-weight: 600;
}
.treenode .cdate { font-size: 0.8rem; color: var(--muted); }
.badge { font-size: 0.72rem; border-radius: 5px; padding: 0.12rem 0.5rem; font-weight: 600; }
.badge.nodoc { background: var(--warn-wash); color: #8a5a00; border: 1px solid #f0d9a8; }

/* ============================================================================
   Cytoscape graph
   ============================================================================ */
.graph {
    height: calc(100vh - var(--topbar-h) - 200px);
    min-height: 480px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background:
        radial-gradient(circle at 1px 1px, rgba(14,124,134,.08) 1px, transparent 0) 0 0 / 22px 22px,
        var(--card);
    box-shadow: var(--shadow);
}
.graph-legend { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--muted); }
.graph-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.graph-legend i { width: 22px; height: 0; border-top-width: 3px; border-top-style: solid; display: inline-block; }

/* ============================================================================
   Clause grid text cell
   ============================================================================ */
.clausecell { white-space: normal !important; font-size: 0.82rem; color: #38535d; line-height: 1.45; }
/* D-088 Clauses page: the grid shows three lines of a clause; the reading panel (row detail) shows all of it. */
.clause-clamp { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-reading { padding: 0.6rem 0.9rem 0.2rem; max-width: 980px; }
.cl-head { margin-bottom: 0.4rem; }
.cl-text { font-size: 0.92rem; line-height: 1.6; color: #22343a; white-space: pre-wrap; }
.cl-ref { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 2px; }
.cl-bracket { background: #fff1c2; border-radius: 2px; }

/* ============================================================================
   Conflict cards
   ============================================================================ */
.conflictcard { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--teal);
    border-radius: var(--r); padding: 1.05rem 1.15rem; margin: 1rem 0; box-shadow: var(--shadow); }
.conflictcard.sev-High { border-left-color: var(--err); }
.conflictcard.sev-Critical { border-left-color: #7a1a14; }
.conflictcard.sev-Medium { border-left-color: var(--warn); }
.chead { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.7rem; }
.chead .ctype { font-weight: 700; color: var(--ink); }
.chead .csev, .chead .cstat, .chead .cparts { font-size: 0.74rem; background: var(--teal-wash); color: var(--teal-dark);
    border-radius: 20px; padding: 0.12rem 0.6rem; font-weight: 600; }
.participant { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.7rem 0.85rem; margin: 0.45rem 0; background: #fbfdfd; }
.participant.redacted { background: #f5f6f6; color: var(--muted); border-style: dashed; }
.participant .redtag { display: inline-block; background: var(--muted); color: #fff; border-radius: 5px;
    font-size: 0.68rem; padding: 0.06rem 0.4rem; margin-right: 0.4rem; text-transform: uppercase; font-weight: 700; }
.participant .evidence { font-size: 0.9rem; }
.participant .ration { font-size: 0.82rem; color: var(--teal-dark); margin-top: 0.25rem; }
.participant .excerpt { font-size: 0.82rem; color: var(--muted); font-style: italic; margin-top: 0.25rem; }
.participant .obsum { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; }
.participant .govtag { display: inline-block; background: var(--ok); color: #fff; border-radius: 5px;
    font-size: 0.68rem; padding: 0.06rem 0.4rem; margin-right: 0.4rem; text-transform: uppercase; font-weight: 700; }
.participant .nbtag, .optrow .nbtag { display: inline-block; background: #eadfae; color: #6b5500; border-radius: 5px;
    font-size: 0.68rem; padding: 0.06rem 0.4rem; margin-left: 0.4rem; text-transform: uppercase; font-weight: 700; }
.resolution { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--line-2); font-size: 0.9rem; }
.resolution .human { color: var(--err); font-weight: 600; }
.resolution .decided { color: var(--ok); font-weight: 600; }
.resolution .ration { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }

/* review & decide panel */
.actions { margin-top: 0.8rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.actions .actitle { font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--teal-dark); margin-bottom: 0.5rem; }
.actions .opts { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; }
.optrow { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 0.45rem 0.65rem; cursor: pointer; background: #fbfdfd; transition: border-color .14s; }
.optrow:hover { border-color: var(--teal); }
.optrow.disabled { opacity: 0.6; cursor: not-allowed; background: #f4f4f4; }
.optrow .optlabel { flex: 1; font-size: 0.9rem; }
.optrow .sugbadge { display: inline-block; background: var(--teal); color: #fff; border-radius: 5px;
    font-size: 0.68rem; padding: 0.06rem 0.45rem; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; }
.actions .actnote { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.5rem; }
.actions .actnoteinput { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.45rem 0.6rem;
    font: inherit; font-size: 0.88rem; resize: vertical; margin-bottom: 0.55rem; }
.actbtns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.actmsg { margin-top: 0.55rem; font-size: 0.85rem; }
.actmsg.err { color: var(--err); }

/* ---- Wave A: evidence chip + currency badge (shared renderer, wwwroot/js/evidence.js) ---- */
.provrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.25rem 0; }
.evchip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; background: var(--teal-wash);
    color: var(--teal-dark); border: 1px solid var(--teal-wash-2); border-radius: 20px; padding: 0.1rem 0.55rem;
    font-variant-numeric: tabular-nums; cursor: default; }
.curbadge { font-size: 0.68rem; border-radius: 5px; padding: 0.06rem 0.45rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.3px; }
.curbadge.eff { background: var(--ok-wash); color: var(--ok); }
.curbadge.warn { background: var(--warn-wash); color: #8a5a00; }
.curreason { font-size: 0.78rem; margin: 0.15rem 0 0.1rem; }

/* clickable evidence affordance + source-span viewer modal (Wave A3) */
.evchip-link, .plspan-link { cursor: pointer; }
.evchip-link { border-color: var(--teal-light); }
.evchip-link:hover, .plspan-link:hover { text-decoration: underline; color: var(--teal-dark); }
.evchip-link:focus-visible, .plspan-link:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 1px; }
.evsrc-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
    background: rgba(8, 40, 45, .45); padding: 1.5rem; }
.evsrc-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
    width: min(820px, 100%); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.evsrc-bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--teal-wash); }
.evsrc-head { font-weight: 700; color: var(--ink); font-size: .92rem; flex: 1; }
.evsrc-close { border: none; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .2rem; }
.evsrc-close:hover { color: var(--ink); }
.evsrc-body { overflow: auto; padding: 1rem; }
.evsrc-text { margin: 0; white-space: pre-wrap; word-wrap: break-word; font-family: var(--mono); font-size: .82rem; line-height: 1.55; color: #38505a; }
.evhl { background: #ffe9a8; color: inherit; border-radius: 3px; padding: 0 .1rem; box-shadow: 0 0 0 1px #f0d27a; }
.evsrc-msg { color: var(--muted); font-size: .9rem; }
.evsrc-msg.err { color: var(--err); }

/* ============================================================================
   Extraction review
   ============================================================================ */
.extract-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.15rem; margin: 1rem 0; box-shadow: var(--shadow); }
.exrow { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.exfield { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); flex: 1; min-width: 160px; }
.exfield.exwide { margin-top: 0.7rem; }
.extract-form select, .extract-form input[type=text], .extract-form textarea {
    border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0.45rem 0.6rem; font: inherit; font-size: 0.9rem; color: var(--ink); }
.extract-form textarea { resize: vertical; }
.extract-form .actbtns { margin-top: 0.8rem; }

.jobpanel { margin: 1rem 0; }
.extract-add-title { margin: 1.25rem 0 0; }
.jobhead { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r); padding: 0.7rem 1rem; box-shadow: var(--shadow); }
.jobstat { font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.jobstat.stat-Succeeded { color: var(--ok); }
.jobstat.stat-Failed { color: var(--err); }
.jobstat.stat-Running, .jobstat.stat-Queued { color: var(--teal-dark); }
.jobmeta { font-size: 0.78rem; color: var(--muted); background: var(--teal-wash); border-radius: 20px; padding: 0.12rem 0.6rem; }
.spin { width: 0.85rem; height: 0.85rem; border: 2px solid #bcd; border-top-color: var(--teal); border-radius: 50%;
    display: inline-block; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.candhead { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; margin: 1.3rem 0 0.5rem; }
.candhead h2 { margin: 0; font-size: 1.1rem; }
.candhead #rerun { margin-left: auto; }
.candcard { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--teal);
    border-radius: var(--r); padding: 0.85rem 1rem; margin: 0.6rem 0; box-shadow: var(--shadow); }
.candcard.type-Party { border-left-color: #6a7fd9; }
.candcard.type-Obligation { border-left-color: #0a8f6a; }
.candhd { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.45rem; }
.candtype { font-weight: 700; color: var(--ink); }
.candhd .conf { font-size: 0.74rem; color: var(--muted); background: var(--teal-wash); border-radius: 20px; padding: 0.12rem 0.6rem; }
.rstat { font-size: 0.72rem; border-radius: 20px; padding: 0.12rem 0.6rem; text-transform: uppercase; margin-left: auto; font-weight: 700; }
.rstat-Pending { background: var(--warn-wash); color: #8a6a00; }
.rstat-Approved { background: var(--ok-wash); color: var(--ok); }
.rstat-Rejected { background: var(--err-wash); color: var(--err); }
.pl .plmain { font-weight: 600; font-size: 0.92rem; }
.pl .pltext { font-size: 0.85rem; color: #38505a; margin-top: 0.25rem; white-space: pre-wrap; }
.pl .plchips { margin-top: 0.4rem; display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pl .chip { font-size: 0.72rem; background: var(--teal-wash); color: var(--teal-dark); border-radius: 20px; padding: 0.12rem 0.6rem; }
.pl .chip.warn { background: var(--warn-wash); color: #8a5a00; }
.plspan { margin-top: 0.4rem; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.promoted { margin-top: 0.5rem; font-size: 0.8rem; color: var(--ok); }
.rnote { margin-top: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.candact { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem;
    padding-top: 0.6rem; border-top: 1px dashed var(--line-2); }
.candact .cnote { flex: 1; min-width: 160px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0.4rem 0.55rem; font: inherit; font-size: 0.85rem; }
.candmsg { font-size: 0.82rem; }
.candmsg.err { color: var(--err); }

/* ============================================================================
   Tabs
   ============================================================================ */
.tabs { display: flex; gap: 0.3rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs .tab { padding: 0.55rem 1rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; }
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.active { color: var(--teal-dark); border-bottom-color: var(--teal); font-weight: 700; }

/* the sign-in, first-password and error pages, with no menu: the app's slate panel beside the form (D-116) */
.account-page { display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); min-height: 100vh; }
.account-panel { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 2.5rem 3rem; background: var(--side-bg); color: var(--side-ink); }
.account-brand { display: flex; align-items: center; gap: 0.6rem; }
.account-tagline { margin: auto 0 0.75rem; color: #fff; font-size: 1.9rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.4px; }
.account-panel-note { margin: 0; color: var(--side-ink-dim); font-size: 0.86rem; }
.account-main { display: flex; justify-content: center; padding: 3rem 1.5rem; }
.account-card { width: 100%; max-width: 400px; margin: auto 0; }
.account-card h1 { margin: 0 0 0.35rem; color: var(--ink); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.3px; }
.account-lede { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.95rem; }
.account-alert { margin-bottom: 1.25rem; padding: 0.7rem 0.85rem; background: var(--err-wash); border-radius: var(--r); color: var(--err); font-size: 0.88rem; }
.account-help { margin: 1.1rem 0 0; color: var(--muted); font-size: 0.84rem; }
.account-field-note { color: var(--muted); font-size: 0.8rem; }
.account-card .account-form { max-width: none; margin: 0; }
.account-card .account-form label:first-of-type { margin-top: 0; }
.account-card .account-form input { height: 44px; padding: 0 0.8rem; border-color: var(--line-2); font-size: 0.95rem; }
.account-card .account-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px hsl(213 94% 45% / 18%); }
.account-card .account-form .btn { align-self: stretch; justify-content: center; height: 44px; margin-top: 1.1rem; font-size: 0.95rem; }
.account-dev { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.account-dev-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.account-dev-head h2 { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 600; }
.account-dev-tag { flex-shrink: 0; padding: 0.1rem 0.55rem; background: var(--warn-wash); border-radius: 999px; color: #7a4f00; font-size: 0.74rem; font-weight: 600; }
.account-card .userlist { gap: 0.5rem; margin-top: 0.85rem; }
.account-card .usercard { gap: 0.75rem; padding: 0.6rem 0.75rem; box-shadow: none; }
.account-card .usercard .userinfo { min-width: 0; overflow-wrap: anywhere; }
.account-card .usercard .uhint { color: var(--muted); }
.account-card .usercard .signin { flex-shrink: 0; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
@media (max-width: 860px) {
    .account-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    .account-panel { position: static; height: auto; padding: 0.9rem 16px; }
    .account-tagline, .account-panel-note { display: none; }
    .account-main { padding: 2rem 16px; }
    .account-card { margin: 0; }
}

/* the signed-in person's own page (D-116) */
.profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); align-items: start; max-width: 960px; }
.profile-section h2 { margin: 0 0 var(--space-3); color: var(--ink); font-size: 1rem; font-weight: 600; }
.profile-section p { margin: 0 0 var(--space-2); }
.profile-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.profile-facts dt { color: var(--muted); }
.profile-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.profile-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding-left: 1.1rem; }
.profile-saved { margin-bottom: var(--space-3); padding: 0.6rem 0.8rem; background: var(--ok-wash); border-radius: var(--r); color: var(--ok); font-size: 0.88rem; }
.profile .account-form { margin-bottom: 0; }

/* the form to add a user, and changing a password on the profile page (D-116) */
.account-form { display: flex; flex-direction: column; gap: 0.4rem; max-width: 380px; margin: 1rem 0; }
.account-form.wide { max-width: 520px; }
.account-form[hidden], #issued[hidden] { display: none; }
.account-caution { margin-top: var(--space-2); padding: 0.6rem 0.8rem; background: var(--warn-wash); border-radius: var(--r); color: #7a4f00; font-size: 0.86rem; }
.account-caution[hidden] { display: none; }
.account-form .account-alert { margin: var(--space-2) 0 0; }
.account-form .account-alert[hidden] { display: none; }
.account-form .row-actions { display: flex; gap: var(--space-2); }
.account-form .row-actions .btn { align-self: auto; }
#people td .btn + .btn, #people td .btn + a.btn { margin-left: var(--space-1); }
.account-form label { font-weight: 600; font-size: 0.86rem; margin-top: 0.5rem; }
.account-form input, .account-form select { padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: var(--r); font: inherit; background: var(--card); color: var(--ink); }
.account-form input[readonly] { color: var(--muted); }
.account-form .btn { align-self: flex-start; margin-top: 0.9rem; }
#issued code { display: block; margin: 0.6rem 0; font-size: 1.05rem; user-select: all; }

/* user list (login) */
.userlist { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; max-width: 720px; }
.usercard {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 0.95rem 1.15rem; box-shadow: var(--shadow); transition: border-color .14s, box-shadow .14s;
}
.usercard:hover { border-color: var(--teal-wash-2); box-shadow: var(--shadow-lg); }
.userinfo { display: flex; flex-direction: column; gap: 0.15rem; }
.userinfo .uname { font-weight: 700; color: var(--ink); }
.userinfo .uorg { font-size: 0.82rem; color: var(--muted); }
.userinfo .uhint { font-size: 0.82rem; color: var(--teal-dark); }

/* ============================================================================
   Responsive — collapse the sidebar
   ============================================================================ */
@media (max-width: 880px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        z-index: 40;
        left: 0; top: 0;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .nav-open .sidebar { transform: translateX(0); }
    .nav-toggle-btn { display: inline-flex; align-items: center; }
    .content { padding: 1.1rem 1.1rem 1.6rem; }
    .graph { height: calc(100vh - var(--topbar-h) - 230px); }
}

/* ============================================================================
   AI assistant (Pages/Chat) — bespoke two-pane chat panel
   ============================================================================ */
.chat-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; height: calc(100vh - var(--topbar-h) - 170px); min-height: 560px; }
.chat-aside { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.chat-aside .btn { width: 100%; }
.conv-filter { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .4rem .6rem; font: inherit; font-size: .85rem; color: var(--ink); background: var(--card); }
.conv-filter:focus { outline: none; border-color: var(--teal-light); }
.conv-list { overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.convmsg { padding: .5rem .25rem; font-size: .85rem; }
.convitem { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .5rem .65rem; cursor: pointer; color: var(--ink); font: inherit; font-size: .88rem; }
.convitem:hover { border-color: var(--line-2); }
.convitem.active { background: var(--teal-wash); border-color: var(--teal-light); color: var(--teal-darker); font-weight: 600; }
.convtitle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-main { display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.chat-thread { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .85rem; }
.chat-empty { color: var(--muted); margin: auto; text-align: center; font-size: .9rem; }
.msg { display: flex; flex-direction: column; max-width: 80%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.assistant { align-self: flex-start; align-items: flex-start; }
.bubble { padding: .6rem .8rem; border-radius: var(--r); white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; }
.msg.user .bubble { background: var(--teal); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant .bubble { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg.pending .bubble::after { content: '\258D'; animation: chat-blink 1s step-end infinite; }
@keyframes chat-blink { 50% { opacity: 0; } }
.msg.err .bubble { background: var(--err-wash); color: var(--err); border-color: var(--err); }
.cites { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.citegroup { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }   /* clause citation: tag + evidence chip + currency badge (Wave A4) */
.citetag { font-size: .72rem; font-weight: 700; color: var(--teal-dark); }
a.citegroup { text-decoration: none; color: inherit; }   /* span-less clause citation falls back to a /Clauses link (Wave A4) */
.cite { font-size: .72rem; padding: .12rem .45rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--body); text-decoration: none; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.cite:hover { border-color: var(--teal-light); color: var(--teal-dark); }
.cite-clause { background: var(--teal-wash); border-color: var(--teal-wash-2); color: var(--teal-darker); }
.cite-conflict { background: var(--warn-wash); border-color: var(--warn-wash); color: var(--warn); }
.cite-library { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }   /* reference library (Wave C) */
/* Governed action cards (Wave D / D2) — pre-filled deep-links to the human-gated pages. */
.actions-row { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; max-width: 100%; }
.actions-hd { font-size: .72rem; color: var(--body); font-weight: 600; }
.actioncard { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); text-decoration: none; font-size: .8rem; }
.actioncard:hover { border-color: var(--teal-light); background: var(--teal-wash); }
.actioncard .actkind { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .4rem; border-radius: 999px; background: var(--teal-wash-2); color: var(--teal-darker); white-space: nowrap; }
.actioncard.act-resolve-conflict .actkind { background: var(--warn-wash); color: var(--warn); }
.actioncard.act-review-gap-finding .actkind { background: #eef2ff; color: #3730a3; }
.actioncard .actlabel { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actioncard .actgo { color: var(--teal-dark); font-weight: 600; white-space: nowrap; }
/* Brief highlight when a deep-link (?focus=) lands on a specific conflict/obligation/finding (Wave D / D2). */
.focusflash { animation: focus-flash 2.4s ease-out 1; }
@keyframes focus-flash { 0% { box-shadow: 0 0 0 3px var(--teal-light); } 100% { box-shadow: 0 0 0 3px transparent; } }
.chat-scopebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: .5rem .7rem; border-top: 1px solid var(--line); background: var(--card); font-size: 13px; color: var(--body); }
.chat-scopebar-label { font-weight: 600; }
.chat-bundle-hint { color: var(--muted); }
.chat-composer { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--line); background: var(--card); }
.chat-composer textarea { flex: 1; resize: none; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .55rem .7rem; font: inherit; font-size: .92rem; max-height: 140px; }
.chat-composer textarea:focus { outline: none; border-color: var(--teal-light); }
.chat-composer .btn { align-self: flex-end; }

/* ============================================================================
   D-065 — My work (the home page) and the notification bell
   ============================================================================ */
.work { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.1rem; }
.worksec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.15rem; box-shadow: var(--shadow); min-width: 0; }
.worksec#changes { grid-column: 1 / -1; }
.worktitle { font-size: .95rem; margin: 0 0 .7rem; color: var(--ink); font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.workcount { font-size: .72rem; font-weight: 700; color: var(--teal-dark); background: var(--teal-wash); border-radius: 999px; padding: .08rem .5rem; }
.worklist { list-style: none; margin: 0; padding: 0; }
.workitem { display: flex; gap: .8rem; align-items: flex-start; border-top: 1px solid var(--line); padding: .55rem 0; }
.workitem:first-child { border-top: none; padding-top: 0; }
.workrow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: inherit; }
.workrow:hover .wtitle { color: var(--teal); text-decoration: underline; }
.wtitle { font-weight: 650; color: var(--ink); font-size: .9rem; }
.wdetail { color: var(--body); font-size: .84rem; overflow-wrap: anywhere; }
.wnote { color: var(--muted); font-size: .78rem; }
.wwhen { color: var(--muted); font-size: .78rem; white-space: nowrap; padding-top: .1rem; }
.kind-deadline .wtitle, .kind-decision .wtitle { color: var(--teal-darker); }

.bell { position: relative; }
.bellbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 8px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; padding: 0; }
.bellbtn:hover, .bellbtn[aria-expanded="true"] { border-color: var(--teal); background: var(--teal-wash); }
.bellbtn svg { width: 18px; height: 18px; fill: var(--teal-dark); }
.bellcount { position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--err); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }
.bellcount[hidden] { display: none; }
.bellpanel { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, 92vw); max-height: 70vh; overflow: auto; z-index: 50;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.bellpanel[hidden] { display: none; }
.bellhead { display: flex; align-items: center; justify-content: space-between; padding: .65rem .85rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.linkbtn { border: none; background: none; color: var(--teal-dark); cursor: pointer; font: inherit; font-size: .82rem; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.belllist { list-style: none; margin: 0; padding: 0; }
.bellitem a { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .85rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.bellitem a:hover { background: var(--teal-wash); }
.bellitem.unread a { box-shadow: inset 3px 0 0 var(--teal); background: #f7fbfb; }
.bellitem.unread .btitle { font-weight: 700; }
.btitle { color: var(--ink); font-size: .86rem; font-weight: 600; }
.bdetail { color: var(--body); font-size: .8rem; overflow-wrap: anywhere; }
.bwhen { color: var(--muted); font-size: .74rem; }
.bellempty { padding: .8rem .85rem; color: var(--muted); font-size: .84rem; }

/* D-085 Claims & time bars: the contractor team's register of time limits */
.claims-toolbar { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.6rem; }
.claims-toolbar select { margin-left: 0.35rem; }
.claims-entry { margin-bottom: 0.8rem; }
.claims-head { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.claims-title { margin: 0 0 0.2rem; font-size: 1rem; }
.claims-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.cl-chip { font-size: 0.72rem; background: var(--teal-wash); color: var(--teal-dark); border-radius: 20px; padding: 0.12rem 0.6rem; }
.cl-chip.ok { background: #e3f4ea; color: #1f6b3a; }
.cl-chip.warn { background: var(--warn-wash); color: #8a5a00; }
.claims-quote { margin: 0.5rem 0; padding: 0.4rem 0.7rem; border-left: 3px solid var(--line); color: var(--ink); font-size: 0.9rem; }
.claims-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.8rem; margin: 0.4rem 0; font-size: 0.88rem; }
.claims-dl dt { color: var(--muted); }
.claims-dl dd { margin: 0; }
.claims-confirmed { font-size: 0.85rem; color: #1f6b3a; margin-top: 0.3rem; }
.claims-actions { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.claims-confirm { margin-top: 0.5rem; display: grid; gap: 0.35rem; max-width: 60ch; }
.claims-form { display: grid; gap: 0.45rem; margin-bottom: 0.8rem; max-width: 70ch; }
.claims-field { display: grid; gap: 0.15rem; font-size: 0.85rem; }
.claims-field span { color: var(--muted); }
.claims-history, .claims-dismissed { margin-top: 0.4rem; font-size: 0.85rem; }
@media (max-width: 640px) { .claims-dl { grid-template-columns: 1fr; } }

/* D-067: the clause page — the text with its references marked, and links */
.xref-text { white-space: pre-wrap; line-height: 1.55; }
.xref-mark { background: var(--warn-wash); color: inherit; border-radius: 3px; padding: 0 2px; text-decoration: none; }
.xref-mark.linked { background: #e3f4ea; }
.xref-target { margin-top: 0.35rem; font-size: 0.9rem; }
.xref-target .cl-chip { margin-left: 0.4rem; }
#xr-panel { margin-top: 0.8rem; }

/* D-069: the programme page */
.schedule-project { margin-bottom: 1rem; }
.schedule-phase { font-size: 1rem; margin: 0.9rem 0 0.4rem; }
.schedule-phase .small { margin-left: 0.5rem; font-weight: 400; }
.schedule-bar { display: inline-block; width: 70px; height: 7px; background: var(--line); border-radius: 4px; vertical-align: middle; margin-right: 0.4rem; overflow: hidden; }
.schedule-bar > span { display: block; height: 100%; background: var(--teal); }
.xr-list { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.xr-list li { margin: 0.2rem 0; }
.schedule-upload { margin: 0.4rem 0 0.8rem; }
.schedule-upload input[type=file] { margin-right: 0.5rem; }
.schedule-mapping { display: grid; gap: 0.6rem; max-width: 640px; }
.schedule-mapping label { display: grid; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; }
.schedule-mapping select { font-weight: 400; max-width: 100%; }
.schedule-note { background: var(--teal-wash); border-left: 3px solid var(--teal); padding: 0.5rem 0.8rem; margin: 0.4rem 0 0.8rem; font-size: 0.9rem; }
.schedule-handover { border: 1px solid var(--line); border-radius: 6px; padding: 0.6rem; margin-bottom: 0.8rem; }
.schedule-kind-handover, .schedule-kind-blocked { color: var(--teal-dark); }
.schedule-approve { display: flex; gap: 0.8rem; align-items: center; margin: 0.4rem 0 0.6rem; }
.schedule-applied { color: var(--teal-dark); }
.schedule-history li { margin-bottom: 0.6rem; }

/* ---- Document readings (D-088) ---- */
.rd-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; }
.rd-row select { padding: 4px 8px; min-width: 280px; }
.rd-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rd-table th, .rd-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.rd-table th { color: var(--muted); font-weight: 600; }
.rd-click { cursor: pointer; }
.rd-click:hover { background: var(--teal-wash); }
.rd-text { max-width: 640px; }
.rd-answer { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rd-note { min-width: 220px; padding: 3px 6px; }
.rd-facts { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.rd-fact { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; display: flex; flex-direction: column; min-width: 110px; }
.rd-fact b { font-size: 1.15rem; color: var(--teal-dark); }
.rd-fact span { font-size: 0.75rem; color: var(--muted); }

/* Shared shell and page components. No data or page visibility is decided in CSS. */
.skip-link { position: fixed; top: -100px; left: var(--space-4); z-index: 1000; padding: 10px 16px; background: var(--card); color: var(--ink); border: 2px solid var(--accent); border-radius: var(--r-sm); }
.skip-link:focus { top: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-caption { flex-shrink: 0; padding: var(--space-4) var(--space-6) var(--space-2); color: var(--side-ink-dim); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.nav-area > summary { list-style: none; cursor: pointer; }
.nav-area > summary::-webkit-details-marker { display: none; }
.navlink > span { flex: 1; }
.nav-chevron { width: 14px; height: 14px; fill: currentColor; opacity: .7; flex: 0 0 auto; transition: transform .15s; }
.nav-area[open] > summary .nav-chevron { transform: rotate(90deg); }
.nav-children { margin: var(--space-1) 0 var(--space-2) 22px; padding-left: var(--space-2); border-left: 1px solid var(--side-border); }
.nav-page { display: flex; align-items: center; gap: var(--space-2); padding: 7px 10px; border-radius: var(--r-sm); color: var(--side-ink); font-size: 13px; line-height: 1.4; text-decoration: none; }
.nav-page .ico { width: 15px; height: 15px; fill: currentColor; opacity: .8; flex-shrink: 0; }
.nav-page:hover { background: var(--side-active); color: #fff; }
.nav-page.active { background: var(--side-active); color: #fff; font-weight: 600; }
.sidebar-foot, .sidebar-account { flex-shrink: 0; margin-top: auto; border-top: 1px solid var(--side-border); padding: var(--space-4) var(--space-6); color: var(--side-ink-dim); font-size: 12px; }
.sidebar-account { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-3); padding-left: var(--space-3); }
.account-avatar { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; background: var(--side-active); color: #fff; border-radius: 50%; font-weight: 600; }
.account-profile { display: flex; flex: 1; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); border-radius: var(--r); color: #fff; text-decoration: none; }
.account-profile:hover { background: var(--side-active); }
.account-profile .who { min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.account-signout { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r); color: var(--side-ink-dim); }
.account-signout:hover { background: var(--side-active); color: #fff; }
.account-signout svg { width: 18px; height: 18px; fill: currentColor; }
.nav-close { display: none; }
.nav-toggle-btn { border: 0; background: transparent; padding: 6px; cursor: pointer; border-radius: var(--r-sm); }
.nav-backdrop { position: fixed; inset: 0; z-index: 30; background: rgb(15 23 42 / 50%); border: 0; }
.topbtn { font-size: 12px; border-radius: var(--r-sm); box-shadow: none; }
.workspace-header { padding: var(--space-4) var(--space-6); background: var(--card); border-bottom: 1px solid var(--line); }
.workspace-area { font-size: 20px; font-weight: 600; color: var(--ink); }
.workspace-view { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: 14px; color: var(--ink); }
.workspace-view .ico, .page-title .ico { width: 16px; height: 16px; fill: var(--accent); flex-shrink: 0; }
.project-strip { margin-bottom: var(--space-2); }
.project-identity { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.project-identity + .project-identity { margin-top: var(--space-2); }
.project-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.project-identity strong { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.project-code { padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 11px; color: var(--muted); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.page-heading { flex: 1 1 420px; min-width: 0; }
.page-title { display: flex; align-items: center; gap: var(--space-2); }
.page-title h1 { margin: 0; font-size: 15px; letter-spacing: 0; }
.page-heading .lede { margin: var(--space-1) 0 0; max-width: none; font-size: 13px; }
.page-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.source-chip { display: inline-flex; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--body); background: var(--card); font-size: 11px; font-weight: 500; }
.page-guidance { font-size: 13px; }
.figure-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.figure-tile { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.figure-tile dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.figure-tile dd { margin: var(--space-1) 0 0; color: var(--ink); font-size: 24px; line-height: 1.25; font-weight: 700; font-variant-numeric: tabular-nums; }
.filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.filter-field { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; max-width: 100%; }
.filter-field label { color: var(--muted); font-size: 12px; font-weight: 500; }
.filter-field input, .filter-field select, .findings-page .rd-row select { height: 36px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; color: var(--body); background: var(--card); max-width: 100%; }
.filter-field input { width: 320px; }
.filter-field select { min-width: 150px; }
.grid-panel { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.grid-panel .rd-table { margin: 0; }
.grid-panel .rd-table th { background: #f1f5f9; color: var(--muted); font-size: 12px; white-space: nowrap; }
.grid-panel .rd-table th, .grid-panel .rd-table td { padding: var(--space-3) var(--space-4); }
.grid-panel .rd-table tbody tr:last-child td { border-bottom: 0; }
.grid-panel .rd-table tbody tr:hover { background: #f8fafc; }
.findings-page > .tile { margin-bottom: var(--space-4); }
.findings-page .tiletitle::before { display: none; }
.findings-page .tiletitle { margin-bottom: var(--space-2); }
table.grid th { background: #f1f5f9; color: var(--muted); }
.dx-datagrid { font-family: var(--font); font-size: 13px; color: var(--body); border: 1px solid var(--line); }
.dx-datagrid .dx-toolbar { padding: var(--space-2) var(--space-3); }
.dx-datagrid .dx-datagrid-headers { color: var(--muted); font-size: 12px; font-weight: 600; }
.dx-datagrid .dx-datagrid-filter-row { background: var(--card); }
.dx-datagrid .dx-row-alt > td { background: #f8fafc; }
.dx-datagrid .dx-row-focused.dx-data-row > td { background: var(--dx-accent); }
.stats { gap: var(--space-3); }
.stat { box-shadow: none; padding: var(--space-4); }
.stat .num { color: var(--ink); font-size: 24px; }
.stat:hover { transform: none; }
.btn:hover, .signin:hover { box-shadow: none; }
.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.work { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
@media (max-width: 880px) {
    .sidebar { visibility: hidden; }
    .nav-open .sidebar { visibility: visible; }
    .nav-close { display: block; position: absolute; top: 12px; right: 8px; padding: 0 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--side-ink); font-size: 24px; cursor: pointer; }
    .topbar, .workspace-header { padding-left: var(--space-4); padding-right: var(--space-4); }
    .content { padding: var(--space-4); }
    .page-heading { flex-basis: 100%; }
    .page-chips { padding: 0; }
}
@media (max-width: 480px) {
    .topbar { gap: 6px; }
    .authbox { gap: 4px; }
    .topbtn { padding: 5px 7px; }
    .topbar-context { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .project-identity { gap: 6px; }
    .project-identity strong { flex-basis: 100%; order: 1; }
    .figure-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; } }

/* Clauses: independently scrolling navigation and reading surfaces, using the existing page rows. */
.app-main:has(> .clause-page) { height: 100dvh; }
.app-main:has(> .clause-page) > .topbar, .app-main:has(> .clause-page) > .workspace-header { flex-shrink: 0; }
.app-main:has(> .clause-page) > .footer { flex-shrink: 0; padding: var(--space-2) var(--space-6); font-size: 11px; }
.clause-page { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.clause-tools { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.clause-notes { flex: 1; min-width: 0; font-size: 12px; }
.clause-notes summary { cursor: pointer; color: var(--muted); padding: var(--space-1) 0; }
.clause-notes[open] summary { margin-bottom: var(--space-2); }
.clause-notes .figure-tiles { margin-bottom: 0; }
.clause-notes .figure-tile { padding: var(--space-3); }
.clause-tools > button { flex-shrink: 0; }
.unread-notice { flex-shrink: 0; margin-bottom: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--warn, #c47f00); border-radius: 6px; font-size: 12px; }
.unread-notice[hidden] { display: none; }
.unread-notice h2 { display: inline; margin: 0; font-size: 12px; }
.unread-notice h3 { margin: 8px 0 2px; font-size: 12px; }
.unread-part[hidden] { display: none; }
.unread-notice summary, .ask-unread summary, .chat-unread summary { cursor: pointer; }
.unread-notice[open] summary { margin-bottom: 4px; }
.ask-unread p, .chat-unread p { margin: .4rem 0 0; }
.unread-notice p { margin: 0 0 4px; }
.unread-notice ul { margin: 0; padding: 0; list-style: none; }
.clause-workspace { flex: 1; display: grid; grid-template-columns: minmax(230px, var(--clause-list-w)) minmax(0, 1fr); gap: var(--space-4); min-height: 240px; }
#clause-table { flex: 1; min-height: 240px; }
.clause-browser, .clause-reader { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.clause-filters { flex-shrink: 0; padding: var(--space-3); border-bottom: 1px solid var(--line); }
.clause-filters input, .clause-filters select { width: 100%; min-width: 0; height: 34px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; font-size: 12px; color: var(--body); background: var(--card); }
.clause-selects { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.clause-selects label { min-width: 0; }
.clause-count { margin: var(--space-2) 0 0; color: var(--muted); font-size: 11px; }
.clause-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.clause-section h2 { margin: 0; padding: 6px var(--space-3); background: #f1f5f9; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.clause-section ul { list-style: none; padding: 0; margin: 0; }
.clause-item { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: var(--space-2); width: 100%; padding: 8px var(--space-3); border: 0; border-left: 2px solid transparent; background: var(--card); color: var(--body); text-align: left; font: inherit; font-size: 12px; line-height: 1.45; cursor: pointer; }
.clause-item:hover { background: var(--bg); }
.clause-item.active { background: var(--accent-wash); border-left-color: var(--accent); color: var(--ink); }
.clause-item.active .clause-name { font-weight: 600; }
.clause-item:focus-visible { outline-offset: -3px; }
.clause-number { font-family: var(--mono); font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.clause-name { overflow-wrap: anywhere; }
.clause-reader-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.clause-reader-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.clause-metadata { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); margin: 0; padding: var(--space-3) var(--space-5); background: var(--bg); border-bottom: 1px solid var(--line); font-size: 11px; }
.clause-metadata > div { display: flex; gap: var(--space-1); }
.clause-metadata dt { color: var(--muted); }
.clause-metadata dd { margin: 0; color: var(--ink); }
.clause-reader .cl-reading { padding: 0; max-width: none; }
.clause-reader .cl-head { position: sticky; top: 0; z-index: 1; background: var(--card); margin: 0; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.clause-reader .cl-source { color: var(--muted); font-size: 11px; margin-bottom: var(--space-2); }
.clause-reader .cl-head h2 { font-size: 20px; line-height: 1.35; margin: 0; }
.clause-reader .cl-head b { color: var(--muted); font-family: var(--mono); font-size: .9em; }
.clause-reader .cl-text { padding: var(--space-5); font-size: var(--reader-type); line-height: var(--reader-leading); color: var(--body); overflow-wrap: anywhere; }
.clause-reader .cl-reading > p { padding: 0 var(--space-5) var(--space-3); margin: 0; font-size: 12px; }
.clause-paging { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }
.clause-paging button { min-height: 26px; }
.clause-paging button:disabled { color: var(--muted); opacity: .65; cursor: default; text-decoration: none; }
.clause-empty { padding: var(--space-4); margin: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) {
    .app-main:has(> .clause-page) { height: auto; }
    .clause-page { display: block; }
    .clause-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: 220px minmax(360px, calc(100dvh - 120px)); height: auto; min-height: 0; }
    .clause-reader .cl-head h2 { font-size: 18px; }
    .clause-reader .cl-head, .clause-reader .cl-text, .clause-metadata, .clause-paging { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* Compact contract pages. Disclosures retain the full wording and existing controls. */
.definitions-page .figure-tiles, .discrepancies-page .figure-tiles { margin-bottom: var(--space-3); }
.definitions-page .figure-tile, .discrepancies-page .figure-tile { padding: var(--space-3) var(--space-4); }
.definitions-page .figure-tile dd, .discrepancies-page .figure-tile dd { font-size: 22px; }
.page-help { margin-bottom: var(--space-3); font-size: 12px; }
.page-help > summary { width: fit-content; padding: 2px 0; color: var(--muted); cursor: pointer; }
.help-copy { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--card); border-left: 3px solid var(--accent); }
.help-copy p { margin: 0 0 var(--space-2); font-size: 13px; }
.help-copy p:last-child { margin-bottom: 0; }
.definitions-heading { margin: 0 0 var(--space-2); font-size: 15px; }
.definitions-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.definitions-tools .filter-bar, .definitions-tools .totals { margin: 0; }
.definitions-tools .totals { font-size: 12px; }
.definitions-scroll { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.definitions-scroll:focus-visible, .findings-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* plan §5.3: EPC against PA definitions (team-only) */
.definition-pairs td { vertical-align: top; }
.definition-pairs .def-side { white-space: pre-wrap; margin-bottom: 0.25rem; }
del.def-diff { background: #fde2e1; text-decoration: line-through; }
ins.def-diff { background: #e3f4ea; text-decoration: underline; }
.definitions-elsewhere { margin-top: var(--space-3); }
.definitions-elsewhere-list { columns: 2 22rem; margin: 0 0 var(--space-3); }
.definitions-contract { margin: 0; padding: 6px var(--space-3); background: var(--accent-wash); color: var(--muted); font-size: 12px; font-weight: 600; }
.definitions-page table.grid { border: 0; border-radius: 0; box-shadow: none; margin: 0; font-size: 13px; }
.definitions-page table.grid th, .definitions-page table.grid td { padding: 7px var(--space-3); }
.definitions-page table.grid th { position: sticky; top: 0; z-index: 1; }
.definitions-page table.defined-terms { min-width: 650px; }
.definition-reading summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); cursor: pointer; list-style: none; }
.definition-reading summary::-webkit-details-marker { display: none; }
.definition-preview { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.definition-more, .definition-less { color: var(--accent-hover); font-size: 11px; }
.definition-less { display: none; }
.definition-reading[open] summary { justify-content: end; grid-template-columns: auto; }
.definition-reading[open] .definition-preview, .definition-reading[open] .definition-more { display: none; }
.definition-reading[open] .definition-less { display: inline; }
.definition-full { white-space: pre-wrap; overflow-wrap: anywhere; padding-top: var(--space-1); line-height: 1.5; }
.project-glossary { margin-top: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.project-glossary > summary { padding: 10px var(--space-3); cursor: pointer; font-weight: 600; color: var(--ink); list-style-position: inside; }
.project-glossary > summary .muted { margin-left: var(--space-3); font-size: 12px; }
.project-glossary-body { padding: 0 var(--space-3) var(--space-3); overflow-x: auto; }
.project-glossary-body > .sub, .project-glossary-body > .totals { margin: 0 0 var(--space-2); font-size: 12px; }
.project-glossary-body h3 { margin: var(--space-3) 0 var(--space-2); font-size: 13px; }
.findings-tools { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.findings-tools .filter-bar { margin: 0; }
.findings-tools .filter-field input, .findings-tools .filter-field select { height: 34px; font-size: 12px; }
.finding-run > summary { padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); color: var(--accent-hover); font-size: 12px; font-weight: 600; cursor: pointer; }
.finding-run[open] { flex-basis: 100%; }
.finding-run[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.finding-run-body { padding: var(--space-3); border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--card); }
.finding-run-body .rd-row { margin: 0 0 var(--space-2); }
.finding-run-body p { margin: 0; }
.discrepancies-page .finding-run-body select { min-width: min(280px, 100%); }
.findings-scroll { max-height: 62vh; overflow: auto; }
.findings-table { min-width: 800px; table-layout: fixed; }
.findings-table th:nth-child(1) { width: 14%; }
.findings-table th:nth-child(2) { width: 25%; }
.findings-table th:nth-child(3) { width: 8%; }
.findings-table th:nth-child(4) { width: 33%; }
.findings-table th:nth-child(5) { width: 20%; }
.grid-panel .findings-table th, .grid-panel .findings-table td { padding: 7px 10px; font-size: 12px; overflow-wrap: anywhere; }
.grid-panel .findings-table th { position: sticky; top: 0; z-index: 1; }
.entitlement-table { min-width: 960px; table-layout: fixed; }
.entitlement-table th:nth-child(1) { width: 17%; }
.entitlement-table th:nth-child(2) { width: 13%; }
.entitlement-table th:nth-child(3) { width: 15%; }
.entitlement-table th:nth-child(4) { width: 33%; }
.entitlement-table th:nth-child(5) { width: 22%; }
.grid-panel .entitlement-table th, .grid-panel .entitlement-table td { padding: 7px 10px; font-size: 12px; overflow-wrap: anywhere; vertical-align: top; }
.grid-panel .entitlement-table th { position: sticky; top: 0; z-index: 1; }
.entitlement-table .row-muted td { opacity: .65; }
.relief-chip { display: inline-block; margin: 0 2px 2px 0; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.relief-time { background: #dbeafe; color: #1e40af; }
.relief-money { background: #dcfce7; color: #166534; }
.relief-other { background: #fef3c7; color: #92400e; }
.entitlement-routes { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.entitlement-routes h2 { margin: 0 0 6px; font-size: 13px; }
.entitlement-routes .small + .small { margin-top: 4px; }
.entitlement-reliefs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0; font-size: 12px; }
.entitlement-reliefs label { white-space: nowrap; }
#entAddQuote { width: 100%; }
.time-limit-compare { min-width: 900px; table-layout: fixed; }
.time-limit-compare th:nth-child(1) { width: 17%; }
.time-limit-compare th:nth-child(2), .time-limit-compare th:nth-child(3) { width: 34%; }
.time-limit-compare th:nth-child(4) { width: 15%; }
.grid-panel .time-limit-compare th, .grid-panel .time-limit-compare td { padding: 7px 10px; font-size: 12px; overflow-wrap: anywhere; vertical-align: top; }
.time-limit-compare ul { margin: 0; padding: 0; list-style: none; }
.time-limit-compare li + li { margin-top: 8px; }
.finding-matrix-panel { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.finding-matrix-panel h2 { margin: 0 0 var(--space-2); font-size: 14px; }
.finding-matrix-panel p { margin: var(--space-2) 0 0; }
.finding-matrix-scroll { overflow-x: auto; }
.finding-matrix { width: auto; min-width: min(560px, 100%); font-size: 12px; }
.finding-matrix th[scope="row"] { color: var(--ink); font-weight: 600; white-space: nowrap; }
.finding-matrix td { text-align: right; font-variant-numeric: tabular-nums; min-width: 64px; }
.finding-matrix .matrix-zero { color: var(--muted); }
.finding-matrix .matrix-total th, .finding-matrix .matrix-total td { border-top: 2px solid var(--line-2); }
.finding-matrix .matrix-pick { font-size: 12px; font-weight: 700; }
.finding-matrix .matrix-pick.on { padding: 1px 6px; border-radius: var(--r-sm); background: var(--accent-wash); }
.finding-note { margin: 0 0 var(--space-3); }
.time-limits-waiting { max-width: 760px; }
.time-limits-waiting h2 { margin: 0 0 var(--space-2); font-size: 15px; }
.time-limits-waiting p { margin: 0 0 var(--space-2); font-size: 13px; }
.drafting-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.drafting-tools select { min-width: min(280px, 100%); }
.drafting-table { min-width: 800px; table-layout: fixed; }
.drafting-table th:nth-child(1) { width: 20%; }
.drafting-table th:nth-child(2) { width: 10%; }
.drafting-table th:nth-child(3) { width: 7%; }
.drafting-table th:nth-child(4) { width: 9%; }
.drafting-table th:nth-child(5) { width: 42%; }
.drafting-table th:nth-child(6) { width: 12%; }
.grid-panel .drafting-table th, .grid-panel .drafting-table td { padding: 7px 10px; font-size: 12px; overflow-wrap: anywhere; }
.grid-panel .drafting-table th { position: sticky; top: 0; z-index: 1; }
.drafting-table td.num { font-variant-numeric: tabular-nums; }
.drafting-example { display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; border-radius: var(--r-sm); background: var(--warn-wash); border: 1px solid #f0d9a8; }
.finding-review .rd-answer { gap: var(--space-1); }
.finding-review .rd-note { min-width: 0; width: 100%; font: inherit; }
.finding-review .btn { padding: 3px 6px; font-size: 11px; }
@media (max-width: 600px) {
    .definitions-tools .filter-bar, .definitions-tools .filter-field { width: 100%; }
    .definitions-tools .filter-field input { width: 100%; }
    .findings-tools .filter-bar { gap: var(--space-2); }
    .findings-tools .filter-field select { min-width: 120px; }
    .finding-run { width: 100%; }
    .finding-run-body .rd-row { align-items: stretch; }
    .discrepancies-page .finding-run-body select { width: 100%; }
}

/* Cross-reference overview and the clause reader's two reference panels. */
.cross-references-page .figure-tiles { margin-bottom: var(--space-3); }
.cross-references-page .figure-tile { padding: var(--space-3) var(--space-4); }
.cross-references-page .figure-tile dd { font-size: 22px; }
.cross-reference-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.cross-reference-tools .cross-reference-contract, .cross-reference-tools .page-help, .cross-reference-tools .reference-dependencies { margin: 0; }
.cross-reference-tools .page-help { margin-left: auto; }
.cross-reference-tools details { min-width: 0; max-width: 100%; }
/* plan §5.4: confirming or rejecting ticked suggestions together */
.link-batch { margin: var(--space-3) 0; }
.link-batch-guide { margin: 0 0 var(--space-2); max-width: 70rem; }
.link-batch-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.link-batch-count { min-width: 11rem; font-weight: 600; }
.link-batch-note { flex: 1 1 20rem; max-width: 32rem; }
.link-batch-note input { width: 100%; }
.link-batch-none { pointer-events: none; }
.cross-reference-tools details[open] { flex-basis: 100%; }
.cross-reference-tools .page-help[open] { margin-left: 0; }
.cross-reference-contract { margin-bottom: var(--space-3); }
.cross-reference-contract select { min-width: 240px; max-width: 100%; }
.cross-references-page .dx-datagrid .dx-row > td { padding: 7px 10px; font-size: 12px; line-height: 1.4; }
.cross-references-page .dx-datagrid .dx-datagrid-filter-row > td { padding: 0; }
.cross-references-page .dx-texteditor-input { min-height: 30px; padding: 6px 8px; font-size: 12px; }
.cross-references-page .dx-toolbar .dx-toolbar-items-container { height: 40px; }
.cross-references-page .dx-toolbar { padding: 4px 8px; }
.reference-dependencies { margin-bottom: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.reference-dependencies > summary { padding: 10px var(--space-3); font-size: 13px; font-weight: 600; cursor: pointer; }
.reference-dependencies-body { padding: 0 var(--space-3) var(--space-3); overflow-x: auto; }
.reference-dependencies-body .rd-table { margin: 0; font-size: 12px; min-width: 600px; }
.reference-dependencies-body .rd-table th, .reference-dependencies-body .rd-table td { padding: 6px var(--space-2); }
.reference-dependencies-body p { margin: var(--space-2) 0 0; }
.clause-reader { container-type: inline-size; }
.clause-reference-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-4); background: var(--bg); border-top: 1px solid var(--line); }
.reference-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-3); background: var(--card); font-size: 12px; overflow-wrap: anywhere; }
.reference-panel a { display: inline-block; max-width: 100%; }
.reference-panel h2 { margin: 0 0 var(--space-2); font-size: 14px; }
.reference-panel h3, .reference-panel .claims-title { font-size: 12px; margin: 0; }
.reference-panel > h3 { margin-top: var(--space-3); }
.reference-panel .claims-head { gap: var(--space-2); margin-bottom: var(--space-2); }
.reference-panel .tile { margin: 0; padding: var(--space-3) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.reference-panel [id^="ref-"] { scroll-margin-top: 140px; }
.reference-panel .tile:hover { transform: none; }
.reference-panel .btn { padding: 4px 7px; font-size: 11px; }
.reference-panel .claims-actions { gap: var(--space-2); }
.reference-panel .claims-confirm { min-width: 0; }
.reference-panel .claims-confirm select, .reference-panel .claims-confirm input { max-width: 100%; min-width: 0; }
.reference-relation { background: var(--accent-wash); color: var(--accent-hover); }

/* Read-only clause questions and reference dependencies. */
.ask-search-panel, .ask-answer-panel, .ask-passages-panel, .dependency-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-4); }
.ask-search-panel h2, .ask-results h2, .dependency-panel h2 { margin: 0; font-size: 16px; }
.ask-intro, .ask-passages-heading, .dependency-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ask-intro > a { font-size: 12px; }
.ask-question-row { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; }
.ask-question-row .filter-field { display: flex; align-items: stretch; flex-direction: column; gap: var(--space-1); }
.ask-question-field { flex: 1 1 340px; }
.ask-document-field { flex: 0 1 410px; min-width: 0; }
.ask-question-row input, .ask-question-row select { width: 100%; min-width: 0; height: 40px; }
.ask-modes { border: 0; padding: 0; margin: var(--space-4) 0; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ask-modes legend { float: left; margin-right: var(--space-3); font-size: 12px; color: var(--muted); }
.ask-modes label { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
.ask-modes input { accent-color: var(--accent); }
.ask-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ask-suggestions button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.ask-suggestions button:hover { border-color: var(--accent); color: var(--accent); }
.ask-status { min-height: 20px; color: var(--muted); }
.ask-results { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-4); align-items: start; }
.ask-results[data-mode="passages"] { grid-template-columns: minmax(0, 1fr); }
.ask-results[hidden], .ask-answer-panel[hidden], #ask-cancel[hidden], #ask-export[hidden], .ask-unread[hidden] { display: none; }
.ask-unread, .chat-unread { padding: var(--space-2) var(--space-3); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--warn, #c47f00); border-radius: 6px; font-size: 13px; }
.ask-unread { grid-column: 1 / -1; margin: 0; }
.chat-unread { margin-top: .4rem; font-size: 12px; }
.ask-answer { white-space: pre-wrap; line-height: 1.8; overflow-wrap: anywhere; }
.ask-answer-panel { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); max-height: calc(100vh - var(--topbar-h) - 2 * var(--space-4)); overflow: auto; }
.ask-citation { font-weight: 600; padding: 2px 3px; background: var(--accent-wash); }
.ask-passage { border-top: 1px solid var(--line); padding: var(--space-4) 0; scroll-margin-top: 70px; }
.ask-passage:first-child { border-top: 0; }
.ask-passage-heading { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ask-passage-heading h3 { font-size: 14px; margin: 0; }
.ask-passage-text { margin: var(--space-3) 0; padding: 0 0 0 var(--space-3); border-left: 3px solid var(--accent); white-space: pre-wrap; line-height: 1.75; overflow-wrap: anywhere; }
.dependency-panel { margin-bottom: var(--space-4); }
.dependency-heading p { margin-bottom: var(--space-3); }
.dependency-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--line); }
.dependency-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.dependency-table th, .dependency-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 10px; }
.dependency-table thead th { position: sticky; top: 0; background: var(--card); z-index: 2; min-width: 150px; max-width: 260px; }
.dependency-table tbody tr > th:first-child, .dependency-table thead tr:first-child > th:first-child { position: sticky; left: 0; background: var(--card); text-align: left; min-width: 220px; max-width: 280px; z-index: 1; }
.dependency-table thead tr:first-child > th:first-child { z-index: 3; }
.dependency-table .dependency-document-band { height: 38px; white-space: nowrap; text-align: left; max-width: 1px; overflow: hidden; text-overflow: ellipsis; }
.dependency-table .dependency-chapter-headings th { top: 38px; font-weight: 500; }
.dependency-table td { text-align: right; font-variant-numeric: tabular-nums; }
.dependency-confirmed td.has-links { background: var(--accent-wash); }
.dependency-suggested td.has-links { background: var(--warn-wash); }
.dependency-table td.no-links { color: var(--muted); background: var(--bg); }
.dependency-chapter { display: block; margin-top: var(--space-1); font-weight: 400; color: var(--muted); }
.dependency-total { font-weight: 700; }
@media (max-width: 850px) { .ask-results { grid-template-columns: minmax(0, 1fr); } .ask-answer-panel { position: static; max-height: none; overflow: visible; } }
@media (max-width: 600px) { .ask-document-field, .ask-question-field { flex-basis: 100%; } }

/* Documents: file availability and reading state are separate facts. */
.documents-page .figure-tiles { margin-bottom: var(--space-3); }
.documents-page .figure-tile { padding: var(--space-3) var(--space-4); }
.awaited-documents { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-3); font-size: 13px; }
.awaited-document { padding: 1px 8px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); background: var(--card); }
.documents-page .figure-tile dd { font-size: 22px; }
.documents-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.documents-actions p { margin: 0; color: var(--muted); font-size: 12px; }
.documents-actions nav { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.documents-page .filter-bar { margin-bottom: var(--space-2); }
.documents-page .filter-field input, .documents-page .filter-field select { height: 34px; font-size: 12px; }
.documents-page .filter-field input { width: 260px; }
.documents-help { margin-bottom: var(--space-3); }
.documents-page .dx-datagrid .dx-row > td { padding: 9px 10px; font-size: 13px; line-height: 1.45; }
.documents-page .dx-datagrid .dx-datagrid-filter-row > td { padding: 0; }
.documents-page .dx-texteditor-input { min-height: 30px; padding: 6px 8px; font-size: 12px; }
.document-name { font-weight: 600; overflow-wrap: anywhere; }
.document-row-actions a { display: inline-block; margin: 0 var(--space-2) var(--space-1) 0; }
.document-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.document-details div { min-width: 0; }
.document-details dt { color: var(--muted); font-size: 12px; }
.document-details dd { margin: var(--space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .documents-page .filter-bar, .documents-page .filter-field, .documents-page .filter-field input, .documents-page .filter-field select { width: 100%; }
    .document-details { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 700px) {
    .clause-reference-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .cross-reference-contract, .cross-reference-contract .filter-field { width: 100%; }
    .cross-reference-contract select { width: 100%; min-width: 0; }
}

/* D-098 point 1: the contractor team's delay events */
.delay-events-page .figure-tiles { margin-bottom: var(--space-3); }
.delay-events-page .figure-tile { padding: var(--space-3) var(--space-4); }
.delay-events-page .figure-tile dd { font-size: 22px; }
.delay-events-page .claims-form { max-width: 70ch; }
.delay-events-table td:first-child { white-space: nowrap; }
.delay-events-table td:nth-child(2) { min-width: 16rem; }
.delay-events-table .delay-claim + .delay-claim { margin-top: 0.35rem; }
.grid-panel .back-to-back-table th { white-space: normal; }
.grid-panel .back-to-back-table th, .grid-panel .back-to-back-table td { padding: var(--space-2) var(--space-3); }
.back-to-back-table td:first-child { min-width: 11rem; }
.back-to-back-table .cl-chip { display: inline-block; }
.back-to-back-table .chain-acts { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }

/* D-098 point 2: the contractor team's subcontract register, and its member-only rows on the Contracts page */
.subcontracts-page .figure-tiles { margin-bottom: var(--space-3); }
.subcontracts-page .figure-tile { padding: var(--space-3) var(--space-4); }
.subcontracts-page .figure-tile dd { font-size: 20px; }
.subcontracts-page .claims-form { max-width: 70ch; }
.subcontracts-table td:first-child { white-space: nowrap; }
.subcontracts-table td:nth-child(2) { min-width: 14rem; }
.subcontracts-table .flow-down + .flow-down { margin-top: 0.25rem; }
.team-subcontracts { margin-top: var(--space-4); }
.team-subcontracts-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.team-subcontracts-head h2 { margin: 0; }
/* A tile's note (the shared _TileRow), wherever a page gives one: small and muted under its figure, as on the Overview. */
.figure-tile dd.figure-note { margin-top: var(--space-1); font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.figure-tile dd[data-figure="totalValue"] { font-size: 18px; }

/* D-098 point 5: importing delay events from CSV */
.delay-import-page .claims-form, .delay-import-view { max-width: 90ch; margin-bottom: var(--space-4); }
.delay-import-view h3 { margin: var(--space-4) 0 var(--space-2); font-size: 15px; }
.delay-import-kind { border: 0; padding: 0; margin: var(--space-3) 0; }
.delay-import-kind label { display: block; font-size: 0.85rem; margin: 0.2rem 0; }

/* D-102: the Risk assessments tab */
.risk-pickers { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.risk-pickers .filter-field select { max-width: 340px; }
.risk-ask { margin-bottom: var(--space-3); }
.risk-ask h3 { margin: 0 0 var(--space-2); }
.risk-ask fieldset, .risk-review fieldset { border: 0; padding: 0; margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.risk-ask legend, .risk-review legend { font-weight: 600; padding: 0; margin-bottom: var(--space-1); }
.risk-hand { margin-top: var(--space-3); }
.risk-row { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); margin-bottom: var(--space-2); }
.risk-row > summary { cursor: pointer; padding: var(--space-2) var(--space-3); }
.risk-kind { color: var(--muted, inherit); font-size: 12px; margin-right: var(--space-1); }
.risk-badge { display: inline-block; font-size: 12px; padding: 1px 8px; border: 1px solid var(--line-2); border-radius: 999px; margin-left: var(--space-1); }
.risk-badge.on { font-weight: 600; }
.risk-body { padding: 0 var(--space-3) var(--space-3); }
.risk-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-2); }
.risk-values h4, .risk-review h4 { margin: 0 0 var(--space-1); }
.risk-values dl { display: grid; grid-template-columns: 90px 1fr; gap: 2px var(--space-2); margin: 0; }
.risk-values dt { font-weight: 600; font-size: 12px; }
.risk-values dd { margin: 0; overflow-wrap: anywhere; }
.risk-removed { font-size: 12px; margin-bottom: var(--space-2); }
.risk-removed ul, .risk-citations { margin: var(--space-1) 0 var(--space-2); padding-left: 18px; }
.risk-review { margin-top: var(--space-2); }
.risk-review-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); }
.risk-review label { display: block; font-size: 12px; font-weight: 600; }
.risk-review fieldset label { display: inline-flex; gap: 4px; align-items: center; font-weight: 400; }
.risk-review textarea, .risk-review input[type=text] { width: 100%; font: inherit; margin-bottom: var(--space-2); }
.finding-risk { margin-top: var(--space-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.dependency-ask { margin-top: var(--space-3); }
.dependency-ask p { margin-top: var(--space-1); }

/* D-098 point 3: contract and milestone terms */
.term-list { display: grid; gap: 10px; margin-bottom: 14px; }
.term-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }
.term-row.term-old { opacity: 0.8; margin-top: 8px; }
.term-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.term-value { margin: 4px 0; font-weight: 600; }
.term-quote { margin: 4px 0; padding: 4px 8px; border-left: 3px solid var(--line-2); color: var(--body); font-size: 0.82rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.term-source { margin-top: 2px; }
.milestones-table td { min-width: 90px; vertical-align: top; font-size: 13px; }
.milestones-table td:first-child { min-width: 180px; }
.milestones-table .chain-acts { margin-top: 2px; }
.milestones-table .linkbtn { text-align: left; }
.milestones-table .cl-chip { display: inline-block; margin-bottom: 2px; }
.exposure-contract { margin-top: 10px; }
.whatif-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px 12px; align-items: start; margin-bottom: 10px; }
.whatif-fields .claims-field { align-content: start; }
.whatif-fields input, .whatif-fields select { width: 100%; box-sizing: border-box; height: 34px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; }
.whatif-fields #wiCurrency { text-transform: uppercase; }
.whatif-days { grid-column: 1 / -1; }
.whatif-day-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 140px)); gap: 8px; }
.whatif-result { margin-top: 12px; display: grid; gap: 8px; }
