/* ---- V1.64 Management of change (moc-): Client\Apps\Moc (the list, the dashboard, a change). Design system tokens only (--os-*),
   full page width; a new app file: every design guard at zero (DesignGuardTests.ZeroTolerance). ---- */

.moc-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.moc-page > * { min-width: 0; max-width: 100%; }
.moc-page .os-pagehead > * { min-width: 0; }
.moc-kpis, .moc-notice { margin: 0; }
.moc-grid { align-items: start; }
.moc-filters .os-select { flex: 0 1 220px; width: auto; min-width: 160px; }
.moc-wide { display: grid; margin-top: var(--os-space-3); }
.moc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--os-space-2); margin-top: var(--os-space-3); }
.moc-actions--start { justify-content: flex-start; margin-top: 0; }
.moc-inline { display: flex; flex-wrap: wrap; gap: var(--os-space-2); align-items: center; margin-top: var(--os-space-3); }
.moc-inline .os-select { flex: 0 1 220px; width: auto; }
.moc-inline .os-input { flex: 1 1 260px; width: auto; }
.moc-text { white-space: pre-line; margin: 0 0 var(--os-space-3); color: var(--os-text); }
.moc-ref { overflow-wrap: anywhere; }
.moc-missing { margin: 0; padding-left: var(--os-space-4); }

/* Lists: my reviews and tasks, the links, the history */
.moc-list, .moc-history, .moc-counts { list-style: none; margin: 0; padding: 0; }
.moc-list li, .moc-history li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-1) var(--os-space-3);
  padding: var(--os-space-2) var(--os-space-4); border-bottom: 1px solid var(--os-border); }
.moc-list li:last-child, .moc-history li:last-child { border-bottom: 0; }
.moc-list a { color: var(--os-accent-text); text-decoration: none; }
.moc-list a:hover { text-decoration: underline; }

/* The dashboard's counts: the word, a meter, the number */
.moc-counts li { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(80px, 2fr) auto; align-items: center; gap: var(--os-space-3);
  padding: var(--os-space-1) 0; }
.moc-counts__n { text-align: right; min-width: 2ch; }

/* The facts of a change */
.moc-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--os-space-1) var(--os-space-4); margin: 0 0 var(--os-space-4); }
.moc-facts dt { color: var(--os-text-2); font: var(--os-type-small); }
.moc-facts dd { margin: 0; }

/* Tables: the risk lines, the reviews, the tasks, the pre-startup review */
.moc-table td { white-space: normal; vertical-align: top; }
.moc-table .moc-n { text-align: right; }
.moc-table .os-select { min-width: 140px; }
.moc-old td { color: var(--os-text-3); }

/* ---- V1.69 the premium pass (mockup 25, approved by the owner 2026-11-10): the overview, its charts, the phone's own work, the
   Temporary and Settings tabs, the change page's PI tag and comments. Tokens only; every design guard at zero. ---- */

/* The rows of the overview end together: each cell stretches to its row, its panel fills it (no gap beside a tall panel) */
.moc-page .os-grid.moc-row { align-items: stretch; }
.moc-cell { --span: 12; display: flex; flex-direction: column; min-width: 0; }
.moc-cell > * { flex: 1 1 auto; min-width: 0; }
.moc-cell > * > .os-panel, .moc-cell > .os-panel { height: 100%; }
.moc-cell--8 { --span: 8; }
.moc-cell--6 { --span: 6; }
.moc-cell--4 { --span: 4; }

/* The header's area picker */
.moc-areapick { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-text-2); }
.moc-areapick .os-select { width: auto; min-width: 150px; }

/* The open changes' stages in the first tile */
.moc-stack { display: flex; gap: 2px; height: 8px; border-radius: var(--os-radius-pill); overflow: hidden; margin-bottom: var(--os-space-1); }
.moc-stack i { display: block; min-width: 4px; }
.moc-stack__s1 { background: var(--os-chart-1); } .moc-stack__s2 { background: var(--os-chart-2); } .moc-stack__s3 { background: var(--os-chart-3); }
.moc-stack__s4 { background: var(--os-chart-4); } .moc-stack__s5 { background: var(--os-chart-5); } .moc-stack__s6 { background: var(--os-chart-6); }
.moc-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Needs attention now */
.moc-alist { list-style: none; margin: 0; padding: 0; }
.moc-alist__i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--os-space-3); align-items: start;
  padding: var(--os-space-3) var(--os-space-4); border-bottom: var(--os-border-w) solid var(--os-border-subtle); }
