/* ==========================================================================
   THE ADMIN HOME page sheet (PROGRAM AD, 2026-09-20). The dashboard grammar
   itself (hero band, greeting, headline, moments, the buyer's voice, bands
   that stand apart, the rail's booked tile) is ONE sheet on both faces:
   portal-dashboard-page.css, loaded here too (LAW 36). This file holds only
   what the admin home has and the client dashboard does not. All values are
   tokens; every skin moves everything.
   ========================================================================== */

/* ── AD1: the numbers as tiles on the rail, each a verb (Booked leads; Programs and Brands sit abreast) ── */
.dl-railtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.dl-railtiles > .dl-railtile{grid-column:auto}
.dl-railtiles > .dl-railtile[data-tile="booked"]{grid-column:1 / -1}
.dl-railtile{appearance:none;border:0;font:inherit;text-align:left;cursor:pointer;min-height:44px;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.dl-railtile:hover{transform:translateY(-2px)}
.dl-railtile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-dashrail .dl-railtile > .dl-help{font-size:var(--fs-xs);color:var(--text-secondary);margin-top:2px;overflow-wrap:anywhere}
.dl-dashrail .dl-railtile[data-tile="programs"] > b,.dl-dashrail .dl-railtile[data-tile="brands"] > b{color:var(--text-primary)}
@media (min-width:1120px){.dl-railtiles{margin-top:var(--sp-2)}}

/* the rail's money tiles stack under their head (the main column laid them out as a row) */
.dl-dashrail .dl-moneyrow{display:flex;flex-direction:column;gap:var(--sp-3)}
.dl-dashrail .dl-moneyrow > .dl-card{grid-column:auto}

/* ── the brand board: demo brands under a tail, out of every number ── */
.dl-boardtail{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px dashed var(--card-line)}
.dl-boardtail > .dl-microhead{display:flex;align-items:baseline;gap:var(--sp-2);margin:0 0 var(--sp-2);flex-wrap:wrap}
.dl-boardtail .dl-piperow{opacity:.8}

/* a section lit for a moment when a tile scrolls to it */
#pdRoot .dl-dashband{scroll-margin-top:var(--sp-4);transition:box-shadow var(--t-base) var(--ease)}
#pdRoot .dl-dashband.dl-lit > .dl-bandhead{color:var(--accent-ink,var(--accent))}

/* the admin's bands sit on the same rhythm as the client's: the head as the band's first line */
#pdRoot .dl-dashmain > .dl-dashband > .dl-boardbar{margin-bottom:var(--sp-3)}

/* ── AD2: Needs you as cards with faces (one per brand: the logo, the ask in one line, ONE verb, the age as a pill) ── */
.dl-askgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
@media (min-width:900px){.dl-askgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#pdRoot .dl-askface{grid-column:auto;display:flex;flex-direction:row;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-4) var(--sp-4) var(--sp-4);min-width:0}
#pdRoot .dl-askface-art{flex:0 0 56px;width:56px;height:56px;border-radius:var(--r-md);padding:6px;box-sizing:border-box;background:var(--card-bg,var(--bg-elevated))}
#pdRoot .dl-askface-art.dl-brandart-mono{display:grid;place-items:center;font-family:Satoshi,Inter,sans-serif;font-weight:700;font-size:var(--fs-lg);color:var(--on-accent);background:var(--btn-primary-bg,var(--accent))}
.dl-askface-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.dl-askface-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);min-width:0}
.dl-askface-brand{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dl-askface-brand small{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;font-size:var(--fs-xs);color:var(--text-secondary)}
.dl-askface-age{flex:0 0 auto}
.dl-askface-line{font-family:Satoshi,Inter,sans-serif;font-size:var(--fs-md);font-weight:600;line-height:1.3;color:var(--text-primary);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#pdRoot .dl-askface-verb{align-self:flex-start;min-height:44px;margin-top:var(--sp-1)}
.dl-askmore{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.dl-askmore > .dl-btn{min-height:44px}

/* ── AD3: moments and the buyer's voice on top of the page (the client's .dl-topband grid; the plate rides the eyebrow) ── */
#pdRoot .dl-topband > .dl-voice{margin-bottom:0;grid-column:auto}
#pdRoot .dl-topband > .dl-moment{grid-column:auto}
#pdRoot .dl-moment > .dl-label{display:inline-flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
#pdRoot .dl-moment:hover > b,#pdRoot .dl-moment:focus-visible > b{color:var(--accent-ink,var(--accent))}
#pdRoot .dl-moment:focus-visible,#pdRoot .dl-voice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:1024px){#pdRoot .dl-topband{grid-template-columns:repeat(2,minmax(0,1fr))}#pdRoot .dl-topband > .dl-voice:only-child,#pdRoot .dl-topband > .dl-moment:only-child{grid-column:1 / -1}}

/* ── AD4: the brand board is logos in a grid, a stage bar each, sorted by what needs Elle; a tap opens the brand page ── */
.dl-brandgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
@media (min-width:700px){.dl-brandgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1120px){.dl-brandgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1500px){.dl-brandgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
#pdRoot .dl-brandtile{grid-column:auto;appearance:none;border:0;font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-4);min-width:0;min-height:44px;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
#pdRoot .dl-brandtile:hover{transform:translateY(-2px)}
#pdRoot .dl-brandtile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#pdRoot .dl-brandtile-art{flex:0 0 auto;width:56px;height:56px;border-radius:var(--r-md);padding:6px;box-sizing:border-box;background:var(--card-bg,var(--bg-elevated))}
#pdRoot .dl-brandtile-art.dl-brandart-mono{display:grid;place-items:center;font-family:Satoshi,Inter,sans-serif;font-weight:700;font-size:var(--fs-lg);color:var(--on-accent);background:var(--btn-primary-bg,var(--accent))}
.dl-brandtile-name{font-family:Satoshi,Inter,sans-serif;font-weight:700;font-size:var(--fs-md);letter-spacing:-.01em;color:var(--text-primary);line-height:1.2;overflow-wrap:anywhere;width:100%}
.dl-brandtile-rail{display:block;width:100%}
.dl-brandtile-rail .dl-region-rail{max-width:none}
.dl-brandtile-stage{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);min-width:0;width:100%}
.dl-brandtile-stage > small{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.3}
.dl-brandtile-stage > .dl-help{font-size:var(--fs-xs)}
.dl-brandtile-flags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:auto;padding-top:var(--sp-1)}
.dl-brandtile-need{background:color-mix(in oklab,var(--accent),transparent 86%);color:var(--accent-ink,var(--accent));border-color:transparent}
.dl-boardtail > .dl-brandgrid{margin-top:var(--sp-2)}
.dl-boardtail .dl-brandtile{opacity:.8}
@media (max-width:640px){#pdRoot .dl-brandtile{padding:var(--sp-3)}#pdRoot .dl-brandtile-art{width:48px;height:48px}.dl-brandtile-name{font-size:var(--fs-sm)}}
#pipeCard > .dl-boardtail{grid-column:1 / -1}

/* ── AD5: the rail is bands of rows in one card each, every row a verb ── */
#pdRoot .dl-dashrail .dl-deltalist .dl-row{min-height:44px;align-items:center;gap:var(--sp-3);cursor:pointer}
#pdRoot .dl-dashrail .dl-deltalist .dl-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}
#pdRoot .dl-dashrail .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#pdRoot .dl-dashrail .dl-delta-what > b{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:Satoshi,Inter,sans-serif;font-weight:600;font-size:var(--fs-sm);line-height:1.3;color:var(--text-primary);overflow-wrap:anywhere;min-width:0}
#pdRoot .dl-dashrail .dl-delta-what > .dl-help{font-size:var(--fs-xs);color:var(--text-secondary)}
#pdRoot .dl-dashrail .dl-railright{flex:0 0 auto;font-size:var(--fs-xs);color:var(--text-secondary)}
#pdRoot .dl-dashrail .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)}
#pdRoot .dl-dashrail .dl-row:hover .dl-delta-what > b{color:var(--accent-ink,var(--accent))}
#pdRoot .dl-railtiles + .dl-railband{margin-top:var(--sp-3)}

/* ── AD6: call notes to review as rows in one card; a note opens in place with its action items as task rows ── */
#pdRoot .dl-noterow{border-top:1px solid var(--card-line)}
#pdRoot .dl-noterow:first-child{border-top:0}
#pdRoot .dl-noterow-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;min-height:44px;cursor:pointer;border-top:0}
#pdRoot .dl-noterow-art{flex:0 0 40px;width:40px;height:40px;padding:4px;box-sizing:border-box;background:var(--card-bg,var(--bg-elevated))}
#pdRoot .dl-noterow-art.dl-brandart-mono{display:grid;place-items:center;font-family:Satoshi,Inter,sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--on-accent);background:var(--btn-primary-bg,var(--accent))}
#pdRoot .dl-noterow-head .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#pdRoot .dl-noterow-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink)}
#pdRoot .dl-noterow-head .dl-delta-what > b{font-family:Satoshi,Inter,sans-serif;font-weight:600;font-size:var(--fs-md);line-height:1.3;color:var(--text-primary);overflow-wrap:anywhere}
#pdRoot .dl-noterow-head .dl-delta-what > .dl-help{font-size:var(--fs-sm);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pdRoot .dl-noterow-head:hover .dl-delta-what > b{color:var(--accent-ink,var(--accent))}
#pdRoot .dl-noterow-head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}
#pdRoot .dl-noterow-share{flex:0 0 auto;min-height:44px}
#pdRoot .dl-notefold{padding:0 0 var(--sp-4) 0;display:flex;flex-direction:column;gap:var(--sp-3)}
#pdRoot .dl-notefold-body{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:color-mix(in oklab,var(--accent),transparent 94%);display:flex;flex-direction:column;gap:var(--sp-2)}
#pdRoot .dl-notefold-body > p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--text-primary)}
#pdRoot .dl-notefold > .dl-microhead{display:flex;align-items:baseline;gap:var(--sp-2);margin:0}
#pdRoot .dl-notefold-tasks{display:flex;flex-direction:column}
#pdRoot .dl-noterow-task{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-1) 0;cursor:pointer;border-top:1px solid color-mix(in oklab,var(--card-line),transparent 40%)}
#pdRoot .dl-noterow-task:first-child{border-top:0}
#pdRoot .dl-noterow-task .dl-pl-check{flex:0 0 36px;width:36px;height:36px}
#pdRoot .dl-noterow-task .dl-pl-box.is-on{background:var(--success);border-color:var(--success)}
#pdRoot .dl-noterow-task .dl-pl-box.is-on::after{content:"";width:6px;height:11px;border-right:2px solid var(--on-accent,#fff);border-bottom:2px solid var(--on-accent,#fff);transform:rotate(45deg) translate(-1px,-1px)}
#pdRoot .dl-noterow-task .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#pdRoot .dl-noterow-task .dl-delta-what > b{font-size:var(--fs-sm);font-weight:600;color:var(--text-primary);overflow-wrap:anywhere}
#pdRoot .dl-noterow-task.dl-done .dl-delta-what > b{text-decoration:line-through;color:var(--text-secondary)}
#pdRoot .dl-noterow-task .dl-delta-what > .dl-help{font-size:var(--fs-xs);color:var(--text-secondary)}
#pdRoot .dl-noterow-task:hover .dl-delta-what > b{color:var(--accent-ink,var(--accent))}
#pdRoot .dl-noterow-task:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}
#pdRoot .dl-notefold-acts{display:flex;gap:var(--sp-2)}
#pdRoot .dl-notefold-acts .dl-btn{min-height:44px}
#pdRoot .dl-noterow-more{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-3) 0;cursor:pointer;border-top:1px solid var(--card-line)}
#pdRoot .dl-noterow-more .dl-delta-what{flex:1 1 auto;min-width:0}
#pdRoot .dl-noterow-more .dl-delta-what > b{font-family:Satoshi,Inter,sans-serif;font-weight:600;font-size:var(--fs-sm)}
#pdRoot .dl-noterow-more:hover .dl-delta-what > b{color:var(--accent-ink,var(--accent))}
#pdRoot .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)}
@media (max-width:640px){#pdRoot .dl-noterow-head{flex-wrap:wrap}#pdRoot .dl-noterow-share{flex:1 1 100%;margin-left:52px}#pdRoot .dl-noterow-head .dl-delta-what{flex:1 1 calc(100% - 52px)}}

/* ── AD7: follow-ups, the day's list (rows: face · who and where · why now · one press · done · snooze) ── */
.dl-fu-score{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3)}
.dl-fu-bar{flex:1 1 auto;height:6px;border-radius:999px;background:color-mix(in oklab,var(--text-muted),transparent 75%);overflow:hidden}
.dl-fu-bar > i{display:block;height:100%;border-radius:999px;background:var(--success);transition:width var(--t-slow) var(--ease)}
.dl-fu-score > .dl-help{flex:0 0 auto;font-size:var(--fs-xs);color:var(--text-secondary);white-space:nowrap}
#pdRoot .dl-fu-list .dl-row{align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;min-height:56px}
#pdRoot .dl-fu-art{flex:0 0 40px;width:40px;height:40px;padding:4px;box-sizing:border-box;background:var(--card-bg,var(--bg-elevated))}
#pdRoot .dl-fu-art.dl-brandart-mono{display:grid;place-items:center;font-family:Satoshi,Inter,sans-serif;font-weight:700;font-size:var(--fs-sm);color:var(--on-accent);background:var(--btn-primary-bg,var(--accent))}
#pdRoot .dl-fu .dl-delta-what{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#pdRoot .dl-fu-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--teal-ink)}
#pdRoot .dl-fu-age{font-weight:var(--fw-bold);letter-spacing:0;text-transform:none}
#pdRoot .dl-fu .dl-delta-what > b{font-family:Satoshi,Inter,sans-serif;font-weight:600;font-size:var(--fs-md);line-height:1.3;color:var(--text-primary);overflow-wrap:anywhere}
#pdRoot .dl-fu .dl-delta-what > .dl-help{font-size:var(--fs-sm);color:var(--text-secondary)}
#pdRoot .dl-fu-acts{display:flex;align-items:center;gap:var(--sp-1);flex:0 0 auto}
#pdRoot .dl-fu-press{min-height:44px;white-space:nowrap}
#pdRoot .dl-fu-done,#pdRoot .dl-fu-snooze{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;border-radius:var(--r-md);color:var(--text-secondary);cursor:pointer}
#pdRoot .dl-fu-done:hover{color:var(--success-ink,var(--success));background:var(--success-bg,var(--bg-hover))}
#pdRoot .dl-fu-snooze:hover{color:var(--accent-ink,var(--accent));background:var(--bg-hover)}
#pdRoot .dl-fu-done:focus-visible,#pdRoot .dl-fu-snooze:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#pdRoot .dl-fu-more,#pdRoot .dl-fu-loose,#pdRoot .dl-fu-clear{min-height:44px;align-items:center;gap:var(--sp-3);cursor:pointer}
#pdRoot .dl-fu-clear{cursor:default}
#pdRoot .dl-fu-clear .dl-delta-what > b{font-family:Satoshi,Inter,sans-serif;font-weight:700;font-size:var(--fs-lg);color:var(--success-ink,var(--success))}
#pdRoot .dl-fu-more .dl-delta-what > b,#pdRoot .dl-fu-loose .dl-delta-what > b{font-family:Satoshi,Inter,sans-serif;font-weight:600;font-size:var(--fs-sm)}
#pdRoot .dl-fu-more:hover .dl-delta-what > b,#pdRoot .dl-fu-loose:hover .dl-delta-what > b{color:var(--accent-ink,var(--accent))}
@media (max-width:640px){#pdRoot .dl-fu-list .dl-row.dl-fu{flex-wrap:wrap}#pdRoot .dl-fu .dl-delta-what{flex:1 1 calc(100% - 52px)}#pdRoot .dl-fu-acts{flex:1 1 100%;margin-left:52px}#pdRoot .dl-fu-press{flex:1 1 auto}}

/* ── AD7: samples in action, a contained strip: sideways on a desk, down on a phone ── */
.dl-kitstrip{display:flex;gap:var(--sp-3);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:var(--sp-1) 0 var(--sp-3);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
#pdRoot .dl-kitstrip > .dl-kittile{flex:0 0 340px;max-width:340px;scroll-snap-align:start;grid-column:auto;flex-direction:row;align-items:center}
@media (max-width:640px){.dl-kitstrip{flex-direction:column;overflow-x:hidden;overflow-y:auto;max-height:420px;scroll-snap-type:y proximity;padding-right:var(--sp-1)}#pdRoot .dl-kitstrip > .dl-kittile{flex:0 0 auto;max-width:none;width:100%}}