/* experience.css — SELF-SUFFICIENT production stylesheet for the guided experience.
   When active, experience.js disables style.css so this file owns 100% of the look.
   Brand logos are preserved (relocated into the header / kept in the footer).
   Fail-open / ?classic=1 restore style.css and the original single-page form. */

:root{
  --exp-bg:#f4f5f7; --exp-card:#ffffff; --exp-line:#e3e6ea; --exp-ink:#1a1d21;
  --exp-muted:#5b6470; --exp-brand:#1a6fe0; --exp-brand-d:#155ec2;
  --exp-ok:#16794c; --exp-ok-bg:#e7f5ee; --exp-warn:#9a5b00; --exp-warn-bg:#fdf3e3;
  --exp-err:#b42318; --exp-err-bg:#fdeceb; --exp-radius:12px;
  --exp-font:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Base / reset (only when active) */
html.exp-on, html.exp-on body{ margin:0; padding:0; background:var(--exp-bg); color:var(--exp-ink); font-family:var(--exp-font); display:block !important; }
html.exp-on *{ box-sizing:border-box; }
html.exp-on .navtop{ display:none !important; }              /* logo relocated into header */
.exp-hidden{ display:none !important; }

/* Form container + grid reset (replaces style.css flex grid) */
html.exp-on .contact-form{ display:block !important; max-width:680px; margin:0 auto; padding:180px 16px 110px; }
html.exp-on .contact-form [class*="col-"]{ width:100% !important; max-width:100%; float:none !important; padding:0 !important; margin:0 0 18px !important; }
html.exp-on .contact-form h2{ font:600 18px var(--exp-font); color:var(--exp-ink); margin:20px 0 8px; }
html.exp-on .contact-form>p, html.exp-on .contact-form li{ color:var(--exp-muted); font:400 14.5px/1.6 var(--exp-font); }
html.exp-on .contact-form ul{ margin:8px 0 16px; padding-left:0; list-style:none; }
html.exp-on .contact-form ul li{ padding:3px 0; }

/* Labels + fields */
html.exp-on .contact-form label{ display:block; font:600 14px var(--exp-font); color:var(--exp-ink); margin:0 0 7px; }
html.exp-on .contact-form label .required{ color:var(--exp-err); }
html.exp-on .contact-form .form-element{ position:relative; }
html.exp-on .contact-form .form-element>i{ display:none; }   /* hide decorative field icons */
html.exp-on .contact-form input:not([type=checkbox]):not([type=radio]):not([type=file]),
html.exp-on .contact-form select,
html.exp-on .contact-form textarea{
  width:100%; padding:13px 14px; font:400 15px var(--exp-font); color:var(--exp-ink);
  background:#fff; border:1px solid var(--exp-line); border-radius:10px;
  -webkit-appearance:none; appearance:none;
}
html.exp-on .contact-form select{
  padding-right:40px; background-repeat:no-repeat; background-position:right 13px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6470' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
}
html.exp-on .contact-form textarea{ min-height:110px; resize:vertical; }
html.exp-on .contact-form input:focus, html.exp-on .contact-form select:focus, html.exp-on .contact-form textarea:focus{
  outline:none; border-color:var(--exp-brand); box-shadow:0 0 0 3px rgba(26,111,224,.16);
}
html.exp-on .contact-form input::placeholder, html.exp-on .contact-form textarea::placeholder{ color:#9aa2ad; }
html.exp-on .contact-form .form-element.error input, html.exp-on .contact-form .error input,
html.exp-on .contact-form .error select, html.exp-on .contact-form .error textarea{ border-color:var(--exp-err); }
html.exp-on .contact-form .validation-error{ color:var(--exp-err); font:500 13px var(--exp-font); margin:6px 0 0; }
/* native submit button */
html.exp-on .contact-form .btn{ display:block; width:100%; background:var(--exp-brand); color:#fff; border:0; border-radius:10px; padding:15px; font:600 16px var(--exp-font); cursor:pointer; }
html.exp-on .contact-form .btn:hover{ background:var(--exp-brand-d); }
/* original files[] upload widget (kept, lightly styled) */
html.exp-on .contact-form .form-upload{ border:1px dashed #c3d0e2; border-radius:10px; padding:10px; }

/* Fixed header (brand + progress) */
.exp-header{ position:fixed; top:0; left:0; right:0; z-index:60; background:var(--exp-card); border-bottom:1px solid var(--exp-line); }
.exp-header .exp-wrap{ max-width:680px; margin:0 auto; padding:12px 16px; }
.exp-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:12px; min-width:0; }
.exp-brand a{ display:block; height:56px; width:170px; overflow:hidden; line-height:0; }
/* Logo has wide transparent margins in the source image — oversize + offset to crop them (zoom in). */
.exp-brand img{ height:auto !important; width:210px !important; max-width:none !important; margin:-18px 0 0 -22px; }
.exp-brand .name{ font:600 14px var(--exp-font); color:var(--exp-ink); }
@media (max-width:520px){ .exp-brand img{ height:50px !important; } }
.exp-progress-track{ height:6px; background:var(--exp-line); border-radius:999px; overflow:hidden; }
.exp-progress-bar{ height:100%; width:0; background:var(--exp-brand); border-radius:999px; transition:width .35s ease; }
.exp-meta{ display:flex; justify-content:space-between; align-items:baseline; margin-top:9px; gap:12px; }
.exp-meta-left{ min-width:0; }
.exp-step-title{ font:600 16px/1.3 var(--exp-font); color:var(--exp-ink); margin:0; }
.exp-step-sub{ font:500 12.5px var(--exp-font); color:var(--exp-muted); margin-top:2px; }
.exp-step-count{ font:600 13px var(--exp-font); color:var(--exp-brand); white-space:nowrap; }
.exp-saved{ font:500 12px var(--exp-font); color:var(--exp-ok); margin-top:4px; min-height:15px; }

/* Step rail */
.exp-rail-toggle{ background:none; border:0; color:var(--exp-brand); font:600 12.5px var(--exp-font); cursor:pointer; margin-top:6px; padding:0; }
.exp-rail{ list-style:none; margin:8px 0 0; padding:0; max-height:0; overflow:hidden; transition:max-height .3s ease; }
.exp-rail.open{ max-height:60vh; overflow:auto; }
.exp-rail li{ display:flex; align-items:center; gap:10px; padding:9px 6px; border-radius:8px; cursor:pointer; font:500 14px var(--exp-font); color:var(--exp-ink); }
.exp-rail li:hover{ background:#f0f3f8; }
.exp-rail li[aria-current="step"]{ background:#eaf1fd; font-weight:600; }
.exp-badge{ width:22px; height:22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:0 0 auto; }
.exp-badge.done{ background:var(--exp-ok-bg); color:var(--exp-ok); }
.exp-badge.attn{ background:var(--exp-warn-bg); color:var(--exp-warn); }
.exp-badge.todo{ background:#eef0f3; color:var(--exp-muted); }

/* Intro + transitions */
.exp-intro{ color:var(--exp-muted); font:400 15px/1.55 var(--exp-font); margin:2px 0 20px; }
html.exp-on .contact-form>[data-exp-anim]{ animation:expIn .28s ease both; }
@keyframes expIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

/* Footer nav */
.exp-footer{ position:fixed; bottom:0; left:0; right:0; z-index:60; background:var(--exp-card); border-top:1px solid var(--exp-line); }
.exp-footer .exp-wrap{ max-width:680px; margin:0 auto; padding:12px 16px; display:flex; gap:12px; justify-content:space-between; }
.exp-btn{ font:600 15px var(--exp-font); border-radius:10px; padding:13px 22px; border:1px solid transparent; cursor:pointer; min-height:50px; }
.exp-btn-primary{ background:var(--exp-brand); color:#fff; flex:1; }
.exp-btn-primary:hover{ background:var(--exp-brand-d); }
.exp-btn-secondary{ background:#fff; color:var(--exp-brand); border-color:#c7d2e0; }

/* Live field note */
.exp-fieldnote{ display:flex; align-items:flex-start; gap:6px; font:500 13px/1.4 var(--exp-font); margin:6px 0 0; }
.exp-fieldnote.ok{ color:var(--exp-ok); }
.exp-fieldnote.warn{ color:var(--exp-warn); }

/* Error summary */
.exp-error-summary{ border:2px solid var(--exp-err); background:var(--exp-err-bg); border-radius:var(--exp-radius); padding:14px 16px; margin:0 0 18px; color:#7a231b; font:500 14px var(--exp-font); }
.exp-error-summary h3{ margin:0 0 8px; font-size:15px; }
.exp-error-summary a{ color:#7a231b; }

/* Consent / banner */
.exp-consent{ background:#eef4fe; border:1px solid #cfe0fb; border-radius:var(--exp-radius); padding:12px 14px; margin:16px 0; font:500 13.5px/1.5 var(--exp-font); color:#1e3a63; }
.exp-consent label{ display:flex; gap:8px; align-items:flex-start; cursor:pointer; }
.exp-consent button{ background:none; border:0; color:var(--exp-brand); font-weight:600; cursor:pointer; padding:0; margin-top:8px; }
.exp-banner{ background:var(--exp-ok-bg); border:1px solid #bfe3cf; color:var(--exp-ok); border-radius:var(--exp-radius); padding:11px 14px; margin-bottom:16px; font:500 14px var(--exp-font); }

/* Upload component */
.exp-upload{ border:2px dashed #c3d0e2; border-radius:var(--exp-radius); background:#fbfcfe; padding:18px; text-align:center; cursor:pointer; transition:border-color .2s,background .2s; }
.exp-upload:hover,.exp-upload.drag{ border-color:var(--exp-brand); background:#f2f7ff; }
.exp-up-hint{ font:500 14px var(--exp-font); color:var(--exp-muted); }
.exp-up-limits{ font:400 12.5px var(--exp-font); color:var(--exp-muted); margin-top:6px; }
.exp-up-file{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--exp-line); border-radius:10px; padding:10px 12px; margin-top:12px; text-align:left; }
.exp-up-thumb{ width:44px; height:44px; border-radius:8px; object-fit:cover; background:#eef0f3; display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }
.exp-up-info{ flex:1; min-width:0; }
.exp-up-name{ font:600 13.5px var(--exp-font); color:var(--exp-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exp-up-sub{ font:500 12.5px var(--exp-font); color:var(--exp-ok); }
.exp-up-actions button{ background:none; border:0; color:var(--exp-brand); font:600 13px var(--exp-font); cursor:pointer; padding:4px; }
.exp-up-actions button.rm{ color:var(--exp-err); }

/* Review cards */
.exp-review-card{ background:var(--exp-card); border:1px solid var(--exp-line); border-radius:14px; margin-bottom:14px; overflow:hidden; }
.exp-review-head{ display:flex; justify-content:space-between; align-items:center; padding:13px 16px; background:#f8fafc; border-bottom:1px solid #eef1f4; }
.exp-review-head h3{ margin:0; font:600 15px var(--exp-font); color:var(--exp-ink); }
.exp-review-edit{ font:600 13px var(--exp-font); color:var(--exp-brand); background:none; border:0; cursor:pointer; }
.exp-review-body{ padding:6px 16px 10px; }
.exp-kv{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px dashed #eef1f4; font:400 14px var(--exp-font); }
.exp-kv:last-child{ border-bottom:0; }
.exp-kv dt{ color:var(--exp-muted); }
.exp-kv dd{ color:var(--exp-ink); margin:0; text-align:right; word-break:break-word; }
.exp-kv dd.empty{ color:#9aa2ad; font-style:italic; }
.exp-kv .st{ font-weight:700; margin-left:8px; }
.exp-kv .st.ok{ color:var(--exp-ok); }
.exp-kv .st.warn{ color:var(--exp-warn); }
.exp-review-state{ font:600 12px var(--exp-font); padding:2px 8px; border-radius:999px; margin-left:8px; }
.exp-review-state.done{ background:var(--exp-ok-bg); color:var(--exp-ok); }
.exp-review-state.attn{ background:var(--exp-warn-bg); color:var(--exp-warn); }

/* Welcome + confirmation */
.exp-hero{ text-align:center; padding:8px 0 4px; }
.exp-hero .big{ font:700 26px var(--exp-font); color:var(--exp-ink); margin:6px 0; }
.exp-checklist{ list-style:none; padding:0 !important; margin:14px 0; }
.exp-checklist li{ padding:8px 0; border-bottom:1px solid var(--exp-line); font:500 15px var(--exp-font) !important; color:var(--exp-ink) !important; }
.exp-confirm{ text-align:center; padding:20px 4px; }
.exp-confirm .tick{ width:72px;height:72px;border-radius:999px;background:var(--exp-ok-bg);color:var(--exp-ok);display:inline-flex;align-items:center;justify-content:center;font-size:38px;margin-bottom:10px; }
.exp-confirm h2{ font:700 24px var(--exp-font); color:var(--exp-ink); margin:6px 0; }
.exp-confirm p{ color:var(--exp-muted); font:400 15px/1.6 var(--exp-font); }
.exp-next{ text-align:left; background:var(--exp-card); border:1px solid var(--exp-line); border-radius:14px; padding:16px; margin-top:16px; }
.exp-next h3{ margin:0 0 8px; font:600 15px var(--exp-font); }
.exp-next ol{ margin:0; padding-left:20px; color:var(--exp-ink); font:400 14.5px/1.7 var(--exp-font); }

/* Footer brand + banner (kept, constrained) */
html.exp-on .content.home{ max-width:680px; margin:22px auto; text-align:center; color:var(--exp-muted); font:400 13px/1.6 var(--exp-font); }
html.exp-on .content.home img:not(#randomImage){ width:auto !important; height:auto !important; max-height:38px; }
/* Banner spans the full width of the FORM column (680px), full natural height. */
html.exp-on #randomImage{ display:block; width:100% !important; max-width:680px !important; height:auto !important; max-height:none !important; margin:20px auto 0; border-radius:0; }
html.exp-on #report-issue{ display:none; }

@media (prefers-reduced-motion:reduce){ .exp-progress-bar, html.exp-on .contact-form>[data-exp-anim]{ transition:none; animation:none; } }
@media (max-width:600px){
  html.exp-on .contact-form{ padding:188px 12px 106px; }
  .exp-kv{ flex-direction:column; gap:2px; }
  .exp-kv dd{ text-align:left; }
}