/* MAS interface primitives — the components shipped in MAS Talent (2026-09-25), expressed on the
   canonical --mas- tokens. Adapt into the target framework; keep the values and the rules.
   Rules behind each block: references/ui-system.md. */

/* ---------- Base ---------- */
.mas-ui{margin:0;font-family:var(--mas-font-ui);font-size:var(--mas-text);line-height:1.55;color:var(--mas-ink);background:var(--mas-surface);-webkit-font-smoothing:antialiased}
.mas-ui *,.mas-ui *::before,.mas-ui *::after{box-sizing:border-box}
.mas-ui :where(button,input,select,textarea){font:inherit;color:inherit}
.mas-ui :where(h1,h2){font-family:var(--mas-font-brand)}
.mas-ui h1{margin:0;font-size:var(--mas-title);font-weight:700;letter-spacing:-.035em;line-height:1.2}
.mas-ui img{max-width:100%;height:auto}
.mas-ui ::selection{background:var(--mas-brand-bay);color:var(--mas-ink)}
.mas-ui :focus-visible{outline:2px solid var(--mas-focus);outline-offset:3px}
.mas-ui ::placeholder{color:var(--mas-ink-2);opacity:1}
.mas-num{font-variant-numeric:tabular-nums}
.mas-ic{inline-size:1.125rem;block-size:1.125rem;flex:none} /* 20-unit grid, 1.5 stroke, currentColor */
.mas-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Shell: Daintree rail + content ---------- */
.mas-shell{display:grid;grid-template-columns:var(--mas-rail-width) minmax(0,1fr);min-height:100dvh}
.mas-rail{display:flex;flex-direction:column;gap:2px;padding:var(--mas-space-6) var(--mas-space-3) var(--mas-space-4);background:var(--mas-rail);color:var(--mas-rail-text)}
.mas-brand{display:grid;gap:var(--mas-space-2);padding:0 var(--mas-space-2) var(--mas-space-6)}
.mas-brand img{inline-size:8rem;display:block}           /* white official artwork only */
.mas-brand span{font:500 .875rem var(--mas-font-brand);color:var(--mas-brand-bay)}
.mas-nav a{display:flex;align-items:center;gap:var(--mas-space-3);min-height:2.25rem;padding:0 var(--mas-space-3);border-radius:var(--mas-radius-control);color:inherit;font-weight:500;text-decoration:none;transition:background-color var(--mas-micro) var(--mas-ease),color var(--mas-micro) var(--mas-ease)}
.mas-nav a:hover{background:var(--mas-rail-hover);color:var(--mas-surface)}
.mas-nav a[aria-current=page]{background:var(--mas-rail-active);color:var(--mas-surface)}
.mas-nav a[aria-current=page] .mas-ic{color:var(--mas-brand-bay)}
.mas-count{margin-inline-start:auto;color:var(--mas-brand-bay);font-size:var(--mas-text-meta);font-weight:600}
.mas-rail :focus-visible{outline-color:var(--mas-brand-bay)}
.mas-main{min-width:0;padding:var(--mas-space-6) clamp(var(--mas-space-4),3vw,var(--mas-space-8)) var(--mas-space-12)}
.mas-main>h1+*{margin-top:var(--mas-space-4)}

