/* Masjid Systems components. Load after tokens.css. */
.ms{font-family:var(--font-sans);color:var(--ink);box-sizing:border-box;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;caret-color:var(--accent)}
.ms *,.ms *::before,.ms *::after{box-sizing:inherit}
.ms ::selection{background:var(--accent-soft);color:var(--ink)}
.ms :focus-visible,.ms:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ms a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
.ms-icon{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ms-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Entrance: siblings rise 8px and fade, 50ms apart. Content is visible if the animation never runs. */
@keyframes ms-rise{from{opacity:0;transform:translateY(8px)}}
.ms-rise{animation:ms-rise var(--duration-base) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * var(--duration-stagger))}

/* Button */
.ms-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-sm);border:0;font:500 13px/18px var(--font-sans);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;transition:transform var(--duration-press) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
.ms-btn:active{transform:scale(.97)}
.ms-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.ms-btn--primary{background:var(--action);color:var(--on-action)}
.ms-btn--secondary{background:var(--surface-100);color:var(--ink);box-shadow:var(--shadow-sm)}
.ms-btn--ghost{background:transparent;color:var(--ink)}
.ms-btn--danger{background:var(--status-danger-soft);color:var(--status-danger)}
@media (hover:hover) and (pointer:fine){
  .ms-btn--primary:hover:not([disabled]){box-shadow:var(--shadow-md)}
  .ms-btn--secondary:hover:not([disabled]){box-shadow:var(--shadow-md)}
  .ms-btn--ghost:hover:not([disabled]){background:var(--surface-200)}
  .ms-btn--danger:hover:not([disabled]){box-shadow:inset 0 0 0 1px var(--status-danger)}
}
.ms-btn--sm{height:30px;padding:0 10px;font-size:12px}
.ms-btn--lg{height:48px;padding:0 20px;font-size:15px}
.ms-btn--block{width:100%}

/* StatusBadge */
.ms-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 7px;border-radius:var(--radius-xs);font:500 12px/16px var(--font-sans);white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
.ms-badge__dot{position:relative;width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ms-badge--live,.ms-badge--online{color:var(--status-live);background:var(--status-live-soft)}
.ms-badge--warning{color:var(--status-warning);background:var(--status-warning-soft)}
.ms-badge--danger{color:var(--status-danger);background:var(--status-danger-soft)}
.ms-badge--info{color:var(--status-info);background:var(--status-info-soft)}
.ms-badge--idle{color:var(--status-idle);background:var(--surface-200)}
.ms-badge--live .ms-badge__dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid currentColor;opacity:0;animation:ms-ping 2.4s var(--ease-out) infinite}
@keyframes ms-ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.6);opacity:0}}

