/* Mesa component styles. Reads tokens.css custom properties. No shadows, square by default. */
.ms-symbol{display:block;flex:none}
.ms-symbol path{fill:currentColor}
.ms-ink-accent,.ms-color-accent{color:var(--accent)}
.ms-ink-terracotta,.ms-color-terracotta{color:var(--mesa-terracotta)}
.ms-ink-ivory,.ms-color-ivory{color:var(--warm-ivory)}
.ms-ink-charcoal,.ms-color-charcoal{color:var(--charcoal)}
.ms-ink-white,.ms-color-white{color:var(--white)}
.ms-ink-ink,.ms-color-ink{color:var(--ink)}
.ms-ink-current,.ms-color-current{color:inherit}
.ms-bg-accent{background:var(--accent)}
.ms-bg-terracotta{background:var(--mesa-terracotta)}
.ms-bg-ivory{background:var(--warm-ivory)}
.ms-bg-forest{background:var(--deep-forest)}

.ms-wordmark{font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em;line-height:.95;display:inline-block;white-space:nowrap}
.ms-wordmark-m{position:relative;display:inline-block}
.ms-has-accent::after{content:"";position:absolute;left:.02em;bottom:-.1em;width:.46em;height:.07em;background:currentColor}

.ms-lockup{display:inline-flex;align-items:center;gap:.4em}
.ms-lockup-horizontal{flex-direction:row;gap:18px}
.ms-lockup-stacked{flex-direction:column;text-align:center;gap:20px}
.ms-lockup-stacked .ms-lockup-words{display:flex;flex-direction:column;align-items:center}
.ms-parent{font-family:var(--font-mono);font-weight:500;letter-spacing:.24em;text-transform:uppercase;margin-top:.8em}
.ms-lockup-stacked .ms-parent{margin-top:1.2em}

.ms-rule{height:var(--rule-tabletop);flex:none}

.ms-icon{flex:none;display:inline-block;vertical-align:middle}

.ms-label{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.ms-figure{font-family:var(--font-mono);font-weight:500;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ms-meta{display:flex;align-items:center;gap:6px;font-size:15px;line-height:20px;color:var(--ink-muted);flex-wrap:wrap}

/* Focus: solid 2px ring, 2px surface gap */
.ms-btn:focus-visible,.ms-slot:focus-visible,.ms-lang button:focus-visible,.ms-table:focus-visible,.ms-header a:focus-visible,.ms-field-control:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Button */
.ms-btn{font-family:var(--font-sans);font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-control);cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.ms-btn-sm{font-size:14px;line-height:20px;padding:6px 12px;min-height:36px}
.ms-btn-md{font-size:16px;line-height:24px;padding:10px 20px;min-height:44px}
.ms-btn-lg{font-size:18px;line-height:24px;padding:14px 28px;min-height:52px}
.ms-btn-full{width:100%}
.ms-btn-primary{background:var(--accent);color:var(--on-accent)}
.ms-btn-primary:hover{background:var(--accent-text);color:var(--on-accent)}
.ms-btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink-muted)}
.ms-btn-secondary:hover{border-color:var(--ink);background:var(--surface-sunken)}
.ms-btn-ghost{background:transparent;color:var(--accent-text)}
.ms-btn-ghost:hover{background:var(--accent-soft)}
.ms-btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.ms-btn-danger:hover{background:var(--danger-soft)}
.ms-btn:disabled{cursor:not-allowed;opacity:.5}
.ms-btn.is-loading{opacity:1;cursor:progress}
.ms-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ms-spin .8s linear infinite}
@keyframes ms-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ms-spinner{animation-duration:2.4s}.ms-btn{transition:none}}

/* Field */
.ms-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans)}
.ms-field-label{font-size:15px;line-height:20px;font-weight:600;color:var(--label)}
.ms-field-control{display:flex;align-items:center;gap:8px;padding:0 12px;min-height:44px;background:var(--surface-raised);border:1px solid var(--ink-muted);border-radius:var(--radius-control);color:var(--ink-muted)}
.ms-field-control input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;line-height:24px;color:var(--ink);padding:10px 0}
.ms-field-control input::placeholder{color:var(--ink-muted)}
.ms-field.has-error .ms-field-control{border-color:var(--danger);border-width:2px;padding:0 11px}
.ms-field-msg{font-size:13px;line-height:18px;color:var(--ink-muted);display:flex;gap:6px;align-items:center}
.ms-field-error{color:var(--danger)}