.moc-alist__i:last-child { border-bottom: 0; }
.moc-alist__icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--os-radius-sm); background: var(--os-info-soft); color: var(--os-info-text); }
.moc-alist__i--bad .moc-alist__icon { background: var(--os-bad-soft); color: var(--os-bad-text); }
.moc-alist__i--warn .moc-alist__icon { background: var(--os-warn-soft); color: var(--os-warn-text); }
.moc-alist__t { display: flex; flex-direction: column; gap: var(--os-space-1); min-width: 0; overflow-wrap: anywhere; }
.moc-alist__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }

/* The brief: the AI panel, then its suggestion */
.moc-brief { display: flex; flex-direction: column; gap: var(--os-space-3); min-width: 0; }

/* Two-line cells: the main text and its small line */
.moc-two { min-width: 0; }
.moc-two__main { display: block; color: var(--os-text); overflow-wrap: anywhere; }
.moc-two__sub { display: block; color: var(--os-text-3); font: var(--os-type-caption); }

/* Waiting for me */
.moc-kind { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--os-radius-sm); background: var(--os-accent-soft); color: var(--os-accent-text); }
.moc-kind.is-task { background: var(--os-surface-hover); color: var(--os-text-2); }
.moc-wtable__icon { width: 44px; }
.moc-wtable__act { text-align: right; white-space: nowrap; }

/* The changes table: the risk dot, the six steps, the words in a status colour */
.moc-risk { display: inline-flex; align-items: center; gap: var(--os-space-1); white-space: nowrap; }
.moc-risk i { width: 8px; height: 8px; border-radius: var(--os-radius-pill); background: var(--os-text-3); }
.moc-risk.is-low i { background: var(--os-good); }
.moc-risk.is-medium i { background: var(--os-warn); }
.moc-risk.is-high i { background: var(--os-bad); }
.moc-steps { display: flex; flex-direction: column; gap: var(--os-space-1); min-width: 170px; }
.moc-steps__bar { display: flex; gap: 2px; }
.moc-steps__bar i { flex: 1 1 0; height: 6px; border-radius: var(--os-radius-pill); background: var(--os-border-subtle); }
.moc-steps__bar i.is-done { background: var(--os-chart-1); }
.moc-steps__bar i.is-now { background: var(--os-chart-3); }
.moc-steps__bar i.is-now.is-warn { background: var(--os-warn); }
.moc-steps__bar i.is-now.is-bad { background: var(--os-bad); }
.moc-otable td { vertical-align: top; }
.moc-otable tr.is-selected td { background: var(--os-accent-soft); }
.moc-t-bad { color: var(--os-bad-text); font-weight: 500; }
.moc-t-warn { color: var(--os-warn-text); font-weight: 500; }

/* The phone: its own work first, the overview one tap away */
.moc-phone-only { display: none; }
@media (max-width: 639.98px) {
    .moc-phone-only { display: block; }
    .moc-phone-only.moc-hidden, .moc-phone-hide { display: none; }
}

/* The overview's charts (MocPipelineChart, MocFlowChart, MocStageChart, MocHeatMap, MocTemporaryChart) */
/* ---- V1.69 the premium pass (mockup 25): the overview's charts (MocPipelineChart, MocFlowChart, MocStageChart, MocHeatMap,
   MocTemporaryChart). Tokens only; the SVGs use the design system's chart classes (.os-chart: grid, axis, lbl, target, now, s1..s6). ---- */

/* The legend keys of the pipeline: the risk colours, the square of a temporary change, the ring of a change over its target */
.moc-legend .moc-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--os-space-1); vertical-align: -1px; }
.moc-key--low { background: var(--os-good); }
.moc-key--medium { background: var(--os-warn); }
.moc-key--high { background: var(--os-bad); }
.moc-key--square { border-radius: 2px; background: var(--os-text-3); }
.moc-key--ring { background: transparent; border: 1.5px solid var(--os-text); }