/* Card: one elevation declaration, a shadow ring. No separate border. */
.ms-card{position:relative;background:var(--surface-100);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px;transition:box-shadow var(--duration-quick) var(--ease-out)}
.ms-card--interactive{cursor:pointer}
@media (hover:hover) and (pointer:fine){.ms-card--interactive:hover{box-shadow:var(--shadow-md)}}
.ms-card--selected{box-shadow:0 0 0 2px var(--ink),var(--shadow-md)}
.ms-card__head{display:flex;align-items:flex-start;gap:10px}
.ms-card__icon{color:var(--ink-muted);margin-top:3px;flex:none}
.ms-card__titles{flex:1;min-width:0}
.ms-card__title{font:600 15px/22px var(--font-sans);letter-spacing:-.005em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-card__sub{font:400 12px/16px var(--font-sans);color:var(--ink-muted);margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-card__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.ms-card__stats div{display:flex;flex-direction:column;gap:2px}
.ms-card__stats dt{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.ms-card__stats dd{margin:0;font:500 22px/28px var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ms-card__stats dd.is-warn{color:var(--status-warning)}
.ms-card__stats dd.is-bad{color:var(--status-danger)}
.ms-card__health{display:flex;gap:2px;height:4px;border-radius:1px;overflow:hidden;background:var(--surface-200)}
.ms-card__health span{display:block;height:100%}
.ms-card__health .ok{background:var(--status-live)}
.ms-card__health .bad{background:var(--status-danger)}
.ms-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.ms-chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-xs);background:var(--surface-200);font:400 12px/16px var(--font-mono);color:var(--ink-muted)}
.ms-chip.is-warn{color:var(--status-warning);background:var(--status-warning-soft)}
.ms-card__rows{display:flex;flex-direction:column;margin:-4px 0}
.ms-card__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.ms-card__row+.ms-card__row{border-top:1px solid var(--line)}
.ms-card__row b{font:400 13px/18px var(--font-mono);color:var(--ink);font-weight:400}
.ms-card--sync::after{content:"";position:absolute;left:16px;right:16px;top:0;height:2px;border-radius:1px;background:var(--status-live);transform-origin:left;animation:ms-sweep var(--duration-slow) var(--ease-out) 1 forwards}
@keyframes ms-sweep{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* SceneButton */
.ms-scene-btn{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:148px;padding:var(--space-5);border-radius:var(--radius-md);border:0;background:var(--surface-100);box-shadow:var(--shadow-sm);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out),transform var(--duration-press) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ms-scene-btn:hover{box-shadow:var(--shadow-md)}}
.ms-scene-btn:active{transform:scale(.97)}
.ms-scene-btn__top{display:flex;align-items:center;justify-content:space-between;color:var(--ink-muted)}
.ms-scene-btn__top .ms-icon{width:18px;height:18px}
.ms-scene-btn__name{font:400 26px/30px var(--font-display);letter-spacing:-.01em}
.ms-scene-btn__desc{font:400 13px/18px var(--font-sans);color:var(--ink-muted);margin-top:4px}
.ms-scene-btn__state{font:500 12px/16px var(--font-sans);display:inline-flex;align-items:center;gap:6px}
.ms-scene-btn__state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ms-scene-btn--active{background:var(--action);color:var(--on-action);box-shadow:var(--shadow-md)}
.ms-scene-btn--active .ms-scene-btn__top,.ms-scene-btn--active .ms-scene-btn__desc{color:var(--on-action);opacity:.75}
.ms-scene-btn--scheduled .ms-scene-btn__state{color:var(--status-info)}

/* LevelMeter */
.ms-meter{display:grid;grid-template-columns:112px 1fr 72px;align-items:center;gap:16px}
.ms-meter__label{font:500 13px/18px var(--font-sans)}
.ms-meter__track{display:flex;gap:2px;height:8px}
.ms-meter__seg{flex:1;border-radius:1px;background:var(--surface-200);transition:background-color var(--duration-quick) var(--ease-meter)}
.ms-meter__seg.is-on{background:var(--status-live)}
.ms-meter__seg.is-hot.is-on{background:var(--status-warning)}
.ms-meter__seg.is-clip.is-on{background:var(--status-danger)}
.ms-meter__value{font:400 13px/18px var(--font-mono);text-align:right;color:var(--ink-muted)}
.ms-meter--clipping .ms-meter__value{color:var(--status-danger)}

/* PrayerTimesBar: the day's spine. Cells are separated by tone, not rules. */
.ms-prayers{display:grid;background:var(--surface-100);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.ms-prayers__cell{display:flex;flex-direction:column;gap:2px;padding:16px 20px;transition:background-color var(--duration-slow) var(--ease-in-out)}
.ms-prayers__name{font:500 13px/18px var(--font-sans);color:var(--ink-muted)}
.ms-prayers__time{font:400 30px/36px var(--font-display);letter-spacing:-.01em}
.ms-prayers__meta{font:400 12px/16px var(--font-sans);color:var(--ink-muted);min-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-prayers__cell--current{background:var(--accent-soft)}
.ms-prayers__cell--current .ms-prayers__name,.ms-prayers__cell--current .ms-prayers__time,.ms-prayers__cell--current .ms-prayers__meta{color:var(--accent)}
.ms-prayers__cell--next .ms-prayers__meta{color:var(--ink);font-weight:500}
.ms-prayers__cell--past .ms-prayers__time{color:var(--ink-muted)}

/* Scene */
.ms-scene{position:relative;overflow:hidden;width:100%;height:100%;min-height:240px;isolation:isolate;background:linear-gradient(180deg,var(--sky-top,#9dbfd8) 0%,var(--sky-horizon,#f4f1ea) 78%)}
.ms-scene__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--plate-pos,30% 50%);opacity:0;transition:opacity var(--duration-slow) var(--ease-in-out)}
.ms-scene__plate.is-current{opacity:1}
.ms-scene--plates .ms-scene__plate.is-current{animation:ms-drift 40s var(--ease-in-out) infinite alternate}
@keyframes ms-drift{from{transform:scale(1.02)}to{transform:scale(1.06) translateX(-1%)}}
.ms-scene__sun{position:absolute;width:56vmax;height:56vmax;left:var(--sun-x,50%);top:var(--sun-y,40%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,241,214,var(--sun-a,.9)) 0%,rgba(255,241,214,calc(var(--sun-a,.9)*.35)) 18%,rgba(255,241,214,0) 55%);pointer-events:none;transition:left var(--duration-slow) var(--ease-in-out),top var(--duration-slow) var(--ease-in-out)}
.ms-scene__mote{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--scene-sun);box-shadow:0 0 8px 2px rgba(255,241,214,.6);opacity:0;pointer-events:none;animation:ms-mote var(--duration-ambient) linear forwards}
@keyframes ms-mote{0%{opacity:0;transform:translate(0,0)}12%{opacity:.85}85%{opacity:.5}100%{opacity:0;transform:translate(40px,-180px)}}
.ms-scene__veil{position:absolute;inset:0;backdrop-filter:blur(40px) saturate(1.15);-webkit-backdrop-filter:blur(40px) saturate(1.15);background:color-mix(in srgb,var(--surface-000) 66%,transparent)}
.ms-scene__slot{position:absolute;inset:0;z-index:2}

/* GlassPanel: a material, not a tint. Bright top edge, heavier text, arrives with opacity and scale.
   Never animate filter on a glass element: a leftover filter breaks backdrop-filter and blurs the content. */
@keyframes ms-materialise{from{opacity:0;transform:scale(.97)}}
.ms-glass{position:relative;background:var(--glass-fill);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);border-radius:var(--radius-lg);box-shadow:inset 0 1px 0 var(--glass-line),inset 0 0 0 1px color-mix(in srgb,var(--glass-line) 40%,transparent),var(--shadow-lg);padding:var(--space-6);color:var(--ink);animation:ms-materialise var(--duration-base) var(--ease-out) backwards}
.ms-glass--card{width:100%;max-width:380px}
.ms-glass__title{font:400 44px/48px var(--font-display);letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
.ms-glass__body{font:450 15px/22px var(--font-sans);color:var(--ink);opacity:.82;margin:0 0 24px}
.ms-glass__actions{display:flex;flex-direction:column;gap:10px}
.ms-glass__foot{font:450 12px/16px var(--font-sans);color:var(--ink-muted);margin:20px 0 0;text-align:center}

/* Wordmark */
.ms-wordmark{display:inline-flex;align-items:baseline;font:400 22px/1 var(--font-display);letter-spacing:-.01em;color:inherit;white-space:nowrap}
.ms-wordmark b{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--accent);margin-left:.08em}

@media (prefers-reduced-transparency:reduce){
  .ms-glass{background:var(--surface-100);backdrop-filter:none;-webkit-backdrop-filter:none}
  .ms-scene__veil{background:var(--surface-000);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Reduced motion keeps short fades that aid comprehension and drops all travel. */
@media (prefers-reduced-motion:reduce){
  .ms *,.ms{transition-property:opacity,background-color,color,box-shadow!important}
  .ms-rise,.ms-glass{animation:ms-fade var(--duration-quick) linear backwards!important;animation-delay:0s!important}
  @keyframes ms-fade{from{opacity:0}}
  .ms-btn:active,.ms-scene-btn:active{transform:none}
  .ms-scene__mote,.ms-card--sync::after,.ms-badge--live .ms-badge__dot::after{display:none}
  .ms-scene--plates .ms-scene__plate.is-current{animation:none}
}

/* ---------- Forms ---------- */
.ms-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ms-field__label{font:500 13px/18px var(--font-sans);color:var(--ink)}
.ms-field__hint{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.ms-field__error{font:500 12px/16px var(--font-sans);color:var(--status-danger)}
.ms-input{width:100%;height:36px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:var(--surface-100);box-shadow:inset 0 0 0 1px var(--line-strong);font:400 14px/20px var(--font-sans);color:var(--ink);transition:box-shadow var(--duration-quick) var(--ease-out)}
.ms-input::placeholder{color:var(--ink-muted)}
.ms-input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--ink),0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent)}
.ms-input:disabled{opacity:.45;cursor:not-allowed}
.ms-input--mono{font-family:var(--font-mono);font-size:13px}
.ms-input--multiline{height:auto;min-height:88px;padding:8px 12px;resize:vertical;display:block}
.ms-field--error .ms-input{box-shadow:inset 0 0 0 1px var(--status-danger)}
.ms-select{position:relative}
.ms-select select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.ms-select .ms-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-muted)}

/* Toggle: a hardware switch. Square-cornered track, never a pill. */
.ms-toggle{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;cursor:pointer}
.ms-toggle__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.ms-toggle__label{font:500 14px/20px var(--font-sans)}
.ms-toggle__desc{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.ms-switch{position:relative;flex:none;width:36px;height:20px;border:0;padding:0;border-radius:var(--radius-xs);background:var(--surface-200);box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out)}
.ms-switch::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:1px;background:var(--surface-100);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--duration-quick) var(--ease-out)}
.ms-switch[aria-checked="true"]{background:var(--action);box-shadow:none}
.ms-switch[aria-checked="true"]::after{transform:translateX(16px);background:var(--on-action)}
.ms-switch:active::after{width:16px}
.ms-switch:disabled{opacity:.45;cursor:not-allowed}

/* SegmentedControl */
.ms-segmented{display:inline-flex;padding:2px;gap:2px;border-radius:var(--radius-sm);background:var(--surface-200)}
.ms-segmented button{height:28px;padding:0 12px;border:0;border-radius:var(--radius-xs);background:transparent;color:var(--ink-muted);font:500 12px/16px var(--font-sans);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),box-shadow var(--duration-quick) var(--ease-out)}
.ms-segmented button[aria-pressed="true"]{background:var(--surface-100);color:var(--ink);box-shadow:var(--shadow-sm)}
@media (hover:hover) and (pointer:fine){.ms-segmented button:hover:not([aria-pressed="true"]){color:var(--ink)}}

