/* =============================================================
   HIRRY — app (concierge funnel) demo components
   Non-functional mockups of spec Partie IV (§15–26). Load AFTER
   colors_and_type.css and hirry-site.css. Reuses the same tokens
   (.btn, .wrap, .h*, .body*, .eyebrow, .label, .chip is defined here).
   ============================================================= */

/* --- Demo ribbon (every app page is a mockup) ----------------------- */
.demo-ribbon { background: var(--amber-100); color: var(--amber-700); border-bottom: 1px solid var(--line-strong);
               font-size: 12.5px; font-weight: 600; text-align: center; padding: 8px 16px; letter-spacing: 0.01em; }
.demo-ribbon b { color: var(--amber-700); }

/* --- App shell: single column, narrow (FORM-42/51) ------------------ */
.app-shell { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px;
              padding: 20px 0 8px; }
.app-header .wm-static { cursor: default; }            /* logo not a link during the flow (FORM-49/50) */
.app-meta { font-size: 12.5px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.app-main { padding: 16px 0 56px; }
.app-title { margin: 6px 0 4px; }
.app-intro { color: var(--fg2); max-width: 60ch; margin: 0 0 24px; }

/* --- Progress steps (FORM-38: scope + position + state) ------------- */
.progress { display: flex; gap: 8px; margin: 18px 0 28px; list-style: none; padding: 0; }
.progress li { flex: 1; border-top: 3px solid var(--line-strong); padding-top: 8px; font-size: 12.5px;
               color: var(--fg3); font-weight: 600; }
.progress li.done { border-top-color: var(--marine-300); color: var(--fg2); }
.progress li.current { border-top-color: var(--marine-600); color: var(--fg1); }
.progress li .step-n { font-variant-numeric: tabular-nums; }
@media (max-width: 620px){ .progress li { font-size: 11px; } }

/* --- Read-only data groups + Modifier (écran 1, §17) ---------------- */
.data-group { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
              padding: 4px 20px; margin-bottom: 16px; }
.data-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                    padding: 14px 0 10px; border-bottom: 1px solid var(--line); }
.data-group__head h2 { margin: 0; font-size: 16px; }
.data-row { display: flex; gap: 16px; justify-content: space-between; align-items: baseline; padding: 12px 0;
            border-bottom: 1px solid var(--line); }
.data-row:last-child { border-bottom: none; }
.data-row dt { margin: 0; font-size: 13px; color: var(--fg3); min-width: 12ch; }
.data-row dd { margin: 0; font-size: 14.5px; color: var(--fg1); text-align: right; }
.edit-link { font-size: 13px; font-weight: 600; color: var(--action); background: none; border: none;
             cursor: pointer; padding: 0; }
.edit-link:hover { color: var(--action-hover); }
.microcopy { font-size: 12.5px; color: var(--fg3); margin: 8px 0 0; line-height: 1.45; }

/* --- Chips ---------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; color: var(--fg2);
        background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; }

/* --- Criteria cards (écran 2, §18) — segmented radio ---------------- */
.crit-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
             padding: 14px 16px; margin-bottom: 12px; }
.crit-card__label { display: block; font-size: 15px; font-weight: 600; color: var(--fg1); margin-bottom: 10px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg label { flex: 1; min-width: 110px; display: flex; align-items: center; justify-content: center; gap: 6px;
             border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 10px; font-size: 13.5px;
             font-weight: 600; color: var(--fg2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg input:checked + label,
.seg label.is-on { border-color: var(--marine-600); background: var(--marine-050); color: var(--marine-700); }
.seg .opt-no.is-on { border-color: var(--ink-400); background: var(--paper-sunk); color: var(--ink-700); }

/* --- Profile / CV card (écrans 3, 22, candidates) ------------------- */
.profile-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
                box-shadow: var(--sh-2); overflow: hidden; margin-bottom: 16px; }
.example-banner { display: flex; align-items: center; gap: 8px; background: var(--surface-2);
                  border-bottom: 1px solid var(--line); padding: 9px 18px; font-size: 12px; font-weight: 600;
                  color: var(--fg3); letter-spacing: 0.02em; }
.profile-body { padding: 18px 20px; }
.profile-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.profile-id .nm { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--fg1); }
.profile-id .meta { font-size: 13.5px; color: var(--fg3); }
.profile-xp { margin: 8px 0 12px; color: var(--fg2); }
.profile-q { margin: 18px 0 10px; font-weight: 600; color: var(--fg1); }
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.choice-row .btn { flex: 1; min-width: 150px; }
.btn-ghost { background: none; color: var(--fg3); border-color: transparent; }
.btn-ghost:hover { color: var(--fg1); }

/* candidate avatar = initials monogram (no photos, brief) */
.mono-av { width: 44px; height: 44px; border-radius: 50%; background: var(--marine-100); color: var(--marine-700);
           font-family: var(--font-display); font-weight: 700; font-size: 16px; display: inline-flex; flex: none;
           align-items: center; justify-content: center; letter-spacing: -0.01em; }

/* --- Payment recap + inert card area (écran 4, §20) ----------------- */
.pay-recap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
             padding: 18px 20px; margin-bottom: 18px; }
