/* arch: mirko-ops — phone-first styles. Same design language as the website: Manrope + Bricolage Grotesque, logo red,
   generous radii, soft shadows, translucent bars. Fonts are self-hosted (public/fonts), no external requests. */
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage'; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage'; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --red: #e30613; --red-deep: #b0040e; --ink: #101318; --ink-2: #3a414d; --muted: #565e6b; --line: rgb(16 19 24 / .1);
  --bg: #f3f6f9; --card: #fff; --water: #d9eef8; --water-deep: #3d9cc9;
  --green: #17803a; --amber: #a35b00;
  --r-s: 10px; --r-m: 18px; --r-l: 28px; --radius: var(--r-m);
  --shadow: 0 1px 2px rgb(16 19 24 / .06), 0 8px 30px -12px rgb(16 19 24 / .2);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Bricolage', 'Manrope', system-ui, sans-serif;
  font-family: var(--font); color: var(--ink); background: var(--bg); color-scheme: light;
  -webkit-text-size-adjust: 100%; line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding-bottom: calc(92px + env(safe-area-inset-bottom));
  background: radial-gradient(70vw 50vw at 90% -10%, rgb(61 156 201 / .14), transparent 60%), radial-gradient(60vw 50vw at -10% 30%, rgb(227 6 19 / .06), transparent 60%), var(--bg);
  background-attachment: fixed; }
main { max-width: 640px; margin: 0 auto; padding: 16px 14px; }
body.wide main { max-width: 920px; }
a { color: var(--red-deep); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; }
h1 { font-size: 1.2rem; margin: 0; flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
h2 { font-size: 1.15rem; margin: 0 0 10px; font-weight: 700; }
h3 { font-size: 1rem; margin: 14px 0 6px; font-weight: 700; }
svg.i { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }

/* top bar: translucent white with a red accent line, like the site header */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top));
  background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid var(--line); box-shadow: inset 0 -3px 0 var(--red); color: var(--ink); }
.top img { border-radius: 8px; }
.top .back { color: var(--red); text-decoration: none; font-size: 2rem; line-height: 1; padding: 0 8px 4px 0; }
.net { background: var(--ink); color: #fff; padding: 2px 10px; border-radius: 99px; font-size: .75rem; }

/* bottom navigation: floating glass bar */
nav.bottom { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 10px; right: 10px; max-width: 620px; margin: 0 auto; z-index: 5; display: flex;
  background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgb(255 255 255 / .7); border-radius: 24px; box-shadow: var(--shadow); padding: 4px; }
nav.bottom a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; font-size: .68rem; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 20px; transition: background .2s var(--ease), color .2s; }
nav.bottom a svg.i { width: 24px; height: 24px; }
nav.bottom a.on { color: var(--red); background: rgb(227 6 19 / .08); }