/* Slots and language */
.ms-slots{display:flex;flex-wrap:wrap;gap:8px}
.ms-slot{font-family:var(--font-mono);font-size:14px;font-weight:500;min-width:72px;min-height:44px;padding:0 16px;border:1px solid var(--ink-muted);border-radius:var(--radius-control);background:var(--surface-raised);color:var(--ink);cursor:pointer}
.ms-slot:hover{border-color:var(--ink)}
.ms-slot.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:500}
.ms-slot:disabled{color:var(--ink-muted);background:var(--surface-sunken);border-style:dashed;text-decoration:line-through;cursor:not-allowed}
.ms-lang{display:inline-flex;border:1px solid var(--ink-muted);border-radius:var(--radius-control);overflow:hidden;padding:2px;gap:2px}
.ms-lang button{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.12em;min-width:40px;min-height:30px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink-muted);cursor:pointer}
.ms-lang button.is-on{background:var(--ink);color:var(--surface)}

/* Chips and notices */
.ms-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-control);white-space:nowrap}
.ms-tone-success{background:var(--success-soft);color:var(--success)}
.ms-tone-warning{background:var(--warning-soft);color:var(--warning)}
.ms-tone-danger{background:var(--danger-soft);color:var(--danger)}
.ms-tone-info{background:var(--info-soft);color:var(--info)}
.ms-tone-accent{background:var(--accent-soft);color:var(--accent-text)}
.ms-notice{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-card);font-family:var(--font-sans);font-size:15px;line-height:20px}
.ms-notice .ms-icon{margin-top:1px}
.ms-notice-title{font-weight:600;font-size:17px;line-height:22px}

/* Card base */
.ms-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-card);padding:24px;font-family:var(--font-sans);color:var(--ink);display:flex;flex-direction:column;gap:16px}

/* Booking */
.ms-booking-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}

.ms-booking-name{margin:0 0 4px;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.ms-booking-facts{margin:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.ms-booking-facts div{display:flex;align-items:center;gap:8px}
.ms-booking-facts dt{color:var(--ink-muted);display:flex}
.ms-booking-facts dd{margin:0;font-size:17px;line-height:22px;font-weight:600}
.ms-booking-foot{display:flex;gap:16px;padding-top:12px;border-top:1px solid var(--line)}
.ms-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Event */
.ms-event{display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;font-family:var(--font-sans);color:var(--ink)}
.ms-event-media{aspect-ratio:4/3;background:var(--deep-forest) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.ms-event-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px}
.ms-event-body .ms-rule{margin-bottom:8px}
.ms-event-title{margin:0;font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em}
.ms-event-price{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--accent-text);margin-top:4px}

/* Receipt */
.ms-receipt{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-card);font-family:var(--font-sans);color:var(--ink);max-width:420px}
.ms-receipt-head{display:flex;gap:16px;align-items:center;padding:24px;border-bottom:1px solid var(--line)}
.ms-receipt-name{font-size:17px;line-height:22px;font-weight:600;margin-bottom:2px}
.ms-receipt-lines{width:100%;border-collapse:collapse;font-size:15px;line-height:20px}
.ms-receipt-lines td{padding:8px 0;vertical-align:top}
.ms-receipt-lines td:first-child{padding-left:24px}
.ms-receipt-lines td:last-child{padding-right:24px}
.ms-qty{width:36px;font-family:var(--font-mono);color:var(--ink-muted)}
.ms-num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ms-receipt-sums{margin:0;padding:12px 24px;border-top:1px solid var(--separator);display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:18px;color:var(--label-secondary)}
.ms-receipt-sums div{display:flex;justify-content:space-between}
.ms-receipt-sums dd{margin:0;font-family:var(--font-mono)}
.ms-receipt-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 24px;background:var(--surface-sunken);font-weight:700}
.ms-receipt-total .ms-figure{font-size:22px;line-height:28px}
.ms-receipt-paid{padding:0 24px 20px;background:var(--surface-sunken)}

