/* Page mode for the web iOS kit (TOOLS-IOS-PLAN.md, layout A): PDF Tools, Image Tools, QR Codes and Time Zones.
   The app is the first screen of a page that scrolls, with the page's own text (h1, lede, article) in the HTML around
   it, so search engines and the landing-page generators see it. The kit's own frame (#app fixed, body not scrolling) is
   for full-screen apps; here the body scrolls, the nav bar and the bottom toolbar stick, and sheets, menus and toasts
   sit fixed over the window. Load after ios.css. Markup: see page.js. */
:root { --tint: #007aff; --forest: #007aff; --coral: #007aff; --canvas: #f2f2f7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tint: #0a84ff; --forest: #0a84ff; --coral: #0a84ff; --canvas: #000; } }
:root[data-theme="dark"] { --tint: #0a84ff; --forest: #0a84ff; --coral: #0a84ff; --canvas: #000; }

html, body { height: auto; min-height: 100%; background: var(--grouped); }
html { overflow-x: clip; }
body { overflow: visible; overflow-x: clip; overscroll-behavior: auto; }
#app { position: static; overflow: visible; }
#sheets, #overlays, #toast, #banner { position: fixed; }
#sheets { inset: 0; } #overlays { inset: 0; }

/* the bar: sticky, clear at the top, frosted once the page has scrolled */
.pg-bar { position: sticky; top: 0; z-index: 10; padding-top: calc(var(--sat) + 8px); transition: background .2s, box-shadow .2s; }
.pg-bar.scrolled { background: color-mix(in srgb, var(--grouped) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 .5px 0 var(--sep); }
.pg-bar .navbar { max-width: var(--pg-w, 760px); margin: 0 auto; min-height: 52px; padding-top: 0; }
.pg-bar .navbar::after { display: none; }
.pg-bar .nav-title { opacity: 0; transition: opacity .2s; }
.pg-bar.scrolled .nav-title { opacity: 1; }
.glass-prominent { background: var(--tint); color: #fff; font-weight: 600; box-shadow: 0 4px 16px color-mix(in srgb, var(--tint) 30%, transparent); }
.glass-prominent:disabled { background: var(--fill); color: var(--text3); box-shadow: none; }
.glass-back { padding: 0 14px 0 10px; gap: 2px; }
.glass-back .sf { font-size: 19px; }
.glass.on { color: var(--tint); }

.pg { max-width: var(--pg-w, 760px); margin: 0 auto; padding: 0 16px; }
.pg-head { display: flex; align-items: center; gap: 14px; padding: 2px 4px 14px; }
.pg-icon { width: 60px; height: 60px; border-radius: 14px; flex: none; box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.1); }
.pg-head h1 { font: 700 26px/1.15 var(--sys); letter-spacing: -0.02em; margin: 0; }
.pg-lede { font-size: 15px; line-height: 20px; color: var(--text2); margin-top: 4px; }
@media (max-width: 420px) { .pg-head h1 { font-size: 22px; } .pg-icon { width: 52px; height: 52px; border-radius: 12px; } }
.pg-seg { margin: 0 0 6px; }
.pg-app { min-height: calc(100svh - 120px); display: flex; flex-direction: column; }
.pg-app > .pg-main { flex: 1 1 auto; }
.pg .form { padding: 0 0 12px; max-width: none; }
.pg .group:first-child { margin-top: 10px; }
.pg .col { padding: 0; max-width: none; }

/* the bottom toolbar: floating glass capsules, sticky while the app is on screen */
.pg-tools { position: sticky; bottom: 0; z-index: 9; display: flex; align-items: center; gap: 10px; padding: 18px 0 calc(var(--sab) + 14px); margin-top: 8px;
  background: linear-gradient(to top, var(--grouped) 45%, color-mix(in srgb, var(--grouped) 0%, transparent)); }
.pg-tools .grow { flex: 1; }
.pg-tools .glass { height: 48px; border-radius: 24px; }
.pg-tools .glass-icon { width: 48px; }
.pg-tools .glass-prominent { padding: 0 22px; }

/* rows the kit doesn't have yet */
.slider-row { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 14px; padding-bottom: 16px; }
.slider-top { display: flex; justify-content: space-between; align-items: baseline; }
.slider-top .v { color: var(--text2); font-variant-numeric: tabular-nums; }
.ios-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; }
.ios-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--tint) var(--p, 50%), var(--fill) var(--p, 50%)); }
.ios-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 0.5px 4px rgba(0,0,0,.12), 0 6px 13px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
.ios-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--fill); }
.ios-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--tint); }
.ios-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.slider-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); margin-top: -4px; }
.swatches { display: flex; gap: 10px; align-items: center; }
.swatch { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(127,127,127,.35) inset; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--row), 0 0 0 4px var(--tint); }
.swatch.custom { background: conic-gradient(#f44, #fd4, #4d6, #4cf, #64f, #f4c, #f44); overflow: hidden; }
.swatch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.file-row { gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--fill2); }
.fr-name { font-weight: 500; }
.fr-meta { font-size: 13px; line-height: 18px; color: var(--text2); font-variant-numeric: tabular-nums; }
.fr-badge { flex: none; font-size: 13px; font-weight: 600; color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); padding: 3px 9px; border-radius: 999px; }
.fr-badge.up { color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); }
.group-rows > .row.file-row + .row::before, .group-rows > .row + .row.file-row::before { left: 90px; }
.sel-check { width: 24px; height: 24px; flex: none; color: var(--text3); font-size: 24px; display: grid; place-items: center; }
.sel-check.on { color: var(--tint); }
.icon-tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; background: var(--c, var(--tint)); font-size: 17px; }
.group-rows > .row:has(.icon-tile) + .row::before { left: 60px; }
.drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 34px 20px 26px; border-radius: 26px; background: var(--row); }
.drop.drag { box-shadow: 0 0 0 3px var(--tint) inset; }
.drop .big { font-size: 46px; color: var(--tint); line-height: 1; margin-bottom: 6px; }
.drop .un-title { font-size: 22px; }
.drop .acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.btn-bordered.size-large.auto { width: auto; }
.note { font-size: 13px; line-height: 18px; color: var(--text2); padding: 8px 20px 0; }
.progress-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); }