/* ---------- Controls ---------- */
.mas-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--mas-space-2);min-height:var(--mas-control-height);padding:6px 14px;border:0;border-radius:var(--mas-radius-control);background:var(--mas-fill);font-weight:600;cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease),transform .2s var(--mas-damped)}
.mas-btn:hover{background:var(--mas-fill-strong)}
/* The one physical object per screen: lit top edge, body in its own shadow, label band on --mas-action (4.74:1). */
.mas-btn-primary{color:var(--mas-action-label);background:linear-gradient(180deg,color-mix(in oklab,var(--mas-action) 90%,white) 0,var(--mas-action) 30%,var(--mas-action) 68%,color-mix(in oklab,var(--mas-action) 90%,var(--mas-ink)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(15,37,51,.22),0 1px 2px rgba(15,37,51,.22)}
.mas-btn-primary:hover{background:linear-gradient(180deg,color-mix(in oklab,var(--mas-action) 90%,white) 0,var(--mas-action) 30%,var(--mas-action) 68%,color-mix(in oklab,var(--mas-action) 90%,var(--mas-ink)));transform:translateY(-1px)}
.mas-btn-primary:active{transform:translateY(1px)}
.mas-btn-count{font-weight:500;opacity:.88}
.mas-link{padding:0;border:0;background:none;color:var(--mas-ink-2);font-size:var(--mas-text-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--mas-brand-kashmir) 40%,transparent);cursor:pointer}
.mas-link:hover{color:var(--mas-ink)}
.mas-input{min-height:var(--mas-control-height);min-width:0;padding:var(--mas-space-2) var(--mas-space-3);border:1px solid var(--mas-control-border);border-radius:var(--mas-radius-control);background:var(--mas-surface)}
.mas-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-2) var(--mas-space-3);margin-bottom:var(--mas-space-4)}
.mas-toolbar .mas-input{border:0;background-color:var(--mas-fill);font-weight:500}
.mas-kbd{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 6px;border-radius:6px;background:var(--mas-fill-strong);color:var(--mas-ink-2);font:600 var(--mas-text-micro)/1 var(--mas-font-ui)}
.mas-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:var(--mas-radius-control);background:var(--mas-fill)}
.mas-seg button{min-height:1.875rem;border:0;border-radius:7px;background:none;color:var(--mas-ink-2);font-size:var(--mas-text-2);font-weight:500}
.mas-seg button[aria-pressed=true]{background:var(--mas-surface);color:var(--mas-ink);font-weight:600;box-shadow:var(--mas-edge-light),0 1px 2px rgba(15,37,51,.12)}
.mas-tabs{display:flex;flex-wrap:wrap;gap:0 var(--mas-space-1);margin:0 0 var(--mas-space-4);border-block-end:1px solid var(--mas-line)}
.mas-tabs button{min-height:2.75rem;padding:var(--mas-space-2) var(--mas-space-3);margin-block-end:-1px;border:0;border-block-end:2px solid transparent;background:none;color:var(--mas-ink-2);white-space:nowrap}
.mas-tabs button[aria-pressed=true]{color:var(--mas-ink);font-weight:600;border-block-end-color:var(--mas-ink)}
.mas-tabs b{color:var(--mas-ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Status without extra hues ---------- */
.mas-pill-wait{display:inline-flex;align-items:center;gap:var(--mas-space-2);padding:1px 9px;border-radius:var(--mas-radius-pill);background:var(--mas-ask);color:var(--mas-ink);font-size:var(--mas-text-meta);font-weight:600;white-space:nowrap}
.mas-pill-wait::before{content:"";inline-size:.375rem;block-size:.375rem;border-radius:50%;background:var(--mas-brand-kashmir)}
.mas-st{display:inline-flex;align-items:center;gap:6px;color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600;white-space:nowrap}
.mas-st[data-state=met]{color:var(--mas-ink)}
.mas-critical{color:var(--mas-critical-text);font-weight:600}

/* ---------- List: the row is the object ---------- */
.mas-list{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.mas-list th{padding:0 var(--mas-space-3) var(--mas-space-2);text-align:left;color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:600;border-bottom:1px solid var(--mas-line-soft)}
.mas-list td{padding:var(--mas-space-2) var(--mas-space-3);border-bottom:1px solid var(--mas-line-soft);vertical-align:middle;overflow-wrap:break-word}
.mas-list .mas-col-main{width:52%}.mas-list .mas-col-figure{width:5rem;text-align:right}.mas-list .mas-col-open{width:2.75rem}
.mas-list tbody tr{cursor:pointer;transition:background-color var(--mas-micro) var(--mas-ease)}
.mas-list tbody tr:hover{background:var(--mas-fill)}
.mas-list tbody tr[aria-selected=true]{background:var(--mas-selection)}
.mas-list tbody tr>td:first-child{border-start-start-radius:var(--mas-radius-control);border-end-start-radius:var(--mas-radius-control)}
.mas-list tbody tr>td:last-child{border-start-end-radius:var(--mas-radius-control);border-end-end-radius:var(--mas-radius-control)}
.mas-person{display:flex;align-items:center;gap:var(--mas-space-3);min-width:0}
.mas-av{display:grid;place-items:center;flex:none;inline-size:2rem;block-size:2rem;border-radius:50%;background:var(--mas-fill-strong);color:var(--mas-ink);font-size:var(--mas-text-meta);font-weight:600}
.mas-list tr[aria-selected=true] .mas-av{background:var(--mas-brand-bay)}
.mas-who{display:grid;min-width:0}
.mas-who a,.mas-who b{font-weight:600;color:var(--mas-ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mas-sub{color:var(--mas-ink-2);font-size:var(--mas-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mas-figure{position:relative;color:var(--mas-ink-2);font-size:var(--mas-text-2);font-variant-numeric:tabular-nums;text-align:right}
.mas-go{display:inline-grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:var(--mas-radius-control);color:var(--mas-ink-2)}
.mas-go:hover{background:var(--mas-fill-strong);color:var(--mas-ink)}
[data-density=compact] .mas-list td{padding-block:var(--mas-space-1)}
[data-density=compact] .mas-av{inline-size:1.5rem;block-size:1.5rem;font-size:10px}
[data-density=compact] .mas-who{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:var(--mas-space-2)}

/* ---------- Split: list beside the inspector, measured against the same box ---------- */
.mas-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(48vw,64rem));gap:var(--mas-space-6);align-items:start}
.mas-inspector{position:sticky;top:0;max-height:100dvh;overflow:auto;container-type:inline-size;padding:var(--mas-space-6) var(--mas-space-8) 0;border-radius:var(--mas-radius-overlay) 0 0 var(--mas-radius-overlay);background:var(--mas-surface);box-shadow:var(--mas-shadow-soft)}

/* ---------- Inspector anatomy ---------- */
.mas-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mas-space-4)}
.mas-head .mas-av{inline-size:3.25rem;block-size:3.25rem;background:var(--mas-brand-bay);font:600 1.125rem var(--mas-font-brand)}
.mas-head .mas-sub{white-space:normal}
.mas-name{margin:0;font:600 var(--mas-name)/1.1 var(--mas-font-brand);letter-spacing:-.025em;overflow-wrap:anywhere}
.mas-meta{display:flex;flex-wrap:wrap;gap:var(--mas-space-2) var(--mas-space-5);margin:var(--mas-space-4) 0 0;color:var(--mas-ink-2);font-size:var(--mas-text-2)}
.mas-meta span{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.mas-stage{display:grid;gap:var(--mas-space-3);margin-top:var(--mas-space-5);padding:var(--mas-space-4) var(--mas-space-4) var(--mas-space-3);border-radius:var(--mas-radius-object);background:var(--mas-fill)}
.mas-stage-now{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-1) var(--mas-space-3);margin:0}
.mas-stage-now b{font-size:.9375rem;font-weight:600}
.mas-track{display:grid;grid-template-columns:repeat(var(--mas-steps,5),minmax(0,1fr));gap:var(--mas-space-1);margin:0;padding:0;list-style:none}
.mas-track li{display:grid;gap:var(--mas-space-2);min-width:0;color:var(--mas-ink-2);font-size:var(--mas-text-2)}
.mas-track span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mas-track li::before{content:"";block-size:.3125rem;border-radius:var(--mas-radius-pill);background:var(--mas-fill-strong)}
.mas-track li.done::before{background:var(--mas-ink)}
.mas-track li[aria-current=step]{color:var(--mas-ink);font-weight:600}
.mas-track li[aria-current=step]::before{background:linear-gradient(90deg,var(--mas-ink) 50%,var(--mas-brand-bay) 50%)}
.mas-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--mas-space-8);align-items:start}
@container (min-width:52rem){.mas-cols{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.mas-cols>:only-child{grid-column:1/-1}
.mas-sec{margin-top:var(--mas-space-6);min-width:0}
.mas-sec h3{display:flex;justify-content:space-between;align-items:baseline;gap:var(--mas-space-3);margin:0 0 var(--mas-space-2);font-size:var(--mas-text-2);font-weight:600}
.mas-sec h3 small{color:var(--mas-ink-2);font-size:var(--mas-text-meta);font-weight:500}
.mas-lines>div{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px var(--mas-space-3);align-items:center;padding:var(--mas-space-2) 0}
.mas-lines>div+div::before{content:"";position:absolute;inset:0 0 auto;block-size:1px;background:var(--mas-line-soft)}
.mas-lines .k{font-weight:600;min-width:0;overflow-wrap:anywhere}
.mas-lines .d{grid-column:1;color:var(--mas-ink-2);font-size:var(--mas-text-2);min-width:0}
.mas-lines .d:empty{display:none}
.mas-lines .v{grid-row:1/span 2;grid-column:2;display:flex;align-items:center;gap:var(--mas-space-3)}
.mas-kind{margin-inline-end:6px;color:var(--mas-ink-2);font-size:var(--mas-text-micro);font-weight:600}
.mas-src{min-inline-size:5.5rem;color:var(--mas-ink-2);font-size:var(--mas-text-meta);text-align:right;white-space:nowrap}
.mas-dots{display:inline-flex;gap:4px}
.mas-dots i{inline-size:7px;block-size:7px;border-radius:50%;background:var(--mas-fill-strong)}
.mas-dots i.on{background:var(--mas-ink)}
.mas-facts{margin:var(--mas-space-2) 0 0;color:var(--mas-ink-2);font-size:var(--mas-text-2)}

/* ---------- Prepared work ---------- */
.mas-source{color:var(--mas-ink-2);font-size:var(--mas-text-2);white-space:nowrap}
.mas-ask :is(input,select){background-color:var(--mas-ask);border-color:transparent}

/* ---------- Dock: the one surface with material, because content scrolls beneath it ---------- */
.mas-dock{position:sticky;bottom:var(--mas-space-3);z-index:var(--mas-z-sticky);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mas-space-2);
  margin:var(--mas-space-8) calc(-1 * var(--mas-space-2)) var(--mas-space-3);padding:var(--mas-space-2);border-radius:18px;
  background:var(--mas-material);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:var(--mas-edge-light),0 0 0 1px var(--mas-line-soft),var(--mas-shadow-soft)}
.mas-dock-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mas-space-2)}
.mas-dock .mas-btn{min-height:2.5rem} /* the dock is compact; elsewhere controls keep the 44px target */

