/* Duggie web style kit. Load AFTER existing page layout CSS. Tokens are canonical
   in brand-tokens.css. The adapters below preserve existing behavior and layout
   while putting public, client, operator, admin and workbench screens on one brand.
   New screens: use dg-* primitives rather than adding another visual vocabulary. */
@import url('./brand-tokens.css');
@import url('./brand-fonts.css');

:where(.am-body,.dg-brand){background:var(--dg-paper);color:var(--dg-ink);font-family:var(--dg-font-body);line-height:1.55;-webkit-font-smoothing:antialiased}
:where(.am-body,.dg-brand) *{box-sizing:border-box}
:where(.am-body,.dg-brand) ::selection{background:var(--dg-yellow);color:var(--dg-ink)}
:where(.am-body,.dg-brand) :focus-visible{outline:3px solid var(--dg-pink);outline-offset:3px}
:where(.am-body,.dg-brand) a{text-underline-offset:3px}
:where(.am-body,.dg-brand) :is(h1,h2,h3,h4){overflow-wrap:anywhere}
.am-body h1,.am-body .op h1,.dg-brand h1,.dg-display{font-family:var(--dg-font-display);font-weight:400;font-style:normal;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;text-shadow:3px 3px 0 var(--dg-pink)}
.am-body h2,.am-body .op h2,.am-body .am-main h2,.dg-brand h2{font-family:var(--dg-font-body);font-weight:700;letter-spacing:-.02em;line-height:1.25;text-shadow:none}
.am-body :is(h1,h2,h3) em,.dg-brand :is(h1,h2,h3) em{font-style:normal}
.am-body .am-header{background:var(--dg-paper);border-bottom:var(--dg-border);box-shadow:none}
.am-body .am-header-inner{min-height:84px;gap:20px}
.onboarding-logo{display:block;width:164px;height:38px;object-fit:contain}
.am-body .am-brand{flex-shrink:0}
.am-body .am-brand-mark{background:var(--dg-yellow);border:var(--dg-border-thin);box-shadow:var(--dg-shadow-sm);border-radius:6px}
.am-body .am-nav-link,.am-body .am-more>summary{border:2px solid transparent;border-radius:var(--dg-radius-pill);font-weight:700;color:var(--dg-ink);min-height:42px}
.am-body .am-nav-link:hover,.am-body .am-more>summary:hover{background:var(--dg-well);color:var(--dg-ink)}
.am-body .am-nav-link[aria-current],.am-body .am-more.is-current>summary{background:var(--dg-yellow);border-color:var(--dg-ink);color:var(--dg-ink);box-shadow:var(--dg-shadow-sm)}
.am-body .am-menu{border:var(--dg-border-thin);box-shadow:var(--dg-shadow-hard);border-radius:var(--dg-radius-card)}
.am-body .am-footer{border-top:var(--dg-border);background:var(--dg-ink);color:var(--dg-white)}
.am-body .am-footer :is(a,p,.am-footer-brand,.am-footer-legal){color:var(--dg-white)}
.am-body .am-footer .am-footer-brand i{background:var(--dg-yellow)}

/* Existing family components are aliases of these primitives. Small data rows
   retain hairlines; cards, actions and navigation get the signature ink outline. */