/* the text below the app, as an iOS reading view */
.pg-read { max-width: 680px; margin: 26px auto 0; padding: 0 20px calc(var(--sab) + 40px); font-size: 17px; line-height: 1.55; }
.pg-read-sep { max-width: 680px; margin: 18px auto 0; padding: 0 20px; }
.pg-read-sep hr { border: 0; border-top: .5px solid var(--sep); margin: 0; }
.pg-read h2 { font: 700 22px/1.25 var(--sys); letter-spacing: -0.01em; margin: 30px 0 8px; }
.pg-read h2:first-child { margin-top: 10px; }
.pg-read h3 { font: 600 17px/1.35 var(--sys); margin: 18px 0 4px; }
.pg-read p, .pg-read ul, .pg-read ol { margin: 0 0 12px; color: var(--text); }
.pg-read ul, .pg-read ol { padding-left: 22px; }
.pg-read li { margin: 4px 0; } .pg-read ul { list-style: disc; }
.pg-read a { color: var(--tint); }
.pg-read .tbl { overflow-x: auto; margin: 6px 0 14px; border-radius: 14px; background: var(--row); }
.pg-read .tbl table { margin: 0; min-width: 520px; }
.pg-read table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 6px 0 14px; background: var(--row); border-radius: 14px; overflow: hidden; }
.pg-read th, .pg-read td { text-align: left; padding: 9px 12px; border-top: .5px solid var(--sep); vertical-align: top; }
.pg-read tr:first-child th, .pg-read tr:first-child td { border-top: 0; }
.pg-read .faq { background: var(--row); border-radius: 22px; padding: 4px 18px; margin: 6px 0 14px; }
.pg-read .faq h3 { margin: 14px 0 4px; } .pg-read .faq p { color: var(--text2); font-size: 15px; line-height: 1.5; }
.pg-read .faq > * + h3 { border-top: .5px solid var(--sep); padding-top: 14px; }
.pg-read .links { display: flex; flex-direction: column; background: var(--row); border-radius: 22px; overflow: hidden; padding: 0; margin: 6px 0 14px; list-style: none; }
.pg-read .links a { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; color: var(--text); }
.pg-read .links a + a { border-top: .5px solid var(--sep); }
.pg-read .links a::after { content: "›"; color: var(--text3); font-size: 22px; line-height: 1; }
.pg-read .links a[aria-current] { color: var(--tint); font-weight: 600; }
.pg-foot { text-align: center; font-size: 13px; color: var(--text2); padding: 8px 20px calc(var(--sab) + 28px); }
.pg-foot a { color: var(--tint); }

/* the preview's own corner note (not part of the design) */

/* tables in the text: a card that scrolls sideways on computers; on phones each row becomes its own card, every cell
   labelled with its column's heading (data-label, set by page.js wrapTables) */
@media (max-width: 600px) {
  .pg-read .tbl.stack { background: none; overflow: visible; border-radius: 0; }
  .pg-read .tbl.stack table { min-width: 0; background: none; border-radius: 0; display: block; }
  .pg-read .tbl.stack thead, .pg-read .tbl.stack tr:has(> th:first-child + th) { display: none; }
  .pg-read .tbl.stack tbody { display: flex; flex-direction: column; gap: 10px; }
  .pg-read .tbl.stack tr { display: block; background: var(--row); border-radius: 18px; padding: 6px 0; }
  .pg-read .tbl.stack td, .pg-read .tbl.stack th { display: grid; grid-template-columns: minmax(84px, 38%) 1fr; gap: 10px; border: 0; padding: 6px 16px; }
  .pg-read .tbl.stack td::before, .pg-read .tbl.stack th::before { content: attr(data-label); color: var(--text2); font-size: 13px; line-height: 1.5; }
  .pg-read .tbl.stack td:first-child, .pg-read .tbl.stack tr > th:first-child { grid-template-columns: 1fr; font-weight: 600; font-size: 16px; }
  .pg-read .tbl.stack td:first-child::before, .pg-read .tbl.stack tr > th:first-child::before { display: none; }
}

/* computers: two columns, the settings beside what they act on (as Website Maker's editor and preview) */
@media (min-width: 960px) {
  .pg-cols { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .pg-cols > .side { position: sticky; top: 76px; }
  .pg-cols > * > .group:first-child { margin-top: 10px; }
}
@media (min-width: 960px) { .pg-seg .segmented { max-width: 520px; margin: 0 auto; } }

/* no layout shift: hold the sticky bar's height until mountPage() has added it */
main:not(:has(> .pg-bar)) { padding-top: calc(var(--sat) + 60px); }
/* mobile.js gives buttons on touch screens a 40 px minimum height; the kit's small controls draw their own hit areas
   (ios.css resets them inside #app, which page mode doesn't use) */
html.touch .pg-bar button, html.touch .pg-app .seg, html.touch .pg-app .stepper-btn, html.touch .pg-app .icon-btn, html.touch .pg-app .swatch, html.touch .pg-tools button { min-height: 0; }
/* two-column tables fit a phone as they are */
.pg-read .tbl:not(.stack) table { min-width: 0; }