/* =====================================================================
   SSM.orchi Forms module design system (app/static/css/forms.css)
   ---------------------------------------------------------------------
   Generated from the approved Fable Forms redesign (see
   docs/FORMS_MODULE_DESIGN.md). Namespaced under .fm (internal Forms
   workspace) and .fp (public field form) exactly like ledger.css and
   mis.css namespace their own modules - loaded from base.html AFTER
   ledger.css, and touches no selector outside .fm/.fp.
   ===================================================================== */

/* =====================================================================
   SSM.orchi Forms — design system (proposed static/css/forms.css)
   Loaded after ledger.css. Two namespaces:
     .fm-*  internal workspace (register, new, detail, version, dialogs)
     .fp-*  public field form (phone-first)
   Tokens inherit the Ledger shell palette. ONE new accent — the brand's
   blue-green (taken from the SSM.orchi mark gradient) — is added for
   focus, selection, progress and "current" states. Ink stays the colour
   of primary actions and structure; status colours are Ledger's
   clear / hold / breach.
   ===================================================================== */

/* ---------- 0. Shell chrome copied verbatim from ledger.css so artboards
   render the real frame. Implementation does NOT re-declare these. ---- */
/* NOTE: the design-canvas ".ledger-shell" reset that lived here was only
   needed so the standalone kit page rendered outside a real app shell -
   .fm,.fp below already carry a complete, self-sufficient token set, and
   internal pages already sit inside the real body.ledger-shell (see
   app/static/css/ledger.css). Intentionally dropped here. */
.ledger-top a,.ledger-head a{color:inherit;text-decoration:none}
.ledger-top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:30}
.ledger-top-inner{max-width:var(--shell-max,1560px);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px;min-height:58px}
.ledger-brand{font-family:var(--font-brand);font-size:20px;letter-spacing:.02em;color:#fff;white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.ledger-brand span{color:var(--steel)}
.ledger-brand-name i{font-style:normal;color:var(--steel)}
.ledger-nav{display:flex;align-items:center;gap:4px;flex:1;flex-wrap:wrap}
.ledger-nav a{padding:8px 14px;border-radius:6px;font-size:14px;color:rgba(255,255,255,.72)}
.ledger-nav a.is-active{background:var(--steel-deep);color:#fff}
.ledger-top-user{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,.72);white-space:nowrap}
.ledger-top-user strong{color:#fff;font-weight:600}
.ledger-logout{background:none;border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.85);border-radius:6px;padding:5px 12px;font-family:var(--font-ui);font-size:13px;cursor:pointer}
.ledger-page-head{background:var(--card);border-bottom:1px solid var(--rule)}
.ledger-page-head-inner{max-width:var(--shell-max,1560px);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ledger-page-head h1{font-family:var(--font-brand);font-size:26px;margin:0;font-weight:400;line-height:1.2}
.ledger-page-head .ledger-page-sub{font-size:13px;color:var(--ink-3);margin-top:2px}
.ledger-btn{font-family:var(--font-ui);font-size:14px;padding:9px 16px;border-radius:7px;border:1px solid var(--rule-2);background:var(--card);color:var(--ink);cursor:pointer;display:inline-block;text-decoration:none;line-height:1.3}
.ledger-btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.ledger-btn-danger{background:var(--breach);border-color:var(--breach);color:#fff}
.ledger-main{max-width:var(--shell-max,1560px);margin:0 auto;padding:24px}

/* ---------- 1. Forms tokens ------------------------------------------ */
.fm,.fp{
  --ink:#0e1a26;--ink-2:#16242f;--ink-3:#22313d;--ink-4:#5b6b78;--ink-5:#647380;--ink-ph:#8595a1;
  --paper:#f6f8f7;--card:#ffffff;--wash:#eef2f4;--rule:#e2e8ed;--rule-2:#cbd5dd;
  --steel:#3d6a8c;--steel-deep:#27506e;--steel-wash:#eaf1f7;
  --accent:#1b6e66;--accent-deep:#145650;--accent-wash:#e3f0ee;--accent-ring:rgba(27,110,102,.22);
  --clear:#2c7551;--clear-wash:#e6f2eb;
  --hold:#a97220;--hold-wash:#fbf3e2;
  --breach:#a3433d;--breach-wash:#f9ece9;
  --hold-ink:#7f5514;--hold-line:#eed9a8;--hold-mark:#f3e5bd;--clear-ink:#1f5b3f;--clear-line:#bfe0cc;--breach-ink:#7a2f2a;--breach-line:#ecc9c5;--breach-deep:#8b352f;--steel-line:#cfdde8;--accent-line:#bfdad6;--accent-wash-2:#d5eae6;--brand-tint:#bfe3da;
  --font-brand:"Plus Jakarta Sans","Century Gothic",system-ui,sans-serif;
  --font-ui:"Plus Jakarta Sans","Century Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --r-sm:6px;--r-md:8px;--r-lg:10px;--r-xl:12px;
  --sh-pop:0 12px 32px rgba(14,26,38,.14);--sh-bar:0 -1px 0 var(--rule);
  --h-ctl:38px;--h-ctl-sm:32px;--h-ctl-lg:48px;
  font-family:var(--font-ui);color:var(--ink);
}
/* --steel on --ink is 3.05:1: logotype only, never for informational text */
.fm{font-size:14px;line-height:1.5}
.fm *,.fp *{box-sizing:border-box}
:where(.fm,.fp) a{text-decoration:none}
.fm a:where(:not([class])),.fp a:where(:not([class])){color:var(--steel-deep)}
.fm a:where(:not([class])):hover,.fp a:where(:not([class])):hover{color:var(--steel);text-decoration:underline}
.fm :is(a,button,[tabindex]):focus-visible,.fp :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fm-input:focus-visible,.fm-select:focus-visible,.fm-textarea:focus-visible,.fp-input:focus-visible,.fp-select:focus-visible,.fp-textarea:focus-visible{outline:none}
@keyframes fm-spin{to{transform:rotate(360deg)}}
.fm-spinner,.fm-icon-spin{animation:fm-spin .9s linear infinite;transform-origin:50% 50%}
.fm .mono,.fp .mono,.fm-mono,.fp-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.fm-muted{color:var(--ink-4)}
.fm-kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.fm-icon{width:16px;height:16px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-3px}
.fm-icon-lg{width:20px;height:20px}
.fm-icon-xl{width:24px;height:24px}

/* ---------- 2. Layout ------------------------------------------------ */
.fm-main{max-width:1920px;margin:0 auto;padding:20px 24px 40px;display:flex;flex-direction:column;gap:16px}
.ledger-main > .fm-main{padding:0 0 16px}
.ledger-main > .alert{margin:0 0 16px;border-radius:var(--r-lg);font-size:13.5px;font-family:var(--font-ui)}
.fm-grid-detail{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:16px;align-items:start}
.fm-grid-new{display:grid;grid-template-columns:minmax(0,760px) 340px;gap:16px;align-items:start}
.fm-stack{display:flex;flex-direction:column;gap:16px}
.fm-stack-sm{display:flex;flex-direction:column;gap:8px}
.fm-row{display:flex;align-items:center;gap:8px}
.fm-row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fm-grow{flex:1 1 auto;min-width:0}

/* ---------- 3. Page head extension ---------------------------------- */
.fm-head-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fm-head-title h1{font-family:var(--font-brand);font-size:26px;margin:0;font-weight:400;line-height:1.2;color:var(--ink)}
.fm-head-context{font-family:var(--font-mono);font-size:12px;color:var(--steel-deep);letter-spacing:.06em;margin-top:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fm-head-context .sep{color:var(--rule-2)}
.fm-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fm-head-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-4);margin-bottom:6px}
.fm-head-back:hover{color:var(--ink);text-decoration:none}

/* ---------- 4. Buttons ---------------------------------------------- */
.fm-btn{font-family:var(--font-ui);font-size:14px;font-weight:500;height:var(--h-ctl);padding:0 16px;border-radius:7px;border:1px solid var(--rule-2);background:var(--card);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;line-height:1;transition:background .15s ease,border-color .15s ease,color .15s ease}
.fm-btn:hover{border-color:var(--steel);color:var(--steel-deep);text-decoration:none}
.fm-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fm-btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.fm-btn-primary:hover{background:var(--steel-deep);border-color:var(--steel-deep);color:#fff}
.fm-btn-ghost{border-color:transparent;background:transparent;color:var(--steel-deep)}
.fm-btn-ghost:hover{background:var(--steel-wash);border-color:transparent}
.fm-btn-danger{color:var(--breach);border-color:var(--breach-line);background:var(--card)}
.fm-btn-danger:hover{background:var(--breach);border-color:var(--breach);color:#fff}
.fm-btn-danger-solid{background:var(--breach);border-color:var(--breach);color:#fff}
.fm-btn-danger-solid:hover{background:var(--breach-deep);border-color:var(--breach-deep);color:#fff}
.fm-btn-sm{height:var(--h-ctl-sm);font-size:13px;padding:0 12px;border-radius:6px}
.fm-btn-lg{height:var(--h-ctl-lg);font-size:15px;padding:0 20px;border-radius:9px}
.fm-btn-icon{width:var(--h-ctl);padding:0}
.fm-btn-icon.fm-btn-sm{width:var(--h-ctl-sm)}
.fm-btn[disabled],.fm-btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.fm-btn-group{display:inline-flex;gap:8px;align-items:center}

/* Overflow menu */
.fm-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:6px;z-index:40}
.fm-menu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;font-size:13.5px;color:var(--ink);cursor:pointer}
.fm-menu-item:hover{background:var(--steel-wash);text-decoration:none}
.fm-menu-item small{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.04em}
.fm-menu-item-danger{color:var(--breach)}
.fm-menu-item-danger:hover{background:var(--breach-wash)}
.fm-menu-sep{height:1px;background:var(--rule);margin:6px 4px}
.fm-menu-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-5);padding:8px 10px 4px}

/* ---------- 5. Status flags ----------------------------------------- */
.fm-flag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;padding:4px 8px;border-radius:4px;white-space:nowrap;line-height:1.2;font-weight:500;border:1px solid transparent}
.fm-flag-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.fm-flag-draft{background:var(--wash);color:var(--ink-3)}
.fm-flag-submitted{background:var(--clear-wash);color:var(--clear)}
.fm-flag-reopened{background:var(--hold-wash);color:var(--hold-ink)}
.fm-flag-reopened .fm-flag-dot{background:var(--hold)}
.fm-flag-archived{background:transparent;color:var(--ink-4);border-color:var(--rule-2)}
.fm-flag-active{background:var(--clear-wash);color:var(--clear)}
.fm-flag-revoked{background:var(--breach-wash);color:var(--breach)}
.fm-flag-expired{background:var(--hold-wash);color:var(--hold-ink)}
.fm-flag-ready{background:var(--clear-wash);color:var(--clear)}
.fm-flag-stored{background:var(--steel-wash);color:var(--steel-deep)}
.fm-flag-processing{background:var(--wash);color:var(--ink-4)}
.fm-flag-failed{background:var(--breach-wash);color:var(--breach)}
.fm-flag-queued{background:var(--steel-wash);color:var(--steel-deep)}
.fm-flag-running{background:var(--steel-wash);color:var(--steel-deep)}
.fm-flag-current{background:var(--ink);color:#fff}
.fm-flag-superseded{background:transparent;color:var(--ink-4);border-color:var(--rule-2)}
.fm-flag-version{background:var(--wash);color:var(--ink-3)}
.fm-flag-lg{font-size:12px;padding:6px 10px}

/* ---------- 6. Register: pulse strip -------------------------------- */
.fm-pulse{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.fm-pulse-tile{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 16px;border-right:1px solid var(--rule);text-decoration:none;color:var(--ink);position:relative;transition:background .15s ease}
.fm-pulse-tile:last-child{border-right:0}
.fm-pulse-tile:hover{background:var(--paper);text-decoration:none;color:var(--ink)}
.fm-pulse-tile.is-active{background:var(--paper)}
.fm-pulse-tile.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink)}
.fm-pulse-label{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.fm-pulse-count{font-family:var(--font-mono);font-size:24px;font-weight:500;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fm-pulse-hint{display:none}

/* ---------- 7. Command bar ------------------------------------------ */
.fm-command{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);display:flex;flex-direction:column}
.fm-command-row{display:flex;align-items:flex-end;gap:12px;padding:14px 16px;flex-wrap:wrap}
.fm-command-row + .fm-command-row{border-top:1px solid var(--rule);padding-top:10px;padding-bottom:10px;align-items:center;background:var(--paper);border-radius:0 0 var(--r-lg) var(--r-lg)}
.fm-field{display:flex;flex-direction:column;gap:5px;min-width:150px}
.fm-field-search{flex:2 1 360px;min-width:280px}
.fm-field-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.fm-input,.fm-select,.fm-textarea{font-family:var(--font-ui);font-size:14px;color:var(--ink);height:var(--h-ctl);padding:0 12px;border:1px solid var(--rule-2);border-radius:7px;background:var(--card);width:100%;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.fm-textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical}
.fm-input:hover,.fm-select:hover,.fm-textarea:hover{border-color:var(--steel)}
.fm-input:focus,.fm-select:focus,.fm-textarea:focus,.fm-input.is-focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.fm-input.is-invalid,.fm-select.is-invalid,.fm-textarea.is-invalid{border-color:var(--breach);box-shadow:0 0 0 3px rgba(163,67,61,.16)}
.fm-input::placeholder{color:var(--ink-ph)}
.fm-input[type=search]::-webkit-search-cancel-button,.fm-input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.fm-select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322313d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.fm-select.is-set{border-color:var(--accent);background-color:var(--card);color:var(--ink);font-weight:500}
.fm-search{position:relative}
.fm-search .fm-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-ph);pointer-events:none}
.fm-search .fm-input{padding-left:36px}
.fm-search .fm-input-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:0;background:var(--wash);color:var(--ink-4);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fm-command-actions{display:flex;align-items:center;gap:8px}
.fm-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1 1 auto}
.fm-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border-radius:6px;background:var(--accent-wash);border:1px solid var(--accent-line);color:var(--accent-deep);font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.fm-chip:hover{background:var(--accent-wash-2);text-decoration:none;color:var(--accent-deep)}
.fm-chip b{font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.fm-chip-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;color:var(--accent-deep)}
.fm-chip-x:hover{background:rgba(27,110,102,.12)}
.fm-chip-clear{font-size:12.5px;color:var(--steel-deep);white-space:nowrap;margin-left:auto}
.fm-result-count{font-size:12.5px;color:var(--ink-4)}
.fm-result-count strong{color:var(--ink);font-weight:600}