/* Text in the charts */
.os-chart .moc-big { font: var(--os-type-kpi-sm); font-family: var(--os-font-display); letter-spacing: -0.02em; fill: var(--os-text); }
.os-chart .moc-warntext, .moc-warntext { fill: var(--os-warn-text); color: var(--os-warn-text); }
.os-chart .moc-badtext { fill: var(--os-bad-text); }
.os-chart .moc-halo { paint-order: stroke; stroke: var(--os-surface); stroke-width: 4px; stroke-linejoin: round; }
.os-chart .moc-arrow { stroke: var(--os-text-3); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* The pipeline's changes */
.os-chart .moc-closedbg { fill: var(--os-good-soft); opacity: .6; }
.os-chart .moc-dot.is-low { fill: var(--os-good); }
.os-chart .moc-dot.is-medium { fill: var(--os-warn); }
.os-chart .moc-dot.is-high { fill: var(--os-bad); }
.os-chart .moc-dot.is-none { fill: var(--os-text-3); }
.os-chart .moc-ring { fill: none; stroke: var(--os-text); stroke-width: 1.5; }
.os-chart .moc-dotg { cursor: pointer; }
.os-chart .moc-dotg:hover .moc-dot, .os-chart .moc-dotg:focus .moc-dot { stroke: var(--os-text); }
.moc-figures { margin-top: var(--os-space-1); row-gap: var(--os-space-2); }

/* Opened and closed: the month in progress lighter; the AI line under the figures */
.os-chart .moc-partial { opacity: .6; }
.moc-flowfoot { display: flex; flex-direction: column; gap: var(--os-space-3); width: 100%; }
.moc-ainote { display: flex; gap: var(--os-space-2); align-items: flex-start; padding: var(--os-space-2) var(--os-space-3); border-radius: var(--os-radius-md);
    background: var(--os-ai-soft); border-left: var(--os-border-w-strong) solid var(--os-ai); }
.moc-ainote p { margin: 0; color: var(--os-text); overflow-wrap: anywhere; }
.moc-ainote .os-ai__mark { flex: none; }
.moc-ainote .os-ai__mark .mud-icon-root { width: 12px; height: 12px; }

/* Time in each stage */
.os-chart .moc-fill-1 { fill: var(--os-chart-1); }
.os-chart .moc-fill-warn { fill: var(--os-warn); }
.os-chart .moc-tick { stroke: var(--os-chart-target); stroke-width: 2; }
.os-chart .moc-prev { fill: var(--os-surface); stroke: var(--os-text-2); stroke-width: 1.5; }

/* The heat map: a table, the cells shaded from the first chart colour */
.moc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.moc-heatgrid { width: 100%; border-collapse: separate; border-spacing: 3px; font: var(--os-type-small); font-variant-numeric: tabular-nums; }
.moc-heatgrid th { font: var(--os-type-caption); color: var(--os-text-2); text-align: center; padding: var(--os-space-1) var(--os-space-2); white-space: nowrap; }
.moc-heatgrid th.moc-heatgrid__cat { text-align: right; padding-right: var(--os-space-3); }
.moc-heatgrid td { text-align: center; padding: var(--os-space-2) var(--os-space-1); min-width: 56px; border-radius: var(--os-radius-xs); }
.moc-heatgrid__cell { color: var(--os-text); font-weight: 600; }
.moc-heatgrid__total { font-weight: 600; color: var(--os-text); }
.moc-heat--0 { background: var(--os-surface-sunken); }
.moc-heat--1 { background: color-mix(in srgb, var(--os-chart-1) 22%, var(--os-surface)); }
.moc-heat--2 { background: color-mix(in srgb, var(--os-chart-1) 42%, var(--os-surface)); }
.moc-heat--3 { background: color-mix(in srgb, var(--os-chart-1) 66%, var(--os-surface)); color: var(--os-surface); }
.moc-heat--4 { background: var(--os-chart-1); color: var(--os-surface); }
.moc-heat .os-table-wrap { padding: 0 var(--os-space-3) var(--os-space-3); }

/* The temporary changes: the part done solid, the part to come lighter, the extensions as ticks */
.os-chart .moc-gbar.is-ok { fill: var(--os-chart-1); }
.os-chart .moc-gbar.is-warn { fill: var(--os-warn); }
.os-chart .moc-gbar.is-bad { fill: var(--os-bad); }
.os-chart .moc-grest { stroke-width: 1; }
.os-chart .moc-grest.is-ok { fill: color-mix(in srgb, var(--os-chart-1) 22%, transparent); stroke: var(--os-chart-1); }
.os-chart .moc-grest.is-warn { fill: color-mix(in srgb, var(--os-warn) 22%, transparent); stroke: var(--os-warn); }
.os-chart .moc-grest.is-bad { fill: color-mix(in srgb, var(--os-bad) 22%, transparent); stroke: var(--os-bad); }
.os-chart .moc-gtick { stroke: var(--os-text); stroke-width: 2; }

/* The phone (MocPhone), the Temporary and Settings tabs, the change page's stages, PI tag and comments */
/* ---- V1.69 Change management, the premium pass (mockup 25): the phone (MocPhone), the Temporary and Settings tabs, the change page's
   stepper, plant status and comments. Design system tokens only (--os-*); merged into moc.css. ---- */

/* The phone: the person's own work first, big touch targets, the decision buttons stuck to the bottom */
.moc-phone { display: grid; gap: var(--os-gutter); min-width: 0; }
.moc-phone__switch .os-seg { width: 100%; }
.moc-phone__switch .os-seg > button { flex: 1 1 0; }
.moc-phcard { display: grid; gap: var(--os-space-3); padding: var(--os-space-4); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-lg); background: var(--os-surface); min-width: 0; }
.moc-phcard__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.moc-phcard__num { color: var(--os-text-2); }
.moc-phcard__title { margin: 0; font: var(--os-type-h2); color: var(--os-text); overflow-wrap: anywhere; }
.moc-phcard__by { overflow-wrap: anywhere; }
.moc-phcard__sub { margin: 0; font: var(--os-type-body-strong); color: var(--os-text-2); }
.moc-phcard__role { display: flex; align-items: center; gap: var(--os-space-2); padding: var(--os-space-3); border-radius: var(--os-radius-md); background: var(--os-accent-soft); color: var(--os-text); }
.moc-phcard .moc-risk { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-text); }
.moc-phcard .moc-risk i { width: 8px; height: 8px; border-radius: var(--os-radius-pill); background: var(--os-text-3); }
.moc-phcard .moc-risk.is-low i { background: var(--os-good); }
.moc-phcard .moc-risk.is-medium i { background: var(--os-warn); }
.moc-phcard .moc-risk.is-high i { background: var(--os-bad); }
.moc-dot { flex: none; width: 10px; height: 10px; border-radius: var(--os-radius-pill); background: var(--os-text-3); }
.moc-dot.is-low { background: var(--os-good); }
.moc-dot.is-medium { background: var(--os-warn); }
.moc-dot.is-high { background: var(--os-bad); }
.moc-phrisks { display: grid; gap: var(--os-space-2); margin: 0; padding: 0; list-style: none; }
.moc-phrisks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--os-space-2); }
.moc-phrisks li .os-caption { text-align: right; }
.moc-phimpact { padding: var(--os-space-3); border-left: var(--os-border-w-strong) solid var(--os-border-strong); border-radius: var(--os-radius-sm); background: var(--os-surface-sunken); }
.moc-phimpact.is-ai { border-left-color: var(--os-ai); }
.moc-phimpact p { margin: 0; overflow-wrap: anywhere; }
.moc-phnote textarea { width: 100%; }
.moc-phfoot { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: var(--os-space-2); padding: var(--os-space-3) 0; background: var(--os-surface-sunken); }
.moc-phfoot .os-btn { justify-content: center; min-height: 48px; }
.moc-phlist { display: grid; margin: 0; padding: 0; list-style: none; }
.moc-phlist li { border-bottom: var(--os-border-w) solid var(--os-border-subtle); }
.moc-phlist li:last-child { border-bottom: 0; }
.moc-phlist a, .moc-phlist__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--os-space-3); min-height: 56px; padding: var(--os-space-2) 0; color: inherit; text-decoration: none; }
.moc-phlist__t { display: grid; gap: var(--os-space-1); min-width: 0; overflow-wrap: anywhere; }
.moc-phlist__when { color: var(--os-text-2); white-space: nowrap; }
.moc-phlist__when.is-bad { color: var(--os-bad-text); }
.moc-phlist__row .os-btn { min-height: 44px; }
.moc-phkind { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--os-radius-md); background: var(--os-accent-soft); color: var(--os-text); }
.moc-phkind.is-task { background: var(--os-surface-sunken); color: var(--os-text-2); }