/* Tabs: a 2px ink indicator that slides between tabs. */
.ms-tabs{position:relative;display:flex;gap:24px;box-shadow:inset 0 -1px 0 var(--line)}
.ms-tabs button{position:relative;height:40px;padding:0;border:0;background:none;color:var(--ink-muted);font:500 13px/18px var(--font-sans);cursor:pointer;white-space:nowrap;transition:color var(--duration-quick) var(--ease-out)}
.ms-tabs button[aria-selected="true"]{color:var(--ink)}
.ms-tabs button .ms-tabs__count{margin-left:6px;color:var(--ink-muted);font-weight:400}
.ms-tabs__indicator{position:absolute;left:0;bottom:0;height:2px;background:var(--ink);transform-origin:left;transition:transform var(--duration-base) var(--ease-in-out),width var(--duration-base) var(--ease-in-out)}

/* DataTable */
.ms-table-wrap{background:var(--surface-100);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:auto}
.ms-table{width:100%;border-collapse:collapse;font:400 13px/18px var(--font-sans)}
.ms-table th{position:sticky;top:0;background:var(--surface-100);height:40px;padding:0 16px;text-align:left;font:500 12px/16px var(--font-sans);color:var(--ink-muted);white-space:nowrap;box-shadow:inset 0 -1px 0 var(--line)}
.ms-table td{height:48px;padding:0 16px;color:var(--ink);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.ms-table tbody tr+tr td{box-shadow:inset 0 1px 0 var(--line)}
.ms-table .is-right{text-align:right}
.ms-table .is-mono{font-family:var(--font-mono);color:var(--ink-muted)}
.ms-table .is-strong{font-weight:500}
.ms-table tbody tr{transition:background-color var(--duration-quick) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ms-table--interactive tbody tr:hover{background:var(--surface-200);cursor:pointer}}
.ms-table__cell-sub{display:block;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.ms-table__empty td{height:auto;padding:0;white-space:normal}

/* EmptyState */
.ms-empty{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:40px 24px;max-width:420px}
.ms-empty--center{align-items:center;text-align:center;margin:0 auto}
.ms-empty__title{font:400 26px/30px var(--font-display);letter-spacing:-.01em;margin:0}
.ms-empty__body{font:400 14px/21px var(--font-sans);color:var(--ink-muted);margin:0 0 10px}

/* HealthStrip */
.ms-health{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);background:var(--surface-100);box-shadow:var(--shadow-sm);font:400 13px/18px var(--font-sans);min-width:0}
.ms-health__text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-health__text b{font-weight:500}
.ms-health__time{color:var(--ink-muted);white-space:nowrap}

/* Sheet: opaque, slides from the right on the drawer curve. Exit is faster than entry. */
.ms-sheet-layer{position:fixed;inset:0;z-index:50;display:flex;justify-content:flex-end;pointer-events:none}
.ms-sheet-layer.is-open{pointer-events:auto}
.ms-sheet-scrim{position:absolute;inset:0;background:rgba(15,15,14,.36);opacity:0;transition:opacity var(--duration-exit) var(--ease-out)}
.ms-sheet-layer.is-open .ms-sheet-scrim{opacity:1;transition-duration:var(--duration-base)}
.ms-sheet{position:relative;display:flex;flex-direction:column;width:min(440px,100%);height:calc(100% - 24px);margin:12px;background:var(--surface-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transform:translateX(calc(100% + 24px));transition:transform var(--duration-exit) var(--ease-out)}
.ms-sheet-layer.is-open .ms-sheet{transform:none;transition:transform var(--duration-base) var(--ease-drawer)}
.ms-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 24px 0}
.ms-sheet__title{font:400 30px/34px var(--font-display);letter-spacing:-.01em;margin:0}
.ms-sheet__sub{font:400 13px/18px var(--font-sans);color:var(--ink-muted);margin:4px 0 0}
.ms-sheet__body{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
.ms-sheet__foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;box-shadow:inset 0 1px 0 var(--line)}
.ms-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-muted);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-out),transform var(--duration-press) var(--ease-out)}
.ms-icon-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ms-icon-btn:hover{background:var(--surface-200);color:var(--ink)}}

/* Toast: stacks bottom-right, enters from below with a transition so rapid toasts retarget smoothly. */
.ms-toaster{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column-reverse;gap:8px;width:min(360px,calc(100% - 32px));pointer-events:none}
.ms-toast{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-md);background:var(--surface-100);box-shadow:var(--shadow-md);pointer-events:auto;opacity:0;transform:translateY(100%);transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.ms-toast.is-in{opacity:1;transform:none}
.ms-toast.is-out{opacity:0;transform:translateY(8px);transition-duration:var(--duration-exit)}
.ms-toast__dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--ink-muted)}
.ms-toast--live .ms-toast__dot{background:var(--status-live)}
.ms-toast--warning .ms-toast__dot{background:var(--status-warning)}
.ms-toast--danger .ms-toast__dot{background:var(--status-danger)}
.ms-toast--info .ms-toast__dot{background:var(--status-info)}
.ms-toast__title{font:500 13px/18px var(--font-sans)}
.ms-toast__body{font:400 12px/16px var(--font-sans);color:var(--ink-muted);margin-top:2px}

/* ---------- Shell ---------- */
.ms-shell{position:relative;display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%;height:100%}
.ms-rail{margin:12px 0 12px 12px;padding:20px 12px;display:flex;flex-direction:column;gap:2px;background:var(--glass-fill);border-radius:var(--radius-lg);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);box-shadow:inset 0 1px 0 var(--glass-line),var(--shadow-md);overflow:auto}
.ms-rail .ms-wordmark{font-size:22px;padding:0 10px 22px}
.ms-rail__group{font:500 12px/16px var(--font-sans);color:var(--ink-muted);padding:20px 10px 6px}
.ms-nav{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:none;width:100%;text-align:left;font:500 13px/18px var(--font-sans);color:var(--ink-muted);cursor:pointer;text-decoration:none;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out)}
.ms-nav[aria-current="page"]{background:var(--surface-100);color:var(--ink);box-shadow:var(--shadow-sm)}
.ms-nav[aria-current="page"]::after{content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ms-nav .ms-nav__count{margin-left:auto;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
@media (hover:hover) and (pointer:fine){.ms-nav:hover:not([aria-current="page"]){color:var(--ink);background:color-mix(in srgb,var(--surface-100) 55%,transparent)}}
.ms-main{min-width:0;overflow:auto;padding:28px 36px 48px}
.ms-topbar{display:none}
.ms-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.ms-page-header__title{font:400 40px/44px var(--font-display);letter-spacing:-.015em;margin:0;text-wrap:balance}
.ms-page-header__sub{margin:4px 0 0;font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.ms-page-header__actions{display:flex;align-items:center;gap:8px}
.ms-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:32px 0 14px}
.ms-section-head h2{font:600 15px/22px var(--font-sans);margin:0}
.ms-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ms-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ms-stack{display:flex;flex-direction:column;gap:16px}

/* Timetable adapts to its container. */
.ms-prayers{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));container-type:inline-size}
@container (max-width:620px){.ms-prayers__time{font-size:24px;line-height:28px}.ms-prayers__cell{padding:12px 14px}}
@container (max-width:520px){.ms-prayers__cell{padding:10px 10px}}