/* Scope (Active / Submitted / Archived) segmented control */
.fm-scope{display:inline-flex;border:1px solid var(--rule-2);border-radius:7px;background:var(--card);padding:3px;gap:2px}
.fm-scope-item{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:5px;font-size:13px;font-weight:500;color:var(--ink-4);text-decoration:none;white-space:nowrap}
.fm-scope-item:hover{color:var(--ink);text-decoration:none;background:var(--paper)}
.fm-scope-item.is-active{background:var(--ink);color:#fff}
.fm-scope-count{font-family:var(--font-mono);font-size:11px;padding:1px 6px;border-radius:4px;background:var(--wash);color:var(--ink-4)}
.fm-scope-item.is-active .fm-scope-count{background:rgba(255,255,255,.16);color:#fff}

/* ---------- 8. Table -------------------------------------------------- */
.fm-table-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.fm-table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.fm-table-wrap{overflow-x:auto}
.fm-table{width:100%;border-collapse:collapse;min-width:1100px}
.fm-table th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule-2);font-weight:500;white-space:nowrap;background:var(--paper)}
.fm-table th.is-sorted{color:var(--ink)}
.fm-table th .fm-icon{width:12px;height:12px;vertical-align:-2px;margin-left:4px}
.fm-table td{padding:12px 12px;border-bottom:1px solid var(--rule);font-size:13.5px;vertical-align:middle;line-height:1.35}
.fm-table tbody tr{cursor:pointer;transition:background .12s ease}
.fm-table tbody tr:hover{background:var(--steel-wash)}
.fm-table tbody tr:last-child td{border-bottom:0}
.fm-cell-primary{font-weight:600;color:var(--ink);font-size:14px}
.fm-cell-sub{font-size:12px;color:var(--ink-4);margin-top:2px}
.fm-cell-mono{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);letter-spacing:.01em;white-space:nowrap}
.fm-cell-mono .fm-cell-sub{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4)}
.fm-cell-flags{display:flex;gap:6px;flex-wrap:wrap}
.fm-table .fm-cell-primary{white-space:normal}
.fm-table td .fm-muted{white-space:nowrap}
.fm-cell-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.fm-cell-right{text-align:right}
.fm-row-open{opacity:0;transition:opacity .12s ease}
.fm-table tbody tr:hover .fm-row-open,.fm-row-open:focus-visible,.fm-table tbody tr:focus-within .fm-row-open{opacity:1}
@media (hover:none){.fm-row-open{opacity:1}}
.fm-cell-creator{display:flex;align-items:center;gap:8px;white-space:nowrap}
.fm-avatar{width:24px;height:24px;border-radius:6px;background:var(--steel-wash);color:var(--steel-deep);font-family:var(--font-mono);font-size:10.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;letter-spacing:.02em}
.fm-mark{background:var(--hold-mark);border-radius:2px;padding:0 1px;color:var(--ink)}
.fm-ev-count{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.fm-ev-count .fm-dot{width:7px;height:7px;border-radius:50%;background:var(--clear)}
.fm-ev-count .fm-dot.is-hold{background:var(--hold)}
.fm-ev-count .fm-dot.is-breach{background:var(--breach)}
.fm-table-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--ink-4);flex-wrap:wrap;background:var(--card)}
.fm-pager{display:inline-flex;align-items:center;gap:4px}
.fm-pager a,.fm-pager span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 8px;border-radius:6px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);text-decoration:none}
.fm-pager a:hover{background:var(--wash);text-decoration:none}
.fm-pager .is-active{background:var(--ink);color:#fff}
.fm-pager .is-disabled{color:var(--ink-5);opacity:.6;pointer-events:none}
.fm-rows-select{display:inline-flex;align-items:center;gap:8px}
.fm-rows-select .fm-select{height:30px;font-size:12.5px;width:auto;padding-right:30px}

/* ---------- 9. Empty states ----------------------------------------- */
.fm-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 24px;gap:8px}
.fm-empty-icon{color:var(--ink-5);display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.fm-empty-icon .fm-icon{width:28px;height:28px}
.fm-empty-title{font-family:var(--font-brand);font-size:20px;color:var(--ink)}
.fm-empty-copy{font-size:13.5px;color:var(--ink-4);max-width:460px}
.fm-empty-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center}
.fm-empty-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* ---------- 10. Notices --------------------------------------------- */
.fm-notice{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:var(--r-lg);border:1px solid var(--rule);background:var(--card);font-size:13.5px;line-height:1.45}
.fm-notice .fm-icon{margin-top:2px;flex:0 0 auto}
.fm-notice-title{font-weight:600;color:var(--ink)}
.fm-notice-body{color:var(--ink-3);margin-top:2px}
.fm-notice-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex:0 0 auto}
.fm-notice-hold{background:var(--hold-wash);border-color:var(--hold-line);color:var(--hold-ink)}
.fm-notice-hold .fm-notice-body{color:var(--hold-ink)}
.fm-notice-breach{background:var(--breach-wash);border-color:var(--breach-line);color:var(--breach)}
.fm-notice-breach .fm-notice-body{color:var(--breach-ink)}
.fm-notice-steel{background:var(--steel-wash);border-color:var(--steel-line);color:var(--steel-deep)}
.fm-notice-steel .fm-notice-body{color:var(--ink-3)}
.fm-notice-clear{background:var(--clear-wash);border-color:var(--clear-line);color:var(--clear)}
.fm-notice-clear .fm-notice-body{color:var(--clear-ink)}
.fm-notice-neutral{background:var(--wash);border-color:var(--rule-2);color:var(--ink-3)}

