/* rea1-ui.css — REA1 Hub shared UI kit. Generated from the 1 Oct 2026 mockup shell.
   Classes are prefixed r1- so they never collide with index.html's legacy .card/.btn/.badge. */

/* ───────────── Tokens — REA1 brand (navy #1B1F4D, gold #F6CF46) ───────────── */
:root{
  --navy:#1B1F4D; --navy-2:#2a2f6b; --navy-soft:#eceefa;
  --gold:#F6CF46; --gold-deep:#E0B400; --gold-soft:#fdf6d8;
  --ink:#23283a; --ink-2:#4b5163; --muted:#6b7280; --faint:#9aa0ae;
  --line:#e4e6f0; --line-2:#eff0f6; --canvas:#f4f5f9; --card:#ffffff; --raise:#fafbfd;
  --ok:#0f6e56; --ok-bg:#e1f5ee; --warn:#854f0b; --warn-bg:#faeeda; --alert:#a32d2d; --alert-bg:#fceaea;
  --info:#2d4fa3; --info-bg:#e6ecfb; --violet:#5b3fa3; --violet-bg:#efe9fb;
  --side:#1B1F4D; --side-ink:#c9cde6; --side-hi:#ffffff; --side-hover:rgba(255,255,255,.07);
  --shadow:0 1px 2px rgba(20,24,60,.05),0 1px 3px rgba(20,24,60,.06);
  --shadow-lg:0 12px 32px rgba(20,24,60,.16);
  --r:10px; --r-sm:7px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#aab3ff; --navy-2:#c3c9ff; --navy-soft:#262a4a;
    --gold:#F6CF46; --gold-deep:#F6CF46; --gold-soft:#3a3420;
    --ink:#e7e9f3; --ink-2:#c3c7d6; --muted:#9aa0b4; --faint:#6f7589;
    --line:#2c3044; --line-2:#252839; --canvas:#14161f; --card:#1b1e2a; --raise:#20232f;
    --ok:#5fd4a8; --ok-bg:#15352b; --warn:#f0bd6b; --warn-bg:#3a2c14; --alert:#f08a8a; --alert-bg:#3d1c1c;
    --info:#8fb0ff; --info-bg:#1d2744; --violet:#c1a8ff; --violet-bg:#2b2342;
    --side:#10122a; --side-ink:#a9aed0; --side-hi:#ffffff; --side-hover:rgba(255,255,255,.06);
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --navy:#aab3ff; --navy-2:#c3c9ff; --navy-soft:#262a4a;
  --gold:#F6CF46; --gold-deep:#F6CF46; --gold-soft:#3a3420;
  --ink:#e7e9f3; --ink-2:#c3c7d6; --muted:#9aa0b4; --faint:#6f7589;
  --line:#2c3044; --line-2:#252839; --canvas:#14161f; --card:#1b1e2a; --raise:#20232f;
  --ok:#5fd4a8; --ok-bg:#15352b; --warn:#f0bd6b; --warn-bg:#3a2c14; --alert:#f08a8a; --alert-bg:#3d1c1c;
  --info:#8fb0ff; --info-bg:#1d2744; --violet:#c1a8ff; --violet-bg:#2b2342;
  --side:#10122a; --side-ink:#a9aed0; --side-hi:#ffffff; --side-hover:rgba(255,255,255,.06);
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  color-scheme:dark;
}

.r1-ico{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
/* ───────────── Page primitives ───────────── */
.r1-ph{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.r1-ph h1{font-size:22px;font-weight:750;letter-spacing:-.2px;line-height:1.25;display:flex;align-items:center;gap:10px}
.r1-ph .r1-sub{color:var(--muted);font-size:13.5px;margin-top:3px;max-width:760px}
.r1-ph .r1-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.r1-btn{display:inline-flex;align-items:center;gap:7px;border-radius:8px;padding:8px 13px;font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink);white-space:nowrap}
.r1-btn:hover{border-color:var(--navy)}
.r1-btn.r1-pri{background:var(--gold);border-color:var(--gold);color:#1B1F4D;font-weight:750}
.r1-btn.r1-pri:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.r1-btn.r1-navy{background:#1B1F4D;border-color:#1B1F4D;color:#fff}
.r1-btn.r1-ghost{border-color:transparent;background:transparent;color:var(--navy)}
.r1-btn.r1-danger{color:var(--alert);border-color:color-mix(in srgb,var(--alert) 35%,var(--line))}
.r1-btn.r1-sm{padding:5px 9px;font-size:12px;border-radius:7px}
.r1-btn[disabled]{opacity:.5;cursor:not-allowed}
.r1-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.r1-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden;cursor:default}
.r1-kpi.r1-click{cursor:pointer}.r1-kpi.r1-click:hover{border-color:var(--navy)}
.r1-kpi .r1-l{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.r1-kpi .r1-v{font-size:25px;font-weight:750;letter-spacing:-.5px;margin-top:3px;font-variant-numeric:tabular-nums}
.r1-kpi .r1-s{font-size:12px;color:var(--muted);margin-top:1px}
.r1-kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tone,transparent)}
.r1-kpi.r1-ok{--tone:var(--ok)}.r1-kpi.r1-warn{--tone:#e3a52a}.r1-kpi.r1-alert{--tone:var(--alert)}.r1-kpi.r1-info{--tone:var(--info)}.r1-kpi.r1-gold{--tone:var(--gold)}
.r1-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px;min-width:0}
.r1-card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.r1-card-h h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.r1-card-h .r1-hint{font-size:12px;color:var(--muted)}
.r1-card-h .r1-acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.r1-card-b{padding:14px 16px}
.r1-card-b.r1-flush{padding:0}
.r1-grid{display:grid;gap:16px}
.r1-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r1-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r1-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r1-g-73{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
.r1-g-64{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
.r1-g-37{grid-template-columns:minmax(0,3fr) minmax(0,7fr)}
.r1-grid>.r1-card{margin-bottom:0}
.r1-grid>*{min-width:0}
.r1-stack>*+*{margin-top:16px}
.r1-tbl-wrap{overflow-x:auto}
table.r1-tbl{width:100%;border-collapse:collapse;font-size:13px}
.r1-tbl th{text-align:left;font-size:11.5px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--raise);white-space:nowrap}
.r1-tbl td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.r1-tbl tr:last-child td{border-bottom:0}
.r1-tbl tr.r1-click{cursor:pointer}.r1-tbl tr.r1-click:hover td{background:var(--raise)}
.r1-tbl td.r1-num,.r1-tbl th.r1-num{text-align:right;font-variant-numeric:tabular-nums}
.r1-tbl .r1-mut{color:var(--muted);font-size:12px}
.r1-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;border-radius:20px;padding:2px 9px;line-height:18px;white-space:nowrap;background:var(--line-2);color:var(--ink-2)}
.r1-badge.r1-ok{background:var(--ok-bg);color:var(--ok)}.r1-badge.r1-warn{background:var(--warn-bg);color:var(--warn)}.r1-badge.r1-alert{background:var(--alert-bg);color:var(--alert)}.r1-badge.r1-info{background:var(--info-bg);color:var(--info)}.r1-badge.r1-violet{background:var(--violet-bg);color:var(--violet)}.r1-badge.r1-gold{background:var(--gold-soft);color:#7a5c00}.r1-badge.r1-navy{background:var(--navy-soft);color:var(--navy)}
.r1-badge.r1-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.r1-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.r1-tab{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;align-items:center;gap:7px;cursor:pointer}
.r1-tab:hover{color:var(--ink)}
.r1-tab.r1-on{color:var(--navy);border-bottom-color:var(--gold-deep)}
.r1-tab .r1-n{font-size:11px;background:var(--line-2);color:var(--ink-2);padding:0 6px;border-radius:9px;line-height:17px}
.r1-tab.r1-on .r1-n{background:var(--gold);color:#1B1F4D}
.r1-seg{display:inline-flex;background:var(--line-2);border-radius:8px;padding:3px;gap:2px}
.r1-seg button{padding:5px 11px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.r1-seg button.r1-on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.r1-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.r1-input,.r1-select{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:7px 10px;font-size:13px;min-width:0}
.r1-input.r1-grow{flex:1;min-width:180px}
.r1-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:4px 11px;font-size:12.5px;font-weight:550;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.r1-chip.r1-on{background:#1B1F4D;border-color:#1B1F4D;color:#fff}
.r1-chip .r1-n{font-weight:700}
.r1-list{display:flex;flex-direction:column}
.r1-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-2)}
.r1-row:last-child{border-bottom:0}
.r1-row .r1-grow{flex:1;min-width:0}
.r1-row .r1-t{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r1-row .r1-d{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r1-row.r1-click{cursor:pointer}.r1-row.r1-click:hover{background:var(--raise)}
.r1-sev{width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.r1-sev.r1-critical{background:var(--alert);box-shadow:0 0 0 3px var(--alert-bg)}.r1-sev.r1-high{background:#e3a52a}.r1-sev.r1-med{background:var(--info)}.r1-sev.r1-low{background:var(--faint)}
.r1-kv{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:7px 14px;font-size:13px}
.r1-kv dt{color:var(--muted)}
.r1-kv dd{font-weight:550;min-width:0;overflow-wrap:anywhere}
.r1-empty{text-align:center;padding:34px 20px;color:var(--muted)}
.r1-empty .r1-big{font-size:15px;font-weight:650;color:var(--ink);margin-bottom:4px}
.r1-note{border-radius:9px;padding:11px 14px;font-size:13px;display:flex;gap:10px;align-items:flex-start;margin-bottom:14px;background:var(--info-bg);color:var(--ink)}
.r1-note .r1-ico{color:var(--info);margin-top:2px}
.r1-note.r1-warn{background:var(--warn-bg)}.r1-note.r1-warn .r1-ico{color:var(--warn)}
.r1-note.r1-alert{background:var(--alert-bg)}.r1-note.r1-alert .r1-ico{color:var(--alert)}
.r1-note.r1-ok{background:var(--ok-bg)}.r1-note.r1-ok .r1-ico{color:var(--ok)}
.r1-note.r1-gold{background:var(--gold-soft)}.r1-note.r1-gold .r1-ico{color:#8a6a00}
.r1-bar{height:7px;border-radius:5px;background:var(--line-2);overflow:hidden}
.r1-bar>i{display:block;height:100%;background:var(--navy);border-radius:5px}
.r1-bar.r1-gold>i{background:var(--gold-deep)}.r1-bar.r1-ok>i{background:var(--ok)}.r1-bar.r1-warn>i{background:#e3a52a}.r1-bar.r1-alert>i{background:var(--alert)}
.r1-steps{display:flex;gap:0;overflow-x:auto;margin-bottom:16px;scrollbar-width:none}
.r1-step{flex:1;min-width:120px;padding:10px 12px;border-top:3px solid var(--line);font-size:12.5px;color:var(--muted)}
.r1-step b{display:block;color:var(--ink);font-size:13px}
.r1-step.r1-done{border-top-color:var(--ok)}.r1-step.r1-now{border-top-color:var(--gold-deep)}.r1-step.r1-now b{color:var(--navy)}
.r1-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px}
.r1-col{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:10px;min-height:120px}
.r1-col h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:2px 4px 10px;display:flex;justify-content:space-between}
.r1-kcard{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 11px;margin-bottom:8px;box-shadow:var(--shadow);font-size:12.5px;cursor:pointer}
.r1-kcard:hover{border-color:var(--navy)}
.r1-kcard .r1-t{font-weight:650;font-size:13px;margin-bottom:3px}
.r1-kcard .r1-m{color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.r1-tl{position:relative;padding-left:22px}
.r1-tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line)}
.r1-tl-i{position:relative;padding:0 0 14px}
.r1-tl-i::before{content:"";position:absolute;left:-20px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--card);border:2px solid var(--navy)}
.r1-tl-i.r1-ok::before{border-color:var(--ok);background:var(--ok)}.r1-tl-i.r1-warn::before{border-color:#e3a52a}.r1-tl-i.r1-alert::before{border-color:var(--alert);background:var(--alert)}
.r1-tl-i .r1-w{font-size:11.5px;color:var(--muted)}
.r1-tl-i .r1-t{font-size:13px;font-weight:600}
.r1-tl-i .r1-d{font-size:12.5px;color:var(--ink-2)}
.r1-form{display:grid;gap:12px}
.r1-field label{display:block;font-size:12px;font-weight:650;color:var(--ink-2);margin-bottom:4px}
.r1-field .r1-input,.r1-field .r1-select,.r1-field textarea{width:100%}
.r1-field textarea{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:8px 10px;font-size:13px;min-height:78px;resize:vertical}
.r1-field .r1-help{font-size:11.5px;color:var(--muted);margin-top:3px}
.r1-prov{font-size:10.5px;font-weight:700;letter-spacing:.3px;border-radius:4px;padding:0 5px;line-height:16px;border:1px solid var(--line);color:var(--muted)}
.r1-muted{color:var(--muted)}.r1-small{font-size:12px}.r1-strong{font-weight:650}.r1-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.r1-right{text-align:right}.r1-nowrap{white-space:nowrap}
.r1-flex{display:flex;align-items:center;gap:8px}.r1-wrap{flex-wrap:wrap}.r1-between{justify-content:space-between}.r1-mt{margin-top:12px}.r1-mb{margin-bottom:12px}
.r1-plink{color:var(--navy);font-weight:600;cursor:pointer}
.r1-plink:hover{text-decoration:underline}
.r1-photo{border-radius:8px;background:linear-gradient(135deg,var(--navy-soft),var(--gold-soft));aspect-ratio:4/3;display:grid;place-items:center;color:var(--muted);font-size:11px}
.r1-phone{width:390px;max-width:100%;margin:0 auto;border:10px solid #111;border-radius:42px;overflow:hidden;background:var(--canvas);box-shadow:var(--shadow-lg);min-height:720px}
.r1-meter{display:flex;align-items:baseline;gap:6px}
.r1-meter .r1-big{font-size:30px;font-weight:800;letter-spacing:-.6px}
hr.r1-sep{border:0;border-top:1px solid var(--line-2);margin:12px 0}

/* ───────────── Drawer (row detail + review notes) ───────────── */
.r1-drawer{position:fixed;top:0;right:0;height:100vh;width:min(460px,100vw);background:var(--card);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:50;transform:translateX(105%);transition:transform .22s ease;display:flex;flex-direction:column}
.r1-drawer.r1-open{transform:none}
.r1-drawer-h{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.r1-drawer-h h3{font-size:15px;font-weight:700}
.r1-drawer-b{padding:16px 18px;overflow-y:auto;flex:1}
.r1-drawer-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.r1-scrim{position:fixed;inset:0;background:rgba(15,18,40,.35);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.r1-scrim.r1-open{opacity:1;pointer-events:auto}
.r1-review h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin:16px 0 6px}
.r1-review ul{padding-left:18px;font-size:13px}
.r1-review li{margin-bottom:6px}
.r1-toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#1B1F4D;color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;font-weight:550;box-shadow:var(--shadow-lg);opacity:0;transition:all .2s;z-index:60;pointer-events:none}
.r1-toast.r1-show{opacity:1;transform:translate(-50%,0)}


/* ───────────── Responsive ───────────── */
@media (max-width:1100px){.r1-g4{grid-template-columns:repeat(2,minmax(0,1fr))}.r1-g3{grid-template-columns:repeat(2,minmax(0,1fr))}.r1-g-73,.r1-g-64,.r1-g-37{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .r1-g2,.r1-g3,.r1-g4{grid-template-columns:minmax(0,1fr)}
  .r1-ph .r1-acts{margin-left:0;width:100%}
  .r1-kv{grid-template-columns:1fr}
}