/* iOS styling, loaded last on every page so it overrides each page's own styles.
   Grouped background, rounded cards, large titles, translucent navigation bar, tinted and filled buttons,
   segmented controls, switches, inset lists. Colours come from the tokens in site.css and each person's accent. */
html { -webkit-tap-highlight-color: transparent; }
body { font-size: 17px; line-height: 1.35; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; padding-top: 0; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
a { color: var(--accent); }

/* ----- type ----- */
h1, h2, h3 { text-transform: none; }
h1 { font-weight: 700; font-size: clamp(2rem, 8.5vw, 2.6rem); letter-spacing: .01em; line-height: 1.08; }
h2 { font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; }
.muted, .stats { font-family: var(--font-body); }
.stats { font-size: .9rem; letter-spacing: 0; }

/* ----- navigation bar: translucent, blurred, sticks to the top ----- */
#sitebar {
  position: sticky; top: 0; z-index: 20; max-width: none; min-height: 52px; margin: 0 -16px 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 4px) max(16px, calc(50% - 504px)) 4px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: .5px solid color-mix(in srgb, var(--line) 70%, transparent);
}
#sitebar .brand { height: 40px; padding: 0 8px 0 0; }
#sitebar .btn.ghost, #sitebar .who a.name { color: var(--accent); font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: -.01em; text-transform: none; }
#sitebar .who a.name { max-width: 12ch; padding: 6px 10px; }
#sitebar .who a.name:hover, #sitebar .btn.ghost:hover { background: var(--fill); color: var(--accent); }
.logo { background-color: var(--ink); }

/* ----- buttons: tinted by default, filled for the main action ----- */
.btn {
  min-height: 44px; padding: 8px 18px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; text-transform: none; transition: opacity .12s, transform .12s;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.btn:active { opacity: .6; transform: scale(.98); }
.btn.primary, .btn.primary:hover { background: var(--accent); color: var(--accent-ink); filter: none; }
.btn.ghost, .btn.ghost:hover { background: transparent; padding-inline: 10px; }
.btn.small { min-height: 34px; padding: 4px 14px; font-size: .95rem; border-radius: 999px; }
.btn.danger { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); border: 0; }
.btn.danger.solid { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: .4; }
.card:active, .rcard:active, .tool:active, .chip:active { opacity: .7; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent); outline-offset: 2px; }