/* Responsive shell. Under 1100px the grids tighten; under 820px the rail becomes a sheet behind a top bar. */
@media (max-width:1100px){.ms-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.ms-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .ms-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .ms-shell>.ms-rail{position:fixed;z-index:40;top:0;bottom:0;left:0;width:260px;margin:8px;transform:translateX(calc(-100% - 16px));transition:transform var(--duration-exit) var(--ease-out)}
  .ms-shell.is-rail-open>.ms-rail{transform:none;transition:transform var(--duration-base) var(--ease-drawer)}
  .ms-shell::after{content:"";position:fixed;inset:0;z-index:35;background:rgba(15,15,14,.36);opacity:0;pointer-events:none;transition:opacity var(--duration-exit) var(--ease-out)}
  .ms-shell.is-rail-open::after{opacity:1;pointer-events:auto;transition-duration:var(--duration-base)}
  .ms-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:30;padding:10px 16px;background:var(--glass-fill);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);box-shadow:inset 0 -1px 0 var(--line)}
  .ms-main{padding:20px 16px 40px}
  .ms-page-header__title{font-size:32px;line-height:36px}
  .ms-grid-3{grid-template-columns:minmax(0,1fr)}
  .ms-prayers{--n:3!important}
  .ms-prayers__cell{padding:12px 14px}
  .ms-prayers__time{font-size:24px;line-height:28px}
  .ms-meter{grid-template-columns:88px 1fr 64px;gap:12px}
  .ms-health{flex-wrap:wrap;row-gap:8px}
  .ms-health__text{white-space:normal;flex-basis:100%;order:2}
  .ms-health__time{margin-left:auto}
  .ms-ptz__pad{width:100%;max-width:300px;justify-self:center}
}
@media (max-width:480px){.ms-grid-4{grid-template-columns:minmax(0,1fr)}.ms-segmented button{padding:0 10px}}

/* Wall panel (Edge): large type, large targets, no hover. */
.ms-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;height:100%;padding:32px}
.ms-panel__room{font:400 56px/56px var(--font-display);letter-spacing:-.02em;margin:0}
.ms-panel__clock{font:500 64px/64px var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ms-panel .ms-scene-btn{min-height:168px}
.ms-panel .ms-scene-btn__name{font-size:32px;line-height:36px}

@media (prefers-reduced-motion:reduce){
  .ms-sheet,.ms-sheet-layer.is-open .ms-sheet,.ms-toast,.ms-shell>.ms-rail,.ms-tabs__indicator{transition:opacity var(--duration-quick) linear!important;transform:none!important}
  .ms-sheet-layer:not(.is-open) .ms-sheet{opacity:0}
}
@media (prefers-reduced-transparency:reduce){.ms-rail,.ms-topbar{background:var(--surface-100);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---------- AV and automation controls ----------
   All controls work with mouse, touch and keyboard. touch-action:none stops the page scrolling while a finger drags.
   Values update live while dragging (linear, no easing); the cap eases only when it is released or set by keyboard. */

/* Fader: a console fader. Rectangular cap with a centre line, a unity mark, and a mono readout. */
.ms-fader{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-width:0}
.ms-fader__label{font:500 13px/18px var(--font-sans);min-width:88px}
.ms-fader__value{font:400 13px/18px var(--font-mono);color:var(--ink-muted);min-width:64px;text-align:right}
.ms-fader__track{position:relative;height:44px;touch-action:none;cursor:pointer;outline:none}
.ms-fader__rail{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:var(--radius-xs);background:var(--surface-200);box-shadow:inset 0 0 0 1px var(--line)}
.ms-fader__fill{position:absolute;left:0;top:50%;height:6px;margin-top:-3px;border-radius:var(--radius-xs);background:var(--ink);width:min(var(--pct),var(--warn))}
/* Zones. The rail is tinted ahead of the cap so the operator sees amber and red before reaching them; the fill turns amber, then red, as it crosses. */
.ms-fader__zone{position:absolute;top:0;bottom:0;right:0;border-radius:0 var(--radius-xs) var(--radius-xs) 0}
.ms-fader__zone--warn{left:var(--warn);background:var(--status-warning-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--status-warning) 35%,transparent)}
.ms-fader__zone--danger{left:var(--danger);background:var(--status-danger-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--status-danger) 40%,transparent)}
.ms-fader__fill--warn{left:var(--warn);background:var(--status-warning);border-radius:0;width:max(0px,calc(min(var(--pct),var(--danger)) - var(--warn)))}
.ms-fader__fill--danger{left:var(--danger);background:var(--status-danger);border-radius:0 var(--radius-xs) var(--radius-xs) 0;width:max(0px,calc(var(--pct) - var(--danger)))}
.ms-fader.is-warn .ms-fader__value{color:var(--status-warning)}
.ms-fader.is-danger .ms-fader__value{color:var(--status-danger);font-weight:500}
.ms-fader.is-warn .ms-fader__cap{box-shadow:0 0 0 1px var(--status-warning),0 2px 6px rgba(0,0,0,.18)}
.ms-fader.is-danger .ms-fader__cap{box-shadow:0 0 0 2px var(--status-danger),0 2px 6px rgba(0,0,0,.18)}
.ms-fader.is-danger .ms-fader__cap::after{background:var(--status-danger)}
.ms-fader.is-danger .ms-fader__fill--warn{background:var(--status-danger)}
.ms-fader__unity{position:absolute;top:50%;width:1px;height:16px;margin-top:-8px;background:var(--line-strong);left:var(--unity)}
.ms-fader__cap{position:absolute;top:50%;left:var(--pct);width:16px;height:32px;margin:-16px 0 0 -8px;border-radius:var(--radius-xs);background:var(--surface-100);box-shadow:0 0 0 1px var(--line-strong),0 2px 6px rgba(0,0,0,.18);transition:transform var(--duration-press) var(--ease-out)}
.ms-fader__cap::after{content:"";position:absolute;top:3px;bottom:3px;left:50%;width:2px;margin-left:-1px;background:var(--ink)}
.ms-fader.is-dragging .ms-fader__cap{transform:scale(1.08)}
.ms-fader.is-settling .ms-fader__cap,.ms-fader.is-settling .ms-fader__fill{transition:left var(--duration-quick) var(--ease-out),width var(--duration-quick) var(--ease-out)}
.ms-fader__track:focus-visible .ms-fader__cap{box-shadow:0 0 0 2px var(--focus),0 2px 6px rgba(0,0,0,.18)}
.ms-fader--muted .ms-fader__fill,.ms-fader--muted .ms-fader__fill--warn,.ms-fader--muted .ms-fader__fill--danger{background:var(--line-strong)}
.ms-fader--muted .ms-fader__value{color:var(--status-danger)}
/* Vertical, for mixer strips */
.ms-fader--vertical{grid-template-columns:none;grid-template-rows:minmax(0,1fr) auto;justify-items:center;height:100%}
.ms-fader--vertical .ms-fader__track{width:44px;height:100%;min-height:180px}
.ms-fader--vertical .ms-fader__rail{left:50%;right:auto;top:0;bottom:0;width:6px;height:auto;margin:0 0 0 -3px}
.ms-fader--vertical .ms-fader__fill{left:50%;top:auto;bottom:0;width:6px;height:min(var(--pct),var(--warn));margin:0 0 0 -3px}
.ms-fader--vertical .ms-fader__zone{left:0;right:0;top:0;border-radius:var(--radius-xs) var(--radius-xs) 0 0}
.ms-fader--vertical .ms-fader__zone--warn{bottom:var(--warn)}
.ms-fader--vertical .ms-fader__zone--danger{bottom:var(--danger)}
.ms-fader--vertical .ms-fader__fill--warn{bottom:var(--warn);left:50%;width:6px;border-radius:0;height:max(0px,calc(min(var(--pct),var(--danger)) - var(--warn)))}
.ms-fader--vertical .ms-fader__fill--danger{bottom:var(--danger);left:50%;width:6px;border-radius:var(--radius-xs) var(--radius-xs) 0 0;height:max(0px,calc(var(--pct) - var(--danger)))}
.ms-fader--vertical .ms-fader__unity{left:50%;top:auto;bottom:var(--unity);width:16px;height:1px;margin:0 0 0 -8px}
.ms-fader--vertical .ms-fader__cap{left:50%;top:auto;bottom:var(--pct);width:32px;height:16px;margin:0 0 -8px -16px}
.ms-fader--vertical .ms-fader__cap::after{left:3px;right:3px;top:50%;bottom:auto;width:auto;height:2px;margin:-1px 0 0 0}
.ms-fader--vertical.is-settling .ms-fader__cap,.ms-fader--vertical.is-settling .ms-fader__fill{transition:bottom var(--duration-quick) var(--ease-out),height var(--duration-quick) var(--ease-out)}
.ms-fader--vertical.is-danger .ms-fader__cap{box-shadow:0 0 0 2px var(--status-danger),0 2px 6px rgba(0,0,0,.18)}

/* ChannelStrip: a mixer channel. Name, vertical meter, vertical fader, mute. */
.ms-strip{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:96px;padding:14px 10px;border-radius:var(--radius-md);background:var(--surface-100);box-shadow:var(--shadow-sm)}
.ms-strip__name{font:500 12px/16px var(--font-sans);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-strip__body{display:flex;justify-content:center;gap:8px;height:220px}
.ms-strip__meter{display:flex;flex-direction:column-reverse;gap:2px;width:6px;padding:4px 0}
.ms-strip__meter span{flex:1;border-radius:1px;background:var(--surface-200);transition:background-color var(--duration-quick) var(--ease-meter)}
.ms-strip__meter .is-on{background:var(--status-live)}
.ms-strip__meter .is-hot.is-on{background:var(--status-warning)}
.ms-strip__meter .is-clip.is-on{background:var(--status-danger)}
.ms-strip .ms-fader__value{min-width:0;text-align:center}
.ms-strip__mute{height:32px;border:0;border-radius:var(--radius-sm);background:var(--surface-200);color:var(--ink);font:500 12px/16px var(--font-sans);cursor:pointer;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),transform var(--duration-press) var(--ease-out)}
.ms-strip__mute:active{transform:scale(.97)}
.ms-strip__mute[aria-pressed="true"]{background:var(--status-danger-soft);color:var(--status-danger);box-shadow:inset 0 0 0 1px var(--status-danger)}
.ms-mixer{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory}
.ms-mixer>.ms-strip{scroll-snap-align:start;flex:none}

/* PTZPad: a camera joystick. Drag the puck; the further from centre, the faster the camera moves. It springs back on release. */
.ms-ptz{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:100%;max-width:360px}
.ms-ptz__pad{position:relative;aspect-ratio:1;border-radius:var(--radius-md);background:var(--surface-200);box-shadow:inset 0 0 0 1px var(--line);touch-action:none;cursor:grab;outline:none;overflow:hidden}
.ms-ptz__pad:focus-visible{box-shadow:inset 0 0 0 1px var(--line),0 0 0 2px var(--focus)}
.ms-ptz__pad.is-dragging{cursor:grabbing}
.ms-ptz__ring{position:absolute;inset:18%;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line)}
.ms-ptz__axis{position:absolute;background:var(--line)}
.ms-ptz__axis--x{left:12px;right:12px;top:50%;height:1px}
.ms-ptz__axis--y{top:12px;bottom:12px;left:50%;width:1px}
.ms-ptz__dir{position:absolute;color:var(--ink-muted);display:grid;place-items:center;width:24px;height:24px}
.ms-ptz__dir--up{top:6px;left:50%;margin-left:-12px;transform:rotate(180deg)}
.ms-ptz__dir--down{bottom:6px;left:50%;margin-left:-12px}
.ms-ptz__dir--left{left:6px;top:50%;margin-top:-12px;transform:rotate(90deg)}
.ms-ptz__dir--right{right:6px;top:50%;margin-top:-12px;transform:rotate(-90deg)}
.ms-ptz__puck{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:var(--radius-md);background:var(--action);box-shadow:var(--shadow-md);transform:translate(var(--x,0px),var(--y,0px));transition:transform var(--duration-base) var(--ease-out)}
.ms-ptz__pad.is-dragging .ms-ptz__puck{transition:none}
.ms-ptz__puck::after{content:"";position:absolute;inset:22px;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--on-action);opacity:.6}
.ms-ptz__readout{display:flex;justify-content:space-between;font:400 12px/16px var(--font-mono);color:var(--ink-muted)}
.ms-ptz__presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ms-ptz__presets button{height:40px;border:0;border-radius:var(--radius-sm);background:var(--surface-100);box-shadow:var(--shadow-sm);color:var(--ink);font:500 13px/18px var(--font-sans);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;transition:transform var(--duration-press) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
.ms-ptz__presets button:active{transform:scale(.97)}
.ms-ptz__presets button[aria-pressed="true"]{background:var(--action);color:var(--on-action)}

/* Stepper: climate setpoints and other small numeric values. */
.ms-stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-radius:var(--radius-md);background:var(--surface-100);box-shadow:var(--shadow-sm)}
.ms-stepper__label{font:500 13px/18px var(--font-sans)}
.ms-stepper__sub{font:400 12px/16px var(--font-sans);color:var(--ink-muted);margin-top:2px}
.ms-stepper__ctl{display:flex;align-items:center;gap:6px}
.ms-stepper__ctl button{width:44px;height:44px;border:0;border-radius:var(--radius-sm);background:var(--surface-200);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform var(--duration-press) var(--ease-out)}
.ms-stepper__ctl button:active{transform:scale(.95)}
.ms-stepper__ctl button:disabled{opacity:.4;cursor:not-allowed}
.ms-stepper__value{min-width:88px;text-align:center;font:400 36px/40px var(--font-display);letter-spacing:-.01em}
.ms-stepper__value small{font:400 14px/1 var(--font-sans);color:var(--ink-muted);margin-left:2px}