/* Table tile */
.ms-table{font:inherit;text-align:left;font-family:var(--font-sans);color:var(--ink);background:var(--surface-raised);border:1px solid var(--line);border-top:var(--rule-tabletop) solid var(--line);border-radius:var(--radius-tile);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:168px}
button.ms-table{cursor:pointer}
button.ms-table:hover{border-color:var(--ink-muted)}
.ms-table-available{border-top-color:var(--success)}
.ms-table-reserved{border-top-color:var(--info)}
.ms-table-seated,.ms-table-ordered{border-top-color:var(--accent)}
.ms-table-paying{border-top-color:var(--warning)}
.ms-table-cancelled,.ms-table-no-show{border-top-color:var(--danger)}
.ms-table.is-selected{outline:2px solid var(--focus-ring);outline-offset:2px}
.ms-table-top{display:flex;justify-content:space-between;align-items:baseline}
.ms-table-no{font-family:var(--font-mono);font-size:28px;line-height:32px;font-weight:500}
.ms-table-guest{font-size:15px;line-height:20px;font-weight:600;min-height:20px}
.ms-table-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}

/* Stat */
.ms-stat{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px;font-family:var(--font-sans);color:var(--ink);display:flex;flex-direction:column;gap:8px}
.ms-stat-value{font-size:24px;line-height:30px;white-space:nowrap}
.ms-stat-delta{font-size:14px;line-height:20px;color:var(--ink-muted);display:flex;gap:8px}
.ms-stat-delta.is-up span:first-child{color:var(--success)}
.ms-stat-delta.is-down span:first-child{color:var(--danger)}

/* Header */
.ms-header{display:flex;align-items:center;gap:32px;padding:0 24px;min-height:64px;font-family:var(--font-sans);border-bottom:1px solid var(--line)}
.ms-header-consumer{background:var(--surface);color:var(--ink)}
.ms-header-restaurant{background:var(--deep-forest);color:var(--on-forest);border-bottom-color:var(--line)}
.ms-header-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.ms-header-product{display:flex;flex-direction:column;gap:2px}
.ms-header-mesa{font-weight:700;font-size:16px;letter-spacing:.08em;line-height:18px}
.ms-header-restaurant .ms-label{color:#B9C4BD}
.ms-header-nav{display:flex;gap:4px;flex:1}
.ms-header-nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;font-size:15px;line-height:20px;font-weight:500;color:inherit;text-decoration:none;border-bottom:var(--rule-tabletop) solid transparent;margin-bottom:-1px}
.ms-header-consumer .ms-header-nav a{color:var(--ink-muted)}
.ms-header-nav a:hover{color:inherit}
.ms-header-nav a.is-active{border-bottom-color:var(--accent);color:inherit}
.ms-header-consumer .ms-header-nav a.is-active{color:var(--ink)}
.ms-header-restaurant .ms-header-nav a.is-active{border-bottom-color:#D39383}
.ms-header-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.ms-header-restaurant .ms-lang{border-color:#B9C4BD}
.ms-header-restaurant .ms-lang button{color:#B9C4BD}
.ms-header-restaurant .ms-lang button.is-on{background:var(--warm-ivory);color:var(--deep-forest)}


/* ---------- Liquid Glass: the navigation and control layer ---------- */
.ms-glass{position:relative;isolation:isolate;color:var(--ink);background:var(--glass-regular);border:var(--glass-edge-width) solid var(--glass-edge);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
.ms-glass-shape-bar{border-radius:var(--radius-bar)}
.ms-glass-shape-sheet{border-radius:var(--radius-sheet)}
.ms-glass-shape-control{border-radius:var(--radius-control)}
.ms-glass.is-floating{box-shadow:var(--shadow-glass)}
.ms-glass-shape-sheet.is-floating{box-shadow:var(--shadow-sheet)}
.ms-glass-clear{background:var(--glass-clear);color:var(--white);-webkit-backdrop-filter:blur(var(--glass-blur-clear)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur-clear)) saturate(var(--glass-saturate))}
.ms-glass-clear.has-dim::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--glass-dim);z-index:-1}
.ms-glass-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;border-top:var(--glass-edge-width) solid var(--glass-highlight);-webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 60%);mask-image:linear-gradient(to bottom,#000 0,transparent 60%)}
.ms-glass-content{position:relative;display:flex;align-items:center;gap:8px}
.ms-glass-shape-bar>.ms-glass-content{padding:8px 10px}
.ms-glass-shape-bar.ms-header>.ms-glass-content{padding:0}
.ms-glass-tinted{background:var(--glass-tint)}

/* Scroll edge effect: content fades and blurs as it passes under a glass bar */
.ms-scroll-edge{position:relative}
.ms-scroll-edge::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--scroll-edge-height);pointer-events:none;background:linear-gradient(to bottom,var(--surface),transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,transparent 100%)}