/* ----- inputs ----- */
input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="search"], textarea,
#gate input[type="text"], #gate input[type="email"], #gate input[type="password"] {
  min-height: 46px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; letter-spacing: -.01em; box-shadow: inset 0 0 0 .5px var(--line);
}
input:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent) !important; }
label.field, #gate label.field { font-family: var(--font-body); font-size: .8125rem; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; color: var(--muted); padding-left: 4px; gap: 6px; }
.pwrow input { width: auto; }
.search input, .finder input {
  min-height: 40px; padding: 8px 14px 8px 38px; border: 0; border-radius: 12px; background-color: var(--fill); box-shadow: none; font-size: 1.0625rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
.search input:focus, .finder input:focus { box-shadow: none !important; background-color: var(--fill); }
.search input::placeholder, .finder input::placeholder { color: #8E8E93; }

/* ----- switches (checkboxes that are on/off settings) ----- */
.check input[type="checkbox"], #gate .check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; width: 51px; height: 31px; border-radius: 999px; background: rgba(120, 120, 128, .32); position: relative; flex: none; cursor: pointer; transition: background .2s; margin: 0;
}
.check input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .2s; }
.check input[type="checkbox"]:checked { background: #34C759; }
.check input[type="checkbox"]:checked::after { transform: translateX(20px); }
.check { gap: 12px; }

/* ----- segmented control ----- */
.seg { border: 0; background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px; }
.seg button { min-height: 32px; padding: 4px 20px; border: 0; border-radius: 7px; font-family: var(--font-body); font-weight: 500; font-size: .95rem; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.seg button + button { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.chips { gap: 8px; }
.chip { min-height: 34px; padding: 4px 14px; border: 0; background: var(--fill); color: var(--ink); font-family: var(--font-body); font-size: .95rem; letter-spacing: -.01em; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.pill { border: 0; background: var(--fill); font-family: var(--font-body); font-size: .8rem; }
.pill.owner { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.tag { border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-family: var(--font-body); font-weight: 500; padding: 3px 12px; }
.tag.soft { background: var(--fill); color: var(--muted); }
.swatch { border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ink); }
.customsw { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: .9rem; }
mark { background: color-mix(in srgb, var(--accent) 24%, transparent); color: inherit; border-radius: 4px; }

/* ----- cards and grouped surfaces ----- */
.card, .rcard, .tool, .hero, .preview, .empty, .notice, .confirm, .labelcv, .nophotos, .edphoto, .addphoto, .photos button {
  border: 0; border-radius: 16px; box-shadow: none;
}
.card, .rcard, .tool, .preview, .notice, .confirm { background: var(--surface); }
.card:hover, .rcard:hover, .tool:hover { border: 0; }
.card-name, .rcard .nm { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.2; text-transform: none; letter-spacing: -.015em; }
.card-loc, .rcard .lc { font-size: .9375rem; }
.card-foot { font-family: var(--font-body); font-size: .8125rem; }
.thumb, .rcard .th { background: var(--fill); }
.thumb .nophoto { font-family: var(--font-body); letter-spacing: 0; }
.tool { padding: 16px; gap: 6px; }
.tool-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; text-transform: none; letter-spacing: -.015em; }
.tool-foot { font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; }
.tool-foot .go { color: var(--accent); font-weight: 600; }
.tool .ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); color: var(--accent-ink); margin-bottom: 6px; }
.tool .ico svg { width: 30px; height: 30px; }
.hero { border-radius: 24px; padding: 24px 22px; background: radial-gradient(90% 150% at var(--wash-x, 20%) 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 75%), var(--surface); }
.hero .when { font-family: var(--font-body); font-size: .9375rem; letter-spacing: 0; text-transform: uppercase; font-weight: 500; }
.hero .clock { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.hero h1 { font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; }
.statline { font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; }
.statline a { font-weight: 500; }
.section > .sh a { color: var(--accent); }
.section h2, .block h2, details.settings summary { font-size: 1.375rem; text-transform: none; letter-spacing: -.01em; }
.empty { border: 0; background: var(--surface); justify-items: start; }
.nophotos { background: var(--surface); border: 0; }
.notice { border: 0; color: var(--danger); }
.notice.soft { color: var(--ink); background: var(--surface); }
.confirm { border: 0; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.labelcv { border: .5px solid var(--line); border-radius: 12px; }

/* ----- inset grouped lists ----- */
.items, .people, .sheetlist { background: var(--surface); border: 0; border-radius: 14px; overflow: hidden; padding: 0; }
.items li, .people li, .sheetlist label { padding: 12px 16px; border-bottom: .5px solid var(--line); }
.items li:last-child, .people li:last-child, .sheetlist label:last-child { border-bottom: 0; }
.people .nm { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; text-transform: none; letter-spacing: -.01em; }
.people .em { font-family: var(--font-body); font-size: .9rem; }

/* ----- control panel: each block becomes a titled card ----- */
.block { border-top: 0; padding-top: 0; gap: 12px; }
.block > h2 { font-size: .8125rem; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; color: var(--muted); padding-left: 16px; }
form.stack { background: var(--surface); border-radius: 14px; padding: 16px; max-width: none; }
form.stack input[type="text"], form.stack input[type="password"], form.stack input[type="email"] { background: var(--fill); box-shadow: none; }
.block > p.lead { padding-inline: 16px; font-size: .9375rem; }
.preview { background: var(--surface); }
.status { font-size: .9375rem; }

/* ----- sheets and photo viewer ----- */
.overlay { background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.overlay.photo { background: rgba(0, 0, 0, .94); }
.sheetbox { border: 0; border-radius: 22px; padding: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.edphoto button { border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; width: 32px; height: 32px; }
.addphoto { background: var(--fill); font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: -.01em; color: var(--accent); }
.addphoto small { font-weight: 400; }
.toast { border-radius: 14px; background: color-mix(in srgb, var(--ink) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ----- sign-in screen ----- */
#gate .panel { background: var(--surface); border-radius: 22px; padding: 26px 22px; gap: 16px; }
#gate .logo { height: 96px; margin-inline: auto; }
#gate h1 { text-align: center; font-size: 1.75rem; }
#gate .fine { text-align: center; }
#gate .btn.primary { width: 100%; min-height: 50px; font-size: 1.0625rem; }
#gate .linkbtn { color: var(--accent); font-size: .95rem; text-decoration: none; justify-self: center; padding: 6px; }
#gate input[type="text"], #gate input[type="email"], #gate input[type="password"] { background: var(--fill); box-shadow: none; }
#gate .pwrow .btn { min-height: 46px; border-radius: 12px; }
#gate { padding-top: min(8vh, 60px); }
#gate .panel { width: min(420px, 100%); min-width: 0; margin-inline: auto; }
#gate form, #gate #gatebody { min-width: 0; }
html.locked body { background: var(--bg); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { background: #636366; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button[aria-pressed="true"] { background: #636366; } }

/* ----- bottom tab bar: Home, Garage, Scan, Settings, always in reach ----- */
html { overscroll-behavior-y: none; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: center;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-top: .5px solid color-mix(in srgb, var(--line) 70%, transparent);
}
#tabbar a { flex: 1 1 0; max-width: 130px; display: grid; justify-items: center; gap: 2px; padding: 4px 2px; min-height: 48px; text-decoration: none; color: var(--muted); font-size: .6875rem; font-weight: 500; letter-spacing: 0; -webkit-user-select: none; user-select: none; }
#tabbar svg { width: 26px; height: 26px; }
#tabbar a[aria-current="page"] { color: var(--accent); }
#tabbar a:active { opacity: .55; }
.toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
@media print { #tabbar { display: none !important; } }

/* ----- pages that never scroll: home and scan fit the screen ----- */
body.home, body.scan { height: 100vh; height: 100dvh; overflow: hidden; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
body.home #tabbar { background: rgba(20, 20, 30, .28); border-top-color: rgba(255, 255, 255, .18); }
body.home #tabbar a { color: rgba(255, 255, 255, .8); }
body.home #tabbar a[aria-current="page"] { color: #fff; }

/* ----- no top bar: leave room for the status area instead ----- */
#sitebar { display: none !important; }
body { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }