/* MeasureScale components — v0.1. Needs tokens.css first. */

/* Base */
*{box-sizing:border-box}
body{margin:0;background:var(--ms-paper);color:var(--ms-ink);font-family:var(--ms-font);font-size:var(--ms-text-body);line-height:var(--ms-lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;color:inherit;font-weight:var(--ms-w-bold);text-wrap:balance}
.ms-display{font-size:var(--ms-text-display);line-height:var(--ms-lh-tight);letter-spacing:var(--ms-track-display)}
.ms-hero-title{font-size:var(--ms-text-hero);line-height:1.02;letter-spacing:-.035em}
.ms-h1{font-size:var(--ms-text-h1);line-height:var(--ms-lh-tight);letter-spacing:var(--ms-track-display)}
.ms-h2{font-size:var(--ms-text-h2);line-height:var(--ms-lh-heading);letter-spacing:var(--ms-track-heading)}
.ms-h3{font-size:var(--ms-text-h3);line-height:1.3;letter-spacing:-.01em;font-weight:var(--ms-w-semibold)}
.ms-h4{font-size:var(--ms-text-h4);line-height:1.35;font-weight:var(--ms-w-semibold)}
.ms-lead{font-size:var(--ms-text-lead);line-height:1.6;color:var(--ms-ink-soft);max-width:60ch}
.ms-small{font-size:var(--ms-text-small)}
.ms-caption{font-size:var(--ms-text-caption);font-weight:var(--ms-w-medium);color:var(--ms-mute)}
/* No tabular figures: in Fustat, tnum also widens the space and comma ("12 , 480").
   Number columns are right-aligned instead. */
.ms-blue-large{color:var(--ms-blue);font-weight:var(--ms-w-bold)} /* only at h2 size or larger */

/* Eyebrow: ink text, brand comes from the sky dot (blue text this small would fail) */
.ms-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--ms-text-caption);font-weight:var(--ms-w-semibold);letter-spacing:var(--ms-track-eyebrow);text-transform:uppercase;color:var(--ms-ink)}
.ms-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ms-sky);box-shadow:10px 0 0 var(--ms-blue);margin-right:10px}
.ms-night .ms-eyebrow{color:var(--ms-night-text)}

/* Links: ink text, blue underline */
.ms-link,.ms-prose a{color:var(--ms-ink);text-decoration:underline;text-decoration-color:var(--ms-blue);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-thickness var(--ms-fast) var(--ms-ease)}
.ms-link:hover,.ms-prose a:hover{text-decoration-thickness:3px}
.ms-night .ms-link{color:var(--ms-night-text);text-decoration-color:var(--ms-sky)}

:focus-visible{outline:none;box-shadow:var(--ms-focus);border-radius:var(--ms-r-sm)}

/* Icons (Phosphor, 256 viewBox) */
.ms-i{width:1em;height:1em;flex:none;fill:currentColor}

/* Buttons: pills, like the logo's circles.
   Hover = a colour layer wipes in from the left and leaves to the right (pattern from agiloft.com),
   plus a slight press. The layer is ::before behind the label (isolation keeps it above the fill). */
.ms-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:var(--ms-r-pill);font:var(--ms-w-bold) var(--ms-text-button)/1 var(--ms-font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 300ms cubic-bezier(.25,.46,.45,.94),box-shadow var(--ms-fast) var(--ms-ease),color 300ms cubic-bezier(.25,.46,.45,.94)}
.ms-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ms-btn-wipe,var(--ms-ink));transform:scaleX(0);transform-origin:right;transition:transform 350ms ease}
.ms-btn:is(:hover,:focus-visible)::before{transform:scaleX(1);transform-origin:left}
.ms-btn:hover{transform:scale(.975)}
.ms-btn:active{transform:scale(.965)}
.ms-btn:focus-visible{border-radius:var(--ms-r-pill)}
.ms-btn .ms-i{font-size:20px}
/* Arrow swap: the arrow leaves to the right while a second one slides in from the left */
.ms-btn__arrow{position:relative;display:inline-block;width:20px;height:20px;overflow:hidden;flex:none}
.ms-btn__arrow .ms-i{position:absolute;inset:0;transition:transform 300ms cubic-bezier(.25,.46,.45,.94)}
.ms-btn__arrow .ms-i+.ms-i{transform:translateX(-24px)}
.ms-btn:is(:hover,:focus-visible) .ms-btn__arrow .ms-i:first-child{transform:translateX(24px)}
.ms-btn:is(:hover,:focus-visible) .ms-btn__arrow .ms-i+.ms-i{transform:none}
.ms-btn--primary{background:var(--ms-blue);color:#fff;--ms-btn-wipe:var(--ms-ink)}
.ms-btn--primary:hover{color:#fff}
.ms-btn--secondary{background:var(--ms-surface);color:var(--ms-ink);box-shadow:inset 0 0 0 1.5px var(--ms-line-strong);--ms-btn-wipe:var(--ms-tint-strong)}
.ms-btn--secondary:hover{box-shadow:inset 0 0 0 1.5px var(--ms-ink)}
.ms-btn--night{background:var(--ms-sky);color:var(--ms-ink);--ms-btn-wipe:#fff}
/* Sizes. Small labels can't sit on --ms-blue (4.33:1 passes only at 19px bold), so --sm is always ink. */
.ms-btn--lg{min-height:56px;padding:0 34px}
.ms-btn--sm{min-height:40px;padding:0 18px;font-size:var(--ms-text-small);font-weight:var(--ms-w-semibold);background:var(--ms-ink);color:#fff;--ms-btn-wipe:var(--ms-ink-soft)}
.ms-btn--sm:hover{color:#fff}
.ms-btn[disabled],.ms-btn[aria-disabled="true"]{background:var(--ms-line-soft);color:var(--ms-mute);box-shadow:none;cursor:not-allowed;transform:none}
.ms-btn[disabled]::before,.ms-btn[aria-disabled="true"]::before{display:none}

/* Form fields */
.ms-field{display:grid;gap:6px}
.ms-label{font-size:var(--ms-text-small);font-weight:var(--ms-w-semibold)}
.ms-hint{font-size:var(--ms-text-caption);color:var(--ms-mute)}
.ms-input{width:100%;min-height:48px;padding:0 16px;border:1.5px solid var(--ms-border-input);border-radius:var(--ms-r-md);background:var(--ms-surface);color:var(--ms-ink);font:var(--ms-w-regular) var(--ms-text-body) var(--ms-font)}
.ms-input::placeholder{color:var(--ms-mute)}
.ms-input:hover{border-color:var(--ms-ink-soft)}
.ms-input:focus-visible{border-color:var(--ms-blue);border-radius:var(--ms-r-md)}
.ms-input[aria-invalid="true"]{border-color:var(--ms-bad)}
.ms-error{display:flex;align-items:center;gap:6px;font-size:var(--ms-text-caption);font-weight:var(--ms-w-semibold);color:var(--ms-bad)}
.ms-inline-form{display:flex;flex-wrap:wrap;gap:8px}
.ms-inline-form .ms-input{flex:1 1 220px;border-radius:var(--ms-r-pill);padding:0 20px}

/* Chips */
.ms-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--ms-r-pill);font-size:var(--ms-text-caption);font-weight:var(--ms-w-semibold);line-height:1.4;white-space:nowrap}
.ms-chip .ms-i{font-size:14px}
.ms-chip--ok{background:var(--ms-ok-tint);color:var(--ms-ok)}
.ms-chip--warn{background:var(--ms-warn-tint);color:var(--ms-warn)}
.ms-chip--bad{background:var(--ms-bad-tint);color:var(--ms-bad)}
.ms-chip--info{background:var(--ms-tint);color:var(--ms-ink)}
.ms-chip--neutral{background:var(--ms-line-soft);color:var(--ms-ink-soft)}
.ms-chip--sample{background:var(--ms-surface);color:var(--ms-mute);box-shadow:inset 0 0 0 1px var(--ms-line)}

/* Cards */
.ms-card{background:var(--ms-surface);border-radius:var(--ms-r-lg);box-shadow:var(--ms-shadow-md);padding:var(--ms-s-6)}
.ms-card--flat{box-shadow:inset 0 0 0 1px var(--ms-line)}
.ms-card--visual{border-radius:var(--ms-r-xl);box-shadow:var(--ms-shadow-lg),inset 0 0 0 1px var(--ms-line-soft);padding:0;overflow:hidden}
.ms-icon-chip{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ms-tint);color:var(--ms-blue);font-size:22px}

/* Data: metric tile, table, bars, legend */
.ms-metric{border:1px solid var(--ms-line-soft);border-radius:var(--ms-r-md);padding:10px 12px;background:var(--ms-surface)}
.ms-metric__k{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:var(--ms-w-medium);color:var(--ms-mute)}
.ms-metric__k i{width:8px;height:8px;border-radius:50%}
.ms-metric__v{font-size:22px;font-weight:var(--ms-w-bold);letter-spacing:-.01em}
.ms-metric__d{font-size:13px;font-weight:var(--ms-w-semibold)}
.ms-up{color:var(--ms-ok)} .ms-down{color:var(--ms-bad)}
.ms-table{width:100%;border-collapse:collapse;font-size:var(--ms-text-small)}
.ms-table th{font-size:12px;font-weight:var(--ms-w-semibold);color:var(--ms-mute);text-align:left;padding:6px 0;border-bottom:1px solid var(--ms-line)}
.ms-table td{padding:8px 0;border-bottom:1px solid var(--ms-line-soft)}
.ms-table tr:last-child td{border-bottom:0}
.ms-table .n{text-align:right;padding-left:var(--ms-s-4);white-space:nowrap}
.ms-url{font-family:var(--ms-mono);font-size:.85em;color:var(--ms-ink-soft)}
.ms-bar{display:grid;grid-template-columns:minmax(72px,auto) 1fr 48px;gap:12px;align-items:center;font-size:var(--ms-text-small)}
.ms-bar__track{height:8px;border-radius:var(--ms-r-pill);background:var(--ms-line-soft);overflow:hidden}
.ms-bar__fill{display:block;height:100%;border-radius:var(--ms-r-pill);background:var(--ms-clicks)}
.ms-bar__v{text-align:right;font-weight:var(--ms-w-semibold)}
.ms-legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--ms-text-caption);color:var(--ms-mute)}
.ms-legend span{display:inline-flex;align-items:center;gap:8px}
.ms-legend i{width:14px;height:3px;border-radius:2px}

