/* 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(3, 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; }

.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; }

.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(4, 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%; }

.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); }
.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; }