/* Tab bar */
.ms-tabbar-wrap{display:flex;justify-content:center;padding:var(--glass-inset)}
.ms-tabbar .ms-glass-content{gap:4px;padding:6px}
.ms-tab{font-family:var(--font-sans);font-size:11px;line-height:13px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:72px;min-height:52px;padding:6px 12px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink-muted);cursor:pointer}
.ms-tab.is-on{background:var(--glass-tint);color:var(--accent-text)}
.ms-tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Sheet */
.ms-sheet-stage{position:relative;padding:24px;display:flex;align-items:flex-end;justify-content:center;min-height:260px}
.ms-scrim{position:absolute;inset:0;background:var(--scrim)}
.ms-sheet{width:100%;max-width:420px}
.ms-sheet .ms-glass-content{flex-direction:column;align-items:stretch;gap:12px;padding:12px 20px 20px}
.ms-grabber{width:40px;height:5px;border-radius:var(--radius-control);background:var(--ink-muted);opacity:.4;margin:0 auto 4px}
.ms-sheet-title{margin:0;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.01em}
.ms-sheet-actions{margin-top:4px}

/* Glass buttons (Apple's glass and glassProminent) */
.ms-btn-glass{background:var(--glass-regular);color:var(--ink);border-color:var(--glass-edge);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}
.ms-btn-glass:hover{background:var(--glass-tint);color:var(--accent-text)}
.ms-btn-glass-prominent{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--shadow-glass)}
.ms-btn-glass-prominent:hover{background:var(--accent-text)}

/* A glass header floats over content */
.ms-header.ms-glass{border-bottom:var(--glass-edge-width) solid var(--glass-edge);margin:var(--glass-inset);min-height:60px}
.ms-header-restaurant.ms-glass{background:var(--glass-regular);color:var(--ink)}
.ms-header-restaurant.ms-glass .ms-header-mesa,.ms-header-restaurant.ms-glass .ms-label{color:var(--ink-muted)}
.ms-header-restaurant.ms-glass .ms-header-mesa{color:var(--ink)}
.ms-header-restaurant.ms-glass .ms-lang{border-color:var(--ink-muted)}
.ms-header-restaurant.ms-glass .ms-lang button{color:var(--ink-muted)}
.ms-header-restaurant.ms-glass .ms-lang button.is-on{background:var(--ink);color:var(--surface)}
.ms-header-restaurant.ms-glass .ms-header-nav a.is-active{border-bottom-color:var(--accent);color:var(--ink)}