/* Product visual: AI answer */
.ms-answer__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ms-line-soft);font-size:var(--ms-text-caption);color:var(--ms-mute)}
.ms-answer__bar .dots{display:flex;gap:6px;margin-right:4px}
.ms-answer__bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--ms-line)}
.ms-answer__bar .ms-chip{margin-left:auto}
.ms-answer__ask{display:flex;justify-content:flex-end;padding:18px 18px 6px}
.ms-answer__ask p{margin:0;background:var(--ms-tint);padding:10px 14px;border-radius:16px 16px 4px 16px;max-width:85%}
.ms-answer__body{padding:10px 18px 20px;display:grid;gap:14px}
.ms-tool{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-size:var(--ms-text-caption);color:var(--ms-mute);background:var(--ms-paper);border:1px solid var(--ms-line-soft);padding:4px 10px;border-radius:var(--ms-r-pill)}
.ms-tool .ms-i{color:var(--ms-ok);font-size:15px}
.ms-next{display:flex;gap:10px;margin:0;background:var(--ms-tint);border-radius:var(--ms-r-md);padding:12px 14px;font-size:var(--ms-text-small);color:var(--ms-ink-soft)}
.ms-next .ms-i{font-size:20px;color:var(--ms-blue);margin-top:1px}
.ms-next b{color:var(--ms-ink)}

/* Product visual: alert */
.ms-alert{display:grid;gap:10px}
.ms-alert__head{display:flex;align-items:center;gap:10px;font-size:var(--ms-text-caption);color:var(--ms-mute)}
.ms-alert__head b{color:var(--ms-ink)}
.ms-alert__body{border-left:3px solid var(--ms-bad);padding-left:12px;color:var(--ms-ink-soft)}
.ms-alert__body p{margin:0}

/* Toggle (billing period) */
.ms-toggle{display:inline-flex;background:var(--ms-surface);border-radius:var(--ms-r-pill);padding:4px;box-shadow:inset 0 0 0 1px var(--ms-line)}
.ms-toggle button{font:var(--ms-w-semibold) var(--ms-text-small) var(--ms-font);border:0;background:none;color:var(--ms-ink-soft);padding:0 18px;min-height:40px;border-radius:var(--ms-r-pill);cursor:pointer}
.ms-toggle button[aria-pressed="true"]{background:var(--ms-ink);color:#fff}

/* FAQ */
.ms-faq details{border-bottom:1px solid var(--ms-line)}
.ms-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-weight:var(--ms-w-semibold);font-size:var(--ms-text-h4)}
.ms-faq summary::-webkit-details-marker{display:none}
.ms-faq summary .ms-i{font-size:20px;color:var(--ms-mute);transition:transform var(--ms-base) var(--ms-ease)}
.ms-faq details[open] summary .ms-i{transform:rotate(45deg)}
.ms-faq details p{margin:0;padding:0 0 20px;color:var(--ms-ink-soft);max-width:var(--ms-max-text)}

/* Night sections */
.ms-night{background:var(--ms-night);color:var(--ms-night-text)}
.ms-night .ms-lead{color:var(--ms-night-mute)}
.ms-night .ms-card{background:var(--ms-night-raised);box-shadow:inset 0 0 0 1px var(--ms-night-line)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
}