:root {
  color-scheme: dark;
  --orange: #FF9D00;
  --orange-faint: #FF9D0040;
  --orange-wash: #FF9D0010;
  --frame-radius: 1.2152777778cqw;
  --control-radius: 8px;
  --safe: #28d85a;
  --due-soon: var(--orange);
  --overdue: #ff3030;
  --neutral: #8b8b8b;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: #050505;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: grid;
  place-items: start center;
  min-height: 100dvh;
  overscroll-behavior: none;
}

#app { width: 100%; }

.screen {
  position: relative;
  width: min(100vw, calc(100dvh * 9 / 16), 576px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  overflow: hidden;
  background: #080808 center / 100% 100% no-repeat;
  touch-action: auto;
}

.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.overlay-input,
.overlay-textarea,
.overlay-select,
.overlay-value {
  position: absolute;
  z-index: 2;
  min-width: 0;
  border: 0;
  border-radius:var(--control-radius);
  outline: none;
  background: transparent;
  color: #fff;
  font: 700 clamp(10px, 3.5vw, 20px)/1.1 Arial, sans-serif;
  padding: .15em .45em;
}

.overlay-input:focus,
.overlay-textarea:focus,
.overlay-select:focus {
  background: rgba(255,157,0,.12);
  box-shadow: inset 0 0 0 2px var(--orange);
}

.overlay-textarea { resize: none; }
.overlay-select { appearance: auto; }
.overlay-value { display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.center { text-align: center; justify-content: center; }
.large-value { font-size: clamp(17px, 6vw, 35px); }
.small-value { font-size: clamp(7px, 2.2vw, 12px); }
.uppercase { text-transform: uppercase; }

.bike-caption {
  position: absolute;
  z-index: 3;
  left: 7.5%;
  top: 2.55%;
  width: 48%;
  height: 2.3%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #080808;
  color: #fff;
  font-size: clamp(11px, 3.4vw, 19px);
  font-weight: 800;
  white-space: nowrap;
}

.hotspot {
  position: absolute;
  z-index: 5;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.hotspot:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }

.status-safe { box-shadow: inset 0 0 0 2px var(--safe); }
.status-dueSoon { box-shadow: inset 0 0 0 2px var(--due-soon); }
.status-overdue { box-shadow: inset 0 0 0 2px var(--overdue); }
.status-neutral, .status-notRequired { box-shadow: none; }

.history-cell {
  font-size: clamp(8px, 2.55vw, 14px);
  text-align: center;
}

.schedule-value {
  font-size: clamp(5.5px, 1.8vw, 10px);
  text-align: center;
  justify-content: center;
  padding: 0 .1em;
}

.schedule-row-hit.selected { background: transparent; }
.schedule-row-hit.selected::after { content: ""; position: absolute; inset: 3px auto 3px 3px; width: 28%; border: 1px solid #eee; border-radius:var(--control-radius); pointer-events: none; }

.unit-choice.active,
.format-choice.active { outline: 2px solid var(--orange); outline-offset: -2px; }

.phone-action {
  position: absolute;
  z-index: 6;
  border: 0;
  background: transparent;
  color: var(--orange);
  font-size: clamp(12px, 4vw, 22px);
  cursor: pointer;
}

.fleet-record {
  position: absolute;
  z-index: 4;
  border: 0;
  border-radius:var(--control-radius);
  background: transparent;
  cursor: pointer;
}

.fleet-record:focus-visible { outline: 3px solid var(--orange); }

.danger-hit { color: transparent; }

.screen-activate { container-type: inline-size; }

.activation-license-input {
  position: absolute;
  z-index: 6;
  border: 0;
  border-radius:var(--control-radius);
  outline: none;
  background: transparent;
  color: #fff;
  min-width: 0;
  min-height: 0;
  appearance: none;
  font: 800 4.3cqw/1.15 Arial, sans-serif;
  padding: 0 .65em;
}

.activation-license-input::placeholder { color: #777; }
.activation-license-input:focus {
  background: rgba(255,157,0,.08);
  box-shadow: inset 0 0 0 2px var(--orange);
}

.activation-email-input { font-size: 4cqw; }

.device-checkbox {
  position: absolute;
  z-index: 7;
  accent-color: var(--orange);
  cursor: pointer;
}

.device-detail {
  font-size: clamp(7px, 2.2vw, 13px);
  padding: 0 .2em;
}

.device-detail.muted { color: #bdbdbd; }

#toast {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  translate: -50% 120%;
  max-width: min(90vw, 32rem);
  padding: .75rem 1rem;
  border: 1px solid var(--orange);
  border-radius:var(--control-radius);
  background: #101010;
  color: #fff;
  font-weight: 700;
  opacity: 0;
  transition: .2s ease;
}

#toast.show { translate: -50% 0; opacity: 1; }

dialog {
  width: min(92vw, 28rem);
  border: 2px solid var(--orange);
  border-radius:var(--control-radius);
  background: #111;
  color: #fff;
}

dialog::backdrop { background: rgba(0,0,0,.8); }
dialog form { display: grid; gap: 1rem; }
dialog h2 { margin: 0; color: var(--orange); }
dialog label { display: grid; gap: .35rem; font-weight: 700; }
dialog input { min-height: 2.8rem; border: 1px solid #777; border-radius:var(--control-radius); padding: .5rem; background: #050505; color: #fff; font-size: 1rem; }
.dialog-note { margin: 0; color: #bbb; font-size: .9rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .75rem; }
.dialog-actions button { min-height: 2.6rem; border: 1px solid #888; border-radius:var(--control-radius); padding: .45rem .9rem; background: #222; color: #fff; font-weight: 800; }
.dialog-actions .primary { border-color: var(--orange); background: var(--orange); color: #080808; }
.otp-timers { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; color: #ddd; font-size: .9rem; }
.otp-timers strong { color: var(--orange); }
.local-review-note { color: var(--orange); }
.dialog-actions button:disabled { opacity: .45; cursor: not-allowed; }

@media (min-width: 700px) {
  body { padding: 0; }
  .screen { border-radius:var(--control-radius); box-shadow: 0 1rem 3rem #000; }
}

/* Card 1 overlays follow the approved master coordinates and actual card width. */
.screen-card1 { container-type: inline-size; }
.screen-card1 .bike-caption {
  background: transparent;
  left: 9.375%;
  top: 3.02734375%;
  width: 65.1041667%;
  height: 2.9296875%;
  padding: 0 .2em;
  font-size: 3.125cqw;
  line-height: 1.15;
  text-transform: uppercase;
}
.screen-card1 :is(.overlay-input, .overlay-textarea, .overlay-value) {
  min-height: 0;
  font-size: 3.6cqw;
  line-height: 1.15;
  padding: 0 .2em;
}
.screen-card1 .large-value { font-size: 5.2cqw; }
.screen-card1 .small-value { font-size: 3cqw; }
.screen-card1 input[type="date"] { font-size: 3.3cqw; }
.screen-card1 input[type="date"]::-webkit-datetime-edit { padding: 0; }
.screen-card1 input[type="checkbox"] { margin: 0; padding: 0; accent-color: var(--orange); }
.screen-card1 .overlay-textarea { padding: .1em .2em; }
.card1-footer-action {
  position: absolute;
  z-index: 6;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  font: 700 2.85cqw/1.15 Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.card1-footer-action:hover { color: var(--orange); }
.card1-footer-action:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

/* v0.3.6: management controls use reserved regions in revised PNG masters. */
.screen-disclaimer, .screen-devices, .screen-deactivate { container-type: inline-size; }
.management-value { padding: 0; font: 700 3cqw/1.1 Arial, sans-serif; }
.management-value.muted { color: #bdbdbd; }
.management-button { padding: 0; color: #fff; font: 700 3cqw/1.1 Arial, sans-serif; white-space: nowrap; }
.management-button:hover { color: var(--orange); }
.management-button:focus-visible { outline: 2px solid var(--orange); }
.screen-deactivate .motorcycle-name { font-size: 3cqw; }
.screen-deactivate .date-value { font-size: 2.6cqw; }
.screen-deactivate .page-badge { font-size: 2.7cqw; color: var(--orange); }
.screen-deactivate .management-back { font-size: 2.7cqw; text-align: left; }
.screen-deactivate .deactivate-action { color: #ff3030; border: 2px solid #ff3030; border-radius:var(--frame-radius); font-size: 3.5cqw; }
.screen-deactivate .page-next { color: var(--orange); border: 2px solid var(--orange); border-radius:var(--frame-radius); }
.screen-devices .device-checkbox { margin: 0; min-width: 0; min-height: 0; }
.screen-devices .device-date { font-size: 2.7cqw; }
.screen-devices .device-name { font-weight: 400; font-size: 3cqw; }
.screen-devices .current-device-badge { background: var(--orange); color: #080808; border-radius:var(--frame-radius); font-size: 2.7cqw; }
.disclaimer-back { text-align: left; font-size: 3.5cqw; }

/* Card 3: aligned dynamic heading, with the original lettering removed in the PNG. */
.screen-card3 { container-type: inline-size; }
.screen-card3 .bike-caption {
  left: 10.85069444%;
  top: 3.3203125%;
  width: 62.93402778%;
  height: 2.197265625%;
  padding: 0;
  background: transparent;
  font: 800 3.125cqw/1.1 Arial, sans-serif;
  text-transform: uppercase;
}


/* Card 4: choose a record, then open a dedicated setting menu. */
.screen-card2 { container-type: inline-size; }
.screen-card2 .schedule-heading { font-size: 3.6cqw; }
.schedule-setting { position: absolute; z-index: 6; margin: 0; padding: 0; border: 0; border-radius:var(--frame-radius); background: transparent; color: #fff; font: 700 3.5cqw/1.1 Arial, sans-serif; cursor: pointer; }
.schedule-setting:disabled { cursor: default; background: #0007; }
.schedule-setting:hover:not(:disabled), .schedule-setting.editing, .schedule-setting:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.setting-value { position: absolute; left: 4%; right: 4%; top: 46%; bottom: 5%; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
#schedule-picker { box-sizing: border-box; width: min(94vw, 30rem); max-height: 94dvh; overflow: auto; padding: 1rem; }
#schedule-picker h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; color: var(--orange); }
#schedule-picker form { gap: .8rem; }
#schedule-picker .picker-description { margin: 0; color: #ccc; font-size: .9rem; }
#schedule-picker select, #schedule-picker input { box-sizing: border-box; width: 100%; min-width: 0; padding: .5rem; border: 1px solid #888; border-radius:var(--control-radius); background: #080808; color: white; font: inherit; }
.picker-month-year { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
#schedule-picker option { padding: .45rem; }
#schedule-picker .picker-error { margin: 0; color: var(--overdue); }
#schedule-picker .picker-error:empty { display: none; }
#schedule-picker .picker-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#schedule-picker .picker-actions button { flex: 1 0 auto; min-height: 2.6rem; padding: .5rem .7rem; }


/* v0.3.15: touch wheels only inside dialogs, with expanded table rows. */
.screen-card2 .schedule-value { font-size: 3.1cqw; padding: 0 .05em; }
.screen-card2 .bike-caption { width: 68%; font-size: 3.1cqw; }
.format-choice { border-radius:var(--frame-radius); background: #080808; color: #ccc; padding: 0; font: 400 2.25694cqw/1.1 Arial,sans-serif; }
.format-choice.active { background: var(--orange); color: #080808; font: 700 2.25694cqw/1.1 Arial,sans-serif; }
.picker-wheels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: .4rem; }
.picker-wheels.single-wheel { width: 9rem; justify-self: center; }
.picker-wheel-column { display: grid; gap: .2rem; text-align: center; min-width: 0; }
.wheel-label { font-size: .9rem; font-weight: 700; }
.distance-picker .wheel-label { display: none; }
#schedule-picker .picker-wheel-column button { min-height: 2rem; padding: .2rem; border: 1px solid #777; border-radius:var(--control-radius); background: #171717; color: var(--orange); }
.picker-wheel { display: grid; grid-template-rows: repeat(5, 1.9rem); align-items: center; border: 1px solid #888; border-radius:var(--control-radius); background: linear-gradient(#111,#333,#111); font-size: 1.25rem; touch-action: none; user-select: none; overscroll-behavior: contain; cursor: ns-resize; }
.picker-wheel span { color: #aaa; }
.picker-wheel span:first-child,.picker-wheel span:last-child { opacity: .5; }
.picker-wheel strong { color: var(--orange); font-size: 1.5rem; border-block: 1px solid var(--orange-faint); }
.picker-wheel:focus-visible { outline: 2px solid var(--orange); }
.registration-setting { position: absolute; z-index: 5; border: 0; background: transparent; color: #fff; text-align: left; padding: 0 .2em; font: 700 3.3cqw/1.1 Arial,sans-serif; }
.registration-setting:focus-visible { outline: 2px solid var(--orange); }

#schedule-picker button { touch-action: manipulation; }

/* Live status borders follow the master frames; their interiors stay unchanged. */
.maintenance-tint { position: absolute; z-index: 3; pointer-events: none; border-radius:var(--frame-radius); background: transparent; }
.maintenance-tint[data-maintenance-status=safetyInspection] { border-radius:var(--frame-radius); }
.maintenance-tint[data-maintenance-status=safetyInspection].status-safe { box-shadow: inset 0 0 0 .607639cqw var(--safe); }
.maintenance-tint[data-maintenance-status=safetyInspection].status-dueSoon { box-shadow: inset 0 0 0 .607639cqw var(--due-soon); }
.maintenance-tint[data-maintenance-status=safetyInspection].status-overdue { box-shadow: inset 0 0 0 .607639cqw var(--overdue); }
.screen-card1 .safety-summary { box-shadow: none; }

.screen-card2 .schedule-heading.with-service-check { font-size: 3cqw; justify-content: flex-start; padding-left: .25em; }
.service-check { position: absolute; z-index: 7; display: flex; align-items: center; justify-content: flex-end; gap: 1.3cqw; color: var(--orange); font: 700 2.7cqw/1.18 Arial,sans-serif; cursor: pointer; touch-action: manipulation; }
.service-check span { max-width: 25cqw; }
.service-check input { appearance: none; flex: 0 0 5.6cqw; width: 5.6cqw; height: 5.6cqw; margin: 0; border: .4cqw solid #eee; border-radius: 0; background: transparent; cursor: pointer; display: grid; place-content: center; }
.service-check input:checked { border-color: var(--orange); }
.service-check input:checked::after { content: "✓"; color: var(--orange); font: 700 5cqw/1 Arial,sans-serif; }
.service-check input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Page 1/2 numeric and date values open touch wheels; text inputs retain native keyboards. */
.wheel-field { position: absolute; z-index: 5; padding: 0 .2em; border: 0; background: transparent; color: #fff; font: 700 3.6cqw/1.15 Arial,sans-serif; text-align: left; touch-action: manipulation; cursor: pointer; }
.wheel-field:focus-visible { outline: 2px solid var(--orange); }
.screen-card1 .wheel-field.service-value { font-size: 3cqw; text-align: center; }
.picker-wheels:has(.wheel-decimal) { display: flex; }
.picker-wheels:has(.wheel-decimal) .picker-wheel-column { flex: 1; }
.wheel-decimal { align-self: center; color: var(--orange); font-size: 1.5rem; font-weight: 700; }

.screen-card3 .unit-choice { background: #080808; color: #eee; border-radius:var(--frame-radius); padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2cqw; }
.screen-card3 .unit-choice strong { font: 700 2.43cqw/1.15 Arial,sans-serif; }
.screen-card3 .unit-choice small { font: 400 1.91cqw/1.15 Arial,sans-serif; }
.screen-card3 .unit-choice.active { background: var(--orange); color: #080808; outline: none; }
.screen-card2 .format-choice { font-size: 2.17cqw; outline: none; }

.screen-card3 .sound-choice { border-radius:var(--frame-radius); background: #080808; color: #eee; padding: 0; font: 700 2.43cqw/1.15 Arial,sans-serif; }
.screen-card3 .sound-choice.active { background: var(--orange); color: #080808; }

.power-unit-menu { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.power-unit-menu button { min-height: 2.5rem; border: 1px solid #888; border-radius:var(--control-radius); background: #181818; color: #eee; font: 700 1rem Arial,sans-serif; }
.power-unit-menu button[aria-pressed=true] { color: #080808; background: var(--orange); border-color: var(--orange); }
.power-preview { display: block; text-align: center; color: #fff; font: 700 1.2rem Arial,sans-serif; }
.screen-card1 .power-value { font-size: 3.1cqw; white-space: nowrap; }

/* Six distance wheels: the thousands group is visually dominant. */
.picker-wheels.mileage-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) repeat(3,minmax(0,.65fr)); align-items: center; gap: .35rem; }
.mileage-picker .minor-place .picker-wheel { grid-template-rows: repeat(5,1.35rem); font-size: .85rem; }
.mileage-picker .minor-place .picker-wheel strong { font-size: 1rem; }
.mileage-picker .minor-place .wheel-label { font-size: .65rem; }
.mileage-picker .minor-place button { font-size: .75rem; }

/* Card 2 editable values: larger phone-readable type, with existing automatic fit. */
.screen-card3 input.overlay-input { font-size: 3.6cqw; padding: .05em .35em; }
.screen-card3 input.overlay-input[type=tel] { padding-right: 5cqw; }

.screen-card1 .engine-size-value { font-size: 3.1cqw; white-space: nowrap; }

/* The master has no extra Registered box; only the native checkbox draws its frame. */
.registered-checkbox { position: absolute; z-index: 2; min-width: 0; min-height: 0; margin: 0; padding: 0; cursor: pointer; accent-color: var(--orange); }

/* Numeric grouping is display-only; digit wheels retain their raw numeric values. */
.picker-wheels.grouped-digit-wheels { display: flex; align-items: center; gap: .25rem; }
.grouped-digit-wheels .picker-wheel-column { flex: 1; }
.wheel-group-separator { flex: 0 0 1rem; width: 1rem; text-align: center; align-self: center; color: var(--orange); font: 900 2.5rem/1 Arial,sans-serif; transform: translateY(.6rem); pointer-events: none; user-select: none; }
.picker-wheels.mileage-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) 1rem repeat(3,minmax(0,.65fr)); gap: .25rem; }
.registration-setting { display: flex; align-items: center; justify-content: space-between; gap: .65cqw; white-space: nowrap; }
.registration-date { flex: 0 1 auto; min-width: 0; }
.registration-format { flex: 0 0 auto; color: #999; font-size: 1.9cqw; font-weight: 400; text-align: right; }

/* Name borders reflect the most urgent date/distance status without intercepting row clicks. */
.schedule-name-frame { position: absolute; z-index: 4; pointer-events: none; background: transparent; border-radius: 0; }

/* Live selection display shared by every wheel menu, including both converted-value previews. */
.picker-value-preview { display: block; width: fit-content; max-width: 100%; margin-inline: auto; padding: .5rem .8rem; border: 2px solid var(--orange); border-radius:var(--control-radius); text-align: center; color: #fff; font: 700 1.2rem/1.25 Arial,sans-serif; overflow-wrap: anywhere; }

/* Completed maintenance values on Schedule (Card 2). */
.screen-card2 .schedule-value[data-schedule-column="performedDate"],
.screen-card2 .schedule-value[data-schedule-column="performedMileageM"] {
  color: #bcbcbc;
}


/* Local export and recipient selection; independent of the approved card geometry. */
#share-dialog { width: min(620px, calc(100vw - 20px)); max-height: calc(100dvh - 24px); margin: auto; padding: 20px; border: 1px solid var(--orange); border-radius:var(--control-radius); background: #111; color: #eee; overflow-y: auto; overflow-x: hidden; }
#share-dialog::backdrop { background: #000c; }
#share-dialog h2 { color: var(--orange); font-size: 23px; margin: 0 0 10px; }
#share-dialog p { line-height: 1.45; overflow-wrap: anywhere; }
#share-dialog fieldset { min-width: 0; margin: 18px 0; padding: 14px; border: 1px solid #666; border-radius:var(--control-radius); }
#share-dialog legend { font-weight: 700; color: var(--orange); padding: 0 6px; }
#share-dialog label { display: block; margin: 10px 0; line-height: 1.5; }
#share-dialog select, #share-dialog input:not([type=checkbox]) { width: 100%; min-width: 0; padding: 11px 8px; border: 1px solid #888; border-radius:var(--control-radius); font: 16px Arial,sans-serif; background: #080808; color: #fff; }
#share-dialog input[type=checkbox] { accent-color: var(--orange); width: 20px; height: 20px; margin: 0 6px 0 0; vertical-align: middle; }
#share-dialog button { min-height: 44px; max-width: 100%; margin: 6px 6px 6px 0; padding: 10px 14px; border: 1px solid var(--orange); border-radius:var(--control-radius); background: #151515; color: #fff; font: 700 16px Arial,sans-serif; cursor: pointer; }
#share-dialog button.share-primary { background: var(--orange); color: #080808; }
#share-dialog button:disabled { opacity: .45; cursor: default; }
#share-dialog .share-note { color: #bcbcbc; font-size: 14px; }
#share-dialog .share-status { color: var(--orange); }
#share-dialog .share-preview-images { max-height: 55dvh; overflow: auto; border: 1px solid #666; padding: 8px; background: #050505; }
#share-dialog .share-preview img { display: block; width: 100%; height: auto; margin-bottom: 10px; }
#share-dialog .share-close { display: block; margin-left: auto; }
#share-dialog [hidden] { display: none !important; }
#share-dialog :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media(max-width: 380px) { #share-dialog { padding: 12px; } #share-dialog fieldset { padding: 10px; } }

#schedule-picker .new-maintenance-note { color: #bcbcbc; font-size: 13px; line-height: 1.35; margin: 5px 0; }
#schedule-picker .save-new-maintenance { border: 1px solid var(--orange); background: #111; color: #fff; border-radius:var(--control-radius); padding: 10px; min-height: 44px; font-weight: 700; width: 100%; }

/* Large readout: every value sits directly above its corresponding wheel. */
#schedule-picker .aligned-value-preview { display: block; max-width: calc(100% + 4px); padding: 5px 0 8px; margin: 0; justify-self: center; border: 2px solid var(--orange); border-radius:var(--control-radius); overflow: hidden; }
.picker-aligned-digits { position: relative; height: 70px; width: 100%; font-variant-numeric: tabular-nums; }
.picker-aligned-digits span { position: absolute; top: 0; height: 70px; display: flex; align-items: center; justify-content: center; color: #fff; font: 700 58px/1 Arial,sans-serif; }
.picker-aligned-digits .aligned-separator { color: var(--orange); }
.picker-aligned-digits .date-separator { font-size: 27px; }
.preview-unit-label { text-align: center; color: #bcbcbc; font: 700 18px/1.2 Arial,sans-serif; }
.preview-unit-label[hidden] { display: none; }
#schedule-picker .picker-value-summary.power-preview { display: block; margin-top: 8px; padding: 0 8px; font: 700 clamp(20px,5.5vw,26px)/1.25 Arial,sans-serif; text-align: center; }
.preview-accessible-summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#schedule-picker .aligned-value-preview { width: 100%; max-width: 100%; min-width: 0; } #schedule-picker .aligned-value-preview.single-value-preview { width: 9rem; } #schedule-picker .picker-wheels { min-width: 0; }
.picker-aligned-digits { overflow: hidden; }

/* Approved navigation v0.3.38: same palette, native controls in the reserved footer areas. */
.field-frame-target {position:absolute;z-index:1;cursor:pointer;touch-action:manipulation;}
.navigation-action {border: .3cqw solid var(--orange);border-radius:var(--frame-radius);background:#080808;color:#fff;font:700 2.8cqw/1.1 Arial,sans-serif;}
.activation-cancel {border-color:var(--neutral);font-size:3.6cqw;}
.activation-back {font-size:3.3cqw;}
.card-fleet-back {font-size:2.7cqw;}
.horizontal-directions {position:absolute;z-index:7;display:flex;justify-content:flex-end;gap:.2cqw;}
.direction-arrow {flex:0 0 50%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;display:grid;place-items:center;touch-action:manipulation;}
.direction-arrow span {display:block;width:80%;height:80%;background:#bcbcbc;clip-path:polygon(0 0,100% 50%,0 100%);}
.direction-left span {transform:rotate(180deg);}
.direction-arrow:hover span {background:var(--orange);}
.direction-arrow:focus-visible {outline:2px solid var(--orange);outline-offset:-1px;}
.navigation-footer-surface {position:absolute;z-index:4;background:#080808;}
.vertical-compact {border:0;font-size:2.4cqw;display:flex;align-items:center;gap:.6cqw;white-space:pre-line;}
.navigation-share {border:.3cqw solid var(--orange);border-radius:var(--frame-radius);background:#080808;color:white;font:700 2cqw/1.1 Arial,sans-serif;padding:0 .4cqw;white-space:nowrap;text-align:center;overflow:hidden;}
.vertical-up {font-size:4.5cqw;}
.screen-disclaimer .disclaimer-back {border:0;background:transparent;font-size:3.5cqw;}
.screen-fleet .fleet-frame {grid-template-rows:11.6cqw minmax(0,1fr) 7cqw;padding-bottom:7cqw;}
.screen-fleet .fleet-directions {top:auto!important;bottom:2%;right:8%;left:auto!important;}

/* Keep Fleet records readable above the new footer row. */
.screen-fleet .fleet-field { padding-top: .2cqw; padding-bottom: .2cqw; }

/* Fit the usable viewport, including iPhone safe areas. Expand only the blank
   side gutters of the master canvas; master pixels and field alignment stay intact. */
#app {
  width: min(100%, calc(100dvh * .75));
  height: 100dvh;
  padding: max(3px, calc(env(safe-area-inset-top) + var(--app-top-clearance, 0px))) max(3px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-left));
  overflow: clip;
}
.screen {
  width: calc(100% * 8 / 7);
  height: 100%;
  aspect-ratio: auto;
  left: calc(-100% / 14);
  margin: 0;
}
.swipe-screen { touch-action: pinch-zoom; }
.page-zoomed .screen, .page-zoomed .screen * { touch-action: auto; }
.screen-fleet .fleet-frame {
  inset: .55% 6.25% .55%;
  grid-template-rows: 11.6cqw minmax(0,1fr) auto;
  padding-bottom: 1.65cqw;
}
/* Approved four-motorcycle preview: two equal-height rows, shared columns. */
.fleet-controls {
  --fleet-control-gap: 6px;
  --fleet-arrow-width: 25px;
  --fleet-control-height: clamp(26.67px, 4.2dvh, 42.67px);
  display: grid;
  grid-template-rows: repeat(2, var(--fleet-control-height));
  gap: var(--fleet-control-gap);
  min-width: 0;
}
.fleet-controls .fleet-footer {
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--fleet-control-gap);
}
.fleet-sync-line { position: relative; min-width: 0; min-height: 0; }
.screen-fleet .fleet-sync-line .sync-row {
  position: static;
  width: 100%; height: 100%; min-width: 0;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--fleet-control-gap);
}
.fleet-sync-line:has(.direction-arrow) .sync-retry {
  margin-right: calc(var(--fleet-arrow-width) + 5px);
}
.screen-fleet .fleet-sync-line .fleet-directions {
  position: absolute;
  top: 0!important; right: 0; bottom: auto!important; left: auto!important;
  width: var(--fleet-arrow-width)!important; height: 100%!important; margin: 0;
}
.fleet-sync-line .direction-arrow { flex: 1 1 0; min-width: 0; }
.fleet-sync-line .direction-arrow span { width: 23px; height: min(29px, 100%); }
.fleet-sync-line .sync-last { flex-direction: column; justify-content: center; gap: 1px; padding: 0 .6cqw; }
.fleet-sync-line .sync-last small { white-space: normal; font-size: min(2.1cqw, 12px); }
.fleet-sync-line .sync-last time { font-size: min(2.2cqw, 13px); }
@media (orientation: landscape) { #app { width: min(100%, calc(100dvh * .65)); } }

.screen { container-type: size; }
.activation-license-input { font-size: min(4.3cqw, 3.1cqh); }
.activation-email-input { font-size: min(4cqw, 3.1cqh); }
#toast { bottom: max(105px, calc(env(safe-area-inset-bottom) + 105px)); pointer-events: none; }

.screen-card1 .bike-caption, .screen-card2 .bike-caption, .screen-card3 .bike-caption { font-size: min(3.1cqw, 1.8cqh); line-height: 1.1; }
.screen-card3 input.overlay-input { font-size: min(3.6cqw, 2cqh); }

.screen-deactivate .management-value, .screen-devices .management-value { font-size: min(3cqw, 1.6cqh); }

.screen-deactivate .page-badge { font-size: min(2.5cqw, 1.6cqh); }
.screen-devices .device-date { font-size: min(2.7cqw, 1.6cqh); }

/* Fit each artwork's visible outer border to the same content width as Fleet.
   Values include the frame stroke, in the 1152px drawing coordinate system.
   Resize the whole screen so native controls and artwork stay aligned. */
.screen:not(.screen-fleet) {
  --drawing-left: 44;
  --drawing-width: 1064;
  width: calc(100% * 1152 / var(--drawing-width));
  left: calc(-100% * var(--drawing-left) / var(--drawing-width));
}
.screen.screen-card1 { --drawing-left: 81; --drawing-width: 990; }
.screen.screen-card2 { --drawing-left: 55; --drawing-width: 1044; }
.screen.screen-card3 { --drawing-left: 89; --drawing-width: 974; }
.screen.screen-deactivate { --drawing-left: 71; --drawing-width: 1010; }


/* Finger-following card navigation and temporary, card-only magnification. */
#app > .screen { transform-origin: 0 0; touch-action: none; }
.page-zoomed #app > .screen { touch-action: auto; }
.swipe-layer { position: fixed; z-index: 30; overflow: hidden; pointer-events: none; background: #080808; }
.swipe-panel { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.swipe-panel > .screen { pointer-events: none; transform-origin: 0 0; }

.fleet-controls .fleet-nav { font-size: min(3cqw, 18px); }
.fleet-controls .fleet-nav-add { font-size: min(2.8cqw, 17px); }
.fleet-controls .sync-status { font-size: min(2.7cqw, 17px); }
.fleet-controls .sync-retry { font-size: min(2.35cqw, 16px); }

/* Approved 18 September layouts; original master files remain archived. */
.approved-layout { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.screen-card2 .bike-caption { left:7.8%; top:2.7%; width:43%; font-size:min(2.8cqw,1.8cqh); }
.screen-card2 .schedule-actual-mileage { text-align:center; font-size:min(3.8cqw,2.6cqh); }
.screen-card2 .schedule-value[data-schedule-column="performedDate"],
.screen-card2 .schedule-value[data-schedule-column="performedMileageM"] { color:#d2d2d2; }
.screen-card2 .schedule-value.inherited-value { color:#808080; }
.screen-card3 .unit-choice, .screen-card3 .sound-choice { background:#080808; color:#eee; border:0; box-shadow:inset 0 0 0 1px #888; border-radius:0; font-size:2.7cqw; }
.screen-card3 .unit-choice strong { font-size:2.7cqw; }
.screen-card3 .unit-choice.active, .screen-card3 .sound-choice.active { background:#080808; color:var(--orange); outline:none; box-shadow:inset 0 0 0 1.5px var(--orange); }

/* Revised titles and directly editable Other name. */
.screen-card2 .bike-caption { width:50%; font-size:min(3.4cqw,2.2cqh); }
.screen-card2 .other-name-input { z-index:7; padding:0; font-size:2.7cqw; background:transparent; color:#eee; font-weight:700; }
.screen-card2 .other-name-input::placeholder { color:#eee; opacity:1; }

/* Compact mileage header, with no opaque caption over its orange border. */
.screen-card2 .bike-caption { background:transparent; }
.screen-card2 .schedule-actual-mileage { font-size:min(3.2cqw,2.3cqh); }
.screen-card2 .other-name-input { font-size:max(16px,2.7cqw); color:transparent; caret-color:transparent; }
.screen-card2 .other-name-input::placeholder { color:transparent; }
.screen-card2 .other-name-input:focus { color:#eee; caret-color:var(--orange); }
.screen-card2 .other-name-input:focus::placeholder { color:#aaa; }
.screen-card2 .other-name-display { z-index:8; pointer-events:none; padding:0; justify-content:flex-start; font-size:2.7cqw; color:#eee; }
.screen-card2 .other-name-input:focus + .other-name-display { display:none; }

/* Native card editors never shrink below Safari's readable input size. Only
   their inert display copies fit long values to the approved card geometry. */
.screen .card-text-editor { font-size:max(16px,3.6cqw)!important; color:transparent!important; caret-color:transparent; }
.screen .card-text-editor:focus { color:#fff!important; caret-color:var(--orange); }
.text-field-display { pointer-events:none; }
.card-text-editor:focus + .text-field-display { display:none; }
.screen-card3 .text-field-display { font-size:min(3.6cqw,2cqh); padding:.05em .35em; }
.screen-card3 .phone-field-display { padding-right:5cqw; }
.screen-card1 .text-field-multiline { display:block; white-space:pre-wrap; overflow-wrap:break-word; padding:.1em .2em; }
.screen-card1 .card-text-editor:focus + .text-field-multiline { display:none; }

/* Keep bitmap frames on the same kind of surface before/during/after a swipe. */
.screen-card1, .screen-card2, .screen-card3 { transform:translate3d(0,0,0); backface-visibility:hidden; }
.card-paint-cover { position:fixed; z-index:30; overflow:hidden; pointer-events:none; background:#080808; }

/* Approved complete vector cards, painted below all native controls. */
.vector-card-art { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.screen-card2 .bike-caption { text-transform:uppercase; font-size:min(3.1cqw,1.8cqh); }
.screen-card3 .unit-choice[aria-label="Metric units"] strong { font-size:2.4cqw; text-transform:none; }

/* Reminder settings share the existing Add / Disclaimer action area. */
.transfer-entry:has(.notifications-entry) { top:80%; height:10.2%; grid-template-rows:1fr 1fr; gap:1cqw; }
.transfer-entry .notifications-entry { grid-column:1 / -1; }
#notifications-dialog { width:min(94vw,520px); max-height:90dvh; overflow:auto; border:2px solid var(--orange); background:#111; color:#eee; border-radius:var(--control-radius); padding:20px; }
#notifications-dialog h2 { color:var(--orange); margin-top:0; }
#notifications-dialog p { line-height:1.45; overflow-wrap:anywhere; }
#notifications-dialog label { display:flex;align-items:center;gap:12px; }
#notifications-dialog input { width:24px;height:24px;accent-color:var(--orange); }
.notification-actions { display:grid;gap:10px; }
.notification-actions button { padding:12px;font:700 16px Arial;background:#080808;color:var(--orange);border:1px solid var(--orange);border-radius:var(--control-radius); }
.notification-actions button:disabled { opacity:.45; }

/* Approved expanded Maintenance table and separate parameter panel, 2026-09-21. */
.screen-card2 .schedule-value { font-size:3.38542cqw; }
.screen-card2 .other-name-display { font-size:3.125cqw; color:#949494; }
.screen-card2 .schedule-priority-frame { position:absolute; z-index:9; pointer-events:none; box-shadow:inset 0 0 0 .43403cqw var(--orange); }
#maintenance-settings { width:min(96vw,620px); max-height:94dvh; padding:14px; overflow:auto; background:#101010; }
.maintenance-settings-block { padding:12px; border:1px solid #888; border-radius:var(--control-radius); }
#maintenance-settings h2 { border:1px solid #aaa; border-radius:var(--control-radius); text-align:center; margin:0 0 14px; padding:14px 6px; font-size:23px; color:#fff; overflow-wrap:anywhere; }
.maintenance-settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 18px; }
.maintenance-setting { border:1px solid #999; border-radius:var(--control-radius); background:#080808; color:#fff; min-height:85px; padding:9px 3px; font:700 20px Arial,sans-serif; cursor:pointer; min-width:0; }
.maintenance-setting .setting-caption { display:block; min-height:30px; font-size:14px; color:#bcbcbc; font-weight:400; line-height:1.1; }
.maintenance-setting .setting-value { position:static; display:block; font-size:20px; }
.maintenance-setting:hover,.maintenance-setting:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
#maintenance-settings .maintenance-service-check { display:flex; align-items:center; justify-content:space-between; margin:15px 0 0; font-size:16px; font-weight:400; }
#maintenance-settings input[type=checkbox] { accent-color:var(--orange); width:21px; height:21px; min-height:0; }
#maintenance-settings .dialog-actions { margin-top:14px; }
.maintenance-other-label { font-size:16px; margin-bottom:12px; }
.maintenance-other-label input { width:100%; min-width:0; font-size:16px; }
@media(max-width:400px) { .maintenance-settings-grid { gap:10px; } .maintenance-setting,.maintenance-setting .setting-value { font-size:18px; } .maintenance-setting .setting-caption { font-size:12px; } #maintenance-settings { padding:10px; } #maintenance-settings h2 { font-size:21px; } .maintenance-settings-block { padding:10px; } }

/* Zoom is local to a dialog; browser-level pinch would magnify subsequent dialogs too. */
dialog { touch-action:pan-x pan-y; }
#maintenance-settings h2 { color:var(--orange); }
@media (orientation: landscape) {
  #app { width:100%; height:100dvh; }
  #app > .screen, .swipe-panel > .screen, .card-paint-cover > .screen {
    height:calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 6px) * 1.961686);
  }
}


/* Landscape pickers: value and units at left, wheels and commit actions at right. */
#schedule-picker .picker-information,
#schedule-picker .picker-editor,
#schedule-picker .picker-new-maintenance { display: contents; }
@media (orientation: landscape) {
  #schedule-picker {
    width: min(60rem, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px));
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
    padding: 12px;
  }
  #schedule-picker form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 10px 18px;
    align-items: center;
  }
  #schedule-picker .picker-information,
  #schedule-picker .picker-new-maintenance,
  #schedule-picker .picker-editor { display: grid; min-width: 0; gap: 8px; }
  #schedule-picker .picker-information { grid-column: 1; grid-row: 1; }
  #schedule-picker .picker-new-maintenance { grid-column: 1; grid-row: 2; align-self: start; }
  #schedule-picker .picker-editor { grid-column: 2; grid-row: 1 / span 2; align-content: center; }
  #schedule-picker h2 { font-size: 18px; line-height: 1.15; }
  #schedule-picker .picker-description { font-size: 12px; line-height: 1.25; }
  #schedule-picker .power-unit-menu button { min-height: 36px; padding: 4px; }
  #schedule-picker .aligned-value-preview { box-sizing: border-box; padding: 3px 0 5px; }
  #schedule-picker .picker-aligned-digits,
  #schedule-picker .picker-aligned-digits span { height: 56px; }
  #schedule-picker .preview-unit-label { font-size: 16px; }
  #schedule-picker .picker-value-summary.power-preview { margin-top: 3px; font-size: 18px; }
  #schedule-picker .new-maintenance-note { margin: 0; font-size: 12px; line-height: 1.25; }
  #schedule-picker .save-new-maintenance { min-height: 38px; padding: 6px; }
  #schedule-picker .picker-actions { flex-wrap: nowrap; gap: 6px; }
  #schedule-picker .picker-actions button { min-width: 0; flex: 1 1 0; padding: 5px; min-height: 40px; font-size: 14px; }
  #schedule-picker .picker-error { font-size: 12px; }
  #schedule-picker .wheel-label { font-size: 12px; }
  #schedule-picker .picker-wheel-column button { min-height: 28px; padding: 2px; }
  #schedule-picker .picker-wheel { grid-template-rows: repeat(5, 26px); }
  #schedule-picker .minor-place .picker-wheel { grid-template-rows: repeat(5, 20px); }
}
@media (orientation: landscape) and (max-height: 375px) {
  #schedule-picker { padding: 8px; }
  #schedule-picker form { gap: 6px 12px; }
  #schedule-picker .picker-information,
  #schedule-picker .picker-new-maintenance,
  #schedule-picker .picker-editor { gap: 5px; }
  #schedule-picker h2 { font-size: 16px; }
  #schedule-picker .picker-aligned-digits,
  #schedule-picker .picker-aligned-digits span { height: 46px; }
  #schedule-picker .power-unit-menu button { min-height: 32px; }
  #schedule-picker .picker-wheel { grid-template-rows: repeat(5, 23px); }
  #schedule-picker .minor-place .picker-wheel { grid-template-rows: repeat(5, 18px); }
}

@media (orientation: landscape) and (max-height: 340px) {
  #schedule-picker .picker-description,
  #schedule-picker .new-maintenance-note { font-size: 11px; line-height: 1.2; }
}@media (orientation: landscape) and (max-height: 340px) {
  #schedule-picker form { gap: 4px 12px; }
  #schedule-picker .picker-information,
  #schedule-picker .picker-new-maintenance { gap: 3px; }
}


/* Status emphasis in text; neutral table frames keep the page quiet. */
.screen-card2 .schedule-value,
.screen-card2 .schedule-name-frame { box-shadow:none; }
.screen-card2 .schedule-name-frame { display:flex; align-items:center; padding:0 .95cqw; color:#fff; font:700 3.125cqw/1.1 Arial,sans-serif; }
.screen-card2 .schedule-name-frame[data-schedule-name="inspectionService"] { font-size:3.2cqw; }
.screen-card2 .schedule-name-frame:is([data-schedule-name="safetyInspection"],[data-schedule-name="inspectionService"]) { line-height:1.55; }
.screen-card2 :is(.schedule-value,.schedule-name-frame).status-safe { color:var(--safe); }
.screen-card2 :is(.schedule-value,.schedule-name-frame).status-dueSoon { color:var(--due-soon); }
.screen-card2 :is(.schedule-value,.schedule-name-frame).status-overdue { color:var(--overdue); }
.screen-card1 .card-service-status { color:#fff; font-size:3.05cqw; text-align:center; box-shadow:none; padding:0 .3em; }
.screen-card1 .card-service-status[data-status="safe"] { color:var(--safe); }
.screen-card1 .card-service-status[data-status="dueSoon"] { color:var(--due-soon); }
.screen-card1 .card-service-status[data-status="overdue"] { color:var(--overdue); }
.screen-card1 .text-field-display:not(.large-value):not(.text-field-multiline),
.screen-card1 .wheel-field:not(.card-service-status),
.screen-card1 .registration-date { font-size:5.8cqw; }
.screen-card1 .engine-size-value,
.screen-card1 .power-value { font-size:5.8cqw; }


/* The complete due block is framed; manually entered history stays clearly lighter than service-generated values. */
.screen-card2 .schedule-due-frame { position:absolute; z-index:10; pointer-events:none; box-shadow:inset 0 0 0 .347222cqw #fff; }
.screen-card2 .schedule-value:is([data-schedule-column="performedDate"],[data-schedule-column="performedMileageM"]):not(.inherited-value) { color:#bcbcbc; }

/* Continuous wheel track keeps the approved five-row window and dimensions. */
.picker-wheel { position: relative; overflow: hidden; }
.picker-wheel-track { position: absolute; inset-inline: 0; top: -20%; height: 140%; display: grid; grid-template-rows: repeat(7, 1fr); align-items: center; pointer-events: none; }
.picker-wheel-track > * { display: block; min-width: 0; text-align: center; }

.screen-card3 .part-name-display { color:#949494; font:700 3.0382cqw/1.15 Arial,sans-serif; justify-content:flex-start; padding:0; pointer-events:none; white-space:nowrap; }
.maintenance-name-edit { display:block; width:100%; border:0; padding:0; background:transparent; color:var(--orange); font:inherit; white-space:normal; overflow-wrap:anywhere; cursor:text; }
.name-editor,.name-confirmation { width:min(90vw,460px); max-height:90dvh; overflow:auto; }
.name-editor input { box-sizing:border-box; width:100%; min-height:48px; font-size:20px; color:#fff; background:#080808; border:1px solid #888; padding:10px; }
.name-editor h2,.name-confirmation h2 { color:var(--orange); }
.name-confirmation p { overflow-wrap:anywhere; }
.name-confirmation .dialog-actions { flex-wrap:wrap; }

/* Approved stacked share actions and aligned, rounded two-part switches. */
.screen-card3 .unit-choice, .screen-card3 .sound-choice { font-size:2.65cqw; }
.screen-card3 .unit-choice strong { font-size:2.65cqw; }
.screen-card3 .unit-choice[aria-label="Metric units"] strong { font-size:2.1cqw; }
.screen-card3 .unit-choice[aria-label="US units"], .screen-card3 .sound-choice[aria-label="Sound on"] { border-radius:var(--frame-radius) 0 0 var(--frame-radius); }
.screen-card3 .unit-choice[aria-label="Metric units"], .screen-card3 .sound-choice[aria-label="Sound off"] { border-radius:0 var(--frame-radius) var(--frame-radius) 0; }

.screen-card2 .schedule-priority-frame, .screen-card2 .schedule-due-frame { border-radius:var(--frame-radius); }

/* Give the date a stable fitting area, independent of its current text size. */
.registration-date { flex:1 1 0; height:100%; display:flex; align-items:center; }

/* Larger values use the available space below each caption, without moving labels. */
.screen-card1 .text-field-display:not(.large-value):not(.text-field-multiline) { padding:0 .1em; line-height:1.1; }
.screen-card1 .wheel-field:not(.card-service-status) { padding:0 .1em; line-height:1.1; }
.screen-card2 .schedule-actual-mileage { font-size:4.4cqw; padding:0 .1em; line-height:1.1; }
.screen-card2 .bike-caption { width:48%; }

/* Balanced Card 1 numbers: units are subordinate, values share the same preferred size. */
.screen-card1 .large-value { font-size:5.8cqw; }
.screen-card1 .mixed-value { white-space:nowrap; }
.screen-card1 .mixed-value .value-unit { font-size:.42em; }
.screen-card1 .mixed-value .value-divider { font-size:.52em; }

/* September 23 design review only. */
.screen-card1 .bike-caption { left:10.15625%;top:2%;width:70%;height:3.2%;font-size:4.2cqw; }
.screen-card2 .bike-caption { left:7.8125%;top:2%;width:75%;height:3.2%;font-size:4.2cqw; }
.screen-card3 .bike-caption { left:10.7639%;top:2%;width:69%;height:3.2%;font-size:4.2cqw; }
.screen-card2 .schedule-actual-mileage { font-size:4.4cqw; }
#maintenance-settings .dialog-actions:has(.reset-maintenance) { justify-content:space-between; }
#maintenance-settings .reset-maintenance { color:var(--orange);border:1px solid var(--orange);background:#080808;font-size:15px;max-width:46%;padding:10px 14px;border-radius:var(--control-radius); }
.reset-review { width:min(94vw,540px);padding:20px;background:#101010;color:#eee;border:2px solid var(--orange);border-radius:var(--control-radius); }
.reset-review h2 { color:var(--orange);margin:0 0 14px;font:700 24px Arial; }
.reset-review p { line-height:1.45; }
.reset-option { display:block;text-align:left;width:100%;margin:14px 0;padding:16px;background:#080808;color:#eee;border:1px solid #888;border-radius:var(--control-radius); }
.reset-option strong { display:block;color:var(--orange);font-size:18px;margin-bottom:9px; }
.reset-option span { display:block;font-size:15px;line-height:1.4; }
.reset-review .review-only-note { color:#999;font-size:13px; }
.reset-delete { color:#ff3030; }

.textarea-done { position:fixed;z-index:1000;min-width:90px;min-height:44px;padding:8px 16px;border:2px solid var(--orange);border-radius:var(--control-radius);background:#080808;color:var(--orange);font:700 18px Arial,sans-serif;touch-action:manipulation; }

/* One decision for the complete maintenance entry, after setting its values. */
#maintenance-settings .maintenance-save-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch; }

#maintenance-settings .maintenance-save-actions button { min-width:0;max-width:none;margin:0;padding:9px 5px;min-height:58px;font:700 14px/1.2 Arial,sans-serif;border:1px solid var(--orange);border-radius:var(--control-radius);white-space:normal;overflow-wrap:normal; }
#maintenance-settings .maintenance-save-actions :is(.reset-maintenance,.save-new-maintenance) { background:#080808;color:var(--orange); }
#maintenance-settings .maintenance-save-error { color:#ff3030;font:15px/1.3 Arial,sans-serif; }
@media(max-width:360px) {
  #maintenance-settings .maintenance-save-actions { gap:6px; }
  #maintenance-settings .maintenance-save-actions button { font-size:12px;padding-inline:2px; }
  #maintenance-settings .maintenance-setting .setting-value { font-size:16px; }
}

#maintenance-settings .maintenance-save-actions button:disabled { opacity:1;background:#181818;color:#777;border-color:#555;cursor:not-allowed; }

/* Notes uses identical wrapping while editing and reading. Hide the inactive
   native paint as well as its glyphs: iOS can otherwise leave spelling marks. */
.screen-card1 :is(.notes-text-editor,.text-field-multiline) { font-size:max(16px,3.6cqw)!important;line-height:1.15;letter-spacing:normal;white-space:pre-wrap;overflow-wrap:break-word;padding:.1em .2em; }
.screen .card-text-editor:not(:focus) { opacity:0; }
#share-dialog .share-file-actions { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0; }
#share-dialog .share-file-actions button { min-width:0;margin:0;padding:10px 5px;font-size:14px; }
#share-dialog .share-file-actions .share-close { grid-column:3; }

#notifications-dialog .notification-recipients { display:grid;gap:8px;margin:18px 0 10px; }
#notifications-dialog .notification-recipients label { display:block;font-size:15px; }
#notifications-dialog .notification-recipients input[type=email] { width:100%;height:auto;min-height:44px;font-size:16px; }
#notifications-dialog .notification-recipient-warning { color:var(--orange);border:1px solid var(--orange);border-radius:var(--control-radius);padding:10px; }

#notifications-dialog .notification-recipient-row { display:flex;align-items:center;gap:12px; }
#notifications-dialog .notification-recipient-row input[type=checkbox] { flex:0 0 24px;min-height:0; }

/* Keep all four actions visible; only the explanation area scrolls on short screens. */
#notifications-dialog { max-height:calc(100dvh - 24px);padding:12px;box-sizing:border-box;overflow:hidden; }
#notifications-dialog[open] { display:flex;flex-direction:column;gap:8px; }
#notifications-dialog h2 { flex:none;font-size:24px; }
#notifications-dialog .notification-content { min-height:0;overflow-y:auto; }
#notifications-dialog p { margin:6px 0; }
#notifications-dialog .notification-note,
#notifications-dialog .notification-recipient-warning { font-size:13px;line-height:1.25; }
#notifications-dialog .notification-recipient-warning { padding:6px; }
#notifications-dialog .notification-recipients { gap:4px;margin:8px 0; }
#notifications-dialog .notification-actions { flex:none;gap:6px; }
#notifications-dialog .notification-actions button { min-height:44px;padding:9px;font-size:15px; }

/* All six management actions form one aligned column above the disclaimer. */
.screen-disclaimer .disclaimer-actions { left:6.0763889%;right:auto;top:20.99609375%;width:87.8472222%;height:35.64453125%;grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);gap:1.2152778cqw;align-items:stretch; }
.screen-disclaimer .disclaimer-actions button { font-size:3.8194444cqw;line-height:1.1;padding:0 2cqw; }
.screen-disclaimer .disclaimer-actions .disclaimer-management { border-color:#bcbcbc; }
.screen-disclaimer .disclaimer-actions .primary { background:var(--orange);color:#080808;border-color:var(--orange); }

/* Approved custom profile editors: normal value entry remains the first step. */
.customize-entry,#schedule-picker .customize-entry {display:block;width:100%;min-height:44px;padding:10px;border:1px solid var(--orange);border-radius:var(--control-radius);background:#080808;color:var(--orange);font:700 15px Arial;margin:12px 0;}
.custom-field-dialog {width:min(450px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:20px;}
.custom-field-dialog form {gap:12px;}
.custom-field-dialog h2 {font-size:27px;}
.custom-field-dialog input {width:100%;min-width:0;font-size:18px;}
.custom-field-dialog input[aria-label="Field name"] {color:var(--orange);border-color:var(--orange);font-weight:700;}
.custom-original,.custom-option-label {font-size:12px;color:#aaa;margin:0;}
.custom-warning {font-size:12px;line-height:1.5;color:#c7c7c7;border-left:3px solid var(--orange);padding:10px 12px;margin:0;background:#191919;}
.custom-types,.custom-digits,.custom-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.custom-digits {grid-template-columns:repeat(6,minmax(0,1fr));margin:8px 0 12px;}
.custom-field-dialog button {font:700 14px Arial;min-height:44px;border:1px solid #888;border-radius:var(--control-radius);background:#080808;color:#eee;padding:8px;}
.custom-field-dialog button[aria-pressed=true] {border:2px solid var(--orange);color:var(--orange);}
.custom-field-dialog .primary {background:var(--orange);border-color:var(--orange);color:#080808;}
.custom-field-dialog .custom-actions button {border-color:var(--orange);}
.custom-field-preview {display:grid;gap:7px;border:1px solid #999;border-radius:var(--control-radius);padding:10px 13px;overflow-wrap:anywhere;}
.custom-field-preview span {color:#bcbcbc;font-size:14px;}
.custom-field-preview strong {font-size:29px;line-height:1.2;}
.custom-field-error {color:#ff6262;font-size:13px;margin:0;}
.custom-field-error:empty {display:none;}
.custom-field-dialog [hidden] {display:none!important;}
.screen-card1 .custom-profile-value,.screen-card1 .engine-value {white-space:nowrap;}

.custom-actions {grid-template-columns:repeat(2,minmax(0,1fr));}

.custom-profile-picker h2,.custom-field-dialog h2 {overflow-wrap:anywhere;}

/* The value itself opens its editor; Save is the primary full-width action. */
.custom-field-dialog .custom-field-preview {display:grid;gap:7px;text-align:left;padding:10px 13px;border-color:#999;font-weight:400;}
.custom-field-dialog .custom-field-preview:focus-visible {outline:2px solid var(--orange);outline-offset:2px;}
.custom-field-dialog .custom-field-preview:disabled {cursor:default;}
.custom-actions > .primary:first-child {grid-column:1/-1;}

/* Installed apps: keep every card frame below the iPhone system-edge fade.
   Reserve space outside the card; SVG geometry, controls and exports stay aligned. */
@media (display-mode: standalone) {
  #app { --app-top-clearance:24px; }
  /* Match Card 1's 34/2048 top inset, clear of the installed iPhone edge fade. */
  .screen-fleet .fleet-frame { top:calc(100% * 34 / 2048); }
}