@media (max-width:820px){
  .ms-fader{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .ms-fader:not(.ms-fader--vertical) .ms-fader__label{grid-column:1/-1;min-width:0}
  .ms-fader:not(.ms-fader--vertical) .ms-fader__track{grid-column:1}
  .ms-ptz{max-width:none}
}
@media (pointer:coarse){.ms-fader__cap{width:22px;margin-left:-11px}.ms-fader--vertical .ms-fader__cap{height:22px;margin-bottom:-11px;width:36px;margin-left:-18px}}
@media (prefers-reduced-motion:reduce){.ms-ptz__puck,.ms-fader.is-settling .ms-fader__cap,.ms-fader.is-settling .ms-fader__fill{transition:none!important}}

/* ---------- Compact rail ---------- */
.ms-nav__label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-rail__spacer{flex:1}
.ms-rail__collapse{margin-top:8px;align-self:flex-start}
.ms-wordmark__full{display:inline}
.ms-wordmark__mark{display:none}
.ms-shell--compact{grid-template-columns:76px minmax(0,1fr)}
.ms-shell--compact>.ms-rail{padding:18px 8px;align-items:center}
.ms-shell--compact>.ms-rail .ms-wordmark{padding:0 0 18px;font-size:26px}
.ms-shell--compact>.ms-rail .ms-wordmark__full{display:none}
.ms-shell--compact>.ms-rail .ms-wordmark__mark{display:inline}
.ms-shell--compact>.ms-rail .ms-nav{position:relative;width:44px;height:40px;padding:0;justify-content:center}
.ms-shell--compact>.ms-rail .ms-nav .ms-icon{width:18px;height:18px}
.ms-shell--compact>.ms-rail .ms-nav__label,.ms-shell--compact>.ms-rail .ms-nav__count{display:none}
.ms-shell--compact>.ms-rail .ms-nav[aria-current="page"]::after{position:absolute;top:6px;right:6px;margin:0;width:5px;height:5px}
.ms-shell--compact>.ms-rail .ms-rail__group{width:24px;height:1px;padding:0;margin:14px 0;background:var(--line);font-size:0;overflow:hidden}
.ms-shell--compact>.ms-rail .ms-rail__collapse{align-self:center}
.ms-shell--compact>.ms-rail .ms-rail__collapse .ms-icon{transform:scaleX(-1)}
@media (min-width:821px) and (max-width:1100px){
  .ms-shell:not(.ms-shell--expanded){grid-template-columns:76px minmax(0,1fr)}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail{padding:18px 8px;align-items:center}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-wordmark{padding:0 0 18px;font-size:26px}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-wordmark__full{display:none}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-wordmark__mark{display:inline}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-nav{position:relative;width:44px;height:40px;padding:0;justify-content:center}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-nav__label,.ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-nav__count{display:none}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-nav[aria-current="page"]::after{position:absolute;top:6px;right:6px;margin:0;width:5px;height:5px}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-rail__group{width:24px;height:1px;padding:0;margin:14px 0;background:var(--line);font-size:0;overflow:hidden}
  .ms-shell:not(.ms-shell--expanded)>.ms-rail .ms-rail__collapse{display:none}
}

/* Tooltip: delayed on first hover, instant while moving between items. Origin-aware. */
.ms-tooltip{position:fixed;z-index:80;max-width:240px;padding:6px 9px;border-radius:var(--radius-sm);background:var(--ink);color:var(--surface-100);font:500 12px/16px var(--font-sans);pointer-events:none;white-space:nowrap;opacity:0;transform:scale(.97);transition:opacity 125ms var(--ease-out),transform 125ms var(--ease-out)}
.ms-tooltip.is-on{opacity:1;transform:none}
.ms-tooltip.is-instant{transition-duration:0ms}
.ms-tooltip kbd{font:400 11px/1 var(--font-mono);opacity:.7;margin-left:8px}

/* Menu: a popover on desktop, an action sheet on phones. */
.ms-menu{position:fixed;z-index:70;min-width:200px;max-width:280px;padding:4px;border-radius:var(--radius-md);background:var(--surface-100);box-shadow:var(--shadow-md);opacity:0;transform:scale(.97);transform-origin:var(--origin,top left);transition:opacity 100ms var(--ease-out),transform 100ms var(--ease-out);pointer-events:none}
.ms-menu.is-open{opacity:1;transform:none;pointer-events:auto;transition-duration:160ms}
.ms-menu__item{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font:400 13px/18px var(--font-sans);text-align:left;cursor:pointer}
.ms-menu__item .ms-icon{color:var(--ink-muted)}
.ms-menu__item:focus-visible,.ms-menu__item.is-active{outline:none;background:var(--surface-200)}
@media (hover:hover) and (pointer:fine){.ms-menu__item:hover{background:var(--surface-200)}}
.ms-menu__item--danger,.ms-menu__item--danger .ms-icon{color:var(--status-danger)}
.ms-menu__item:disabled{opacity:.45;cursor:not-allowed}
.ms-menu__item kbd{margin-left:auto;font:400 11px/1 var(--font-mono);color:var(--ink-muted)}
.ms-menu__sep{height:1px;margin:4px 6px;background:var(--line)}

/* BottomSheet: phones. Drag the handle or the sheet down to dismiss; a quick flick is enough. */
.ms-bsheet-layer{position:fixed;inset:0;z-index:55;pointer-events:none}
.ms-bsheet-layer.is-open{pointer-events:auto}
.ms-bsheet-scrim{position:absolute;inset:0;background:rgba(15,15,14,.4);opacity:0;transition:opacity var(--duration-exit) var(--ease-out)}
.ms-bsheet-layer.is-open .ms-bsheet-scrim{opacity:1;transition-duration:var(--duration-base)}
.ms-bsheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;display:flex;flex-direction:column;background:var(--surface-100);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-lg);padding-bottom:env(safe-area-inset-bottom);transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform var(--duration-exit) var(--ease-out);touch-action:none}
.ms-bsheet-layer.is-open .ms-bsheet{transform:translateY(var(--drag,0px));visibility:visible;transition:transform var(--duration-base) var(--ease-drawer),visibility 0s}
.ms-bsheet{transition:transform var(--duration-exit) var(--ease-out),visibility 0s var(--duration-exit)}
.ms-bsheet.is-dragging{transition:none!important}
.ms-bsheet__handle{display:grid;place-items:center;height:24px;cursor:grab}
.ms-bsheet__handle::before{content:"";width:36px;height:4px;border-radius:2px;background:var(--line-strong);opacity:.6}
.ms-bsheet__head{padding:0 20px 8px}
.ms-bsheet__title{font:400 26px/30px var(--font-display);letter-spacing:-.01em;margin:0}
.ms-bsheet__sub{font:400 13px/18px var(--font-sans);color:var(--ink-muted);margin:2px 0 0}
.ms-bsheet__body{overflow:auto;padding:8px 20px 20px;display:flex;flex-direction:column;gap:16px;touch-action:pan-y}
.ms-bsheet__actions{display:flex;flex-direction:column;gap:8px;padding:0 20px 16px}
.ms-bsheet__actions .ms-btn{width:100%;height:48px;font-size:15px}
@media (min-width:821px){.ms-bsheet{left:50%;right:auto;width:440px;margin-left:-220px;bottom:16px;border-radius:var(--radius-lg)}}