/* ---------- 11. Panels / facts / sections --------------------------- */
.fm-panel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg)}
.fm-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.fm-panel-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-deep);font-weight:500;display:flex;align-items:center;gap:8px}
.fm-panel-body{padding:16px}
.fm-panel-body + .fm-panel-body{border-top:1px solid var(--rule)}
.fm-facts{display:grid;grid-template-columns:minmax(96px,124px) minmax(0,1fr);gap:8px 16px;margin:0;font-size:13.5px}
.fm-facts dt{font-size:12px;color:var(--ink-4);padding-top:1px;font-weight:400}
.fm-facts dd{margin:0;color:var(--ink);font-weight:500;min-width:0;overflow-wrap:anywhere}
.fm-facts dd.mono{font-weight:400;font-size:12.5px}
.fm-facts dd .fm-muted{font-weight:400}
.fm-facts-2col{grid-template-columns:140px minmax(0,1fr) 140px minmax(0,1fr)}
.fm-section{padding:16px;border-top:1px solid var(--rule)}
.fm-section:first-child,.fm-panel-head + .fm-section,.fm-panel-head + .fm-form-section{border-top:0}
.fm-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.fm-section-title{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.fm-section-num{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.06em}
.fm-section-meta{font-size:12px;color:var(--ink-4);display:flex;align-items:center;gap:8px}
.fm-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.fm-answer{display:flex;flex-direction:column;gap:3px;min-width:0}
.fm-answer-label{font-size:11.5px;color:var(--ink-4)}
.fm-answer-value{font-size:13.5px;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.fm-answer-value.is-missing{color:var(--breach);font-weight:500}
.fm-answer-value.is-empty{color:var(--ink-ph);font-weight:400}
.fm-answer-wide{grid-column:1 / -1}
.fm-yes{color:var(--clear)}.fm-no{color:var(--hold-ink)}

/* Lifecycle spine */
.fm-spine{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fm-spine-node{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;padding:5px 10px;border-radius:4px;background:var(--paper);color:var(--ink-5);border:1px dashed var(--rule-2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.fm-spine-node.is-done{background:var(--clear-wash);color:var(--clear);border:1px solid transparent}
.fm-spine-node.is-current{background:var(--ink);color:#fff;border:1px solid var(--ink);font-weight:500}
.fm-spine-node.is-hold{background:var(--hold-wash);color:var(--hold-ink);border:1px solid transparent}
.fm-spine-node.is-archived{background:var(--wash);color:var(--ink-3);border:1px solid var(--rule-2)}
.fm-spine-sep{color:var(--rule-2);font-size:11px}
.fm-spine-time{font-size:10.5px}

/* Readiness */
.fm-readiness{display:flex;flex-direction:column;gap:10px}
.fm-readiness-bar{height:6px;border-radius:999px;background:var(--wash);overflow:hidden}
.fm-readiness-bar > span{display:block;height:100%;background:var(--accent);border-radius:999px}
.fm-req-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.fm-req-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.fm-req-item .fm-icon{color:var(--clear)}
.fm-req-item.is-missing{color:var(--ink)}
.fm-req-item.is-missing .fm-icon{color:var(--breach)}
.fm-req-item .fm-req-section{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.06em;text-transform:uppercase}

/* ---------- 12. Evidence ------------------------------------------- */
.fm-ev-grid{display:flex;flex-wrap:wrap;gap:10px}
.fm-ev{width:112px;display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit}
.fm-ev:hover{text-decoration:none}
.fm-ev-media{position:relative;width:112px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--rule);background:var(--wash)}
.fm-ev-media img{width:100%;height:100%;object-fit:cover;display:block}
.fm-ev-media .fm-ev-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-4);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:6px}
.fm-ev.is-stored .fm-ev-media{border-style:dashed;border-color:var(--steel);background:var(--steel-wash)}
.fm-ev.is-stored .fm-ev-ph{color:var(--steel-deep)}
.fm-ev.is-processing .fm-ev-media{border-style:dashed;border-color:var(--rule-2)}
.fm-ev.is-failed .fm-ev-media{border-color:var(--breach-line);background:var(--breach-wash)}
.fm-ev.is-failed .fm-ev-ph{color:var(--breach)}
.fm-ev:hover .fm-ev-media{border-color:var(--steel)}
.fm-ev-tag{position:absolute;left:6px;top:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:3px;background:rgba(14,26,38,.78);color:#fff}
.fm-ev-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-4);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-ev-meta.is-breach{color:var(--breach)}
.fm-ev-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.fm-ev-summary b{font-family:var(--font-mono);font-size:20px;font-weight:500;color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.fm-ev-summary .fm-ev-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;padding:3px 8px;border-radius:4px;background:var(--wash);color:var(--ink-3)}
.fm-ev-summary .fm-ev-pill.is-clear{background:var(--clear-wash);color:var(--clear)}
.fm-ev-summary .fm-ev-pill.is-steel{background:var(--steel-wash);color:var(--steel-deep)}
.fm-ev-summary .fm-ev-pill.is-breach{background:var(--breach-wash);color:var(--breach)}
.fm-gps-note{font-size:12px;color:var(--ink-4);display:flex;align-items:center;gap:6px}

/* Evidence inspector (review overlay) */
.fm-overlay{position:absolute;inset:0;background:rgba(14,26,38,.62);display:flex;align-items:center;justify-content:center;padding:32px;z-index:50}
.fm-inspector{display:grid;grid-template-columns:minmax(0,1fr) 340px;width:min(1180px,100%);height:min(720px,100%);background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--sh-pop)}
.fm-inspector-stage{background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative}
.fm-inspector-stage img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.fm-inspector-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fm-inspector-nav.is-prev{left:16px}.fm-inspector-nav.is-next{right:16px}
.fm-inspector-count{position:absolute;left:16px;top:14px;font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.8);letter-spacing:.06em}
.fm-inspector-close{position:absolute;right:14px;top:12px;width:32px;height:32px;border-radius:6px;background:transparent;border:0;color:var(--ink-4);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fm-inspector-side{display:flex;flex-direction:column;border-left:1px solid var(--rule);position:relative}
.fm-inspector-side .fm-panel-body{overflow:auto}
.fm-inspector-actions{margin-top:auto;padding:12px 16px;border-top:1px solid var(--rule);display:flex;gap:8px}
.fm-hash{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);word-break:break-all;background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:8px 10px;line-height:1.5}
.fm-hash small{display:block;color:var(--ink-4);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}

/* Grid jobs */
.fm-grid-job{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--rule);font-size:13px;background:var(--paper)}
.fm-grid-job .fm-spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--rule-2);border-top-color:var(--steel-deep);flex:0 0 auto}
.fm-grid-job.is-failed{background:var(--breach-wash);border-color:var(--breach-line);color:var(--breach-ink)}
.fm-grid-job.is-queued{background:var(--steel-wash);border-color:var(--steel-line)}
.fm-grid-job.is-running{background:var(--steel-wash);border-color:var(--steel-line)}
.fm-grid-group{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.fm-grid-group:last-child{border-bottom:0}
.fm-grid-thumb{width:64px;height:48px;border-radius:6px;border:1px solid var(--rule);background:var(--wash);overflow:hidden;flex:0 0 auto}
.fm-grid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fm-grid-group-label{font-weight:600;font-size:13.5px;color:var(--ink)}
.fm-grid-group-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4);margin-top:2px}
.fm-grid-group-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- 13. Versions / activity --------------------------------- */
.fm-version{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.fm-version:last-child{border-bottom:0}
.fm-version-num{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;width:44px;flex:0 0 auto}
.fm-version-body{flex:1 1 auto;min-width:0}
.fm-version-title{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.fm-version-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4);margin-top:2px}
.fm-version-actions{display:flex;gap:6px}
.fm-activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fm-act{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 12px;padding:0 0 14px;position:relative}
.fm-act::before{content:"";position:absolute;left:8px;top:16px;bottom:-2px;width:1px;background:var(--rule)}
.fm-act:last-child::before{display:none}
.fm-act:last-child{padding-bottom:0}
.fm-act-dot{width:18px;height:18px;border-radius:50%;background:var(--card);border:2px solid var(--rule-2);display:flex;align-items:center;justify-content:center;margin-top:1px}
.fm-act-dot.is-internal{border-color:var(--steel)}
.fm-act-dot.is-external{border-color:var(--accent);background:var(--accent-wash)}
.fm-act-dot.is-system{border-color:var(--rule-2);background:var(--wash)}
.fm-act-dot.is-breach{border-color:var(--breach);background:var(--breach-wash)}
.fm-act-body{min-width:0}
.fm-act-title{font-size:13px;font-weight:600;color:var(--ink)}
.fm-act-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4);margin-top:2px}
.fm-act-detail{font-size:12.5px;color:var(--ink-3);margin-top:4px}

