/* DevBanjo home screen kit. Set these on :root (or .hs-card / .hs-coach) to
   match the app; the fallbacks are only there so nothing breaks unstyled.
   The iPhone buttons in the guide keep the iPhone's own colors on purpose, so
   they look like what the person is about to tap. */
:root {
  --hs-surface: var(--surface, #fff);
  --hs-ink: var(--ink, #1c1c1e);
  --hs-muted: var(--muted, #5b5b66);
  --hs-line: var(--line, #d8d8de);
  --hs-accent: var(--accent, #1468e0);
  --hs-on-accent: #fff;
  --hs-tile: var(--hs-accent);
}

.hs-card { display: grid; gap: 10px; }
.hs-card[hidden] { display: none; }
.hs-card h2 { margin: 0; }
.hs-lede, .hs-note, .hs-then { margin: 0; }
.hs-note, .hs-then { color: var(--hs-muted); font-size: 14px; }
.hs-status { margin: 0; font-size: 14px; }
.hs-status:empty { display: none; }
.hs-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hs-row a { text-decoration: none; }
.hs-steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; }

/* "Open in Safari / Chrome first" */
.hs-switch { display: grid; gap: 8px; padding: 10px; border: 2px solid var(--hs-line); border-radius: 12px; }
.hs-switch p { margin: 0; }
.hs-switch-head { display: flex; align-items: center; gap: 10px; }
.hs-browser { flex: none; width: 38px; height: 38px; border-radius: 11px; color: #fff; display: grid; place-items: center; }
.hs-browser svg { width: 30px; height: 30px; }
.hs-safari { background: linear-gradient(#2fb2f7, #1468e0); }
.hs-chrome { background: linear-gradient(#34a853, #1a73e8); }

/* iPhone guide: pinned to the top while Safari's menus cover the bottom half. */
.hs-coach {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 60vh;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px 12px;
  background: var(--hs-surface);
  color: var(--hs-ink);
  border-bottom: 3px solid var(--hs-accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: 8px;
}
.hs-coach-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hs-coach-head h2 { margin: 0; font-size: 18px; }
.hs-coach-head button { flex: none; }
.hs-coach-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hs-coach-step { display: grid; grid-template-columns: 24px 92px 1fr; align-items: center; gap: 8px; }
.hs-coach-step p { margin: 0; font-size: 15px; line-height: 1.25; }
.hs-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hs-accent);
  color: var(--hs-on-accent);
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
}
.hs-pic { display: flex; align-items: center; justify-content: center; gap: 4px; }
.hs-or { font-size: 12px; color: var(--hs-muted); margin: 0 2px; }

.hs-ios {
  --ios-bg: #ffffff;
  --ios-fg: #1c1c1e;
  --ios-blue: #007aff;
  background: var(--ios-bg);
  color: var(--ios-fg);
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hs-ios { --ios-bg: #2c2c2e; --ios-fg: #ffffff; --ios-blue: #0a84ff; }
}
:root[data-theme="dark"] .hs-ios { --ios-bg: #2c2c2e; --ios-fg: #ffffff; --ios-blue: #0a84ff; }
.hs-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 17px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  outline: 2px solid var(--hs-accent);
  outline-offset: 2px;
}
.hs-add { background: var(--ios-blue); color: #fff; font-weight: 600; padding: 0 14px; }
.hs-glyph { display: inline-grid; place-items: center; }
.hs-glyph svg { width: 20px; height: 20px; }
.hs-app-tile {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--hs-tile);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.hs-app-tile img { width: 100%; height: 100%; object-fit: cover; }
.hs-app-tile svg { width: 24px; height: 24px; }