/* ============================================================================
   installdrawer.css — the install drawer, and the rules that apply only once
   the product IS an installed app.

   The drawer is the approved GoSavvy/Leela's drawer in CORE's own design
   system. GoSavvy's copy carries its styles inline; CORE links every stylesheet
   once with the document and scopes every selector, so the same drawer is a
   sheet here instead.

   Every selector is prefixed .idr- . All four apps are in this one document at
   once, so an unscoped .sheet, .step or .btn would reach straight into Signals
   or ProPo.

   No colour here names a brand: --idr-accent is set from the manifest's
   theme_color by installdrawer.js, and the manifest is built from brand.json.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. THE INSTALLED APP — things that are wrong ONLY in standalone.

   None of this may apply in a browser tab. There the browser's own chrome
   occupies the notch and env(safe-area-inset-top) is 0 anyway, but scoping it
   to display-mode makes that a decision rather than a coincidence — and it
   keeps this file clear of the mobile sweep, which owns the browser view.
   ------------------------------------------------------------------------ */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  /* The bar is a floating pill at top:14px. Launched from a home screen there
     is no browser chrome above it, so on a notched phone those 14px put it
     under the status bar and the account menu becomes untappable. */
  .bar { top: calc(14px + env(safe-area-inset-top, 0px)); }
  /* .page clears the bar with --bar-clear. Move the bar down and the clearance
     has to follow, or the first card slides under it. */
  :root { --bar-clear: calc(84px + env(safe-area-inset-top, 0px)); }
  @media (max-width: 900px) { :root { --bar-clear: calc(92px + env(safe-area-inset-top, 0px)); } }
  /* The home indicator sits over the last 34px of the screen. mobile.css pads
     .page for it on a phone; in standalone it applies at every width, because
     an installed app on a tablet has one too. */
  .page { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  /* The sign-in screen is its own full-height layout and does not use .page. */
  .signin {
    padding-top: calc(var(--bar-clear) - 40px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  /* An installed app has no Back button and no address bar. The rubber-band
     bounce at the top of the document reads as the window coming loose from
     its own frame. */
  body { overscroll-behavior-y: contain; }
}

/* ---------------------------------------------------------------------------
   2. THE DRAWER. Phone only — installdrawer.js never draws it on a desktop.
   ------------------------------------------------------------------------ */
.idr { --idr-accent: var(--green, #0B0E0D); }

.idr-dim {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(11, 14, 13, 0);
  transition: background .22s ease;
}
.idr.is-open .idr-dim { background: rgba(11, 14, 13, .42); }

.idr-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  box-sizing: border-box;
  max-width: 560px; margin: 0 auto;
  background: var(--w, #fff);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
  padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
  color: var(--ink, #0B0E0D);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.idr.is-open .idr-sheet { transform: translateY(0); }

.idr-grip {
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--line-2, rgba(16, 19, 18, .24));
  margin: 0 auto 14px;
}

/* ---- the heading row: the real mark, the name, one grey line ------------ */
.idr-head { display: flex; gap: 12px; align-items: center; }
/* No padding and no backing colour: the icon file now carries the product's own
   ground, so it is a finished tile. Sitting it on --mist with 5px of padding put
   a second, different off-white behind the first and read as a sticker on a
   card. Just the launcher's corner radius. */
.idr-mark {
  flex: none; width: 48px; height: 48px;
  border-radius: 12px; object-fit: cover;
  box-shadow: 0 0 0 1px var(--line, rgba(16,19,18,.14)) inset;
}
.idr-ct { min-width: 0; }
/* The app's NAME wears the product's own lockup face — the one the bar uses —
   not the body font. Asa, 20 Oct 2026: "the app name like EMCORE — cant we use
   the font used in the home icon." --disp is defined by each product's core.css,
   so this one line is correct in all three without naming a typeface; a product
   whose lockup differs from --disp re-points .idr-title in its own LOCAL
   brand-theme.css, exactly as it already does for .bar__name. */
.idr-title {
  font-family: var(--disp, Inter, system-ui, sans-serif);
  font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
}
.idr-sub { margin-top: 2px; font-size: 12.5px; color: var(--ink-3, #58625E); }

/* The line under the heading, in the product's own colour — the gosomewhere
   rule. It replaces the rule a heading row would otherwise carry; never both,
   and never down an edge. Draws in from the left once, on arrival. */
.idr-line {
  height: 2px; margin: 12px 0 0; border-radius: 2px;
  background: var(--idr-accent);
  transform-origin: left center; transform: scaleX(0);
}
.idr.is-open .idr-line { animation: idr-draw .5s cubic-bezier(.22, .61, .36, 1) .1s forwards; }
@keyframes idr-draw { to { transform: scaleX(1); } }

/* ---- what it says -------------------------------------------------------- */
.idr-say { margin: 12px 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2, #363E3C); }
.idr-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3, #58625E); }

.idr-steps { list-style: none; padding: 0; margin: 14px 0 4px; display: grid; gap: 8px; }
.idr-step {
  display: flex; gap: 10px; align-items: center;
  background: var(--mist, #F3F6F4); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; color: var(--ink-2, #363E3C);
}
.idr-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink, #0B0E0D); color: var(--w, #fff);
  font-size: 12px; font-weight: 700; line-height: 24px; text-align: center;
}
.idr-t { flex: 1; }
.idr-g { flex: none; color: var(--idr-accent); }

/* ---- the controls -------------------------------------------------------- */
/* 44px minimum on every tap target, 16px type in anything that takes a tap —
   below that iOS zooms the page on focus. */
.idr-btn {
  display: block; width: 100%; min-height: 48px;
  border: 0; border-radius: 12px;
  background: var(--ink, #0B0E0D); color: var(--w, #fff);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .12s ease;
}
.idr-btn:active { transform: translateY(1px); }
.idr-btn:focus-visible { outline: 2px solid var(--idr-accent); outline-offset: 2px; }

.idr-never {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; min-height: 44px;
  font-size: 14px; color: var(--ink-2, #363E3C);
  user-select: none; -webkit-user-select: none;
}
.idr-never input { width: 18px; height: 18px; margin: 0; accent-color: var(--idr-accent); }

.idr-quiet {
  display: block; width: 100%; min-height: 44px;
  border: 0; background: transparent;
  color: var(--ink-3, #58625E);
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 10px 0 4px; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .idr-dim, .idr-sheet, .idr-btn { transition: none; }
  .idr-sheet { transform: none; }
  .idr-line { transform: scaleX(1); animation: none; }
}