/* ---------- 14. Danger zone / dialogs --------------------------------- */
.fm-danger-zone{border:1px solid var(--breach);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.fm-danger-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:var(--breach-wash);border-bottom:1px solid var(--breach)}
.fm-danger-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:4px 10px;border-radius:4px;background:var(--breach);color:#fff;white-space:nowrap}
.fm-danger-note{font-size:12.5px;color:var(--breach)}
.fm-danger-row{display:flex;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.fm-danger-row:last-child{border-bottom:0}
.fm-danger-row-title{font-size:13.5px;font-weight:600}
.fm-danger-row-copy{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.fm-danger-row .fm-btn{margin-left:auto;flex:0 0 auto}
.fm-dialog-backdrop{position:absolute;inset:0;background:rgba(14,26,38,.55);display:flex;align-items:flex-start;justify-content:center;padding-top:120px;z-index:60}
.fm-dialog{width:520px;max-width:calc(100% - 32px);background:var(--card);border-radius:12px;box-shadow:var(--sh-pop);overflow:hidden}
dialog.fm-dialog{border:0;padding:0;margin:auto}
dialog.fm-dialog::backdrop{background:rgba(14,26,38,.55)}
.fm-overlay.is-live,.fm-dialog-backdrop.is-live,.fp-camera.is-live{position:fixed;height:100dvh}
.fm-dialog-head{padding:18px 20px 0;display:flex;align-items:flex-start;gap:12px}
.fm-dialog-title{font-family:var(--font-brand);font-size:20px;color:var(--ink);line-height:1.25;margin:0;font-weight:400}
.fm-dialog-sub{font-size:13px;color:var(--ink-4);margin-top:3px}
.fm-dialog-body{padding:14px 20px 4px;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.fm-consequences{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fm-consequences li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-3)}
.fm-consequences .fm-icon{flex:0 0 auto;margin-top:2px;color:var(--ink-ph)}
.fm-consequences li.is-breach .fm-icon{color:var(--breach)}
.fm-consequences li.is-clear .fm-icon{color:var(--clear)}
.fm-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:16px 20px 18px}

/* Focused confirmation page (reason pages) */
.fm-focus{max-width:640px;margin:0 auto;width:100%}
.fm-focus .fm-panel-body{padding:20px}
.fm-form-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--rule);background:var(--paper);border-radius:0 0 var(--r-lg) var(--r-lg)}
.fm-form-foot .fm-foot-note{margin-right:auto;font-size:12.5px;color:var(--ink-4)}

/* ---------- 15. Forms (creation) ------------------------------------- */
.fm-form-section{padding:20px;border-top:1px solid var(--rule)}
.fm-form-section:first-child{border-top:0}
.fm-form-section-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px}
.fm-form-section-copy{font-size:12.5px;color:var(--ink-4);margin-bottom:14px}
.fm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.fm-form-grid .fm-span-2{grid-column:1 / -1}
.fm-label{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.fm-label .fm-opt{font-weight:400;color:var(--ink-4);font-size:12px}
.fm-label .fm-req{color:var(--breach);font-weight:600}
.fm-help{font-size:12px;color:var(--ink-4);margin-top:6px;line-height:1.4}
.fm-error{font-size:12.5px;color:var(--breach);margin-top:6px;display:flex;align-items:center;gap:6px}
.fm-count{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4);text-align:right;margin-top:4px}
.fm-count.is-over{color:var(--breach)}
.fm-error-summary{display:flex;flex-direction:column;gap:6px}
.fm-error-summary ul{margin:4px 0 0;padding-left:18px}
.fm-error-summary li{font-size:13px}