/* Accessibility and fallbacks: glass becomes a solid surface */
@media (prefers-reduced-transparency:reduce){
  .ms-glass,.ms-glass-clear,.ms-btn-glass{background:var(--surface-raised);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--ink-muted);color:var(--ink)}
  .ms-glass-clear{color:var(--ink)}
  .ms-glass-sheen{display:none}
  .ms-scroll-edge::after{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  .ms-glass{background:var(--surface-raised);border-color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
  .ms-tab.is-on{background:var(--accent-soft)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ms-glass,.ms-glass-clear,.ms-btn-glass{background:var(--surface-raised)}
  .ms-glass-clear{color:var(--ink)}
}
@media (forced-colors:active){
  .ms-glass{background:Canvas;border-color:CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- Apple text styles ---------- */
.ms-large-title{font:400 34px/41px var(--font-sans);letter-spacing:-.02em}
.ms-title-1{font:400 28px/34px var(--font-sans);letter-spacing:-.02em}
.ms-title-2{font:400 22px/28px var(--font-sans);letter-spacing:-.01em}
.ms-title-3{font:400 20px/25px var(--font-sans)}
.ms-headline{font:600 17px/22px var(--font-sans)}
.ms-body{font:400 17px/22px var(--font-sans)}
.ms-callout{font:400 16px/21px var(--font-sans)}
.ms-subhead{font:400 15px/20px var(--font-sans)}
.ms-footnote{font:400 13px/18px var(--font-sans)}
.ms-caption-1{font:400 12px/16px var(--font-sans)}
.ms-caption-2{font:400 11px/13px var(--font-sans)}
.ms-emphasis{font-weight:600}

/* ---------- Navigation bar ---------- */
.ms-nav{display:flex;flex-direction:column}
.ms-nav-bar{margin:var(--glass-inset);min-height:var(--nav-bar-height)}
.ms-nav-row{display:flex;align-items:center;gap:8px;width:100%;padding:0 8px;min-height:var(--nav-bar-height)}
.ms-nav-side{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.ms-nav-trailing{justify-content:flex-end}
.ms-nav-title{font:600 17px/22px var(--font-sans);color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;text-align:center}
.ms-nav-back{display:inline-flex;align-items:center;gap:2px;min-height:var(--tap-target);padding:0 6px;border:0;background:transparent;color:var(--tint);font:400 17px/22px var(--font-sans);cursor:pointer;border-radius:var(--radius-control)}
.ms-nav-back:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ms-nav-large{padding:8px var(--space-4) 8px}
.ms-nav-large h1{margin:0;font:700 34px/41px var(--font-sans);letter-spacing:-.02em;color:var(--label)}
.ms-nav-subtitle{margin:2px 0 0;font:400 15px/20px var(--font-sans);color:var(--label-secondary)}

/* ---------- Inset grouped list ---------- */
.ms-list-group{font-family:var(--font-sans);color:var(--label);padding:8px 0 24px}
.ms-list-group.is-inset{padding-left:var(--space-4);padding-right:var(--space-4)}
.ms-list-header{font:400 13px/18px var(--font-sans);color:var(--label-secondary);text-transform:uppercase;letter-spacing:.06em;padding:0 var(--space-4) 8px}
.ms-list-footer{font:400 13px/18px var(--font-sans);color:var(--label-secondary);padding:8px var(--space-4) 0}
.ms-list{background:var(--background-grouped-raised);border-radius:var(--radius-card);overflow:hidden}
.ms-row{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:var(--row-height);padding:11px var(--space-5);background:transparent;border:0;border-radius:0;text-align:left;font:400 17px/22px var(--font-sans);color:var(--label)}
.ms-row+.ms-row{box-shadow:inset 0 1px 0 var(--separator)}
.ms-row.is-tappable{cursor:pointer}
.ms-row.is-tappable:hover{background:var(--fill-secondary)}
.ms-row.is-tappable:active{background:var(--fill)}
.ms-row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.ms-row.is-destructive .ms-row-title{color:var(--danger)}
.ms-row.is-selected .ms-row-check{color:var(--tint)}
.ms-row-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;background:var(--tint);color:var(--on-accent);flex:none}
.ms-row-icon.ms-tone-neutral{background:var(--fill);color:var(--label-secondary)}
.ms-row-icon.ms-tone-success{background:var(--success);color:var(--surface-raised)}
.ms-row-icon.ms-tone-danger{background:var(--danger);color:var(--white)}
.ms-row-text{display:flex;flex-direction:column;min-width:0;flex:1}
.ms-row-title{overflow:hidden;text-overflow:ellipsis}
.ms-row-sub{font:400 15px/20px var(--font-sans);color:var(--label-secondary)}
.ms-row-detail{font:400 17px/22px var(--font-sans);color:var(--label-secondary);white-space:nowrap}
.ms-row-chevron{color:var(--label-tertiary);flex:none}
.ms-row-check{color:var(--tint);flex:none}

/* ---------- Badge ---------- */
.ms-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-control);font:600 12px/1 var(--font-sans);color:var(--white)}
.ms-badge-danger{background:var(--danger)}
.ms-badge-tint{background:var(--accent);color:var(--on-accent)}
.ms-badge-neutral{background:var(--fill);color:var(--label-secondary)}

/* ---------- Switch ---------- */
.ms-switch{width:51px;height:31px;flex:none;border:0;border-radius:var(--radius-control);background:var(--fill);padding:2px;cursor:pointer;transition:background-color .2s ease-out;position:relative}
.ms-switch .ms-switch-knob{display:block;width:27px;height:27px;border-radius:var(--radius-control);background:var(--white);box-shadow:var(--shadow-glass);transform:translateX(0);transition:transform .2s cubic-bezier(.2,0,0,1)}
.ms-switch.is-on{background:var(--tint)}
.ms-switch.is-on .ms-switch-knob{transform:translateX(20px)}
.ms-switch:disabled{opacity:.5;cursor:not-allowed}
.ms-switch:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ms-switch,.ms-switch .ms-switch-knob{transition:none}}

/* ---------- Segmented control ---------- */
.ms-segmented{display:inline-flex;gap:2px;padding:2px;background:var(--fill);border-radius:var(--radius-control)}
.ms-seg{flex:1;min-height:30px;padding:0 14px;border:0;border-radius:var(--radius-control);background:transparent;color:var(--label);font:400 15px/20px var(--font-sans);cursor:pointer}
.ms-seg.is-on{background:var(--surface-raised);font-weight:600;box-shadow:var(--shadow-glass)}
.ms-seg:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- Stepper ---------- */
.ms-stepper{display:inline-flex;align-items:center;background:var(--fill);border-radius:var(--radius-control);padding:2px}
.ms-stepper button{width:44px;height:30px;border:0;background:transparent;color:var(--label);border-radius:var(--radius-control);cursor:pointer;display:flex;align-items:center;justify-content:center}
.ms-stepper button:disabled{color:var(--label-tertiary);cursor:not-allowed}
.ms-stepper button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.ms-stepper-value{min-width:28px;text-align:center;font-family:var(--font-mono);font-size:15px;font-variant-numeric:tabular-nums}

/* ---------- Slider ---------- */
.ms-slider{display:flex;align-items:center;gap:12px;color:var(--label-secondary)}
.ms-slider input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:var(--radius-control);background:var(--fill);outline:0}
.ms-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:27px;height:27px;border-radius:var(--radius-control);background:var(--white);box-shadow:var(--shadow-glass);cursor:pointer}
.ms-slider input[type=range]::-moz-range-thumb{width:27px;height:27px;border:0;border-radius:var(--radius-control);background:var(--white);box-shadow:var(--shadow-glass);cursor:pointer}
.ms-slider input[type=range]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}