.card { background: var(--card); border-radius: var(--radius); padding: 16px; margin: 0 0 14px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.card.inactive { opacity: .6; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, monospace; }
.break { word-break: break-all; }
.pre { white-space: pre-wrap; margin: 6px 0; }
.empty { text-align: center; color: var(--muted); padding: 48px 0; }
.msg { padding: 12px 14px; border-radius: var(--r-s); margin: 0 0 14px; }
.msg.ok { background: #e3f4ea; color: var(--green); }
.msg.err { background: #fde8ea; color: var(--red-deep); }
.msg.warn { background: #fff1d6; color: var(--amber); }
.toast { position: sticky; top: 64px; z-index: 4; }
.badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: rgb(16 19 24 / .07); color: var(--ink-2); margin: 2px 4px 0 0; }
.badge.red { background: var(--red); color: #fff; }
.badge.amber { background: #ffe1b3; color: #7a4300; }
.badge.green { background: #d3f0dc; color: var(--green); }
.weeknav { display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 2px 0 14px; }
.weeknav > a, .weeknav > span { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.6rem; text-decoration: none; background: #fff; border-radius: 99px; box-shadow: var(--shadow); }
.weeknav > span { background: none; box-shadow: none; }
.day h2 { font-family: var(--font); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 20px 4px 8px; font-weight: 700; }
.day.today h2 { color: var(--red); }
.job { background: #fff; border-radius: var(--radius); margin-bottom: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; position: relative; }
.job::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--red); }
.job.cancelled::before { background: var(--muted); }
.job.cancelled { opacity: .7; }
.job.cancelled strong { text-decoration: line-through; }
.job.done::before, .job.running::before { background: var(--green); }
.job.running { box-shadow: 0 0 0 2px var(--green), var(--shadow); }
.job.unassigned::before { background: var(--amber); }
.job-main { display: flex; gap: 12px; padding: 14px 14px 12px 19px; color: inherit; text-decoration: none; }
.job .when { font-family: var(--display); font-weight: 700; min-width: 92px; font-variant-numeric: tabular-nums; }
.job .what { flex: 1; min-width: 0; }
.job-links { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 14px 123px; font-size: .9rem; }
.job-links a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
@media (max-width: 420px) { .job-links { padding-left: 19px; } .job .when { min-width: 80px; } }
.assign { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px 19px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; font-size: .9rem; background: #fff; }
.pill:has(input:checked) { background: #fde8ea; border-color: var(--red); }
.running-bar { display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #17803a, #0f6a2d); color: #fff; text-decoration: none; padding: 14px 16px; border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow); }
.big-when { font-family: var(--display); font-size: 1.15rem; font-weight: 600; margin: 0 0 12px; }
.btn { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgb(16 19 24 / .05); color: var(--ink); text-decoration: none; width: 100%; font-weight: 600; transition: transform .15s var(--ease); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--red); color: #fff; justify-content: center; }
.note { background: #fff1d6; border-radius: var(--r-s); padding: 12px 14px; margin: 10px 0; }
.note p { margin: 4px 0 0; }
details summary { cursor: pointer; padding: 6px 0; color: var(--red-deep); font-weight: 600; }
button, .button { font: inherit; font-weight: 600; border: 0; border-radius: 14px; padding: 13px 18px; background: rgb(16 19 24 / .06); color: var(--ink); cursor: pointer; transition: transform .15s var(--ease), background .2s; }
button:active { transform: scale(.98); }
button.primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px -8px rgb(227 6 19 / .7); }
button.dark { background: var(--ink); color: #fff; }
button.big { width: 100%; padding: 19px; font-size: 1.15rem; font-weight: 700; border-radius: 18px; }
button.link { background: none; color: var(--red-deep); padding: 6px 0; text-decoration: underline; box-shadow: none; font-weight: 600; }
button.link.danger, .danger { color: var(--red); }
button:disabled { opacity: .5; }
:focus-visible { outline: 3px solid rgb(61 156 201 / .6); outline-offset: 2px; }
.timer-buttons { display: grid; gap: 12px; }
.clock { text-align: center; font-family: var(--display); font-size: 1.15rem; margin: 6px 0 16px; color: var(--muted); }
.people { border: 0; padding: 0; margin: 0 0 8px; }
.people legend { font-weight: 700; margin-bottom: 4px; }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin: 10px 0; }
label.chk { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 1rem; font-weight: 500; color: var(--ink); }
label.chk input { width: 22px; height: 22px; accent-color: var(--red); }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
  display: block; width: 100%; font: inherit; font-weight: 500; color: var(--ink); padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-top: 5px; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { outline: none; border-color: var(--water-deep); box-shadow: 0 0 0 4px rgb(61 156 201 / .18); }
.inline-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-items: end; }
.inline-edit .full, .inline-edit button { grid-column: 1 / -1; }
.inline-edit button { margin-top: 6px; }
.row { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; }
ul.entries, ul.devices { list-style: none; padding: 0; margin: 6px 0; }
ul.entries li { border-top: 1px solid var(--line); }
ul.entries summary, ul.entries li > a { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
ul.devices li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.syncline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
table.times { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.times th, table.times td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.qrbox { max-width: 280px; margin: 0 auto; padding: 12px; background: #fff; border-radius: var(--r-m); box-shadow: var(--shadow); }
.qrbox svg { width: 100%; height: auto; }
.dayblock { margin-bottom: 8px; }
ul.entries summary > span:last-child, ul.entries li > a > span:last-child, .row > :last-child { white-space: nowrap; }
/* buildings, documentation, activities */
.search input { border-radius: 99px; padding-left: 18px; box-shadow: var(--shadow); }
ul.objects { list-style: none; padding: 0; margin: 12px 0; }
.object-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; color: inherit; text-decoration: none; transition: transform .15s var(--ease); }
.object-card:active { transform: scale(.99); }
.object-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--water); color: #1d6f96; flex: none; }
.object-icon svg.i { width: 24px; height: 24px; }
.object-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.object-main strong { font-family: var(--display); font-size: 1.05rem; }
dl.facts { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 8px 0; }
dl.facts dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 10px; }
dl.facts dd { margin: 0; }
.card.building h2 { display: flex; align-items: center; gap: 8px; }
.suggest { display: grid; gap: 8px; margin: 8px 0; }
.upload { display: grid; gap: 8px; margin-bottom: 14px; }
.upload-row { display: flex; gap: 8px; }
.upload-row select { margin-top: 0; width: auto; }
.filebtn { position: relative; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 14px; border: 2px dashed rgb(61 156 201 / .5); border-radius: 14px; background: rgb(61 156 201 / .07); color: #1d6f96; font-size: 1rem; cursor: pointer; }
/* the real file input covers ONLY its own label (inset 0); the generic input rule gives inputs width 100%, which used to stretch an invisible input over the neighbouring dropdown */
.filebtn input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0 !important; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.filebtn:focus-within { outline: 3px solid rgb(61 156 201 / .6); }
.upload-status { margin: 0; }
ul.gallery { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
ul.gallery li { background: #fff; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
ul.gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg); }
ul.gallery .cap { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
@media (min-width: 700px) { ul.gallery { grid-template-columns: repeat(3, 1fr); } }
.note-form { margin-top: 12px; }
ul.notes { list-style: none; padding: 0; margin: 12px 0 0; }
ul.notes li { border-top: 1px solid var(--line); padding: 8px 0; }
ul.notes p { margin: 2px 0; }
form.inline { display: inline; }
table.stats td:first-child { font-weight: 600; }
li.act { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 0; }
li.act form { flex: none; }
.act-form { margin-top: 10px; }
/* tasks / checklist */
ul.tasks { list-style: none; padding: 0; margin: 8px 0; }
ul.tasks li { border-top: 1px solid var(--line); padding: 10px 0; }
ul.tasks li.overdue .t-main strong { color: var(--red-deep); }
.t-main { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
ul.check { list-style: none; padding: 0; margin: 8px 0; }
ul.check > li { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; margin-bottom: 10px; background: #fff; }
ul.check > li.done { background: #eef8f1; border-color: #bfe3cb; }
ul.check > li.not_done { background: #fff6e5; border-color: #f1d49b; }
.check-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.check-btns button { width: 100%; }
.geo-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* tenant feedback */
.navicon { position: relative; display: inline-flex; }
.navbadge { position: absolute; top: -4px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font-size: .65rem; line-height: 17px; text-align: center; }
.feedback-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
fieldset.choices { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
label.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 2px solid var(--line); border-radius: var(--r-m); background: #fff; margin: 0; font-size: 1rem; color: var(--ink); font-weight: 500; cursor: pointer; }
label.choice:has(input:checked) { border-color: var(--red); background: #fff5f5; }
label.choice input { width: 22px; height: 22px; flex: none; accent-color: var(--red); margin: 2px 0 0; }
label.choice > span { display: flex; flex-direction: column; gap: 2px; }
fieldset.areas { border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px 12px; margin: 0 0 8px; }
[hidden] { display: none !important; }
.fb-photo { display: block; max-width: 100%; max-height: 280px; border-radius: var(--r-m); margin: 8px 0; }
.card.fb.bad { border-left: 5px solid #d98a00; }
.card.fb.wish { border-left: 5px solid var(--water-deep); }
.card.fb.ok { border-left: 5px solid var(--green); }
ul.visits { list-style: none; padding: 0; margin: 4px 0; }
ul.visits li { border-top: 1px solid var(--line); padding: 10px 0; }
ul.visits li:first-child { border-top: 0; }
ul.visits p { margin: 2px 0; }
li.closed-fb { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; }
/* folded cards: one tidy line each, tap to open */
details.card.fold { padding: 0; }
details.card.fold > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 15px 16px; font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); cursor: pointer; margin: 0; }
details.card.fold > summary::-webkit-details-marker { display: none; }
details.card.fold > summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s var(--ease); flex: none; }
details.card.fold[open] > summary::after { transform: rotate(-135deg); }
details.card.fold[open] > summary { border-bottom: 1px solid var(--line); }
details.card.fold > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.card.fold > :last-child { margin-bottom: 16px; }
details.card.fold > summary + * { margin-top: 12px; }
details.card.fold h2 { display: none; }
details.card.fold h2 ~ h2 { display: block; }
details.card.fold > form > h2, details.card.fold > h2 { display: block; }
ul.more { list-style: none; padding: 0; margin: 0; }
ul.more a { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; color: inherit; text-decoration: none; }
ul.more a > span:last-child { display: flex; flex-direction: column; gap: 2px; }
ul.more strong { font-family: var(--display); font-size: 1.05rem; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; }
/* calmer checklist rows */
ul.check > li { padding: 12px 14px; }
.check-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.check-row > form { flex: 1; }
.check-row > form button { width: 100%; }
.check-row > details.notdone { flex: 1; }
.check-row > details.notdone > summary { list-style: none; text-align: center; padding: 13px 18px; margin: 0; border-radius: 14px; background: rgb(16 19 24 / .06); color: var(--ink); font-weight: 600; cursor: pointer; }
.check-row > details.notdone > summary::-webkit-details-marker { display: none; }
.check-row > details.notdone[open] { flex-basis: 100%; }
.check-row > details.notdone form { margin-top: 8px; display: grid; gap: 8px; }
.task-tools { display: inline-flex; gap: 14px; align-items: center; font-size: .9rem; }
details.add-doc { margin: 0 0 12px; }
details.add-doc > summary { padding: 12px 14px; border: 2px dashed rgb(61 156 201 / .5); border-radius: 14px; background: rgb(61 156 201 / .07); color: #1d6f96; font-weight: 700; cursor: pointer; text-align: center; list-style: none; }
details.add-doc > summary::-webkit-details-marker { display: none; }
details.add-doc[open] > summary { margin-bottom: 12px; }
/* timer buttons: small, one row, text on the left, icon on the right; a running one becomes a red stop button */
.timer-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
button.tbtn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; padding: 8px 10px 8px 12px; font-size: .95rem; font-weight: 700; text-align: left; border-radius: 12px; white-space: nowrap; }
button.tbtn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.tbtn.stop { flex-grow: 2; }
button.tbtn svg.i { width: 16px; height: 16px; flex: none; }
button.tbtn.start:not(.primary) { background: rgb(16 19 24 / .07); color: var(--ink); }
button.tbtn.stop { background: var(--red); color: #fff; box-shadow: 0 0 0 3px rgb(227 6 19 / .18); }
button.tbtn.pending { opacity: .85; }
button.tbtn.pending[disabled] { opacity: .85; }
.timer .clock { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-align: left; font-size: .95rem; margin: 0 0 10px; }
.timer .clock-h { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.timer .clock-t { color: var(--muted); text-align: right; min-width: 0; }
.timer .clock-t .live { font-family: var(--display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.timer .people { margin-bottom: 4px; }
.timer .people label.chk { padding: 3px 0; font-size: .95rem; }
form.left { text-align: left; }
details.qr-login { margin-top: 18px; text-align: left; }
details.qr-login > summary { text-align: center; }
/* the times right under the buttons: one line each, pen opens the edit form */
ul.tlist { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--line); }
ul.tlist > li { border-bottom: 1px solid var(--line); }
ul.tlist summary { list-style: none; display: grid; grid-template-columns: 1fr auto auto 28px; gap: 8px; align-items: center; padding: 9px 0; cursor: pointer; font-size: .92rem; color: var(--ink); font-weight: 500; }
ul.tlist summary::-webkit-details-marker { display: none; }
ul.tlist .tl-what { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.tlist .tl-when { color: var(--muted); font-variant-numeric: tabular-nums; }
ul.tlist .tl-dur { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
ul.tlist .pen { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--red-deep); }
ul.tlist details[open] .pen { background: rgb(227 6 19 / .08); }
ul.tlist details form { padding: 4px 0 12px; }
.timer details.add > summary { padding: 10px 0 0; font-size: .9rem; }
/* door info */
.card.info .when-line { margin: 0 0 10px; font-size: 1.05rem; }
.card.info .when-line strong { font-family: var(--display); font-size: 1.2rem; }
.quick { display: grid; gap: 8px; margin-bottom: 10px; }
.quick .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dl.facts.compact { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr; gap: 4px 12px; margin: 10px 0; }
dl.facts.compact dt { margin: 0; align-self: baseline; }
dl.facts.compact dd { align-self: baseline; }
.close-card { padding: 12px 16px; }
.close-card .row { align-items: center; }
/* checklist rows: compact */
ul.check > li { padding: 10px 12px; margin-bottom: 8px; }
.check-row { margin-top: 8px; }
.check-row button, .check-row > details.notdone > summary { min-height: 40px; padding: 8px 12px; }
/* login: who are you, show password */
.who-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: rgb(16 19 24 / .06); border-radius: 14px; margin: 0 0 14px; }
.who-tabs .who { text-align: center; padding: 10px 8px; border-radius: 11px; font-weight: 700; color: var(--muted); text-decoration: none; }
.who-tabs .who.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(16 19 24 / .12); }
p.left { text-align: left; }
.pw { position: relative; display: block; }
.pw input { padding-right: 92px !important; }
.pw .reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin-top: 2px; padding: 6px 10px; min-height: 0; font-size: .82rem; font-weight: 600; background: rgb(16 19 24 / .06); border-radius: 10px; box-shadow: none; }
/* customers */
li.cust-row { display: flex; gap: 6px; align-items: stretch; }
li.cust-row .object-card { flex: 1; min-width: 0; margin-bottom: 12px; }
li.cust-row .call { display: grid; place-items: center; width: 48px; flex: none; margin-bottom: 12px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--green); }
li.cust-row .call svg.i { width: 22px; height: 22px; }
.quick .btn .ph-label { margin-left: auto; flex: none; }
.cust-line { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 600; }
fieldset.phones { border: 0; padding: 0; margin: 10px 0; }
fieldset.phones legend { font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.phone-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 10px; }
@media (min-width: 420px) { .phone-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 6px; } }
.phone-row input { margin-top: 0 !important; }
.phone-row input.ph-lbl { font-size: .9rem; padding-top: 9px; padding-bottom: 9px; }
/* sizes */
fieldset.sizes { border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px 12px 4px; margin: 10px 0; }
fieldset.sizes legend { font-weight: 700; padding: 0 4px; }
fieldset.sizes > p { margin: 0 0 4px; }
.size-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.size-grid > label { display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; column-gap: 10px; margin: 6px 0; }
.size-grid > label > .muted { grid-column: 1 / -1; margin-top: 2px; }
.unit-in { display: flex; align-items: center; gap: 6px; }
.unit-in input { text-align: right; font-variant-numeric: tabular-nums; margin-top: 0 !important; padding: 10px 10px !important; min-width: 0; }
.unit-in > span { flex: none; width: 3.1em; color: var(--muted); font-size: .85rem; font-weight: 600; }
/* planning */
.plan-day h2 { display: flex; align-items: center; justify-content: space-between; }
.plan-day .day-add { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 99px; background: #fff; box-shadow: var(--shadow); color: var(--red); text-decoration: none; font-size: 1.2rem; font-weight: 700; }
.plan-day.empty .free { margin: -2px 4px 6px; }
.plan-day.empty h2 { margin-bottom: 2px; }
details.plan-tools { padding: 0 14px 12px 19px; }
details.plan-tools > summary { font-size: .88rem; padding: 2px 0; }
.copy-form { grid-template-columns: 1fr auto; }
.copy-form button { grid-column: auto !important; align-self: end; }
fieldset.people-pick { border: 0; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
fieldset.people-pick legend { font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; width: 100%; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .top, nav.bottom { display: none; } body { background: #fff; padding: 0; } .card, .job { box-shadow: none; } }
.btn.btn-auto { width: auto; }