/* One-time link reveal */
.fm-link-reveal{display:flex;flex-direction:column;gap:12px}
.fm-link-box{display:flex;align-items:center;gap:8px;border:1px solid var(--accent);background:var(--accent-wash);border-radius:8px;padding:6px 6px 6px 14px}
.fm-link-box code{font-family:var(--font-mono);font-size:13px;color:var(--accent-deep);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-link-warn{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-3);padding:10px 12px;border-radius:8px;background:var(--hold-wash);border:1px solid var(--hold-line)}
.fm-link-warn .fm-icon{color:var(--hold);flex:0 0 auto;margin-top:2px}
.fm-token-suffix{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;color:var(--ink-3)}
.fm-steps{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;counter-reset:s}
.fm-steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:13px;color:var(--ink-3);align-items:start}
.fm-steps li::before{counter-increment:s;content:counter(s);width:24px;height:24px;border-radius:6px;background:var(--wash);color:var(--ink-3);font-family:var(--font-mono);font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.fm-steps li b{display:block;color:var(--ink);font-weight:600;margin-bottom:1px}

/* ---------- 16. Responsive (internal) ------------------------------- */
@media (max-width:1400px){
  .fm-field{min-width:130px}
  .fm-field-search{flex-basis:260px;min-width:220px}
  .fm-grid-detail{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}
}
@media (max-width:1200px){
  .fm-grid-detail,.fm-grid-new{grid-template-columns:1fr}
  .fm-pulse{grid-template-columns:repeat(5,minmax(0,1fr))}
  .fm-pulse-count{font-size:24px}
}
@media (pointer:coarse){
  .fm-btn-sm{height:40px}.fm-chip{height:36px}.fm-chip-x{width:26px;height:26px}
  .fm-search .fm-input-clear{width:32px;height:32px}.fm-pager a,.fm-pager span{min-width:40px;height:40px}.fm-scope-item{height:38px}
}
@media (max-width:900px){
  .fm-main{padding:16px 16px 32px}
  .fm-pulse{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .fm-inspector{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;height:100%}
  .fm-inspector-side{border-left:0;border-top:1px solid var(--rule);max-height:45%}
  .fm-dialog-backdrop{padding:24px 16px;align-items:center}
  .fm-pulse-tile{border-bottom:1px solid var(--rule)}
  .fm-command-row{flex-direction:column;align-items:stretch}
  .fm-field,.fm-field-search{min-width:0;width:100%}
  .fm-command-actions{justify-content:flex-end}
  .fm-form-grid{grid-template-columns:1fr}
}
@media (max-width:600px){.fm-answer-grid{grid-template-columns:1fr}}

/* =====================================================================
   PUBLIC FIELD FORM (.fp-*) — phone first
   ===================================================================== */
.fp-body{background:#f6f8f7}
.fp-shell{background:var(--paper);min-height:100vh;min-height:100dvh;color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.45;display:flex;flex-direction:column;position:relative}
.fp-top{background:var(--ink);color:#fff;padding:0 16px;height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}
.fp-brand{display:flex;align-items:center;gap:10px;min-width:0}
.fp-brand-name{font-family:var(--font-brand);font-size:17px;letter-spacing:.02em;line-height:1;white-space:nowrap}
.fp-brand-name i{font-style:normal;color:var(--brand-tint)}
.fp-brand-sub{font-size:11px;color:rgba(255,255,255,.7);margin-top:3px;line-height:1}
.fp-ref{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.85);letter-spacing:.04em;white-space:nowrap}
.fp-sync{display:flex;align-items:center;justify-content:center;gap:8px;height:30px;font-size:12.5px;font-weight:500;background:var(--card);color:var(--ink-4);border-bottom:1px solid var(--rule);flex:0 0 auto}
.fp-sync .fp-sync-dot{width:8px;height:8px;border-radius:50%;background:var(--clear)}
.fp-sync.is-offline{background:var(--hold-wash);color:var(--hold-ink);border-bottom-color:var(--hold-line);font-weight:600}
.fp-sync.is-syncing{background:var(--steel-wash);color:var(--steel-deep);border-bottom-color:var(--steel-line);font-weight:600}
.fp-sync.is-attention{background:var(--breach-wash);color:var(--breach);border-bottom-color:var(--breach-line);font-weight:600}
.fp-sync .fp-sync-action{margin-left:6px;font-weight:600;text-decoration:underline;color:inherit;position:relative}
.fp-sync .fp-sync-action::before{content:"";position:absolute;inset:-10px -8px}
/* Forms closeout (10 Sep 2026): #fiSyncPill in public_shell.html is
   restyled here rather than switched onto .fp-sync itself, because
   updateSyncPill() in that page's script REPLACES the element's whole
   className on every state change (syncPill.className = 'fi-sync-pill
   is-offline', etc.) — any class added in the markup would be wiped the
   next time the pill updates. This block reproduces .fp-sync's visual
   treatment (full-width bar under the header, dot indicator, state
   colours) against the existing .fi-sync-pill selector instead, so no
   script change is needed. The dot is a ::before pseudo-element, not a
   child span, because the script sets .textContent (replacing any child
   markup) — see class="fi-sync-pill" in public_shell.html. */
.fi-sync-pill{display:flex;align-items:center;justify-content:center;gap:8px;height:30px;padding:0 12px;font-family:var(--font-ui);font-size:12.5px;font-weight:500;background:var(--card);color:var(--ink-4);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:6;text-align:center}
.fi-sync-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--clear);flex:0 0 auto}
.fi-sync-pill.is-offline{background:var(--hold-wash);color:var(--hold-ink);border-bottom-color:var(--hold-line);font-weight:600}
.fi-sync-pill.is-offline::before{background:var(--hold-ink)}
.fi-sync-pill.is-syncing{background:var(--steel-wash);color:var(--steel-deep);border-bottom-color:var(--steel-line);font-weight:600}
.fi-sync-pill.is-syncing::before{background:var(--steel-deep)}
.fi-sync-pill.is-attention{background:var(--breach-wash);color:var(--breach);border-bottom-color:var(--breach-line);font-weight:600}
.fi-sync-pill.is-attention::before{background:var(--breach)}
.fi-sync-pill.is-clean::before{background:var(--clear)}
/* Forms closeout (10 Sep 2026): #fiSaveState in public_shell.html carries a
   full autosave sentence ("Saving…" / "✓ Synced to SSM.orchi" / "✓ Saved
   on this device · Waiting for internet") that doesn't fit .fp-progress-
   title's bold section-name treatment — it gets its own small, muted line
   below the progress row instead. Plain textContent, so no icon. */
.fi-save-line{max-width:608px;margin:2px auto 0;padding:0 16px;font-family:var(--font-mono);font-size:11px;color:var(--ink-4);letter-spacing:.02em}
/* Forms closeout (10 Sep 2026): the plate conveys section progress with
   per-step done/current/todo colouring on .fp-steps alone (no continuous
   bar). That three-state colouring needs data the /state endpoint doesn't
   expose (which specific sections are already complete, not just a count)
   — deriving it here would mean inventing new client-side logic against
   data the endpoint was never designed to support, so it was intentionally
   not attempted (see the Forms closeout report's deviations list). The
   existing continuous bar (#fiProgressBar, driven by the real
   completed_sections/total_sections ratio already in /state) is kept
   instead, restyled to the accent colour so it reads as deliberate. */
.fi-progress-bar{max-width:608px;margin:8px auto 0;height:4px;border-radius:999px;background:var(--rule);overflow:hidden}
.fi-progress-bar > #fiProgressBar{display:block;height:100%;background:var(--accent);transition:width .2s ease}
/* Forms closeout (10 Sep 2026): vertical spacing between .fp-location
   cards — #fi-locations (the script's insertion point for
   appendLocationCard()) has no dedicated .fp-* container class of its own
   in the shipped design system, so this is scoped directly to the id. */
#fi-locations{display:flex;flex-direction:column;gap:12px}
/* Forms closeout (10 Sep 2026): #fiSyncPill (.fi-sync-pill, height 30px)
   sits before .fp-main in the DOM, outside it, so it can stay visible
   while the form scrolls — both it and .fp-progress are position:sticky;
   top:0 by default, which would make the later one (.fp-progress) render
   UNDER the pill's higher z-index once both are stuck, hiding the section
   title. Offsetting .fp-progress by the pill's fixed height keeps them
   stacked correctly whenever the pill is shown; when it's d-none (not in
   flow), this just leaves an empty 30px gap above the progress row on
   scroll rather than a true regression, since the pill contributes
   nothing to layout either way in that state. */
.fi-progress-wrap{top:30px}
.fp-main{flex:1 1 auto;width:100%;max-width:640px;margin:0 auto;padding:12px 16px 24px;display:flex;flex-direction:column;gap:12px}
.fir-body .fp-main{max-width:1160px}
.fp-main > .fp-progress{margin:0 -16px}
.fp-company{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.fp-company-name{font-size:15px;font-weight:600;color:var(--ink)}
.fp-company-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4);letter-spacing:.02em;display:flex;gap:8px;flex-wrap:wrap}
.fp-company-addr{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.fp-banner{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-lg);border:1px solid var(--rule);background:var(--card);font-size:13px;line-height:1.4}
.fp-banner .fm-icon{flex:0 0 auto;margin-top:2px;width:18px;height:18px}
.fp-banner b{display:block;font-weight:600;margin-bottom:1px}
.fp-banner-resume{background:var(--steel-wash);border-color:var(--steel-line);color:var(--steel-deep)}
.fp-banner-correction{background:var(--hold-wash);border-color:var(--hold-line);color:var(--hold-ink)}
.fp-banner-correction b{color:var(--hold-ink)}
.fp-banner-restore{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent-deep)}
.fp-banner-offline{background:var(--hold-wash);border-color:var(--hold-line);color:var(--hold-ink)}
.fp-banner-storage{background:var(--breach-wash);border-color:var(--breach-line);color:var(--breach-ink)}
.fp-banner-info{background:var(--card);color:var(--ink-3)}

