/* iPhone / iPad: adding DHUT to the Home Screen (js/installGuide.js).
   The sign-in screen's "Install on iPhone" entry, the Home Screen app's sign-in note, and the guide — a native
   <dialog>: a bottom sheet on phones, a centred card from 700 px (the same shape as the reading sheet). */
.auth-install { margin-top: 6px; text-align: center; }
.auth-install[hidden] { display: none; }
.auth-install .link-btn { min-height: 44px; margin: 0 0 6px; padding: 0 18px; border-radius: var(--radius-pill, 999px); background: var(--accent-light); color: var(--accent-strong); font-size: 15px; text-decoration: none; }
.auth-install .link-btn:hover { background: color-mix(in srgb, var(--accent-light) 70%, var(--accent-2)); }
.auth-install .auth-help { margin: 0 auto 4px; max-width: 300px; line-height: 1.4; }
.auth-standalone-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--accent-light); color: var(--accent-strong); font-size: 14px; font-weight: 600; line-height: 1.4; }
.auth-standalone-note[hidden] { display: none; }

#tab-profile .install-app-row { flex-wrap: wrap; }
#tab-profile .install-app-row > div { flex: 1 1 200px; min-width: 0; }
#install-app-ios[hidden] { display: none; }
#tab-profile button#install-app-ios { min-height: 44px; background: var(--accent); color: var(--text-on-accent); box-shadow: none; }
#tab-profile button#install-app-ios:hover { background: var(--accent-strong); }

dialog.ig-sheet { box-sizing: border-box; width: 100%; max-width: 600px; max-height: 92vh; max-height: min(92vh, 92dvh); margin: 0 auto; padding: 0; border: 0; inset: auto 0 0 0;
  border-radius: 24px 24px 0 0; background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-3); overflow: hidden; overscroll-behavior: contain; }
dialog.ig-sheet:modal { max-width: 600px; max-height: 92vh; max-height: min(92vh, 92dvh); }
dialog.ig-sheet[open] { display: flex; flex-direction: column; animation: ig-up 220ms ease; }
dialog.ig-sheet::backdrop { background: rgba(30, 26, 20, 0.38); }
dialog.ig-sheet.ig-fallback { position: fixed; z-index: 96; box-shadow: 0 0 0 100vmax rgba(30, 26, 20, 0.38), var(--shadow-3); }
html.ig-open { overflow: hidden; }
@keyframes ig-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ig-pop { from { transform: translateY(8px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  dialog.ig-sheet, dialog.ig-sheet:modal { inset: 0; margin: auto; max-height: min(86vh, 820px); border-radius: 24px; }
  dialog.ig-sheet[open] { animation-name: ig-pop; }
}
@media (prefers-reduced-motion: reduce) { dialog.ig-sheet[open] { animation: none; } }
html[data-motion="reduced"] dialog.ig-sheet[open], html[data-motion="off"] dialog.ig-sheet[open] { animation: none; }
html[data-period="night"] dialog.ig-sheet { background: #F7F6FC; }
html[data-period="night"] dialog.ig-sheet::backdrop { background: rgba(10, 14, 32, 0.55); }

/* the app's list rows (css/app.css: li is a flex row with a rule above) don't apply to the guide's text lists */
dialog.ig-sheet li { display: block; justify-content: normal; align-items: normal; border-top: 0; gap: 0; }
.ig-inner { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ig-head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 8px; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--line-soft); }
.ig-title { flex: 1 1 auto; min-width: 0; margin: 0; padding-top: 8px; font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--text-primary); }
.ig-title:focus { outline: none; }
.ig-title:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; border-radius: 6px; }
.ig-close { flex: 0 0 auto; min-height: var(--tap); padding: 0 8px; }
.ig-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.ig-vi { display: block; margin-top: 2px; color: var(--text-secondary); font-size: 14px; font-weight: 400; }
.ig-title .ig-vi { font-family: inherit; font-size: 14.5px; font-weight: 600; }
.ig-lead { margin: 0 0 12px; font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.ig-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #FFF1DE; color: #5E3700; font-size: 14.5px; line-height: 1.45; }
.ig-warn .ig-vi { color: #5E3700; }
.ig-tip { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--sky-light); color: var(--text-primary); font-size: 14.5px; line-height: 1.45; }
.ig-steps { margin: 4px 0 10px; padding: 0; list-style: none; counter-reset: ig; }
.ig-steps li { position: relative; margin: 0 0 12px; padding: 2px 0 0 40px; font-size: 15.5px; line-height: 1.5; counter-increment: ig; }
.ig-steps li::before { content: counter(ig); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--text-on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.ig-ico { width: 1.25em; height: 1.25em; vertical-align: -0.25em; color: #0A66D8; }
.ig-key { display: inline-block; min-width: 1.6em; padding: 0 4px; border-radius: 8px; background: #EEF3FB; color: #0A66D8; font-weight: 800; text-align: center; letter-spacing: 1px; }
.ig-more { margin: 4px 0 10px; }
.ig-more > summary { min-height: 44px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; font-weight: 700; color: var(--accent-strong); }
.ig-more ul { margin: 4px 0 0; padding-left: 20px; list-style: disc; } dialog.ig-sheet .ig-more li { display: list-item; margin: 0 0 8px; padding: 0; font-size: 14.5px; line-height: 1.45; }
.ig-small { margin: 8px 0 12px; font-size: 13px; color: var(--text-secondary); }
button.ig-done { display: block; width: 100%; min-height: 46px; margin: 0; border-radius: var(--radius-md); font-size: 16px; font-weight: 800; }
@media (min-width: 700px) { button.ig-done { width: auto; min-width: 200px; margin: 0 auto; } }
/* After sign-in in an iPhone / iPad Safari tab, once per device (js/installGuide.js showSafariHint): Safari may delete
   the login after 7 days of Safari use without DHUT; the Home Screen app keeps it. "How to add" opens the guide.
   Above the bottom bar (68 px + the safe area), under every sheet and modal (z 90+). */
.ig-hint { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 60; box-sizing: border-box; max-width: 560px; margin: 0 auto;
  padding: 10px 12px 6px; border-radius: 16px; background: var(--sky-light); color: var(--text-primary); box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-3); font-size: 14px; line-height: 1.45; }
.ig-hint-text { margin: 0 0 4px; }
.ig-hint .ig-vi { font-size: 13.5px; }
.ig-hint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
button.ig-hint-go { width: auto; min-height: var(--tap); margin: 0; padding: 0 16px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 800; }
.ig-hint-later { min-height: var(--tap); padding: 0 6px; }
html.kb-open .ig-hint { display: none; }