/* ---------- Dialog ---------- */
.mas-ui dialog{width:min(34rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain;padding:var(--mas-space-6);border:0;border-radius:var(--mas-radius-overlay);background:var(--mas-surface);color:var(--mas-ink);box-shadow:var(--mas-shadow-soft)}
.mas-ui dialog::backdrop{background:rgba(15,37,51,.45)}

/* ---------- Preferences and narrow screens ---------- */
@media (prefers-reduced-transparency:reduce){.mas-dock{background:var(--mas-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.mas-ui *,.mas-ui *::before,.mas-ui *::after{transition-duration:1ms!important;animation-duration:1ms!important}} /* the user's preference must win */
@media (max-width:60rem){
  .mas-split{grid-template-columns:minmax(0,1fr)}
  .mas-inspector{position:static;max-height:none;border-radius:0;box-shadow:none;padding-inline:var(--mas-space-4)}
}
@media (max-width:47.5rem){
  .mas-shell{grid-template-columns:minmax(0,1fr)}
  .mas-rail{display:none} /* replaced by the product's drawer; one nav node, restyled, never a DOM twin */
  .mas-list thead{position:absolute;clip-path:inset(50%);width:1px;height:1px}
  .mas-list tbody{display:block}
  .mas-list tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--mas-space-1) var(--mas-space-3);padding:var(--mas-space-2) 0;border-bottom:1px solid var(--mas-line-soft)}
  .mas-list td{display:block;padding:0;border:0}
  .mas-list td:nth-child(1){grid-column:1;grid-row:1}
  .mas-list td:nth-child(2){grid-column:1;grid-row:2;padding-inline-start:calc(2rem + var(--mas-space-3))}
  .mas-list td:nth-child(3){grid-column:2;grid-row:1/3}
  .mas-list td:nth-child(4){grid-column:3;grid-row:1/3}
  .mas-track li:not([aria-current]) span{visibility:hidden} /* only the current stage is named on a phone */
  .mas-id{display:none}
  .mas-head{grid-template-columns:auto minmax(0,1fr)}
  .mas-name{font-size:1.5rem}
  .mas-dock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mas-dock-group{display:contents}
  .mas-dock .mas-btn{min-width:0}
  .mas-dock .mas-btn-primary{grid-column:1/-1}
  .mas-btn,.mas-input,.mas-dock .mas-btn{min-height:var(--mas-touch)}
}