/* SIPOC levels (js/levels.js): level chips, the ladder, the level boxes, the map's SIPOC strip, the
   part pages (Suppliers, Customers, Inputs, Outputs), the level grid and authority chips. The level
   and heat fills are in base.css; the dashboard grid and attention lists are shared. */

/* Level chip: 1–4 in the level's colour, beside a supplier, document or role */
.lv-chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.25em;height:1.25em;padding:0 calc(0.1875rem * var(--dz));border-radius:var(--radius-2);font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:1;vertical-align:1px;cursor:help}
.lv-word{font-size:var(--fs-xs);color:var(--muted)}

/* The ladder: letter + part, a level bar, share at level 3–4 */
.ladder{display:flex;flex-direction:column;gap:calc(0.125rem * var(--dz))}
.ld-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(120px,11rem) minmax(60px,1fr) 6.5rem;gap:var(--space-2);align-items:center;padding:var(--pad-row-y) calc(0.375rem * var(--dz));border-radius:var(--radius-xs);font-size:var(--fs-sm)}
a.ld-row,button.ld-row{cursor:pointer}
a.ld-row:hover,button.ld-row:hover{background:var(--grid)}
.ld-row:focus-visible{outline:2px solid var(--focus)}
.ld-name{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.ld-letter{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:var(--radius-xs);background:var(--series-track);color:var(--ink);font-size:var(--fs-sm);font-weight:var(--fw-heavy)}
.ld-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2;color:var(--ink);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-txt small{font-weight:var(--fw-regular);color:var(--muted);font-size:var(--fs-xs);overflow:hidden;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} /* the question in two lines; the whole of it on hover */
.ld-bar{min-width:0}
.ld-bar .stack{height:calc(var(--stack-thin) - 0.125rem)}
.ld-bar .pair .stack{height:calc(0.4375rem * var(--dz))}
.ld-val .db-delta{margin-left:calc(0.125rem * var(--dz))}
.ld-band{margin:var(--space-2) 0 calc(0.125rem * var(--dz));font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-bold)}
.ld-band:first-child{margin-top:0}

