/* Eumneme components. Load after tokens.css. Replaces the retired glass.css and sky.js (owner order 2026-10-27).
   Flat paper, white cards on hairlines, solid ink buttons, no blur, no gradients, no accent hue.
   Class names from the earlier system (.glass-card, .tape, .btn--frosted, .seg, .phone) are kept so existing
   page markup renders in the new look without a rewrite. */

/* ---------- Ground ---------- */
html{background:var(--mk-paper);background-color:var(--mk-paper)}
body{background:transparent}
.mesh-sky{display:none}

/* ---------- Cards ---------- */
.glass,.glass-card{position:relative;background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-r-card);box-shadow:none}
.glass--sheet{background:var(--mk-card)}
.glass-control,.glass-input{background:var(--mk-card);border:1px solid var(--mk-line)}
.glass-group > * + *{border-top:1px solid var(--mk-line)}

/* ---------- Buttons ----------
   Primary: solid ink, white label, 44px. Secondary (.btn--white, .btn--frosted, .tape--white): white with a 1px line.
   `.btn` and the legacy `.tape--button` share one look. */
.tape,.btn,.pill{--tape-surface:var(--mk-ink);--tape-letter:#FFFFFF;display:inline-block;box-sizing:border-box;padding:var(--s-1) var(--s-3);border:1px solid transparent;border-radius:var(--mk-r-pill);background:var(--tape-surface);color:var(--tape-letter);font:500 var(--t-sm)/var(--lh-ui) var(--font-ui);letter-spacing:0;text-transform:none;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
/* The label colour is pinned with a doubled class so a descendant rule such as `.card a{color:ink}` can never turn a black button into ink on ink. */
.btn.btn,.tape--button.tape--button{color:var(--tape-letter)}
.tape--white{--tape-surface:#FFFFFF;--tape-letter:var(--mk-ink);border-color:var(--mk-line-strong)}
.tape--s{font-size:var(--t-xs);line-height:18px;padding:var(--s-1) var(--s-3)}
.tape--m{font-size:var(--t-sm)}
.tape--l{padding:var(--s-2) var(--s-4);font-size:var(--t-md);line-height:var(--lh-ui-lg)}
.tape--xl{padding:var(--s-2) var(--s-5);font-size:var(--t-lg);line-height:28px}
/* A big non-button tape (a page statement) is serif display text, not a pill. */
.tape--xl:not(.tape--button){display:inline;padding:0;border:0;border-radius:0;background:none;color:var(--mk-ink);font:italic 400 clamp(1.75rem,1.2rem + 1.6vw,2.5rem)/1.15 var(--font-display);letter-spacing:-.01em;overflow-wrap:normal}
.tape--date{margin-inline-start:var(--s-2);padding:2px var(--s-2);background:var(--pill-frosted);color:var(--mk-ink-2);font-size:var(--t-2xs);line-height:16px;white-space:nowrap;vertical-align:middle}
.tape--tilt-l,.tape--tilt-r{rotate:0deg}

/* An inline tape inside a display heading is an italic serif accent. */
.tape--inline,h1 .tape,h2 .tape,h3 .tape{display:inline;padding:0;border:0;border-radius:0;background:none;color:inherit;font:italic 400 1em var(--font-display);line-height:inherit;letter-spacing:inherit;white-space:normal;overflow-wrap:normal}
.section__title--tape .tape,.part h3 .tape,.week__day h3 .tape{font-size:inherit}

.tape--button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--mk-btn-h);min-inline-size:44px;padding:0 var(--s-5);border-radius:var(--mk-r-btn);font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);letter-spacing:-.005em;text-align:center;cursor:pointer;touch-action:manipulation;max-inline-size:100%;transition:background-color var(--dur-2) var(--mk-ease),border-color var(--dur-2) var(--mk-ease),color var(--dur-2) var(--mk-ease),transform var(--dur-1) var(--ease-press)}
.tape--button.tape--s{min-height:var(--tap-min);padding:0 var(--s-4);font-size:var(--t-sm)}
.tape--button.tape--m{min-height:var(--mk-btn-h)}
@media (hover:hover){
  .tape--button:not(.tape--white):not(:disabled):not([aria-disabled="true"]):hover,.btn:not(.btn--white):not(.btn--frosted):not(:disabled):not([aria-disabled="true"]):hover{--tape-surface:#2A2926}
  .tape--white.tape--button:hover,.btn--white:hover,.btn--frosted:hover{--tape-surface:var(--mk-paper);border-color:var(--mk-ink)}
}
.tape--button:not(:disabled):not([aria-disabled="true"]):active,.btn:not(:disabled):not([aria-disabled="true"]):active{transform:scale(var(--press-scale))}
.tape--button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tape--button:disabled,.tape--button[aria-disabled="true"],.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;--tape-surface:var(--mk-paper-2);--tape-letter:var(--mk-muted);border-color:var(--mk-line)}
.btn[aria-busy="true"]{cursor:progress}
.btn--cta{min-height:48px;padding:0 var(--s-8)}
.btn--white,.btn--frosted,.pill--frosted{--tape-surface:#FFFFFF;--tape-letter:var(--mk-ink);border-color:var(--mk-line-strong)}
/* On the night band the primary button turns white. */
.btn--onnight{--tape-surface:#FFFFFF;--tape-letter:var(--mk-ink)}
@media (hover:hover){.btn--onnight:hover{--tape-surface:var(--mk-paper-2)!important}}
.chip-white{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s-3);border:1px solid var(--mk-line);border-radius:var(--mk-r-pill);background:#FFFFFF;color:var(--mk-ink);font:500 var(--t-xs)/var(--lh-ui) var(--font-ui);text-decoration:none}
.btn-glass-circle{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#FFFFFF;border:1px solid var(--mk-line);color:var(--mk-ink)}

/* ---------- Segmented control ---------- */
.seg{position:relative;display:inline-flex;align-items:center;gap:0;height:44px;padding:0;border:0;background:none}
.seg a,.seg button{display:inline-flex;align-items:center;height:44px;padding:0 var(--s-4);border:0;border-radius:var(--mk-r-btn);background:none;color:var(--mk-ink-2);font:500 var(--t-sm)/1 var(--font-ui);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color var(--dur-2) var(--mk-ease)}
.seg a:hover{color:var(--mk-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.seg a[aria-current],.seg a.is-on{color:var(--mk-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}
.seg a:focus-visible,.seg button:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- Bubbles, event chips, Composer (used inside labelled illustrations) ---------- */
.bubble{max-width:80%;padding:12px 14px;border-radius:var(--r-bubble);font:400 var(--t-sm)/1.45 var(--font-ui);color:var(--mk-ink)}
.bubble--assistant{align-self:flex-start;background:#FFFFFF;border:1px solid var(--mk-line)}
.bubble--user{align-self:flex-end;background:var(--mk-ink);color:#FFFFFF}
.event-chip{display:inline-flex;align-items:center;gap:var(--s-2);align-self:flex-start;min-height:32px;padding:0 var(--s-3);border-radius:var(--mk-r-pill);background:var(--mk-ink);color:#FFFFFF;font:500 var(--t-xs)/var(--lh-ui) var(--font-ui)}
.event-chip svg{width:14px;height:14px;flex:none;fill:currentColor}
.composer{display:flex;align-items:center;gap:var(--s-3);height:48px;padding:0 var(--s-4);border-radius:var(--mk-r-btn);background:#FFFFFF;border:1px solid var(--mk-line);color:var(--mk-muted);font:400 var(--t-sm)/1 var(--font-ui)}
.composer span{flex:1}
.composer svg{width:20px;height:20px;flex:none;stroke:var(--mk-muted);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- ActionRow and Panel ---------- */
.action-row{display:flex;align-items:center;gap:var(--s-3);min-height:64px;padding:0 var(--s-5);font:400 var(--t-md)/1.35 var(--font-ui);color:var(--mk-ink)}
.action-row .chip-white{flex:none}
.action-row span{min-width:0}
.panel{padding:var(--s-5)}
.panel__head{display:flex;align-items:center;gap:var(--s-2);margin:0 0 var(--s-4);font:400 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--mk-ink-2)}
.panel__head svg{width:20px;height:20px;flex:none;stroke:var(--mk-muted);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel__num{margin:0;font:500 40px/1.05 var(--font-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--mk-ink)}
.panel__line{margin:0;font:400 var(--t-md)/1.4 var(--font-ui);color:var(--mk-ink)}
.panel__line span{color:var(--mk-ink-2)}
.panel__bars{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;height:72px;margin:var(--s-4) 0}
.panel__bars i{flex:0 0 8px;border-radius:3px;background:var(--mk-line-strong)}
.panel .chip-white{margin-top:var(--s-4)}
.panel__bars i:last-child{background:var(--mk-ink)}
.panel__track{height:6px;margin:var(--s-3) 0;border-radius:3px;background:var(--mk-line);overflow:hidden}
.panel__track i{display:block;height:100%;border-radius:3px;background:var(--mk-ink)}

/* PhoneIllustration: a drawn phone with sample content, always labelled as an illustration (never a screenshot). */
.phone-fig{margin:0;justify-self:center;width:min(100%,380px)}
.phone{container-type:inline-size;position:relative;display:flex;flex-direction:column;gap:var(--s-3);height:min(720px,calc(100svh - var(--nav-h) - var(--s-12)));min-height:600px;padding:var(--s-4) var(--s-4) var(--s-5);border:1px solid var(--mk-line-strong);border-radius:48px;background:var(--mk-paper);box-shadow:inset 0 0 0 6px #FFFFFF,0 0 0 1px var(--mk-line);color:var(--mk-ink);overflow:hidden}
.phone__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-2)}
.phone__bar .btn-glass-circle{width:40px;height:40px;flex:none}
.phone__search svg,.btn-glass-circle svg{width:18px;height:18px;stroke:var(--mk-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.phone__seg{height:44px;padding:3px;border:1px solid var(--mk-line);border-radius:var(--mk-r-pill);background:#FFFFFF}
.phone__seg span{display:inline-flex;align-items:center;height:36px;padding:0 var(--s-4);border-radius:var(--mk-r-pill);font:500 .875rem/1 var(--font-ui);color:var(--mk-muted)}
.phone__seg span.is-on{background:var(--mk-ink);color:#FFFFFF}
.phone__avatar{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--mk-paper-2);color:var(--mk-ink);font:500 1rem/1 var(--font-ui)}
.phone__thread{display:flex;flex:1;flex-direction:column;gap:var(--s-3);min-height:0;margin-top:var(--s-2);overflow:hidden}
.phone .bubble{max-width:84%;margin:0;padding:11px 14px;font-size:.875rem;line-height:1.4}
.phone .bubble--user{margin-left:auto}
.work{display:flex;flex-direction:column;gap:var(--s-2);margin-top:auto;padding:var(--s-3);border-radius:var(--mk-r-card)}
.work__cards{display:flex;gap:var(--s-3);height:132px;overflow:hidden;padding-left:var(--s-8)}
.work__page{display:flex;flex:none;flex-direction:column;gap:7px;width:150px;padding:14px;border:1px solid var(--mk-line);border-radius:12px;background:#FFFFFF}
.work__page::before{content:"";display:block;height:44px;margin-bottom:2px;border-radius:8px;background:var(--mk-paper-2)}
.work__page i{display:block;height:6px;border-radius:3px;background:var(--mk-line)}
.work__page i:nth-child(2){width:78%}
.work__page i:nth-child(3){width:52%}
.work__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.work__close{width:40px;height:40px;flex:none}
.phone__composer{flex:none;height:48px}
.phone-cap{margin:var(--s-3) 0 0;font:400 var(--t-xs)/var(--lh-ui) var(--font-ui);color:var(--mk-muted);text-align:center}

@media (max-width:959px){.phone{height:640px;min-height:0}}
@media (max-width:479px){.phone{height:600px;border-radius:40px}.phone__seg span{padding:0 var(--s-3)}}
.phone--short{height:560px;min-height:0}

@container (max-width:340px){
  .phone__bar{gap:6px}
  .phone__bar .btn-glass-circle,.phone__avatar{width:36px;height:36px}
  .phone__seg{height:40px;padding:2px}
  .phone__seg span{height:34px;padding:0 10px;font-size:.8125rem}
}

/* Real screenshot: a simulator capture framed as a phone. Captions say build and source; never "illustration". */
.shot{display:block;width:100%;height:auto;border-radius:clamp(28px,9%,46px);border:1px solid var(--mk-line)}
.shot-fig{margin:0;justify-self:center;width:min(100%,340px)}
.shot-fig .phone-cap,.shot-fig .plate__cap{margin-top:var(--s-4);text-align:center}
@media (max-width:599px){.shot-fig{width:min(62vw,300px);margin-inline:auto}}
/* Device: a plain black bezel and island drawn in CSS around a real capture (.shot). */
.device{position:relative;padding:3.2%;border-radius:clamp(30px,13%,58px)/clamp(30px,6.2%,58px);background:#111111;box-shadow:inset 0 0 0 1.5px #3A3A3E}
.device::after{content:"";position:absolute;left:50%;top:5%;width:30%;height:3.6%;translate:-50% 0;border-radius:999px;background:#000000}
.device .shot{border:0;border-radius:clamp(24px,11%,50px)/clamp(24px,5.2%,50px)}
@media (forced-colors:active){.device{border:1px solid CanvasText}}

/* ---------- Layout helpers ---------- */
.grid{display:grid;gap:var(--s-4)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:899px){.grid--2,.grid--3{grid-template-columns:1fr}}

/* ---------- Platform cards ---------- */
.platform{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-8)}
.platform__name{margin:0;font:400 2rem/1.1 var(--font-display);letter-spacing:-.015em;color:var(--mk-ink)}
.platform__state{margin:0;font:600 var(--t-sm)/var(--lh-ui) var(--font-ui);color:var(--mk-ink-2)}
.platform p{margin:0;color:var(--mk-ink-2)}
.platform .btn{align-self:flex-start;margin-top:auto}
.platform p:nth-of-type(2){margin-bottom:var(--s-4)}

/* ---------- Wordmark ---------- */
.wordmark{font:500 1.75rem/1 var(--font-display);letter-spacing:-.01em;color:inherit}
.wordmark em{font-style:italic;font-weight:300;color:var(--mk-ink-2)}
/* The arched "m" mark, drawn from /mark.svg's geometry; inherits currentColor. */
.mk-mark{display:block;flex:none;width:1em;height:1em}

/* ---------- Illustration label: every drawn UI state says what it is ---------- */
.mk-illus{display:inline-flex;align-items:center;gap:6px;margin:0;font:500 var(--t-2xs)/16px var(--font-ui);letter-spacing:.02em;color:var(--mk-muted)}
.mk-illus::before{content:"";width:6px;height:6px;border:1px solid currentColor;border-radius:50%}

@media (prefers-reduced-motion:reduce){
  .tape--button,.btn,.seg a,.seg button{transition:none}
  .tape--button:active,.btn:active{transform:none!important}
}
@media (forced-colors:active){
  .tape,.btn,.pill,.seg,.glass,.glass-card{border:1px solid CanvasText;background:Canvas;color:CanvasText;box-shadow:none}
  :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid Highlight!important;outline-offset:2px}
}