/* Progress rail (sticky) */
.fp-progress{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--rule);padding:10px 16px 8px;flex:0 0 auto}
.fp-progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px 10px;max-width:608px;margin:0 auto;flex-wrap:wrap}
.fp-progress-title{font-size:15px;font-weight:600;color:var(--ink)}
.fp-progress-title small{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4);font-weight:500;margin-right:6px;letter-spacing:.06em}
.fp-progress-count{font-family:var(--font-mono);font-size:11px;color:var(--ink-4);letter-spacing:.02em;white-space:nowrap;margin-left:auto}
.fp-steps{display:flex;gap:4px;margin:8px auto 0;max-width:608px}
.fp-step{display:flex;flex:1 1 auto;flex-direction:column;gap:5px;text-decoration:none;color:var(--ink-4);min-width:0;position:relative}
.fp-step::after{content:"";position:absolute;inset:-12px 0 -10px}
.fp-step-bar{height:5px;border-radius:999px;background:var(--rule)}
.fp-step-label{font-size:10.5px;font-weight:600;white-space:nowrap;letter-spacing:0}
.fp-step.is-done .fp-step-bar{background:var(--clear)}
.fp-step.is-done{color:var(--clear)}
.fp-step.is-current .fp-step-bar{background:var(--ink)}
.fp-step.is-current{color:var(--ink)}
.fp-step.is-review .fp-step-bar{background:repeating-linear-gradient(90deg,var(--rule-2) 0 4px,transparent 4px 7px)}
.fp-step.is-review.is-current .fp-step-bar{background:var(--ink)}
/* Forms closeout (10 Sep 2026): public_shell.html's showSection() toggles
   is-active (classList.toggle, not a full className replace, on #fiNav's
   buttons) to mark the currently open section — the plate's own three-
   state is-done/is-current/is-review styling only ever marks "current",
   since /state exposes a completed-section COUNT, not which individual
   sections are done (see the .fi-progress-bar comment above for the same
   reasoning). is-active is aliased to the is-current treatment here so
   the existing toggle needs no script change; is-done is simply never
   applied, which degrades gracefully — every visited-and-not-current step
   just looks the same "not yet" as an unvisited one, matching today's
   behaviour exactly, not a regression from it. */
.fp-step.is-active .fp-step-bar{background:var(--ink)}
.fp-step.is-active{color:var(--ink)}
.fp-step.is-review.is-active .fp-step-bar{background:var(--ink)}
/* Forms closeout (10 Sep 2026): the plate's steps are <a> tags (no native
   chrome to reset); #fiNav's steps must stay <button> elements (the
   script's own nav.querySelectorAll('button') and click wiring key off
   the tag), so the browser's default button border/background/padding/
   font need explicitly zeroing here for the flex/bar/label layout above
   to render instead of a boxed native button. */
#fiNav button.fp-step{appearance:none;-webkit-appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer}