.dg-card,.am-body :is(.card,.panel,.op-card,.focus-card,.am-focus-card,.request-card,.onboarding-status,.welcome-card){background:var(--dg-white);border:var(--dg-border);border-radius:var(--dg-radius-card);box-shadow:var(--dg-shadow-hard)}
.dg-card{padding:24px}
.am-body .op :is(.op-card,.card){border:var(--dg-border);box-shadow:var(--dg-shadow-hard)}
.am-body :is(.panel-quiet,.card-quiet){background:var(--dg-paper);box-shadow:none;border-style:dashed}
.dg-button,.am-body :is(button,.button,.btn,.am-button,.op-btn),.dg-brand :is(button,.button,.btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;font:700 15px/1.3 var(--dg-font-body);text-decoration:none;border:var(--dg-border);border-radius:var(--dg-radius-pill);background:var(--dg-yellow);color:var(--dg-ink);box-shadow:var(--dg-shadow-sm);cursor:pointer;transition:transform 120ms var(--dg-ease),box-shadow 120ms var(--dg-ease)}
.dg-button:hover,.am-body :is(button,.button,.btn,.am-button,.op-btn):hover,.dg-brand :is(button,.button,.btn):hover{background:var(--dg-yellow);border-color:var(--dg-ink);color:var(--dg-ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--dg-ink);text-decoration:none}
.dg-button:active,.am-body :is(button,.button,.btn,.am-button,.op-btn):active,.dg-brand :is(button,.button,.btn):active{transform:translate(3px,3px);box-shadow:none}
.dg-button.dg-button--secondary,.am-body :is(.button.quiet,.button.secondary,.button.light,.btn:not(.primary),.op-btn.quiet),.dg-brand .button.secondary{background:var(--dg-white);color:var(--dg-ink)}
.dg-button.dg-button--teal{background:var(--dg-teal)}
.dg-button.dg-button--quiet{background:transparent;border-color:transparent;box-shadow:none;text-decoration:underline}
.dg-button.dg-button--quiet:hover{background:transparent;box-shadow:none;transform:none}
.dg-button:disabled,.dg-button[aria-disabled=true],.am-body :is(button,.button,.btn)[disabled],.am-body :is(button,.button,.btn)[aria-disabled=true],.dg-brand button:disabled{background:var(--dg-well);color:var(--dg-muted);opacity:.65;cursor:not-allowed;box-shadow:none;transform:none}
.am-body :is(.reveal,.password-field .reveal,.icon-button,.close-button){background:transparent;box-shadow:none;border-color:transparent;min-width:44px;padding:8px}
.am-body :is(.reveal,.password-field .reveal,.icon-button,.close-button):hover{box-shadow:none;transform:none;background:var(--dg-well)}
.am-body :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select),.dg-brand :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),textarea,select),.dg-input{border:var(--dg-border-thin);border-radius:var(--dg-radius-input);background:var(--dg-white);color:var(--dg-ink);font:inherit;min-height:44px;padding:10px 13px;max-width:100%;min-width:0}
.am-body :is(input,textarea,select):focus-visible,.dg-brand :is(input,textarea,select):focus-visible,.dg-input:focus-visible{outline:3px solid var(--dg-pink);outline-offset:3px;border-color:var(--dg-ink)}
.am-body :is(input[type=checkbox],input[type=radio]),.dg-brand :is(input[type=checkbox],input[type=radio]){accent-color:var(--dg-teal-deep);width:18px;height:18px}
.am-body :is(input,textarea,select)[aria-invalid=true],.dg-brand :is(input,textarea,select)[aria-invalid=true],.dg-input[aria-invalid=true]{border-color:var(--dg-pink-deep)}
.dg-label{display:block;font-weight:700;margin-bottom:6px}
.dg-field-error,.dg-brand .field-error{color:var(--dg-pink-deep);font-size:14px;margin:7px 0 12px}
.dg-hint{font-size:13px;color:var(--dg-muted)}
.dg-badge,.am-body :is(.tag,.am-badge,.op-badge){display:inline-flex;align-items:center;gap:5px;border:var(--dg-border-thin);border-radius:var(--dg-radius-pill);background:var(--dg-paper);color:var(--dg-ink);font-family:var(--dg-font-body);font-weight:700;padding:3px 10px;line-height:1.4}
.dg-badge--success{background:var(--dg-success-soft);color:var(--dg-teal-deep)}
.dg-notice,.am-body :is(.notice,.am-notice){background:var(--dg-white);border:var(--dg-border-thin);border-radius:var(--dg-radius-input);box-shadow:var(--dg-shadow-sm);padding:14px 18px;overflow-wrap:anywhere}
.dg-notice--error,.am-body :is(.notice.error,.errors){color:var(--dg-pink-deep);background:var(--dg-danger-soft);border-color:var(--dg-pink-deep)}
.dg-notice--warning,.am-body :is(.notice.warn,.am-notice--warn){background:var(--dg-warning-soft);color:var(--dg-ink)}
.am-body :is(.notice.ok,.am-notice--ok){background:var(--dg-success-soft);color:var(--dg-teal-deep)}
.dg-code{font-family:var(--dg-font-mono);font-size:13px;background:var(--dg-well);border-radius:8px;padding:12px;overflow:auto}