/* The Temporary tab */
.moc-temptable .two .main { display: block; color: var(--os-text); }
.moc-temptable .two .sub { display: block; color: var(--os-text-3); }
.moc-click { cursor: pointer; }
.moc-click:hover { background: var(--os-surface-hover); }
.moc-bad { color: var(--os-bad-text); font-weight: 500; }
.moc-warn { color: var(--os-warn-text); font-weight: 500; }
.moc-next { overflow-wrap: anywhere; }

/* The Settings tab: the six targets of a site */
.moc-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--os-gutter); }
.moc-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--os-space-3); }
.moc-targets__in { display: flex; align-items: center; gap: var(--os-space-2); }
.moc-targets__in .os-input { width: 6rem; }
.moc-settings__note { margin: var(--os-space-3) 0 0; }

/* The change page: its six stages, the PI tag's fields, the comments */
.moc-stepper { display: flex; flex-wrap: wrap; gap: var(--os-space-1); margin: 0; padding: 0; list-style: none; counter-reset: moc-step; }
.moc-stepper__s { flex: 1 1 120px; padding: var(--os-space-2) var(--os-space-3); border-top: var(--os-border-w-strong) solid var(--os-border); color: var(--os-text-3); font: var(--os-type-caption); }
.moc-stepper__s.is-done { border-top-color: var(--os-good); color: var(--os-text-2); }
.moc-stepper__s.is-current { border-top-color: var(--os-accent-brand); color: var(--os-text); font: var(--os-type-body-strong); }
.moc-stepper__s.is-off { border-top-color: var(--os-border-subtle); }
.moc-num { width: 8rem; }
.moc-unit { width: 6rem; }
.moc-comments { display: grid; gap: var(--os-space-3); margin: 0; padding: 0; list-style: none; }
.moc-comments p { margin: var(--os-space-1) 0 0; }

