/* Add to home screen: the More sheet's row, and the iPhone steps sheet (assets/install-app.js).
   Tokens only, so light and dark follow html[data-theme]. */

/* The row sits in its own grouped card between the pages and Sign out. */
.mobile-more-install{margin-top:16px}
.mobile-more-install[hidden]{display:none}
.mobile-install-link{width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mobile-install-link>.icon:first-child{color:var(--brand-ink)}

/* The iPhone steps: a bottom sheet on a phone, a small card on anything wider. */
.install-sheet{width:min(420px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:20px;border:0;border-radius:var(--radius-panel);
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-pop);overflow:auto;overscroll-behavior:contain;font-family:Geist,Arial,sans-serif}
.install-sheet::backdrop{background:var(--scrim)}
.install-sheet-handle{display:none}
.install-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.install-sheet-title{margin:0;font-size:18px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.install-sheet-close{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:none;margin-right:-4px;padding:0;border:0;border-radius:50%;
  background:var(--surface-3);color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.install-sheet-close::before{content:"";position:absolute;inset:-4px;border-radius:50%}
.install-sheet-glyph{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.install-sheet-lead{margin:6px 0 16px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.install-steps{display:grid;gap:0;margin:0 0 20px;padding:0;list-style:none;border:1px solid var(--line);border-radius:12px;background:var(--canvas);overflow:hidden}
.install-step{display:flex;align-items:flex-start;gap:12px;padding:14px}
.install-step+.install-step{box-shadow:inset 0 1px 0 var(--line)}
.install-step-number{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);
  font-size:12px;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}
.install-step-words{flex:1;min-width:0;padding-top:2px;font-size:15px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.install-step-words strong{font-weight:600}
.install-share{display:inline-grid;place-items:center;width:26px;height:26px;margin:-4px 2px 0;vertical-align:middle;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--brand-ink)}
.install-share-glyph,.install-add-glyph{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.install-share-glyph{width:18px;height:18px}
.install-add-glyph{width:18px;height:18px;margin:-3px 1px 0 2px;vertical-align:middle;color:var(--ink-2)}
.install-sheet-done{width:100%;min-height:44px}
.install-sheet :focus-visible{outline:2px solid var(--focus);outline-offset:2px}

@media(max-width:767px),(pointer:coarse) and (orientation:landscape) and (max-width:1023px) and (max-height:500px){
  .install-sheet{position:fixed;inset:auto 0 0;width:100%;max-width:620px;max-height:calc(var(--mobile-visible-height,100dvh) - max(18px,env(safe-area-inset-top,0px)));
    margin:auto auto 0;padding:8px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    border-radius:16px 16px 0 0;background:var(--canvas)}
  .install-sheet-handle{display:block;width:36px;height:5px;margin:0 auto 10px;border-radius:3px;background:var(--line-2)}
  .install-steps{background:var(--surface)}
}
@media(prefers-reduced-motion:reduce){.install-sheet *{transition:none!important}}