/* Section cards */
.fp-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl);padding:16px;display:flex;flex-direction:column;gap:14px}
.fi-section.d-none{display:none!important}
.fp-field.d-none,.fp-evidence.d-none,.fp-review-row.d-none{display:none!important}
.fi-section:not([data-section="visit"]):not([data-section="review"]){width:100%;max-width:800px;margin-inline:auto}
.fir-reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fir-reference,.fir-representative{background:#f8fbfb;border:1px solid #dbe8e9;border-radius:15px;padding:16px}
.fir-reference h3,.fir-representative h3,.fir-mail h3{font-size:15px;font-weight:750;margin:0 0 12px;color:#193648}
.fir-reference p{font-size:13px;line-height:1.5;color:#526b7b}
.fir-reference dl{display:grid;grid-template-columns:145px 1fr;gap:8px 12px;margin:0 0 12px;font-size:13px}
.fir-reference dt{color:#6b8190}.fir-reference dd{margin:0;font-weight:650;overflow-wrap:anywhere}.fir-reference small{color:#637c8c;line-height:1.5}
.fir-mail{background:linear-gradient(135deg,#f8fcfb,#eef8f6);border:1px solid #d7e6e4;border-radius:16px;padding:16px}
.fir-mail-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.fir-mail-head h3{margin:0}.fir-mail-head strong{color:#19725d;background:#e9f7f2;border-radius:999px;padding:5px 10px;font-size:12px}
.fir-mail-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.fir-mail-facts>div{background:#fff;border:1px solid #dfe9eb;border-radius:11px;padding:10px}.fir-mail-facts span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#708795}.fir-mail-facts b{font-size:13px;overflow-wrap:anywhere}
.fir-subhead{font-size:14px;font-weight:800;color:#315266;margin:8px 0 0;border-left:4px solid #0a8178;padding-left:10px}.fir-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}.fir-visit-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}.fir-wide{grid-column:1/-1}.fir-mail-unavailable{font-size:13px;color:#627989}.fir-gstin{text-transform:uppercase}
@media(max-width:820px){.fir-reference-grid,.fir-three,.fir-visit-fields,.fir-mail-facts{grid-template-columns:1fr}.fir-reference dl{grid-template-columns:110px 1fr}}
@media(max-width:500px){.fir-reference dl{grid-template-columns:1fr;gap:2px}.fir-reference dd{margin-bottom:7px}.fir-mail-head{align-items:flex-start;flex-direction:column}}
.fp-card-head{display:flex;flex-direction:column;gap:3px}
.fp-card-title{font-family:var(--font-brand);font-size:20px;color:var(--ink);line-height:1.2;font-weight:400;margin:0}
.fp-hint{font-size:13px;color:var(--ink-4);line-height:1.4}
.fp-field{display:flex;flex-direction:column;gap:6px}
.fp-label{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;line-height:1.3}
.fp-label .fp-req{color:var(--breach)}
.fp-label .fp-opt{font-size:12px;font-weight:500;color:var(--ink-4)}
.fp-input,.fp-select,.fp-textarea{font-family:var(--font-ui);font-size:16px;color:var(--ink);height:var(--h-ctl-lg);padding:0 14px;border:1px solid var(--rule-2);border-radius:var(--r-lg);background:var(--card);width:100%;outline:none}
.fp-textarea{height:auto;min-height:104px;padding:12px 14px;line-height:1.45;resize:vertical}
.fp-input:focus,.fp-select:focus,.fp-textarea:focus,.fp-input.is-focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.fp-input.is-invalid,.fp-select.is-invalid,.fp-textarea.is-invalid{border-color:var(--breach);box-shadow:0 0 0 3px rgba(163,67,61,.16)}
.fp-input::placeholder{color:var(--ink-ph)}
.fp-select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322313d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.fp-select.is-empty{color:var(--ink-ph)}
.fp-date{position:relative}
.fp-date .fm-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--ink-4);width:18px;height:18px;pointer-events:none}
.fp-error{font-size:13px;color:var(--breach);display:flex;align-items:flex-start;gap:6px;line-height:1.35}
.fp-error .fm-icon{flex:0 0 auto;margin-top:1px}
.fp-help{font-size:12.5px;color:var(--ink-4);line-height:1.4}
.fp-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;border:1px solid var(--rule-2);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.fp-seg-item{height:var(--h-ctl-lg);display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink-3);border-right:1px solid var(--rule-2);cursor:pointer;text-decoration:none;background:var(--card)}
.fp-seg-item:last-child{border-right:0}
.fp-seg-item{font-size:14px;padding:0 6px;text-align:center;line-height:1.15}
.fp-seg-item .fm-icon{display:none}
.fp-seg-item.is-selected,.fp-seg input:checked + .fp-seg-item{background:var(--ink);color:#fff}
.fp-seg-item.is-selected .fm-icon,.fp-seg input:checked + .fp-seg-item .fm-icon{color:#fff;display:inline-block}
.fp-seg input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fp-seg input:focus-visible + .fp-seg-item{outline:2px solid var(--accent);outline-offset:-2px}
.fp-seg-group{border:0;padding:0;margin:0;min-width:0}
.fp-legend{float:none;width:auto;margin:0 0 6px;padding:0;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);display:flex;align-items:center;gap:6px}
.fp-legend .fp-req{color:var(--breach)}
.fp-seg.is-invalid{border-color:var(--breach);box-shadow:0 0 0 3px rgba(163,67,61,.16)}
.fp-note{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 12px;font-size:12.5px;color:var(--ink-3);display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.fp-note .fm-icon{flex:0 0 auto;margin-top:1px;color:var(--accent)}

/* Evidence widget */
.fp-evidence{border:1px solid var(--rule-2);border-radius:var(--r-xl);padding:12px;background:var(--paper);display:flex;flex-direction:column;gap:10px}
.fp-evidence.is-invalid{border-color:var(--breach);background:var(--breach-wash)}
.fp-evidence-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fp-evidence-title{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.fp-evidence-count{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4);letter-spacing:.04em;white-space:nowrap}
.fp-evidence-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.fp-evidence-actions.is-single{grid-template-columns:1fr}
/* Forms closeout (10 Sep 2026): public_shell.html keeps its existing,
   more descriptive per-category button text ("Take Stock / Storage Photo
   · phone camera") rather than the plate's generic "Phone camera" label —
   a deliberate choice to preserve existing informative copy rather than
   shorten it (see the closeout report's deviations list). .fp-btn's
   default white-space:nowrap (sized for the plate's short labels) would
   overflow a narrow mobile column with that longer text; this lets these
   two buttons wrap onto multiple lines and keeps the grid item from
   refusing to shrink below its content's natural (nowrap) width. */
.fp-evidence-actions > *{min-width:0}
.fp-evidence-actions .fp-btn{white-space:normal;text-align:center;line-height:1.25;height:auto;min-height:var(--h-ctl-lg);padding:10px 14px}
/* Forms closeout (10 Sep 2026): public_shell.html's in-app-camera hint
   (added by initEvidenceWidget() only when getUserMedia is available and
   the widget accepts more than one photo) lands inside this same grid via
   insertAdjacentElement('afterend', ...) — see the module docstring in
   public_shell.html. auto-fit above already collapses gracefully to one
   column when only one camera button exists; this rule keeps a third,
   optional hint child from being squeezed into a narrow column. */
.fp-evidence-actions .fi-camera-hint{grid-column:1/-1}
.fp-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fp-thumb{display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.fp-thumb-media{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--rule);background:var(--wash)}
.fp-thumb-media img{width:100%;height:100%;object-fit:cover;display:block}
.fp-thumb-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-4);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:6px}
.fp-thumb-badge{position:absolute;left:5px;bottom:5px;display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;padding:3px 6px;border-radius:4px;background:rgba(14,26,38,.8);color:#fff}
.fp-thumb.is-synced .fp-thumb-badge{background:var(--clear)}
.fp-thumb.is-safe .fp-thumb-badge{background:var(--steel-deep)}
.fp-thumb.is-uploading .fp-thumb-badge{background:var(--steel)}
.fp-thumb.is-local .fp-thumb-badge{background:var(--hold)}
.fp-thumb.is-failed .fp-thumb-media{border-color:var(--breach);box-shadow:inset 0 0 0 1px var(--breach)}
.fp-thumb.is-failed .fp-thumb-badge{background:var(--breach)}
.fp-thumb-media .fp-thumb-veil{position:absolute;inset:0;background:rgba(246,248,247,.55)}
.fp-thumb-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(90deg,var(--steel) 0 10px,var(--steel-wash) 10px 18px)}
.fp-thumb-state{font-size:11.5px;line-height:1.3;color:var(--ink-4);text-align:left;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.fp-thumb.is-terminal .fp-thumb-media{opacity:.55}
.fp-thumb.is-terminal .fp-thumb-state{color:var(--ink-5)}
.fp-thumb.is-synced .fp-thumb-state{color:var(--clear)}
.fp-thumb.is-safe .fp-thumb-state{color:var(--steel-deep)}
.fp-thumb.is-failed .fp-thumb-state{color:var(--breach)}
.fp-thumb.is-local .fp-thumb-state{color:var(--hold-ink)}
.fp-thumb-x{position:absolute;top:-8px;right:-8px;width:32px;height:32px;border-radius:50%;background:var(--card);border:1px solid var(--rule-2);color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(14,26,38,.18);cursor:pointer}
.fp-thumb-retry{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:36px;border-radius:6px;border:1px solid var(--breach);background:var(--card);color:var(--breach);font-size:12px;font-weight:600;cursor:pointer}
.fp-evidence-note{font-size:12px;color:var(--ink-4);display:flex;align-items:center;gap:6px}
.fp-evidence-note .fm-icon{color:var(--accent)}
.fp-evidence-status{font-size:12.5px;color:var(--ink-3)}
.fp-evidence-status.is-error{color:var(--breach)}

/* Locations */
.fp-location{border:1px solid var(--rule-2);border-radius:var(--r-xl);padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--card)}
.fp-location-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fp-location-title{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px}
.fp-location-num{width:24px;height:24px;border-radius:6px;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.fp-location-remove{font-size:13px;font-weight:600;color:var(--breach);background:none;border:0;padding:6px 8px;cursor:pointer;min-height:44px}
.fp-add{display:flex;align-items:center;justify-content:center;gap:8px;height:var(--h-ctl-lg);border:1px dashed var(--rule-2);border-radius:var(--r-lg);background:var(--card);color:var(--steel-deep);font-size:15px;font-weight:600;cursor:pointer;width:100%}
.fp-add.is-disabled{opacity:.5}

/* Buttons (public) */
.fp-btn{font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:.01em;height:var(--h-ctl-lg);padding:0 18px;border-radius:var(--r-lg);border:1px solid var(--rule-2);background:var(--card);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;line-height:1}
.fp-btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.fp-btn-outline{background:var(--card);border-color:var(--ink);color:var(--ink)}
.fp-btn-soft{background:var(--steel-wash);border-color:var(--steel-wash);color:var(--steel-deep)}
.fp-btn-danger{background:var(--card);border-color:var(--breach-line);color:var(--breach)}
.fp-btn-block{width:100%}
.fp-btn[disabled],.fp-btn.is-disabled{opacity:.5;cursor:not-allowed}
.fp-btn-sm{height:44px;font-size:14px;padding:0 14px;border-radius:var(--r-md)}
.fp-btn .fm-icon{width:18px;height:18px}

/* Sticky action footer */
.fp-footer{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--rule);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;flex:0 0 auto;z-index:6}
.fp-footer-inner{max-width:608px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:8px}
.fp-footer-state{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-4);line-height:1.3}
.fp-footer-state b{font-weight:600;color:var(--ink-3)}
.fp-footer-state b .fm-icon{color:var(--clear)}
.fp-footer-state.is-offline b{color:var(--hold-ink)}
.fp-footer-state.is-saving b{color:var(--steel-deep)}
.fp-footer-state.is-failed b{color:var(--breach)}
.fp-footer-actions{display:grid;grid-template-columns:minmax(96px,1fr) 2fr;gap:8px}
.fp-footer-actions.is-single{grid-template-columns:1fr}

/* Review & submit */
.fp-review-status{border-radius:var(--r-lg);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.fp-review-status .fm-icon{flex:0 0 auto;margin-top:2px;width:20px;height:20px}
.fp-review-status b{display:block;font-weight:600}
.fp-review-status.is-ready{background:var(--clear-wash);color:var(--clear-ink)}
.fp-review-status.is-ready b{color:var(--clear)}
.fp-review-status.is-incomplete{background:var(--breach-wash);color:var(--breach-ink)}
.fp-review-status.is-incomplete b{color:var(--breach)}
/* Forms closeout (10 Sep 2026): #fiReviewStatus in public_shell.html is
   restyled against the existing .fi-review-status selector rather than
   switched onto .fp-review-status, for the same reason as .fi-sync-pill
   above — refreshState() replaces statusEl.className wholesale on every
   poll. is-pending-evidence (fields complete, evidence still required)
   has no equivalent in the plate's two-state is-ready/is-incomplete
   design; it is given the module's existing hold palette (in-progress,
   not yet wrong) to stay consistent with .fm-flag-reopened/.fm-notice-hold
   elsewhere in this file. */
.fi-review-status{border-radius:var(--r-lg);padding:12px 14px;font-family:var(--font-ui);font-weight:700;margin-bottom:14px;font-size:13.5px;line-height:1.4}
.fi-review-status.is-ready{background:var(--clear-wash);color:var(--clear-ink)}
.fi-review-status.is-incomplete{background:var(--breach-wash);color:var(--breach-ink)}
.fi-review-status.is-pending-evidence{background:var(--hold-wash);color:var(--hold-ink)}
.fp-review-group{display:flex;flex-direction:column;gap:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.fp-review-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--paper);border-bottom:1px solid var(--rule)}
.fp-review-group-title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);font-weight:500;display:flex;align-items:center;gap:8px}
.fp-review-group-title .fm-icon{color:var(--clear);width:14px;height:14px}
.fp-review-group-title.is-missing .fm-icon{color:var(--breach)}
.fp-review-edit{font-size:12.5px;font-weight:600;color:var(--steel-deep);display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px}
.fp-review-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--rule);font-size:13.5px}
.fp-review-row:last-child{border-bottom:0}
/* Forms closeout (10 Sep 2026): fixes a real overflow bug found during
   visual QA — span's original flex:0 0 auto refused to shrink for a long
   label (e.g. a location's "1. Main godown · Warehouse / Godown"),
   squeezing strong's available width toward zero; overflow-wrap:anywhere
   then broke its short value ("2 photos") onto one character per line.
   span now wraps and shares space normally; strong (always a short value
   — a count, Yes/No, a date) stays on one line and keeps its natural
   width instead of being crushed by its sibling. */
.fp-review-row span{color:var(--ink-4);flex:1 1 auto;min-width:0}
.fp-review-row strong{font-weight:600;color:var(--ink);text-align:right;flex:0 0 auto;white-space:nowrap}
.fp-review-row strong.is-missing{color:var(--breach)}
.fp-review-row strong.is-pending{color:var(--hold-ink)}
.fp-outstanding{border:1px solid var(--breach-line);background:var(--breach-wash);border-radius:var(--r-lg);padding:12px 14px}
.fp-outstanding-title{font-size:13.5px;font-weight:600;color:var(--breach);margin-bottom:6px}
.fp-outstanding ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fp-outstanding li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--breach-ink)}
.fp-outstanding li a{font-size:12.5px;font-weight:600;color:var(--breach);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.fp-outstanding li .is-pending{color:var(--hold-ink)}
.fp-submit-note{font-size:12.5px;color:var(--ink-4);text-align:center;line-height:1.4}

/* Camera overlay */
.fp-camera{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;z-index:100}
/* Forms closeout (10 Sep 2026): public_shell.html's #fiCameraOverlay is
   toggled with the native `hidden` attribute (overlay.hidden = true/false
   in openContinuousCamera()/closeContinuousCamera()), never a class. The
   base rule above sets display:flex unconditionally, which would win over
   the UA's own low-specificity [hidden]{display:none} and keep the
   overlay visible even while hidden — this rule restores the hide. */
.fp-camera[hidden]{display:none}
.fp-camera-view{flex:1 1 auto;background:radial-gradient(ellipse at 50% 40%,#3a4a56 0%,#16222b 60%,#0a1218 100%);position:relative}
/* Forms closeout (10 Sep 2026): the plate's .fp-camera-view never has a
   real <video> child (a static gradient stands in for the live feed in
   the design canvas) — public_shell.html's actual #fiCameraVideo needs to
   fill that container edge to edge. */
.fp-camera-view > .fi-camera-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.fp-camera-top{position:absolute;left:0;right:0;top:0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:13px}
.fp-camera-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;padding:5px 9px;border-radius:6px;background:rgba(0,0,0,.45);color:#fff;letter-spacing:.04em}
.fp-camera-chip .fm-icon{width:14px;height:14px}
.fp-camera-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px));background:#000}
.fp-thumb-x::before,.fp-review-edit::before,.fp-outstanding li a::before,.fp-location-remove::before{content:"";position:absolute;inset:-8px}
.fp-review-edit,.fp-outstanding li a,.fp-location-remove{position:relative}
.fp-camera-count{color:#fff;font-size:13px;font-weight:600;min-width:80px;font-family:var(--font-mono)}
.fp-shutter{width:72px;height:72px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.35);background-clip:padding-box;flex:0 0 auto}
.fp-camera-done{color:#fff;font-size:15px;font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:10px;height:44px;padding:0 16px;display:inline-flex;align-items:center;min-width:80px;justify-content:center}
.fp-camera-last{position:absolute;left:16px;bottom:16px;width:56px;height:56px;border-radius:8px;border:2px solid #fff;overflow:hidden;background:#333}

/* Result pages (submitted / unavailable / start) */
.fp-result{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.fp-result-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl);padding:28px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.fp-result-icon{width:44px;height:44px;border-radius:var(--r-lg);display:inline-flex;align-items:center;justify-content:center;background:var(--clear-wash);color:var(--clear)}
.fp-result-icon.is-hold{background:var(--hold-wash);color:var(--hold)}
.fp-result-icon.is-breach{background:var(--breach-wash);color:var(--breach)}
.fp-result-icon.is-neutral{background:var(--wash);color:var(--ink-3)}
.fp-result-icon .fm-icon{width:24px;height:24px}
.fp-result-title{font-family:var(--font-brand);font-size:20px;color:var(--ink);line-height:1.25}
.fp-result-copy{font-size:13.5px;color:var(--ink-3);line-height:1.5}
.fp-result-ref{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-3);background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:8px 12px;letter-spacing:.04em}
.fp-result-list{text-align:left;width:100%;display:flex;flex-direction:column;gap:8px;margin:4px 0 0;padding:0;list-style:none}
.fp-result-list li{list-style:none;display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink-3)}
.fp-result-list .fm-icon{flex:0 0 auto;margin-top:2px;color:var(--clear)}
.fp-start-card{width:100%;max-width:460px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-xl);padding:22px 18px;display:flex;flex-direction:column;gap:14px}
.fp-start-title{font-family:var(--font-brand);font-size:20px;color:var(--ink);line-height:1.25}
.fp-errors{background:var(--breach-wash);border:1px solid var(--breach-line);color:var(--breach-ink);border-radius:var(--r-lg);padding:10px 12px;font-size:13px}
.fp-errors b{display:block;color:var(--breach);margin-bottom:4px}
.fp-errors ul{margin:0;padding-left:18px}

/* Public responsive */
@media (max-width:400px){.fp-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:600px){
  .fp-main{padding:16px 24px 24px}
  .fp-main > .fp-progress{margin:0 -24px;padding-left:24px;padding-right:24px}
  .fp-footer{padding-left:24px;padding-right:24px}
  .fp-footer-inner,.fp-progress-top,.fp-steps{max-width:592px}
  .fp-card{padding:20px}
  .fp-form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .fp-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fp-evidence-actions{grid-template-columns:auto auto;justify-content:start}
  .fp-evidence-actions .fp-btn{padding:0 20px}
}
@media (forced-colors:active){
  .fp-step-bar,.fm-readiness-bar>span,.fm-pulse-tile.is-active::after{forced-color-adjust:none}
  .fm-flag,.fp-thumb-badge,.fm-ev-pill{border:1px solid CanvasText}
  .fm-scope-item.is-active,.fp-seg input:checked + .fp-seg-item,.fp-seg-item.is-selected,.fm-spine-node.is-current{outline:2px solid CanvasText;outline-offset:-2px}
}
@media (prefers-reduced-motion:reduce){.fm *,.fp *{transition:none!important;animation:none!important}}