/* ---------- Search field ---------- */
.ms-search-wrap{display:flex;align-items:center;gap:12px;padding:8px var(--space-4)}
.ms-search{display:flex;align-items:center;gap:6px;flex:1;min-width:0;min-height:36px;padding:0 10px;border-radius:var(--radius-control);background:var(--fill);color:var(--label-secondary)}
.ms-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:400 17px/22px var(--font-sans);color:var(--label)}
.ms-search input::placeholder{color:var(--label-tertiary)}
.ms-search input::-webkit-search-cancel-button{display:none}
.ms-search:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px}
.ms-search-clear{border:0;background:transparent;color:var(--label-tertiary);cursor:pointer;display:flex;padding:4px}
.ms-search-cancel{border:0;background:transparent;color:var(--tint);font:400 17px/22px var(--font-sans);cursor:pointer;min-height:var(--tap-target);padding:0 4px;white-space:nowrap;flex:none}

/* ---------- Alert ---------- */
.ms-alert-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px;padding:24px}
.ms-alert{position:relative;width:270px;border-radius:14px;text-align:center;overflow:hidden}
.ms-alert-body{padding:20px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--label)}
.ms-alert-body h2{margin:0;font:600 17px/22px var(--font-sans)}
.ms-alert-body p{margin:0;font:400 13px/18px var(--font-sans);color:var(--label-secondary)}
.ms-alert-actions{display:flex;border-top:1px solid var(--separator)}
.ms-alert-actions.is-stacked{flex-direction:column}
.ms-alert-actions.is-stacked .ms-alert-action+.ms-alert-action{border-left:0;border-top:1px solid var(--separator)}
.ms-alert-action{flex:1;min-height:var(--tap-target);border:0;background:transparent;color:var(--tint);font:400 17px/22px var(--font-sans);cursor:pointer}
.ms-alert-action+.ms-alert-action{border-left:1px solid var(--separator)}
.ms-alert-action.is-primary{font-weight:600}
.ms-alert-action.is-destructive{color:var(--danger)}
.ms-alert-action:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}

/* ---------- Apple metrics on the existing controls ---------- */
.ms-btn-md{font-size:17px;line-height:22px;min-height:var(--control-height)}
.ms-btn-sm{font-size:15px;line-height:20px;min-height:var(--control-height-sm)}
.ms-btn-lg{font-size:17px;line-height:22px;min-height:var(--control-height-lg)}
.ms-field-control{min-height:var(--control-height)}
.ms-field-control input{font-size:17px;line-height:22px}
.ms-slot{min-height:var(--control-height)}