/* Parent app (/app) and single-column flows (onboarding, installation, test). */

/* Flow layout: one column, the main action at the bottom. */
.flow { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; padding: 24px 24px 32px; }
.flow-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.flow-back { width: 44px; height: 44px; margin-left: -12px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.flow-step { font-size: 14px; font-weight: 600; color: var(--subtle); }
.progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.progress span { height: 4px; border-radius: 2px; background: #DCE1EB; }
.progress span.on { background: var(--primary); }
.flow h1 { margin-top: 28px; }
.flow .lead { margin-top: 10px; font-size: 17px; color: var(--muted); }
.flow-body { flex-grow: 1; display: flex; flex-direction: column; }
.flow-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.flow-actions .note { text-align: center; font-size: 14px; color: var(--subtle); margin-bottom: 6px; }
.url-bar { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; margin: -8px -8px 0; border-radius: 12px; background: #E7EAF1; color: var(--subtle); font-size: 14px; }

.qr { align-self: center; width: 268px; padding: 24px; margin-top: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qr svg { width: 220px; height: 220px; }
.waiting { align-self: center; display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 16px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-size: 15px; font-weight: 600; }
.waiting.done { background: var(--green-soft); color: var(--green); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.2px solid currentColor; border-right-color: transparent; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.copy-field { display: flex; gap: 8px; align-items: center; padding: 10px 10px 10px 14px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; overflow-wrap: anywhere; }
.copy-field code { flex-grow: 1; }
.copy-field .btn { flex-shrink: 0; font-family: var(--font-body); }
.fallback > summary { cursor: pointer; list-style: none; padding: 12px; text-align: center; font-weight: 600; color: var(--primary); }
.fallback > summary::-webkit-details-marker { display: none; }
.fallback[open] > summary { color: var(--muted); }
/* "ou" between the usual way and the one by hand. */
.or { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; color: var(--faint); font-size: 14px; font-weight: 600; }
.or::before, .or::after { content: ""; flex-grow: 1; height: 1px; background: var(--border); }
.methods { padding-top: 4px; padding-bottom: 4px; }
.method + .method { border-top: 1px solid var(--line); }
.method > summary { cursor: pointer; list-style: none; border-bottom: 0; }
.method > summary::-webkit-details-marker { display: none; }
.method > summary .chevron { transform: rotate(90deg); transition: transform 0.15s ease; }
.method[open] > summary .chevron { transform: rotate(-90deg); }
.method .steps { padding: 4px 0 16px; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; counter-reset: step; }
.steps li { display: flex; gap: 14px; align-items: flex-start; counter-increment: step; }
.steps li::before { content: counter(step); flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #FFFFFF; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps li > div { padding-top: 3px; flex: 1; min-width: 0; }
.steps li > div > .field { margin-top: 10px; }

.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.check-list .tile-icon { width: 32px; height: 32px; border-radius: 10px; }

.big-check { width: 96px; height: 96px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 40px auto 0; }
.big-check.wait { background: var(--primary-soft); color: var(--primary-dark); }
.big-check.bad { background: var(--orange-soft); color: var(--orange); }

/* App layout */
.app { min-height: 100vh; padding-bottom: 96px; }
.app-main { max-width: 680px; margin: 0 auto; padding: 20px 20px 24px; }
.app-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.app-header .kicker { font-size: 14px; font-weight: 600; color: var(--subtle); }
.app-header h1 { margin-top: 2px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px -6px; padding: 6px; font-weight: 600; font-size: 15px; }

.tabbar {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--border); backdrop-filter: blur(8px);
}
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 12px; font-weight: 600; color: var(--subtle); }
.tabbar a:hover { color: var(--text); }
.tabbar a[aria-current="page"] { color: var(--primary); }
.tabbar .count { position: absolute; top: 0; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #FFFFFF; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.tabbar .app-brand { display: none; }

@media (min-width: 960px) {
  .app { padding-bottom: 0; padding-left: 240px; }
  .tabbar { top: 0; right: auto; width: 240px; grid-template-columns: 1fr; align-content: start; gap: 4px; padding: 24px 16px; border-top: 0; border-right: 1px solid var(--border); background: var(--surface); }
  .tabbar a { flex-direction: row; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 16px; }
  .tabbar a[aria-current="page"] { background: var(--primary-soft); }
  .tabbar .count { position: static; margin-left: auto; }
  .tabbar .app-brand { display: flex; flex-direction: row; margin: 0 6px 20px; padding: 0; font-size: 20px; color: var(--text); }
  .app-main { padding-top: 40px; }
}

/* Service by service */
.service-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 520px) { .service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; align-items: center; } }

/* Family screen */
.alert-card { display: flex; gap: 14px; padding: 16px; border-radius: var(--radius-card); background: var(--orange-soft); color: var(--text); border: 1px solid #F6D3B8; }
.alert-card:hover { color: var(--text); }
.alert-card .tile-icon { background: #FFFFFF; color: var(--orange); }
.alert-card .kicker { font-size: 13px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.05em; }

.profile-card { padding: 16px; }
.profile-card + .profile-card { margin-top: 12px; }
.profile-head { display: flex; align-items: center; gap: 14px; color: var(--text); }
.profile-head:hover { color: var(--text); }
.profile-name { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.profile-state { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #F6F7FA; font-size: 15px; font-weight: 600; }
.profile-state.blocking { background: var(--orange-soft); color: var(--orange); }
.profile-state.all { background: var(--night); color: #FFFFFF; }
.profile-state.free, .profile-state.paused { background: var(--primary-soft); color: var(--primary-dark); }
.profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.profile-actions .menu > summary { width: 100%; }
@media (max-width: 420px) { .profile-actions .btn .icon { display: none; } }

.stat-card { display: flex; gap: 16px; align-items: center; padding: 18px; }
.stat-number { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }

/* "En ce moment" */
.now-card { padding: 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); }
.now-card.blocking { background: var(--orange-soft); border-color: #F6D3B8; }
.now-card.all { background: var(--night); border-color: var(--night); color: #FFFFFF; }
.now-card.all .subtle { color: #CBD0F5; }
.now-card .kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.8; }
.now-card h2 { margin-top: 6px; }

/* Day timeline (24 hours) */
.timeline { position: relative; height: 34px; border-radius: 10px; background: var(--green-soft); overflow: hidden; }
.timeline .seg { position: absolute; top: 0; bottom: 0; }
.seg-all { background: var(--night); }
.seg-partial { background: #F2A776; }
.timeline .now { position: absolute; top: -2px; bottom: -2px; width: 3px; background: var(--text); border-radius: 2px; }
.timeline-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--subtle); }
.legend-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.legend-row i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.week { display: flex; flex-direction: column; gap: 6px; }
.week-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--subtle); }
.week-row .timeline { height: 22px; border-radius: 7px; }

/* Rules screen */
.rule-note { margin-top: 10px; font-size: 14px; color: var(--subtle); }
.rule-block + .rule-block { border-top: 1px solid var(--line); }
.rule-block { padding: 16px 0; }
.rule-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.domain-list { display: flex; flex-wrap: wrap; gap: 8px; }
.domain-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: 999px; background: #EEF1F6; font-size: 14px; font-weight: 600; }
.domain-chip button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--subtle); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.domain-chip button:hover { background: #DCE1EB; color: var(--text); }
.inline-form { display: flex; gap: 8px; }
.inline-form .input { height: 48px; }

/* Offers */
.period-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #E6E9F0; }
.plan { position: relative; display: block; padding: 18px; border-radius: var(--radius-card); border: 2px solid var(--border); background: var(--surface); cursor: pointer; }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.keyboard .plan:has(input:focus-visible) { outline: 3px solid rgba(61, 75, 224, 0.45); outline-offset: 2px; }
.plan-price { font-family: var(--font-display); font-size: 28px; font-weight: 700; white-space: nowrap; }
.plan ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .icon { color: var(--green); margin-top: 3px; }

.trial-card { padding: 18px; border-radius: var(--radius-card); background: var(--primary); color: #FFFFFF; }
.trial-card .subtle { color: #D9DCFB; }
.trial-card .btn { background: #FFFFFF; color: var(--primary-dark); }

.danger-zone { border-color: #F0C5C8; }

/* "Qui voulez-vous protéger ?" */
.big-choice {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 88px; padding: 16px 18px;
  border: 2px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface); color: var(--text);
  font-family: var(--font-display); font-size: 22px; font-weight: 700; text-align: left; cursor: pointer;
}
@media (hover: hover) { .big-choice:hover { border-color: var(--primary); color: var(--text); } }
/* A need on "Que voulez-vous faire ?": several can be ticked. */
.goal { position: relative; font-size: 19px; }
.goal input { position: absolute; opacity: 0; pointer-events: none; }
.goal .tick { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: transparent; }
.goal:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.goal:has(input:checked) .tick { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.keyboard .goal:has(input:focus-visible) { outline: 3px solid rgba(61, 75, 224, 0.45); outline-offset: 2px; }
.big-choice .tile-icon { width: 56px; height: 56px; border-radius: 16px; }

/* A value on the right of a list row: an hour, a level, a state */
.list-value { flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.section-head { margin: 28px 0 10px; }
.section-head .section-title { margin: 0; }
.section-link { font-size: 15px; font-weight: 600; }
.icon-btn { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--subtle); }
.icon-btn:hover { background: #EEF1F6; color: var(--text); }

/* Moments, set on their own card (docs/ux/breadboard.md, A5) */
.moment { padding: 14px 16px 16px; scroll-margin-top: 16px; }
.moment-head { display: flex; align-items: center; gap: 10px; }
.moment-name {
  flex-grow: 1; min-width: 0; height: 44px; padding: 0 8px; border: 1px solid transparent; border-radius: 12px;
  background: transparent; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
}
.moment-name:hover { border-color: var(--border); }
.moment-name:focus { border-color: var(--primary); outline: none; background: var(--surface); }
.moment.is-new .moment-name { border-color: var(--border-strong); }
/* Start → end, and "le lendemain" under the end when it is before the start. */
.moment-times { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px 8px; margin-top: 14px; max-width: 360px; }
.moment-times .arrow { color: var(--faint); }
.moment-times .badge { grid-column: 3; justify-self: start; }
.time-big {
  width: 100%; min-width: 0; height: 58px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface);
  font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none;
}
.time-big::-webkit-calendar-picker-indicator { margin: 0; padding: 0; opacity: 0.55; }
.time-big:focus { border-color: var(--primary); outline: none; }
.moment .day-pills span { height: 40px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); font-size: 15px; font-weight: 600; cursor: pointer;
}
.chip input:checked + span { background: var(--orange-soft); border-color: #F2A776; color: var(--orange); }
.chip-all input:checked + span { background: var(--night); border-color: var(--night); color: #FFFFFF; }
.keyboard .chip input:focus-visible + span { outline: 3px solid rgba(61, 75, 224, 0.45); outline-offset: 2px; }
.chips:has(.chip-all input:checked) .chip:not(.chip-all) { opacity: 0.45; }
.chip-big span { min-height: 52px; padding: 0 20px; font-size: 17px; }
.moment-options { padding: 0; }
.moment-foot { margin-top: 16px; }
.moment-foot:empty { display: none; }
.js [data-moment-autosave-value="true"] .moment-foot { display: none; }
.js .moment.is-locked:not(.is-dirty) .moment-foot { display: none; }
.js .moment.is-unsaved .moment-foot { display: block; }
.moment .field-error { margin-top: 10px; }
/* A locked profile's filters: "Enregistrer" once something changed. */
.hold-save { position: sticky; bottom: 16px; }
.js form:not(.is-dirty) > .hold-save { display: none; }
.saved { animation: fade-out 0.4s ease 2.4s forwards; }
@keyframes fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .saved { animation: none; } }
.moment-add > summary { list-style: none; }
.moment-add > summary::-webkit-details-marker { display: none; }
.moment-add[open] > summary { display: none; }

/* Adding a profile: the age only for a child */
.profile-form:has(input[name="profile[kind]"][value="adult"]:checked) .child-only { display: none; }