/* ============================================================================
   PROGRAM RUN CARD (PROGRAM G, 2026-09-18) — the run on the client dashboard, the admin brand page
   and the item story's Regions fold; the sales sheet and the punch list on the DialedModal chassis.
   Mobile first (LAW 32): one column at phone width, 44px targets, no horizontal scroll; the book's
   tokens only (dialed-tokens.css / dialed-ui.css). Every class is dl-* (the vocabulary freeze).
   ============================================================================ */
.dl-run-host{display:block;min-width:0}
.dl-run-host .dl-skelband{min-height:120px}
.dl-run{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);min-width:0}
.dl-run + .dl-run{margin-top:var(--sp-3)}
.dl-run-head{display:flex;align-items:flex-start;gap:var(--sp-3);min-width:0}
.dl-run-art{flex:0 0 48px;width:48px;height:48px;border-radius:var(--r-md);overflow:hidden;background:var(--bg-hover);display:grid;place-items:center}
.dl-run-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.dl-run-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.dl-run-title b{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-lg);line-height:1.2;color:var(--text-primary);overflow-wrap:anywhere}
.dl-run-title .dl-help{font-size:var(--fs-sm)}
.dl-run-head .dl-tag{flex:0 0 auto;align-self:flex-start;white-space:nowrap}
.dl-run-when{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-secondary)}
.dl-run-when .dl-progress{width:100%}
.dl-run-when .dl-progress > i{transition:width .3s ease}
.dl-run-events{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--bg-hover);min-width:0}
.dl-run-events .dl-label{margin:0}
.dl-run-events b{font-size:var(--fs-md);color:var(--text-primary);overflow-wrap:anywhere}
.dl-run-facts{display:grid;grid-template-columns:1fr;gap:var(--sp-2);min-width:0}
.dl-run-fact{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:var(--sp-3);border:1px solid var(--border-subtle,var(--border));border-radius:var(--r-md);background:transparent;color:var(--text-primary);text-align:left;font:inherit;cursor:pointer;min-width:0;transition:border-color .15s ease,transform .15s ease}
.dl-run-fact:hover{border-color:color-mix(in oklab,var(--accent),transparent 45%);transform:translateY(-1px)}
.dl-run-fact:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-run-fact.dl-quiet{cursor:default}
.dl-run-fact.dl-quiet:hover{transform:none;border-color:var(--border-subtle,var(--border))}
.dl-run-fact .dl-label{margin:0}
.dl-run-fact b{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-lg);line-height:1.2;overflow-wrap:anywhere}
.dl-run-fact small{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.35;overflow-wrap:anywhere}
.dl-run-fact.dl-ok b{color:var(--success)}
.dl-run-fact.dl-warn b{color:var(--warning,var(--accent-ink))}
.dl-run-acts{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.dl-run-acts .dl-btn{min-height:44px}
.dl-run-foot{display:flex;justify-content:flex-end;margin-top:var(--sp-3)}
.dl-run-foot .dl-btn{min-height:44px}
.dl-run-empty{text-align:left;display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.dl-run-empty .dl-btn{min-height:44px}
.dl-run-pastfold{margin-top:var(--sp-3)}
.dl-run-past{align-items:center;gap:var(--sp-3);min-height:44px}
.dl-run-past .dl-m{flex:1 1 auto;min-width:0}
.dl-run-past .dl-m b{display:block;overflow-wrap:anywhere}
.dl-run-past .dl-m i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-run-past .dl-btn{min-height:44px}
[data-run-host="region"] .dl-run{padding:var(--sp-3)}
[data-run-host="region"] .dl-run-art{display:none}
@media (min-width:640px){
  .dl-run-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl-run-facts:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
  .dl-run-when{flex-direction:row;align-items:center;gap:var(--sp-4)}
  .dl-run-when > span:first-child{flex:0 0 auto}
  .dl-run-when .dl-progress{flex:1 1 auto;width:auto}
  .dl-run-art{flex-basis:64px;width:64px;height:64px}
}
@media (min-width:1024px){
  [data-run-host="dashboard"] .dl-run,[data-run-host="zone"] .dl-run{padding:var(--sp-5)}
}

/* ── the sales sheet and the run editor (inside the chassis) ── */
.dl-ss{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.dl-ss .dl-field{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.dl-ss .dl-input,.dl-ss .dl-select,.dl-ss .dl-textarea{width:100%;min-height:44px;font-size:16px;box-sizing:border-box}
.dl-ss .dl-affix{display:flex;align-items:center;min-width:0}
.dl-ss .dl-affix .dl-input{flex:1 1 auto;min-width:0}
.dl-ss-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
.dl-ss-flavors{display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-ss-flavor{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:var(--sp-3);min-height:44px}
.dl-ss-flavor > span{font-size:var(--fs-md);color:var(--text-primary);overflow-wrap:anywhere}
.dl-ss-who{margin:0}
.dl-run-sheetfoot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);width:100%}
.dl-run-sheetfoot .dl-btn{min-height:44px}
.dl-savebar-s{flex:1 1 auto;white-space:nowrap;font-size:var(--fs-sm);color:var(--text-secondary);align-self:center;min-width:0}
.dl-savebar-s[data-autosave="kept"]{color:var(--warning,var(--accent-ink))}
@media (min-width:640px){.dl-ss-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.dl-run-sheetfoot .dl-savebar-s{flex:1 1 100%;order:1;text-align:center}}

/* ── the punch list ── */
.dl-pl{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.dl-pl-lead{margin:0}
.dl-pl-group{display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-pl-group .dl-sectionbar{margin-bottom:var(--sp-2)}
.dl-pl-row{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--border-subtle,var(--border));min-width:0}
.dl-pl-row:last-of-type{border-bottom:0}
.dl-pl-row.is-na .dl-pl-box{border-style:dashed}
.dl-pl-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-pl-title{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:44px;padding:var(--sp-2) 0;background:none;border:0;color:var(--text-primary);text-align:left;font:inherit;cursor:pointer;width:100%;min-width:0}
.dl-pl-title b{font-size:var(--fs-md);overflow-wrap:anywhere}
.dl-pl-row.is-done .dl-pl-title b{color:var(--text-secondary);text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--text-muted),transparent 40%)}
.dl-pl-row.is-na .dl-pl-title b{color:var(--text-secondary)}
.dl-pl-row.is-overdue .dl-pl-title small{color:var(--warning,var(--accent-ink))}
.dl-pl-title:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.dl-pl-chips{gap:var(--sp-1)}
.dl-pl-chips .dl-chip{min-height:32px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;font:inherit;font-size:var(--fs-xs)}
.dl-pl-chips .dl-tag-x{margin-left:var(--sp-1);min-width:24px;min-height:24px;background:none;border:0;color:inherit;cursor:pointer;font:inherit}
.dl-pl-meta{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--glass-hi);border:1px solid var(--card-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-width:0}
.dl-pl-meta .dl-field{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.dl-pl-meta .dl-input,.dl-pl-meta .dl-textarea{width:100%;min-height:44px;font-size:16px;box-sizing:border-box}
.dl-pl-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2)}
.dl-pl-tools .dl-btn{min-height:44px}
.dl-pl-due{flex:1 1 160px;max-width:220px}
.dl-pl-add{display:flex;gap:var(--sp-2);padding-top:var(--sp-2);min-width:0}
.dl-pl-add .dl-input{flex:1 1 auto;min-width:0;min-height:44px;font-size:16px}
.dl-pl-add .dl-btn{min-height:44px;flex:0 0 auto}
.dl-pl-row.is-theirs .dl-pl-title{cursor:pointer}

/* ── K2b: the weekly sales breakdown, the demos ── */
.dl-run-weeks{margin-top:var(--sp-2)}
.dl-run-weeks > summary.dl-sectionbar h2{font-size:var(--fs-md)}
.dl-run-weeks-body{padding:var(--sp-2) 0 0}
.dl-run-weekgrid{display:flex;flex-direction:column;gap:0;min-width:0}
.dl-run-weekgrid-pl .dl-run-weekrow{grid-template-columns:1.4fr 1fr 0.8fr 0.8fr}   /* V2.1: no Demos column on a private-label run */
.dl-run-weekrow{display:grid;grid-template-columns:1.4fr 1fr 0.8fr 1.2fr 0.8fr;gap:var(--sp-2);align-items:start;padding:var(--sp-2) 0;border-top:1px solid var(--card-line);font-size:var(--fs-sm);min-width:0}
.dl-run-weekrow-head{border-top:0;color:var(--text-secondary);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.dl-run-weekrow > span{min-width:0;overflow-wrap:anywhere}
.dl-run-weekrow > span > b{display:block;font-weight:600;color:var(--text-primary)}
.dl-run-weekrow > span > small{display:block;font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.35}
.dl-run-weekrow > span.dl-ok > b{color:var(--success)}
.dl-run-weekrow > span.dl-warn > b{color:var(--warning,var(--accent-ink))}
@media (max-width:639px){.dl-run-weekrow{grid-template-columns:1.3fr 1fr 1fr;row-gap:var(--sp-1)}.dl-run-weekrow > span[data-cell]{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp-1)}.dl-run-weekrow > span[data-cell]::before{content:attr(data-cell) ' · ';font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}.dl-run-weekrow > span[data-cell] > b,.dl-run-weekrow > span[data-cell] > small{display:inline}.dl-run-weekrow > span[data-cell="by"] > small + small::before{content:'· '}.dl-run-weekrow-head > span:nth-child(4),.dl-run-weekrow-head > span:nth-child(5){display:none}}
.dl-run-demo{align-items:center;min-height:44px;gap:var(--sp-3)}
.dl-run-demo .dl-m{flex:1 1 auto;min-width:0}
.dl-run-demo .dl-m b{display:block}
.dl-run-demo .dl-m i{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-run-demo.is-past .dl-m b{color:var(--text-secondary)}
.dl-run-demo.is-off .dl-m{text-decoration:line-through;opacity:.6}
.dl-run-demo .dl-btn{min-height:44px;min-width:44px}
.dl-run-demo-add{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--card-line)}
.dl-run-demo-add .dl-field{display:flex;flex-direction:column;gap:var(--sp-1)}
.dl-run-demo-add .dl-input,.dl-run-demo-add .dl-select{width:100%;min-height:44px;font-size:16px;box-sizing:border-box}

/* the empty run inside an item's region fold: one line, the verb beside it */
.dl-run-empty--line{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);min-height:var(--h-md);padding:var(--sp-1) 0}
.dl-run-empty--line > .dl-help{flex:1 1 220px;min-width:0}
.dl-run-empty--line > .dl-help > b{color:var(--text-primary);font-weight:var(--fw-semibold);margin-right:var(--sp-1)}