/* BottomTabBar: primary navigation on phones. */
.ms-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:var(--glass-fill);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);box-shadow:inset 0 1px 0 var(--line)}
.ms-tabbar__item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border:0;background:none;color:var(--ink-muted);font:500 11px/14px var(--font-sans);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color var(--duration-quick) var(--ease-out),transform var(--duration-press) var(--ease-out)}
.ms-tabbar__item .ms-icon{width:20px;height:20px}
.ms-tabbar__item:active{transform:scale(.95)}
.ms-tabbar__item[aria-current="page"]{color:var(--ink)}
.ms-tabbar__item[aria-current="page"]::before{content:"";position:absolute;top:-6px;width:20px;height:2px;border-radius:1px;background:var(--accent)}
.ms-tabbar__badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-xs);background:var(--status-danger);color:#fff;font:500 10px/16px var(--font-sans);text-align:center}

/* AppBar: phone page header with back, title and actions. The large title collapses into the bar on scroll. */
.ms-appbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;min-height:52px;padding:4px 8px;background:transparent;box-shadow:inset 0 -1px 0 transparent;transition:box-shadow var(--duration-quick) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
.ms-appbar.is-scrolled,.ms-appbar--plain{background:var(--glass-fill);backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6)}
.ms-appbar.is-scrolled{box-shadow:inset 0 -1px 0 var(--line)}
.ms-appbar__title{text-align:center;font:600 15px/20px var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity var(--duration-quick) var(--ease-out),transform var(--duration-quick) var(--ease-out)}
.ms-appbar.is-scrolled .ms-appbar__title,.ms-appbar--plain .ms-appbar__title{opacity:1;transform:none}
.ms-appbar__actions{display:flex;justify-content:flex-end;gap:2px;min-width:44px}
.ms-appbar .ms-icon-btn{width:44px;height:44px}
.ms-appbar .ms-icon-btn .ms-icon{width:20px;height:20px}
.ms-back .ms-icon{transform:rotate(90deg)}
.ms-largetitle{padding:4px 16px 12px}
.ms-largetitle h1{font:400 34px/38px var(--font-display);letter-spacing:-.015em;margin:0}
.ms-largetitle p{font:400 13px/18px var(--font-sans);color:var(--ink-muted);margin:2px 0 0}

/* ListGroup and ListRow: settings and device lists on phones (and in sheets on desktop). */
.ms-list{display:flex;flex-direction:column;gap:6px}
.ms-list__title{font:500 13px/18px var(--font-sans);color:var(--ink-muted);padding:0 4px}
.ms-list__body{background:var(--surface-100);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.ms-list__foot{font:400 12px/16px var(--font-sans);color:var(--ink-muted);padding:0 4px}
.ms-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 16px;border:0;background:none;color:var(--ink);font:400 15px/20px var(--font-sans);text-align:left;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--duration-quick) var(--ease-out)}
.ms-row+.ms-row::before{content:"";position:absolute;top:0;right:0;left:var(--inset,16px);height:1px;background:var(--line)}
button.ms-row,a.ms-row{cursor:pointer}
button.ms-row:active,a.ms-row:active{background:var(--surface-200)}
@media (hover:hover) and (pointer:fine){button.ms-row:hover,a.ms-row:hover{background:var(--surface-200)}}
.ms-row__icon{color:var(--ink-muted);flex:none}
.ms-row__icon .ms-icon{width:20px;height:20px}
.ms-row__text{flex:1;min-width:0}
.ms-row__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-row__detail{font:400 12px/16px var(--font-sans);color:var(--ink-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-row__value{font:400 14px/20px var(--font-sans);color:var(--ink-muted);white-space:nowrap}
.ms-row__chev{color:var(--ink-muted);flex:none}
.ms-row__chev .ms-icon{transform:rotate(-90deg)}
.ms-row--danger{color:var(--status-danger)}

/* SearchField */
.ms-search{position:relative;display:flex;align-items:center}
.ms-search>.ms-icon{position:absolute;left:12px;color:var(--ink-muted);pointer-events:none}
.ms-search input{width:100%;height:40px;padding:0 40px 0 36px;border:0;border-radius:var(--radius-sm);background:var(--surface-200);color:var(--ink);font:400 15px/20px var(--font-sans);-webkit-appearance:none;appearance:none}
.ms-search input::placeholder{color:var(--ink-muted)}
.ms-search input:focus{outline:none;box-shadow:0 0 0 2px var(--focus)}
.ms-search input::-webkit-search-cancel-button{display:none}
.ms-search__clear{position:absolute;right:4px;width:32px;height:32px}
.ms-search__clear[hidden]{display:none}

/* FilterChips: square-cornered toggles in a horizontal row that scrolls on phones. */
.ms-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.ms-chips::-webkit-scrollbar{display:none}
.ms-chip-btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:var(--radius-xs);background:var(--surface-100);box-shadow:var(--shadow-sm);color:var(--ink);font:500 13px/18px var(--font-sans);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-quick) var(--ease-out),color var(--duration-quick) var(--ease-out),transform var(--duration-press) var(--ease-out)}
.ms-chip-btn:active{transform:scale(.97)}
.ms-chip-btn[aria-pressed="true"]{background:var(--action);color:var(--on-action);box-shadow:none}
.ms-chip-btn span{color:inherit;opacity:.6;font-weight:400}
@media (pointer:coarse){.ms-chip-btn{height:36px}}

/* Skeleton: the shape of what is loading. A slow, subtle pulse; still under reduced motion. */
@keyframes ms-pulse{50%{opacity:.55}}
.ms-skel{display:block;border-radius:var(--radius-xs);background:var(--surface-200);animation:ms-pulse 1.4s var(--ease-in-out) infinite}
.ms-skel-card{display:flex;flex-direction:column;gap:12px;padding:var(--space-5);border-radius:var(--radius-md);background:var(--surface-100);box-shadow:var(--shadow-sm)}

/* Phone shell: bottom tab bar instead of the rail. */
@media (max-width:820px){
  .ms-shell--tabs>.ms-rail{display:none}
  .ms-shell--tabs .ms-main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .ms-shell--tabs .ms-topbar .ms-icon-btn[aria-label="Open menu"]{display:none}
  .ms-toaster{bottom:calc(76px + env(safe-area-inset-bottom));right:50%;transform:translateX(50%)}
}
@media (min-width:821px){.ms-tabbar{display:none}}
@media (prefers-reduced-motion:reduce){.ms-skel{animation:none}.ms-bsheet,.ms-bsheet-layer.is-open .ms-bsheet,.ms-menu{transition:opacity var(--duration-quick) linear!important}.ms-bsheet-layer:not(.is-open) .ms-bsheet{opacity:0}}

.ms-shell--no-topbar .ms-topbar{display:none!important}
@media (max-width:820px){.ms-shell--no-topbar .ms-main{padding-top:0}}
@media (max-width:820px){
  .ms-main .ms-appbar{margin:0 -16px}
  .ms-main .ms-largetitle{padding:4px 0 16px}
}