/* Level boxes: the part's four words with their examples, coloured by level */
/* Four across when there is room (27rem), otherwise two by two */
.lv-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(6.5rem,(27rem - 100%) * 999,50% - var(--space-1)),1fr));gap:var(--space-1)}
.lv-box{display:flex;flex-direction:column;gap:calc(0.0625rem * var(--dz));padding:var(--space-1) var(--space-2);border-radius:var(--radius-5);border:1px solid var(--line);background:color-mix(in srgb,var(--bx) 16%,var(--surface-2));min-width:0}
.lv-box-manual{--bx:var(--m-manual)}
.lv-box-hybrid{--bx:var(--m-hybrid)}
.lv-box-system{--bx:var(--m-system)}
.lv-box-automated{--bx:var(--m-automated)}
.lv-box-unrated{--bx:var(--m-unrated)}
.lv-box b{font-size:var(--fs-sm);line-height:1.2}
.lv-box small{font-size:var(--fs-xs);color:var(--muted);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-no{font-size:var(--fs-2xs);color:var(--muted);font-weight:var(--fw-bold)}
.lv-val{margin-top:calc(0.125rem * var(--dz));font-variant-numeric:tabular-nums;font-weight:var(--fw-bold);font-size:var(--fs-md);white-space:nowrap}
.lv-val .muted{font-weight:var(--fw-regular);font-size:var(--fs-xs)}
.lv-val .db-delta{font-style:normal;font-size:var(--fs-xs)}

/* SIPOC strip on map cards: one cell per part, coloured by its typical level */
.sipoc-strip{display:flex;gap:calc(0.0625rem * var(--dz));margin-top:calc(0.1875rem * var(--dz));height:4px}
.sipoc-strip i{flex:1;border-radius:var(--radius-0);background:var(--m-unrated)}

/* Part pages: tiles on top; the level boxes and attention list on the left, the main chart in
   the middle, sub-categories and departments on the right. Only cards scroll. */
#sipoc-body{flex:1;min-height:0}
.pk{grid-template-columns:minmax(0,1.05fr) minmax(0,2fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1.1fr) minmax(0,1fr)}
.pk-ladder{grid-column:1;grid-row:2}
.pk-attn{grid-column:1;grid-row:3}
.pk-main{grid-column:2;grid-row:2 / 4}
.pk-sub{grid-column:3;grid-row:2}
.pk-dept{grid-column:3;grid-row:3}
.pk .stack-rows{grid-template-columns:minmax(80px,150px) 1fr auto}
.pk-main .tool-panel{flex:1;min-height:0;overflow:auto}
.pk-main .tm-wrap{min-height:12rem}
.pk-list small{color:var(--muted);white-space:nowrap}
.pk-attn h4{margin:var(--space-2) 0 var(--space-1)}
.pk-attn h4:first-of-type{margin-top:0}
.pk-ladder .legend{margin-top:var(--space-2)}
.pk-ladder .stack{height:var(--stack-thin)}

/* Overview (point in time): the whole ladder between the headline and the P · P · T cards */
.ov-ladder{flex:none}
.ld-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-4)}
.ld-col{min-width:0}
.ov-ladder h3{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.ov-ladder .legend{margin:var(--space-1) 0 0}

@media (max-width:64em){
  .pk{height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .pk > .card{grid-column:auto;grid-row:auto;min-height:16rem}
  .pk-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-cols{grid-template-columns:1fr}
}

/* Who does the work × what it's done in: a 4 × 4 heat grid */
.lvg{display:grid;grid-template-columns:minmax(6rem,auto) repeat(var(--lvg-n),minmax(0,1fr));gap:calc(0.1875rem * var(--dz));font-size:var(--fs-sm)}
.lvg-col,.lvg-row{display:flex;align-items:center;gap:var(--space-1);color:var(--ink-2);font-weight:var(--fw-semibold);min-width:0}
.lvg-col{font-size:var(--fs-xs);justify-content:center;text-align:center;line-height:1.15}
.lvg-row{white-space:nowrap}
.lvg-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:2.2rem;border-radius:var(--radius-xs);background:var(--grid);font-variant-numeric:tabular-nums}
.lvg-c small{font-size:var(--fs-2xs);font-weight:var(--fw-bold);min-width:0;line-height:1;color:inherit}
.lvg-c .db-delta{color:inherit} /* the grid has no better direction (D52), so deltas take the cell's text colour */
.lvg-c.lvg-mark{box-shadow:0 0 0 2px var(--accent)}
.c-grid .sub{margin-bottom:var(--space-2)}
/* Narrow cards: numbered column headings, named in a key under the grid */
.lvg-short{grid-template-columns:minmax(0,auto) repeat(var(--lvg-n),minmax(1.75rem,1fr));gap:calc(0.125rem * var(--dz))}
.lvg-short .lvg-col{font-size:var(--fs-sm);cursor:help}
.lvg-short .lvg-row{font-size:var(--fs-xs);padding-right:var(--space-1)}
.lvg-short .lvg-c{min-height:2rem}
.lvg-key{display:flex;flex-wrap:wrap;gap:calc(0.125rem * var(--dz)) var(--space-2);margin:var(--space-2) 0 0;font-size:var(--fs-xs);color:var(--muted)}
.lvg-key b{color:var(--ink-2);font-weight:var(--fw-bold)}

/* Responsibility chips and bars: labelled, in their own colours (not the level ramp) */
.au-chip{display:inline-block;padding:0 calc(0.3125rem * var(--dz));border-radius:var(--radius-pill);font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:1.5;color:var(--on-au);background:var(--au-none);vertical-align:1px;cursor:help;white-space:nowrap}
.au-chip.au-none{color:var(--ink)}
/* The same colours as chips, bar segments and key marks */
.au-chip.au-does,.au-seg.au-does,.pair-key i.mx-sw.au-does{background:var(--au-does)}
.au-chip.au-reviews,.au-seg.au-reviews,.pair-key i.mx-sw.au-reviews{background:var(--au-reviews)}
.au-chip.au-approves,.au-seg.au-approves,.pair-key i.mx-sw.au-approves{background:var(--au-approves)}
.au-seg.au-none,.pair-key i.mx-sw.au-none{background:var(--au-none)}
.pair-key i.mx-sw.au-seg{display:inline-block}
.c-augrid .lvg{max-width:44rem}