.pay-recap p { margin: 0 0 10px; }
.pay-recap p:last-child { margin-bottom: 0; }
.amount-line { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--fg1);
               font-variant-numeric: tabular-nums; margin: 18px 0 6px; }
#awx-checkout { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
                padding: 16px 18px; margin: 16px 0; }
#awx-checkout .label { display: block; margin-bottom: 6px; }
#awx-card-mount { min-height: 52px; }
.awx-error { font-size: 14px; font-weight: 600; color: #8A2A1F; background: #FBF3F2;
             border-radius: var(--r-sm); padding: 10px 12px; margin: 12px 0 0; }
.awx-offline { font-size: 12px; color: var(--fg3); margin: 10px 0 0; }
#awx-submit[disabled] { opacity: .6; cursor: progress; }
.jit-rule { border-left: 3px solid var(--marine-600); background: var(--marine-050); padding: 12px 16px;
            border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13.5px; color: var(--fg1); margin: 14px 0; }
.cgv-line { font-size: 13px; color: var(--fg2); margin: 10px 0 0; }

/* --- Status timeline (écran 5, §21) --------------------------------- */
.success-banner { display: flex; gap: 12px; align-items: flex-start; background: var(--sage-100);
                  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 22px; }
.success-banner .body { color: var(--sage-700); margin: 0; }
.timeline { list-style: none; margin: 0 0 24px; padding: 0; }
.timeline li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: none; }
.tl-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong);
          display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
          color: var(--fg3); font-variant-numeric: tabular-nums; }
.timeline li.done .tl-dot { background: var(--sage-600); border-color: var(--sage-600); color: var(--paper); }
.timeline li.current .tl-dot { border-color: var(--marine-600); color: var(--marine-700); }
.timeline li.current .tl-label { font-weight: 600; color: var(--fg1); }
.tl-label { color: var(--fg2); }
.deadline { font-weight: 600; color: var(--fg1); }

/* --- Candidate cards (écran livrée, §23) ---------------------------- */
.cand-head { border: 1px solid var(--line); border-left: 3px solid var(--marine-600); background: var(--surface-2);
             border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 20px; }
.cand-head .body-sm { margin: 4px 0 0; }
.cand-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
             box-shadow: var(--sh-1); padding: 16px 18px; margin-bottom: 14px; }
.cand-top { display: flex; gap: 14px; align-items: flex-start; }
.cand-id .nm { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.cand-id .meta { font-size: 13px; color: var(--fg3); }
.cand-xp { margin: 10px 0 12px; color: var(--fg2); }
.cand-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cand-actions .btn { font-size: 14px; padding: 10px 16px; }

/* --- Terminal-state panels (§24, archived) -------------------------- */
.state-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
               padding: 28px 26px; margin: 20px 0; }
.state-panel.calm { border-left: 3px solid var(--marine-600); }
.state-panel.honest { border-left: 3px solid var(--amber-600); }
.state-panel h2 { margin: 0 0 10px; }
.state-panel .meta { font-size: 13px; color: var(--fg3); margin-top: 12px; font-variant-numeric: tabular-nums; }
.state-links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.state-links a { font-weight: 600; color: var(--action); }

/* --- Invoices (§25) ------------------------------------------------- */
.inv-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inv-table th, .inv-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.inv-table th { font-family: var(--font-text); font-weight: 600; color: var(--fg3); font-size: 12px;
                letter-spacing: 0.06em; text-transform: uppercase; }
.badge-paid { display: inline-flex; font-size: 12px; font-weight: 600; color: var(--sage-700);
              background: var(--sage-100); border-radius: var(--r-pill); padding: 3px 10px; }

/* --- App actions bar ------------------------------------------------ */
.app-actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 20px;
               border-top: 1px solid var(--line); }
.app-actions .btn-primary { order: 2; }
.app-actions .back { order: 1; font-size: 14px; font-weight: 600; color: var(--fg3); }
.app-actions .back:hover { color: var(--fg1); }
.app-actions .spacer { flex: 1; order: 1; }

/* --- Demo hub ------------------------------------------------------- */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.hub-grid a { display: block; border: 1px solid var(--line-strong); border-radius: var(--r-md);
              background: var(--surface); padding: 16px 18px; transition: border-color .15s; }
.hub-grid a:hover { border-color: var(--marine-600); }
.hub-grid .t { font-weight: 600; color: var(--fg1); }
.hub-grid .d { font-size: 13px; color: var(--fg3); margin-top: 4px; }
@media (max-width: 620px){ .hub-grid { grid-template-columns: 1fr; } }

/* stop-search confirm dialog reuses .link-dialog from hirry-site.css */
.danger { color: #8A2A1F; }
.btn-danger { background: #8A2A1F; color: var(--paper); }
.btn-danger:hover { background: #6f2018; }