/* Standalone Studio reuses kit components while retaining its workbench grid. */
.dg-studio{margin:0;background:var(--dg-paper)}
.dg-studio header{background:var(--dg-paper);border-bottom:var(--dg-border)}
.dg-studio header h1{font-size:22px;text-shadow:none}
.dg-studio h2{font-size:26px}
.dg-studio :is(.card,.step){background:var(--dg-white);border:var(--dg-border);border-radius:var(--dg-radius-card);box-shadow:var(--dg-shadow-hard)}
.dg-studio .step{border-width:2px;box-shadow:var(--dg-shadow-sm)}
.dg-studio .run-list button{display:grid;justify-content:start;justify-items:start;align-content:start;text-align:left;border-radius:var(--dg-radius-card);background:var(--dg-white)}
.dg-studio .run-list button:hover{background:var(--dg-warning-soft)}
.dg-studio nav[aria-label="Studio"] button{border:var(--dg-border-thin);background:var(--dg-white);box-shadow:none}
.dg-studio nav[aria-label="Studio"] button:hover{background:var(--dg-white)}
.dg-studio nav[aria-label="Studio"] button.active{background:var(--dg-yellow);color:var(--dg-ink);box-shadow:var(--dg-shadow-sm)}
.dg-studio nav[aria-label="Studio"] button:disabled{background:var(--dg-well);color:var(--dg-muted);box-shadow:none;transform:none;cursor:not-allowed}
.dg-studio :is(.muted,.lede){color:var(--dg-muted)}
.dg-studio :is(pre,.art img){background:var(--dg-well)}
.dg-studio a{color:var(--dg-teal-deep)}
.dg-studio .badge{border:var(--dg-border-thin);border-radius:var(--dg-radius-pill);background:var(--dg-success-soft);color:var(--dg-ink)}
.dg-studio .warning{background:var(--dg-warning-soft)}
.dg-studio .error{background:var(--dg-danger-soft)}
.dg-studio .selected{background:var(--dg-warning-soft)}
.dg-studio .review-note{border-color:var(--dg-teal)}
.dg-studio .scope{border-color:var(--dg-yellow)}
.dg-studio #notice{background:var(--dg-ink);color:var(--dg-white);border:0;box-shadow:none}
.dg-studio #notice.is-error{background:var(--dg-pink-deep)}
.dg-studio .row>button{width:auto}

/* Public experiment showcase and advanced map: the map keeps its semantic hue
   encodings. Retro paper is the default; an explicit dark preference still works. */