/* The bars of the overview's charts: their own class (the old global .bar of app.css would size them) */
.os-chart .moc-bar { stroke: var(--os-surface); stroke-width: 2px; paint-order: stroke; }
/* The tables of the overview fit their panel: the long texts wrap, the short ones stay on one line */
.moc-otable td, .moc-wtable td, .moc-heatgrid th { white-space: normal; }
.moc-otable td.num, .moc-wtable__act, .moc-wtable td:nth-child(4), .moc-otable .moc-risk { white-space: nowrap; }
.moc-otable .moc-two__main { min-width: 180px; }
.moc-otable .moc-next { min-width: 150px; }
.moc-heatgrid th { vertical-align: bottom; min-width: 64px; }
/* The footers of the overview's panels wrap on a narrow panel; the header's period, area and export stay on the desktop */
.moc-page .os-panel__foot { flex-wrap: wrap; row-gap: var(--os-space-1); }
@media (max-width: 639.98px) { .moc-desk-only { display: none !important; } }
.moc-link { color: var(--os-text); text-decoration: none; }
.moc-link:hover, .moc-link:focus-visible { color: var(--os-accent-text); text-decoration: underline; }
.moc-attention .os-panel__foot, .moc-waiting .os-panel__foot, .moc-opentable .os-panel__foot { padding: var(--os-space-3) var(--os-space-4); }
/* The phone's switch and action bar fit 390 px in French: the labels wrap inside their buttons */
.moc-phone__switch .os-seg > button { min-width: 0; white-space: normal; line-height: 1.2; text-align: center; }
.moc-phfoot .os-btn { min-width: 0; white-space: normal; line-height: 1.2; text-align: center; }
.moc-phone__switch .os-seg { height: auto; min-height: 44px; align-items: stretch; }
.moc-phone__switch .os-seg > button { height: auto; padding: var(--os-space-1) 6px; }