/* NavGrid: the phone "More" panel. Sections as a grid of icon tiles. The only place icon tiles are allowed. */
.ms-navgrid{display:flex;flex-direction:column;gap:20px}
.ms-navgrid__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ms-navgrid__hint{font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.ms-navgrid__section{display:flex;flex-direction:column;gap:10px}
.ms-navgrid__title{font:500 13px/18px var(--font-sans);color:var(--ink-muted);margin:0}
.ms-navgrid__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:400px){.ms-navgrid__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ms-navtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px 10px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font:500 12px/16px var(--font-sans);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;transition:background-color var(--duration-quick) var(--ease-out),transform var(--duration-press) var(--ease-out)}
.ms-navtile:active{transform:scale(.96);background:var(--surface-200)}
@media (hover:hover) and (pointer:fine){.ms-navtile:hover{background:var(--surface-200)}}
.ms-navtile__icon{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-md);background:var(--surface-200);color:var(--ink)}
.ms-navtile__icon .ms-icon{width:22px;height:22px}
.ms-navtile__label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-navtile[aria-current="page"] .ms-navtile__icon{background:var(--action);color:var(--on-action)}
.ms-navtile[aria-current="page"] .ms-navtile__label::after{content:"";display:inline-block;width:5px;height:5px;margin-left:4px;border-radius:50%;background:var(--accent);vertical-align:2px}
.ms-navtile__badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-xs);background:var(--status-danger);color:#fff;font:500 11px/18px var(--font-sans);box-shadow:0 0 0 2px var(--surface-100)}
.ms-navtile__pin{position:absolute;top:-4px;left:-4px;display:none;width:20px;height:20px;border-radius:var(--radius-xs);background:var(--surface-100);box-shadow:inset 0 0 0 1.5px var(--line-strong);color:var(--on-action)}
.ms-navtile__pin .ms-icon{width:14px;height:14px;margin:3px}
.ms-navgrid--editing .ms-navtile__pin{display:block}
.ms-navgrid--editing .ms-navtile__badge{display:none}
.ms-navgrid--editing .ms-navtile[aria-pressed="true"] .ms-navtile__pin{background:var(--action);box-shadow:none}
.ms-navgrid--editing .ms-navtile[aria-pressed="true"] .ms-navtile__icon{box-shadow:0 0 0 2px var(--action)}
.ms-navgrid--editing .ms-navtile[aria-pressed="false"][data-full="true"]{opacity:.45}
.ms-navgrid__empty{font:400 14px/20px var(--font-sans);color:var(--ink-muted);padding:8px 4px}
@media (prefers-reduced-motion:reduce){.ms-navtile:active{transform:none}}

/* Outside: marketing and sign-in. Full-bleed Scene, scrim, top bar, serif headline, glass card. */
.ms-outside{background:var(--surface-000);color:var(--ink);font-family:var(--font-sans)}
.ms-outside__stage>.ms-scene{height:auto;min-height:100svh}
.ms-outside--tall .ms-outside__stage>.ms-scene{min-height:max(560px,86svh)}
.ms-outside--band .ms-outside__stage>.ms-scene{min-height:max(380px,52svh)}
.ms-outside .ms-scene__slot{position:relative;min-height:inherit;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:var(--space-7);padding:36px 48px 56px}
.ms-outside__scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 0% 100%,rgba(24,18,14,.55) 0%,rgba(24,18,14,.25) 40%,rgba(24,18,14,0) 70%),linear-gradient(180deg,rgba(24,18,14,.5),rgba(24,18,14,.18) 12%,rgba(24,18,14,0) 24%)}
.ms-outside__top{grid-column:1/-1;position:relative;z-index:1;display:flex;align-items:center;gap:28px;color:#fff}
.ms-outside__top .ms-outside__home{margin-right:auto;color:inherit;text-decoration:none}
.ms-outside__top .ms-wordmark{font-size:26px;text-shadow:0 1px 18px rgba(0,0,0,.2)}
.ms-outside__nav{display:flex;align-items:center;gap:28px;font:500 14px/20px var(--font-sans)}
.ms-outside__nav a{color:inherit;text-decoration:none;text-underline-offset:3px}
.ms-outside__nav a[aria-current="page"]{text-decoration:underline}
@media (hover:hover) and (pointer:fine){.ms-outside__nav a:hover{text-decoration:underline}}
.ms-outside__top .ms-outside__action{padding:8px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,.92);color:#1b1b19;font:500 14px/20px var(--font-sans);text-decoration:none;white-space:nowrap;transition:transform var(--duration-press) var(--ease-out),background-color var(--duration-quick) var(--ease-out)}
.ms-outside__action:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.ms-outside__top .ms-outside__action:hover{background:#fff}}
.ms-outside__hero{grid-column:1;grid-row:2;align-self:end;position:relative;z-index:1;max-width:560px;padding-top:var(--space-7);color:#fff}
.ms-outside__title{font:400 76px/74px var(--font-display);letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.18)}
.ms-outside--band .ms-outside__title{font-size:60px;line-height:60px}
.ms-outside__body{font:400 17px/26px var(--font-sans);margin:0;max-width:440px}
.ms-outside__card{grid-column:2;grid-row:2;align-self:center;position:relative;z-index:1;padding-right:8px}
.ms-outside__card:empty{display:none}
.ms-outside__card .ms-glass--card{width:380px}
.ms-outside__main{max-width:1120px;margin:0 auto;padding:0 48px}
.ms-osection{padding:var(--space-8) 0 0}
.ms-osection__title{font:400 44px/48px var(--font-display);letter-spacing:-.015em;margin:0 0 12px;max-width:22ch;text-wrap:balance}
.ms-osection__body{font:400 17px/26px var(--font-sans);color:var(--ink);margin:0 0 var(--space-6);max-width:62ch}
.ms-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-7)}
.ms-facts__row{padding:var(--space-5) 0;border-top:1px solid var(--line)}
.ms-facts dt{font:400 26px/30px var(--font-display);letter-spacing:-.01em;margin:0 0 6px}
.ms-facts dd{margin:0;font:400 16px/24px var(--font-sans);color:var(--ink);max-width:60ch}
.ms-outside__foot{max-width:1120px;margin:var(--space-8) auto 0;padding:var(--space-6) 48px var(--space-7);box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;font:400 14px/20px var(--font-sans)}
.ms-outside__foot .ms-wordmark{margin-right:auto}
.ms-outside__foot nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.ms-outside__foot nav a{color:var(--ink);text-decoration:none;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.ms-outside__foot nav a:hover{text-decoration:underline}}
.ms-outside__foot p{width:100%;margin:0;font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
@media (max-width:820px){
  .ms-outside .ms-scene__slot{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:20px 20px 32px}
  .ms-outside__scrim{background:linear-gradient(0deg,rgba(24,18,14,.6),rgba(24,18,14,.25) 60%,rgba(24,18,14,.45))}
  .ms-outside__top{flex-wrap:wrap;row-gap:12px;gap:12px 20px}
  .ms-outside__nav{order:3;width:100%;gap:20px}
  .ms-outside__title,.ms-outside--band .ms-outside__title{font-size:48px;line-height:50px;margin-bottom:12px}
  .ms-outside__body{font-size:16px;line-height:24px}
  .ms-outside__card{grid-column:1;grid-row:3;align-self:end;padding:var(--space-6) 0 0}
  .ms-outside__card .ms-glass--card{width:auto;max-width:none}
  .ms-outside__card .ms-glass__title{font-size:36px;line-height:40px}
  .ms-outside__main{padding:0 20px}
  .ms-osection{padding-top:var(--space-7)}
  .ms-osection__title{font-size:34px;line-height:38px}
  .ms-facts{grid-template-columns:minmax(0,1fr)}
  .ms-outside__foot{margin-top:var(--space-7);padding:var(--space-6) 20px var(--space-7)}
}
@media (prefers-reduced-motion:reduce){.ms-outside__action:active{transform:none}}