.sc-body.dg-brand .sc-hero{border-bottom:var(--dg-border);background:var(--dg-paper)}
.sc-body.dg-brand :is(.sc-card,.sc-stat,.sc-panel){border:var(--dg-border-thin);box-shadow:var(--dg-shadow-sm);border-radius:var(--dg-radius-card)}
.sc-body.dg-brand h1{color:var(--dg-ink)}
:root:has(.atlas-body){--sans:var(--dg-font-body);--serif:var(--dg-font-display);--mono:var(--dg-font-mono)}
:root:not([data-theme=dark]):has(.atlas-body){--bg:var(--dg-paper);--bg2:var(--dg-well);--panel:var(--dg-white);--panel2:var(--dg-warning-soft);--line:var(--dg-hair);--line2:var(--dg-ink);--ink:var(--dg-ink);--ink2:var(--dg-muted);--ink3:var(--dg-muted);--dot:var(--dg-hair);--L:.52;--C:.15;--fillL:.975;--fillC:.012;--lineL:.80;--lineC:.05;--human:var(--dg-warning-ink);--gate:var(--dg-pink-deep);--none:var(--dg-pink-deep);--ok:var(--dg-teal-deep);--stale:var(--dg-warning-ink);--slate:var(--dg-muted);--glow:.35;color-scheme:light}
.atlas-body .atlas-top{border-bottom:2px solid var(--ink);background:var(--bg);min-height:58px}
.atlas-body .atlas-mark{font-family:var(--dg-font-display);font-weight:400;font-size:14px}
.atlas-body .atlas-mark i{background:var(--dg-yellow);border:2px solid var(--ink);transform:none;border-radius:4px;width:16px;height:16px}
.atlas-body :is(.atlas-btn,.atlas-select,.atlas-engine summary){border-width:2px;border-color:var(--ink);font-family:var(--dg-font-body)}
.atlas-body .atlas-btn{box-shadow:2px 2px 0 var(--ink)}
.atlas-body .atlas-seg{border:2px solid var(--ink)}
.atlas-body .atlas-seg button[aria-pressed=true]{background:var(--dg-yellow);color:var(--dg-ink)}
.atlas-body :is(.atlas-view-menu,.atlas-engine[open] .atlas-nav){border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}

@media(max-width:600px){
 .am-body .am-header-inner{min-height:72px;gap:14px}
 .am-body h1,.dg-brand h1{font-size:clamp(26px,7vw,36px);text-shadow:2px 2px 0 var(--dg-pink)}
 .dg-card{padding:18px}
 .am-body :is(.card,.panel,.op-card),.dg-studio .card{box-shadow:var(--dg-shadow-sm)}
 .dg-studio nav{flex-wrap:wrap;overflow:visible}
}
@media(prefers-reduced-motion:reduce){.dg-button,.am-body :is(button,.button,.btn),.dg-brand button{transition:none;transform:none}}

.dg-workspace-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-left:auto;font:700 14px/1.4 var(--dg-font-body)}
.dg-workspace-nav a{padding:8px 0;min-height:40px;display:inline-flex;align-items:center;color:var(--dg-teal-deep);text-decoration:underline}
@media(max-width:900px){.dg-workspace-nav{flex-basis:100%;margin-left:0}}

.dg-brand .dg-button--secondary:hover{background:var(--dg-white)}
.dg-brand .dg-button--teal:hover{background:var(--dg-teal)}
.dg-brand .dg-button--quiet:hover{background:transparent;box-shadow:none;transform:none}
/* Showcase's old header assumed a dark surface; pair its text with branded paper. */
.sc-body.dg-brand{--sans:var(--dg-font-body);--serif:var(--dg-font-display);--shadow:var(--dg-shadow-hard)}
.sc-body.dg-brand .sc-hero{color:var(--dg-ink)}
.sc-body.dg-brand .sc-hero a{color:var(--dg-teal-deep)}
.sc-body.dg-brand :is(.sc-sub,.sc-kicker){color:var(--dg-muted)}
.sc-body.dg-brand .sc-live{background:var(--dg-warning-soft);color:var(--dg-ink);border:2px solid var(--dg-ink)}
.sc-body.dg-brand .sc-rail a{color:var(--dg-muted);border-color:var(--dg-hair)}
.sc-body.dg-brand .sc-rail [data-state=done] a{color:var(--dg-teal-deep);border-color:var(--dg-teal-deep)}
.sc-body.dg-brand .sc-rail [data-state=live] a{color:var(--dg-ink);border-color:var(--dg-pink)}
.sc-body.dg-brand .sc-rail :is([data-state=failed],[data-state=blocked],[data-state=stopped]) a{color:var(--dg-pink-deep);border-color:var(--dg-pink-deep)}
.sc-body.dg-brand .sc-rail [data-state=live] a::after{background:var(--dg-pink)}