/* the punch list: the standing to-do on top, the done rows folded, crossed off, checks kept */
.dl-pl-clear{margin:var(--sp-2) 0 var(--sp-3);color:var(--text-secondary)}
.dl-pl-done{margin:var(--sp-3) 0 var(--sp-2);border-top:1px dashed var(--card-line)}
.dl-pl-done > summary{list-style:none;display:flex;align-items:center;gap:var(--sp-2);min-height:44px;cursor:pointer;color:var(--text-secondary)}
.dl-pl-done > summary::-webkit-details-marker{display:none}
.dl-pl-done > summary .dl-pl-done-t{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary);white-space:nowrap}
.dl-pl-done > summary .dl-line{flex:1 1 auto;min-width:var(--sp-4)}
.dl-pl-done > summary .dl-help{white-space:nowrap}
@media (max-width:640px){.dl-pl-done > summary .dl-help{display:none}}
.dl-pl-done > summary .dl-help{font-size:var(--fs-xs)}
.dl-pl-done > summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg) translateY(-2px);transition:transform var(--t-base) var(--ease);flex:0 0 auto}
.dl-pl-done[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.dl-pl-done > .dl-pl-row{opacity:.72}
.dl-pl-group > .dl-sectionbar h2{text-transform:none;letter-spacing:0;font-size:var(--fs-md)}

/* K2i 2026-09-19: the assignee sheet lists PEOPLE ON DIALED under a Volume head and a brand head; a past program shows its item's picture */
.dl-pl-assign .dl-microhead:first-child{margin-top:0}
.dl-pl-assign .dl-menu-item{min-height:44px}
.dl-pl-assign .dl-champ{width:28px;height:28px;flex:0 0 28px;display:inline-flex;align-items:center;justify-content:center;background:var(--glass-hi);border:1px solid var(--card-line);font-size:var(--fs-xs)}
.dl-run-past .dl-rowart{flex:0 0 44px}
.dl-run-results .dl-run{box-shadow:none;border:0;padding:0}
/* K2i: Remove keeps to the far end of the tools row, away from the everyday verbs (LAW 44.4); alone on a second line on a phone, still right */
.dl-pl-tools .dl-btn-quiet-danger{margin-left:auto}
/* LAW 45: the meta box is glass (backdrop-filter); its fields paint their own caret and selection so neither goes unpainted under the filter */
.dl-pl-meta .dl-input,.dl-pl-meta .dl-textarea{caret-color:var(--accent)}
.dl-pl-meta ::selection{background:color-mix(in oklab,var(--accent),transparent 70%);color:var(--text-primary)}
.dl-pl-meta ::-moz-selection{background:color-mix(in oklab,var(--accent),transparent 70%);color:var(--text-primary)}
/* K2j: a weekly row is the way back into its entry (a tap opens the sales sheet on that week); the chevron says so */
.dl-run-weekrow-edit{cursor:pointer;border-radius:var(--r-sm);position:relative;padding-right:var(--sp-5)}
.dl-run-weekrow-edit::after{content:'';position:absolute;right:var(--sp-2);top:50%;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:translateY(-50%) rotate(-45deg)}
.dl-run-weekrow-edit:hover{background:var(--bg-hover)}
.dl-run-weekrow-edit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* .dl-pl-check / .dl-pl-box live in dialed-ui.css since K2j (three surfaces share them); this sheet only sizes the row's box */
.dl-pl-row .dl-pl-check{flex:0 0 44px}
.dl-pl-row .dl-pl-box{width:22px;height:22px}
/* K2l: the type badge on the head; a tile opens its panel under the tiles; quiet admin verbs; the past fold sits tight */
.dl-run-facts-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2)}
.dl-run-type{--tone:var(--text-secondary);color:var(--tone);background:color-mix(in oklab,var(--tone),var(--surface) 86%);border:1px solid color-mix(in oklab,var(--tone),transparent 60%);font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;padding:2px var(--sp-2)}
.dl-run-type[data-type="everyday"]{--tone:var(--success-ink,var(--success))}
.dl-run-type[data-type="rotation"]{--tone:var(--accent-ink,var(--accent))}
.dl-run-type[data-type="test"]{--tone:var(--warning-ink,var(--warning))}
.dl-run-type[data-type="roadshow"],.dl-run-type[data-type="consignment_roadshow"]{--tone:var(--teal-ink,var(--teal))}
.dl-run-type[data-type="superdemo"]{--tone:var(--accent-deep,var(--accent))}
.dl-run-type[data-type="private_label"]{--tone:var(--text-primary)}   /* V2.1: Kirkland, the house tone */
.dl-run-fact[aria-expanded="true"]{border-color:color-mix(in oklab,var(--accent),transparent 45%);background:color-mix(in oklab,var(--accent),var(--surface) 92%)}
.dl-run-fact-next > b{color:var(--accent-ink,var(--accent))}
.dl-run-panel{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--glass-hi);border:1px solid var(--card-line)}
.dl-run-panel[hidden]{display:none}
.dl-run-panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.dl-run-panel .dl-row{align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--card-line);min-height:48px}
.dl-run-panel .dl-row:first-of-type{border-top:0}
.dl-run-panel .dl-delta-when{flex:0 0 auto;min-width:64px;font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-run-panel .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.dl-run-panel .dl-run-po{cursor:pointer}
.dl-run-panel .dl-region-chev{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(-45deg)}
.dl-run-panel .dl-run-demo.is-past .dl-delta-what{color:var(--text-secondary)}
.dl-run-panel .dl-run-demo.is-off .dl-delta-what > b{text-decoration:line-through}
.dl-run-acts-quiet{margin-top:var(--sp-2)}
.dl-run-acts-quiet .dl-btn{min-height:36px}
.dl-run-pastfold:not([open]){margin-bottom:0}
.dl-run-pastfold > summary{margin-bottom:0}
.dl-run-pastfold[open] > .dl-list{margin-top:var(--sp-3)}
/* the punch-list row is a check, the words, a chevron (the editing lives on the task sheet) */
.dl-pl-row{align-items:center}
.dl-pl-row .dl-pl-title{flex:1 1 auto;min-width:0;text-align:left;background:none;border:0;padding:var(--sp-2) 0;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.dl-pl-row .dl-region-chev{flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(-45deg);margin-right:var(--sp-1)}
/* V2.2: the demo accrual as a ledger: three cells in the Demos panel, each demo day's cost on its row, the cost entry on the sheet */
.dl-run-ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin:0 0 var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--card-line)}
.dl-run-ledger-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-run-ledger-cell > b{font-family:var(--font-display);font-size:var(--fs-lg);line-height:1.1;overflow-wrap:anywhere}
.dl-run-ledger-cell > small{font-size:var(--fs-2xs);color:var(--text-secondary);line-height:1.3}
.dl-run-demo-cost{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:var(--fs-sm)}
.dl-run-demo-cost > small{font-size:var(--fs-2xs);color:var(--text-secondary)}
.dl-run-demo-costin{display:flex;gap:var(--sp-2);flex:0 0 auto;align-items:flex-end}
.dl-run-demo-costin .dl-field{gap:2px}
.dl-run-demo-costin .dl-input{width:104px;min-height:44px;font-size:16px}
.dl-run-demo-costin [data-dm-ref]{width:120px}
@media (max-width:640px){.dl-run-ledger{grid-template-columns:1fr;gap:var(--sp-2)}.dl-run-ledger-cell{flex-direction:row;align-items:baseline;justify-content:space-between;flex-wrap:wrap}.dl-run-ledger-cell > small{flex-basis:100%}.dl-run-demo{flex-wrap:wrap}.dl-run-demo-costin{flex-basis:100%;padding-left:calc(64px + var(--sp-3))}}

/* SHIP TO DEPOTS on the run (Elle 2026-09-23): one quiet line, the region's depots as tags, wrapping on the phone */
.dl-run-depots{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.dl-run-depots > .dl-label{margin:0;flex:0 0 auto}
.dl-run-depot-list{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-width:0}
.dl-run-depots .dl-depot-pos{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--text-muted);margin-left:var(--sp-1)}