/* Shared chrome for the three product demos — match.html, promise.html and
   journey.html. They render the same CRM, so the frame, rail, top bar, table,
   drawer, pills, journey entries, cards, cursor and caption live here once.
   Anything a single demo needs stays in that demo's own <style>, which loads
   after this file and therefore wins. */
@font-face { font-family:"Rubik"; src:url("../Rubik/static/Rubik-Regular.ttf") format("truetype");
             font-weight:400; font-display:swap; }

/* ---------- prototype chrome (DEV ONLY — not shipped) ---------- */
body { margin:0; font-family:Rubik,-apple-system,BlinkMacSystemFont,sans-serif;
       background:#fafafa; color:#141414; padding:40px 20px; }

.harness { max-width:1100px; margin:0 auto; }

.harness h1 { font-size:20px; font-weight:500; margin:0 0 4px; }

.harness p  { font-size:14px; color:#6b6b6b; margin:0 0 20px; }

.controls { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }

.controls button { font:inherit; font-size:13px; padding:7px 14px; border:1px solid #e2e2e2;
                   background:#fff; border-radius:8px; cursor:pointer; }

.controls button:hover { border-color:#fd7e6f; color:#fd7e6f; }

.slot { background:#fff; border:1px dashed #e2e2e2; border-radius:16px; padding:20px; }

.slot-label { font-size:11px; text-transform:uppercase; letter-spacing:.08em;
              color:#a3a3a3; margin-bottom:12px; }

/* the app sits in a white frame on the pink ground, matching the image it replaces */
.una-frame { background:#fff; border-radius:20px; padding:11px;
            box-shadow:0 2px 6px rgba(20,20,20,.05), 0 16px 44px rgba(20,20,20,.10); }

/* --- left nav rail --- */
/* A capsule, not a rounded rectangle — the radius is half the width so the
   top and bottom are true semicircles at any height. */
.una-rail { width:38px; flex:none; background:#fff; border-radius:19px; padding:9px 0 10px;
           display:flex; flex-direction:column; align-items:center; gap:8px; }

.una-logo { width:22px; height:22px; display:block; }

.una-logo svg { width:100%; height:100%; display:block; }

.una-logo-label { font-size:8px; font-weight:500; color:#141414; margin-top:-4px;
                 text-align:center; }

.una-rail-divider { width:22px; height:1px; background:#d8d8d8; flex:none; }

.una-rail-icon { width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
                justify-content:center; color:#6b6b85; }

.una-rail-icon svg { width:11.5px; height:11.5px; }

.una-rail-icon.on { background:#ec7e6b; color:#fff; }

.una-rail-icon.on svg { width:12.5px; height:12.5px; }

.una-rail-spacer { flex:1; min-height:6px; }

.una-rail-cta { width:22px; height:22px; border-radius:50%; border:1.3px solid #f0a08f;
               color:#ec7e6b; display:flex; align-items:center; justify-content:center; }

.una-rail-cta svg { width:11px; height:11px; }

/* Fixed so the filter chips can never widen the panel mid-animation. 806 = the
   12 grid tracks (694) + 11 gaps (88) + horizontal padding (23), rounded up. */
/* No bottom padding: the table card must finish flush with the rail. */
.una-main { width:765px; flex:none; background:#f4f4f6; border-radius:12px; padding:10px 10px 0; }

/* The table is its own white card on the grey panel, as in the app. */
.una-table-card { background:#fff; border-radius:12px; padding:6px 7px 7px; }

.una-titlebar { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }

.una-title { display:flex; align-items:center; gap:6px; font-size:15px; font-weight:500; }

.una-title svg { width:15px; height:15px; }

.una-actions { display:flex; align-items:center; gap:6px; }

.una-action { width:20px; height:20px; border-radius:50%; border:1.2px solid #f0a08f;
             background:#fffcfb; display:flex; align-items:center; justify-content:center; }

.una-action svg { width:9px; height:9px; color:#ee7c63; }

/* The leading action sits a shade lighter than the rest in the real header. */
.una-action-soft { border-color:#f8cfc5; }

.una-action-soft svg { color:#f29c88; }

.una-action-divider { width:1px; height:16px; background:#e4e4e4; margin:0 5px; }

/* Logged-in user: a round photo, white behind it, no coral ring. */
.una-avatar-me { width:21px; height:21px; border-radius:50%; flex:none;
                background:#fff url("../images/match-avatars.webp?v=2") 100% 0/1500% 100% no-repeat; }

/* --- filter bar --- */
.una-filterbar { display:flex; align-items:center; gap:7px; padding:5px 7px 5px 5px;
                background:#fff; border-radius:999px; margin-bottom:9px; min-height:26px; }

.una-filter-rule { width:1px; height:17px; background:#f4c4bb; flex:none; }

.una-filter-rule-faint { width:1px; height:17px; background:#ededed; flex:none; margin-left:auto; }

.una-wand { width:15px; height:15px; flex:none; }

.una-wand svg { width:100%; height:100%; display:block; }

.una-filter-icon { width:20px; height:20px; border-radius:50%; background:#fff2f0; flex:none;
                  display:flex; align-items:center; justify-content:center; }

.una-filter-icon svg { width:11px; height:11px; color:#fd7e6f; }

/* The count is a tinted badge, not bare text. */
.una-count-label { color:#5f6076; }

.una-count { font-weight:500; color:#c2493d; font-variant-numeric:tabular-nums;
            background:#fdece9; border-radius:6px; padding:1.5px 7px; }

.una-chips { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0; }

.una-chip-wrap { display:inline-flex; align-items:center; gap:4px; }

/* Each value is a tinted pill with the text underlined inside it; only the
   connecting words ('with height', 'with age') stay plain. */
.una-chip { background:#fdece9; color:#c2493d; border-radius:999px; padding:2.5px 9px;
           white-space:nowrap; text-decoration:underline; text-decoration-color:#dd9083;
           text-underline-offset:2px; text-decoration-thickness:1px; }

.una-chip-lead { color:#5f6076; }

.una-filter-x { width:20px; height:20px; border-radius:50%; background:#fdece9;
               color:#ff3a44; display:flex; align-items:center; justify-content:center; flex:none; }

.una-filter-x svg { width:10px; height:10px; }

/* --- table: 12 columns --- */
.una-headrow, .una-row { display:grid; align-items:center; gap:7px;
  grid-template-columns:16px 26px 88px 40px 42px 56px 50px 46px 114px 80px 68px 28px; }

/* Header sits on its own tinted band, like the app. */
.una-headrow { color:#5f6076; font-size:9.5px; font-weight:500; padding:6px 5px;
              background:#f2f2f5; border-radius:7px; margin-bottom:3px; }

.una-headrow > div, .una-row > div { min-width:0; overflow:hidden;
                                   text-overflow:ellipsis; white-space:nowrap; }

.una-body { position:relative; }

.una-list { display:flex; flex-direction:column; }

.una-row { padding:5px; border-radius:8px; border-bottom:1px solid #fafafa; }

.una-row-selected { background:#fff2f1; border-bottom-color:transparent; }

/* Squircle, not a circle — sampled from the Una deck at 400dpi, along with
   the terracotta fill and the lavender-grey rest state. */
.una-radio { width:10px; height:10px; box-sizing:border-box; border-radius:32%;
            border:1.2px solid #bfc0ca; display:block; }

.una-radio-on { border-color:#c2493d; background:#c2493d; position:relative;
               box-shadow:0 0 0 1.8px #fbdcd7; }

/* Centred by transform so the tick stays put if the control is ever resized. */
.una-radio-on::after { content:""; position:absolute; left:50%; top:46%;
  width:2.4px; height:5px; border:solid #fff; border-width:0 1.4px 1.4px 0;
  transform:translate(-50%,-50%) rotate(45deg); }

/* One sprite request for all 15 faces (14 clients + the matchmaker). */
.una-face { width:24px; height:24px; border-radius:50%; display:block;
           background-image:url("../images/match-avatars.webp?v=2");
           background-size:1500% 100%; background-repeat:no-repeat; }

.una-name, .una-plain { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:10.5px; }

.una-plain { color:#3f3f46; }

.una-muted { color:#c9c9c9; padding-left:4px; }

/* --- pills, sampled from the real CRM --- */
.una-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:999px;
           font-size:9.5px; white-space:nowrap; border:1px solid transparent;
           max-width:100%; overflow:hidden; box-sizing:border-box; }

.una-pill svg { width:10px; height:10px; flex:none; }

.una-pill-female  { background:#fdf7fb; color:#e56fb0; border-color:#f7cde6; }

.una-pill-male    { background:#f8fdff; color:#7cc5d9; border-color:#cfe9f4; }

.una-pill-active  { background:#f4fbf7; color:#54b585; border-color:#c6e8d5; }

.una-pill-lead    { background:#f8fdff; color:#7cc5d9; border-color:#cfe9f4; }

.una-pill-user    { background:#fef7f5; color:#f08a72; border-color:#f9cfc4; }
/* A candidate shared by a collaborating matchmaker — the third source the hero
   claims the heart searches, alongside your own clients and leads. */
.una-pill-shared  { background:#f6f4ff; color:#8b7fd4; border-color:#ddd7f5; }

.una-pill-search  { background:#fff;    color:#f08a72; border-color:#f9cfc4; }

.una-pill-rel     { background:#fffbf4; color:#efab55; border-color:#fadfb0; }

/* Promise states — exact tokens from the Una overview deck (p.7).
   The colour IS the trust level, so it varies per client down the column. */
.una-pill-kept      { background:#f1faf5; color:#2b9a66; border-color:#bfe6d3; }

.una-pill-pending   { background:#fdf7ec; color:#ab6400; border-color:#efd9ae; }

.una-pill-risk      { background:#fdf2f2; color:#dc3e42; border-color:#f5c6c7; }

.una-pill-keptlate  { background:#edf9fc; color:#0797b9; border-color:#b3e3ef; }

.una-pill-broken    { background:#fdf1f4; color:#dc143c; border-color:#f5bfcb; }

.una-pill-cancelled { background:#f7f7f7; color:#8d8d8d; border-color:#dedede; }

/* package tiers each carry their own hue + glyph */
.una-pill-basic    { background:#f4f4fe; color:#6b6ee0; border-color:#c9caf7; }

.una-pill-advanced { background:#fef5f3; color:#f4715c; border-color:#f6ab9d; }

.una-pill-premium  { background:#fffbf4; color:#efab55; border-color:#fadfb0; }

.una-pill-database { background:#f6fcf3; color:#5da845; border-color:#bce5ac; }

.una-heart { position:relative; width:20px; height:20px; border-radius:50%; display:flex;
            align-items:center; justify-content:center; color:#9a9a9a; }

/* Two rings, staggered, so the click reads as a pulse rather than a blip. */
.una-ripple { position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
             border-radius:50%; border:2px solid #ff3a44; pointer-events:none; opacity:0; }

.una-ripple-2 { border-color:#fd9e91; }

/* Every card shares one grid cell, so an arriving card never pushes the one
   leaving and no transform is needed to place them. */
.una-msg { grid-area:1 / 1; min-width:0; box-sizing:border-box; background:#fff; border:1px solid #e2e2e6;
          border-radius:14px; padding:12px 14px; box-shadow:0 14px 40px rgba(20,20,20,.22);
          opacity:0; }

.una-msg-top { display:flex; align-items:center; gap:9px; margin-bottom:12px; }

.una-msg-icon { width:24px; height:24px; border-radius:7px; display:flex; align-items:center;
               justify-content:center; flex:none; }

.una-msg-icon > svg { width:19px; height:19px; }

.una-msg-to { font-size:12.5px; color:#141414; font-weight:500; flex:1; min-width:0; overflow:hidden;
             text-overflow:ellipsis; white-space:nowrap; }

.una-msg-body { font-size:10.5px; line-height:1.5; color:#3f4048; }

/* SMS reads as a bubble so the two channels differ at a glance */
.una-call-icon { position:relative; }

.una-msg-bubble { font-size:10.5px; line-height:1.5; color:#141414; background:#eafaf0;
                 border-radius:14px 14px 14px 4px; padding:11px 13px; }

/* ---- time HUD: on screen for the whole of act 3 so time is visibly moving ---- */
.una-timeskip-anchor { position:absolute; right:14px; bottom:calc(12px + var(--una-below)); z-index:8; pointer-events:none; }

.una-timeskip { opacity:0; display:flex; align-items:center; gap:12px;
               background:#fff; border:1px solid #e2e2e6; border-radius:16px;
               padding:11px 16px; box-shadow:0 14px 40px rgba(20,20,20,.24); }

.una-clock { width:46px; height:46px; flex:none; position:relative; border-radius:50%;
            border:2.6px solid #c9c9d2; box-sizing:border-box; background:#fbfbfc; }

.una-hand { position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; border-radius:3px; }

.una-hand-hour { width:3.4px; height:11px; margin-left:-1.7px; background:#3f4048; }

.una-hand-min  { width:2.6px; height:16px; margin-left:-1.3px; background:#e8604a; }

.una-clock-pin { position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
                border-radius:50%; background:#3f4048; }

.una-cal { width:44px; flex:none; border:1px solid #e2e2e6; border-radius:9px; overflow:hidden;
          text-align:center; background:#fff; }

.una-cal-top { background:#e8604a; color:#fff; font-size:8.5px; font-weight:500; padding:2px 0;
              letter-spacing:.06em; }

.una-cal-day { font-size:19px; font-weight:500; color:#141414; padding:2px 0 4px; line-height:1; }

.una-timeskip-date { font-size:13px; font-weight:500; color:#141414; white-space:nowrap; }

.una-timeskip-sub { font-size:15px; color:#e8604a; font-weight:500; font-variant-numeric:tabular-nums; }

/* ---- her phone: the receiving end of the same automation ---- */
/* Anchored to the bottom edge: it rises from off-screen and rests 90% up, with
   the last tenth still below the fold — like a phone held into frame. */
.una-phone-anchor { position:absolute; left:38px; bottom:0; z-index:8; pointer-events:none; }

.una-phone { opacity:0; transform:translateY(100%); width:176px; height:366px; border-radius:27px; background:#15161a;
            padding:7px; box-shadow:0 22px 60px rgba(20,20,20,.34); }

/* Her wallpaper. The gradient stays underneath as the colour the screen falls
   back to, so a missing image never shows as a white rectangle. */
.una-phone-screen { position:relative; width:100%; height:100%; border-radius:21px; overflow:hidden;
                   background:linear-gradient(160deg,#4a5568,#2d3748 55%,#1f2530); }

/* Already cropped to the screen's aspect, so cover fills it exactly with no
   crop of its own — the head space in the photo is what keeps the clock off
   her face. */
.una-phone-screen::before { content:""; position:absolute; inset:0;
                           background:url(../images/phone-bg.webp) center / cover no-repeat; }

.una-screen { position:absolute; inset:0; padding:18px 8px 13px; box-sizing:border-box; }

.una-screen-call { opacity:0; display:flex; flex-direction:column; align-items:center;
                  justify-content:center; }

/* … and the panel wraps the call itself, not the whole phone. Half-transparent,
   so her wallpaper still reads around and behind it. */
/* Fixed box: the waveform is wider than the rest of the call, so an auto-sized
   panel would jump the moment audio starts. */
.una-call-card { display:flex; flex-direction:column; align-items:center;
                justify-content:center; gap:7px;
                width:100%; height:230px; box-sizing:border-box;
                padding:13px 15px 15px; border-radius:16px;
                background:rgba(16,17,22,.5); backdrop-filter:blur(7px); }

/* call screen */
.una-call-avatar { position:relative; }

.una-call-avatar .una-face { width:56px; height:56px; border:2px solid rgba(255,255,255,.5);
                           box-sizing:border-box; }

.una-call-badge { position:absolute; right:-4px; bottom:-2px; width:22px; height:22px;
                 border-radius:50%; background:#2b9a66; color:#fff; border:2px solid #2d3748;
                 display:flex; align-items:center; justify-content:center; }

.una-call-badge svg { width:11px; height:11px; }

.una-callbox-who { font-size:15px; font-weight:500; color:#fff; }

.una-callbox-state { font-size:10px; color:#6ee7a8; font-weight:500; }

.una-callbox-dur { font-size:17px; font-weight:300; color:#fff; font-variant-numeric:tabular-nums; }

.una-wave { display:flex; align-items:center; justify-content:center; gap:2.5px; height:30px; }

.una-wave i { display:block; width:2.6px; height:28px; border-radius:2px; background:#6ee7a8;
             transform-origin:center; }

.una-transcript { font-size:9px; color:rgba(255,255,255,.8); line-height:1.45; text-align:center;
                 font-style:italic; min-height:26px; padding:0 4px; }

.una-phone-time { color:#fff; font-size:46px; font-weight:500; text-align:center;
                 letter-spacing:-.02em; line-height:1; margin-bottom:12px; }

.una-phone-date { color:rgba(255,255,255,.92); font-size:11.5px; font-weight:500;
                 text-align:center; margin-bottom:2px; }

.una-notes { display:flex; flex-direction:column; gap:7px; }

/* iOS-style: translucent over the wallpaper, app icon left, time right */
.una-note { background:rgba(255,255,255,.17); border-radius:13px; padding:7px 8px; opacity:0;
           display:flex; gap:7px; backdrop-filter:blur(6px); }

/* The channel owns the tile — it is what the notification is about. Una sits
   small in the corner as the sender. */
.una-note-icon { position:relative; width:27px; height:27px; border-radius:8px; flex:none;
                display:flex; align-items:center; justify-content:center; }

.una-note-icon > svg { width:20px; height:20px; }

.una-tile-mail { background:#3b82c4; color:#fff; }

.una-tile-sms  { background:#2b9a66; color:#fff; }

.una-tile-cal  { background:#fff; }

.una-tile-cal > svg { width:100%; height:100%; }

   /* face fills the tile */
.una-note-badge { position:absolute; right:-5px; bottom:-5px; width:15px; height:15px; border-radius:50%;
                 background:#fff; border:1.5px solid #2f3746; display:flex;
                 align-items:center; justify-content:center; }

.una-note-badge svg { width:11px; height:11px; }

.una-note-body { flex:1; min-width:0; }

.una-note-head { display:flex; align-items:baseline; gap:6px; }

.una-note-app { font-size:8.5px; color:#fff; font-weight:600; letter-spacing:.04em; }

.una-note-time { margin-left:auto; font-size:8px; color:rgba(255,255,255,.62); }

.una-note-text { font-size:8.5px; color:#fff; line-height:1.38; margin-top:1px; }

/* ---- subtitle: names the beat, so the argument does not rely on inference.
   Sits below the app and inside the scaled wrapper, with a fixed height so the
   demo box never changes size as the lines change. ---- */
.una-caption { height:38px; display:flex; align-items:center; justify-content:center;
              margin-top:12px; position:relative; z-index:10; }

.una-caption span { font-size:15px; color:#2b2c33; text-align:center;
                   background:rgba(20,20,20,.055); border-radius:999px;
                   padding:7px 18px; backdrop-filter:blur(4px); }

.una-caption b { font-weight:500; color:#141414; }

/* same tokens as the promise pills, so the words match the states */
.una-caption .risk   { color:#dc3e42; }

.una-caption .broken { color:#dc143c; font-weight:600; letter-spacing:.005em;
                      display:inline-block; transform-origin:center; }

.una-caption .kept   { color:#0797b9; }

/* Una coral, not the at-risk red — a positive claim should not borrow
   the colour that means trouble everywhere else in this loop. */
.una-caption .accent { color:#e8604a; }

.una-cursor-inner { width:100%; height:100%; }

.una-cursor svg { width:100%; height:100%; filter:drop-shadow(0 2px 5px rgba(0,0,0,.42)); }

/* Always-present empty band. The bar slides into it, so nothing ever reflows. */
/* Full-bleed band: spans the whole app, rail included, like a real in-app banner. */
.una-alert-strip { height:0; overflow:hidden; flex:none;
                  transition:height .44s cubic-bezier(.2,.8,.2,1); }

.una-alert-strip.on { height:36px; }

.una-alert { height:36px; background:#fdeced; border-bottom:1px solid #f5c6c7;
            color:#dc3e42; display:flex; align-items:center; gap:8px; padding:0 14px;
            font-size:12px; }

.una-alert svg { width:15px; height:15px; flex:none; }

.una-alert b { font-weight:500; }

.una-alert-spacer { flex:1; }

.una-alert-due { color:#b8383b; }

.una-alert-action { border:1px solid currentColor; border-radius:999px; padding:4px 13px;
                   font-size:11px; font-weight:500; margin-left:12px; white-space:nowrap; }

.una-alert-broken { background:#fdeaf0; border-bottom-color:#f5bfcb; color:#dc143c; }

.una-alert-broken .una-alert-due { color:#c01236; }

/* Broken outranks at-risk, so its title carries real weight. The base
   `.una-alert b` rule pulls the tag down to 500, which reads as unbolded. */
.una-alert-broken b { font-weight:700; }

/* Clips the parked drawer to the app frame, not the outer box. */
.una-shell { display:flex; gap:8px; position:relative; overflow:hidden; padding:8px; flex:1;
            background:#f4f4f6; }

.una-backdrop { position:absolute; inset:0; background:rgba(20,20,20,.28);
               opacity:0; pointer-events:none; z-index:4; }

/* flush against the app edge, so only the inner corners are rounded — otherwise
   the backdrop shows through as a grey wedge behind the right-hand curve */
.una-drawer { position:absolute; top:0; right:0; bottom:0; width:560px; background:#fff;
             border-radius:12px 0 0 12px; overflow:hidden; transform:translateX(104%); z-index:5; }

.una-view { position:absolute; inset:0; padding:12px 14px; display:flex; flex-direction:column; }

.una-view-user { opacity:0; }

.una-drawer-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }

.una-drawer-title { font-size:14px; font-weight:500; }

.una-mark { display:flex; align-items:center; gap:5px; font-size:9.5px; color:#5f6076; }

.una-mark-dot { width:16px; height:16px; border-radius:50%; background:#fdece9; color:#c2493d;
               display:flex; align-items:center; justify-content:center; }

.una-mark-dot svg { width:10px; height:10px; }

.una-label { font-size:9px; color:#5f6076; margin:7px 0 3px; }

.una-input { height:22px; border:1px solid #ececec; border-radius:6px; display:flex;
            align-items:center; padding:0 8px; color:#b6b6b6; font-size:10px; }

.una-input-filled { color:#141414; }

.una-chiprow { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }

.una-optchip { font-size:9px; padding:2.5px 8px; border-radius:999px; border:1px solid #e6e6e6;
              color:#5f6076; }

.una-optchip.sel { border-color:#f0a08f; color:#e8604a; background:#fff8f6; }

.una-suggest { font-size:9px; color:#8c8c8c; margin-right:2px; }

.una-target { display:flex; align-items:center; gap:4px; min-height:20px; }

.una-target-chip { display:inline-flex; align-items:center; gap:4px; border:1px solid #ececec;
                  border-radius:999px; padding:1.5px 8px 1.5px 2px; font-size:9px; opacity:0; }

.una-target-chip .una-face { width:15px; height:15px; }

.una-notify { display:flex; gap:7px; }

.una-check { display:flex; align-items:center; gap:5px; border:1px solid #ececec; border-radius:6px;
            padding:4px 7px; font-size:9px; flex:1; white-space:nowrap; }

.una-check-box { width:11px; height:11px; border-radius:3px; background:#e8604a; position:relative;
                flex:none; }

.una-check-box::after { content:""; position:absolute; left:50%; top:46%; width:2.4px; height:5px;
  border:solid #fff; border-width:0 1.4px 1.4px 0; transform:translate(-50%,-50%) rotate(45deg); }

.una-fallback { margin-left:auto; font-size:8.5px; color:#e8604a; border:1px solid #f6cdc4;
               border-radius:999px; padding:1px 6px; }

.una-submit { margin-top:auto; align-self:flex-end; background:#ee7c63; color:#fff; font-size:11px;
             border-radius:8px; padding:7px 18px; }

.una-user-head { display:flex; align-items:center; gap:9px; margin-bottom:9px; }

.una-user-head .una-face { width:38px; height:38px; }

.una-user-name { font-size:13px; font-weight:500; }

.una-user-mail { font-size:9px; color:#8c8c8c; }

/* ---- user record card, laid out like the real drawer ---- */
.una-owner { display:flex; align-items:center; gap:5px; font-size:9.5px; color:#141414; margin-bottom:2px; }

.una-owner .una-face { width:15px; height:15px; }

.una-user-top { display:flex; align-items:flex-start; gap:10px; position:relative; min-height:56px; }

.una-user-left { flex:none; width:170px; min-width:0; }

.una-user-pills { display:flex; align-items:center; gap:4px; margin-bottom:6px; }

.una-dot { color:#c9c9c9; font-size:8px; }

.una-user-actions { display:flex; align-items:center; gap:5px; }

/* flex:none or the row squashes them into ovals once it runs out of width */
.una-mini { width:18px; height:18px; flex:none; border-radius:50%; border:1px solid #e6e6e6;
           color:#7a7a7a; display:flex; align-items:center; justify-content:center; }

.una-mini svg { width:9px; height:9px; }

/* how many promises this person is owed, and how they have been kept — sits with
   the other header actions and carries the same hues as the promise pills */
.una-promise-count { position:relative; display:flex; align-items:center; gap:3px; height:18px;
                    flex:none; padding:0 6px; border-radius:9px; border:1px solid #f5c6c7;
                    background:#fff;
                    color:#dc3e42; font-size:9.5px; font-weight:600; line-height:1; }

.una-promise-count svg { width:9px; height:9px; }

.una-promise-count.is-pending  { color:#ab6400; border-color:#efd9ae; }

.una-promise-count.is-risk     { color:#dc3e42; border-color:#f5c6c7; }

.una-promise-count.is-broken   { color:#dc143c; border-color:#f5bfcb; }

.una-promise-count.is-keptlate { color:#0797b9; border-color:#b3e3ef; }

/* the trust record, revealed on hover — it outlives the promise itself */
.una-trust-tip { position:absolute; left:2px; top:calc(100% + 9px); z-index:7;
                display:flex; flex-direction:column; gap:5px;
                min-width:112px; padding:13px 10px 8px; border-radius:9px; background:#fff;
                box-shadow:0 6px 18px rgba(20,20,20,.13); opacity:0; pointer-events:none;
                font-size:10px; white-space:nowrap; }

.una-trust-row   { display:flex; align-items:center; justify-content:space-between; gap:18px; }

.una-trust-row b { font-weight:600; }

.una-trust-count { color:#5f6076; font-weight:600; }

.una-trust-kept     { color:#2b9a66; }

.una-trust-keptlate { color:#0797b9; }

.una-trust-pending  { color:#ab6400; }

.una-trust-risk     { color:#dc3e42; }

.una-trust-broken   { color:#dc143c; }

/* Pinned to the card's centre line — the details block never shifts it. */
.una-user-avatars { position:absolute; left:50%; top:0; transform:translateX(-50%);
                   display:flex; align-items:center; gap:7px; }

.una-user-avatars .una-face { width:52px; height:52px; border:2px solid #ef8a72; box-sizing:border-box; }

.una-compare { width:20px; height:20px; border-radius:50%; border:1px solid #d8d8d8; color:#8a8a8a;
              display:flex; align-items:center; justify-content:center; flex:none; }

.una-compare svg { width:11px; height:11px; }

.una-select-user { width:42px; height:42px; border-radius:50%; border:1.5px dashed #cfcfcf;
                  color:#9a9a9a; display:flex; align-items:center; justify-content:center; flex:none; }

.una-select-user svg { width:15px; height:15px; }

.una-select-label { font-size:9px; color:#6b6b6b; }

.una-tabs { display:flex; gap:9px; font-size:9px; color:#8c8c8c; border-bottom:1px solid #f0f0f0;
           padding-bottom:6px; margin:9px 0; white-space:nowrap; }

.una-tab.on { color:#e8604a; position:relative; }

.una-tab.on::after { content:""; position:absolute; left:0; right:0; bottom:-7px; height:1.5px;
                    background:#e8604a; }

/* ---- drawer top controls + General tab content ---- */
.una-drawer-bar { display:flex; align-items:center; justify-content:space-between; color:#8a8a8a;
                 margin-bottom:6px; }

.una-drawer-bar svg { width:12px; height:12px; }

.una-section { border:1px solid #f1f1f1; border-radius:10px; overflow:hidden; margin-bottom:7px; }

.una-section-head { background:#fdf6f5; padding:6px 10px; font-size:9.5px; letter-spacing:.03em;
                   color:#141414; display:flex; align-items:center; justify-content:space-between; }

.una-section-head svg { width:9px; height:9px; color:#9a9a9a; }

.una-field { display:flex; padding:6px 10px; font-size:10px; border-top:1px dotted #f0f0f0; }

.una-field-label { width:44%; color:#3f3f46; flex:none; }

.una-field-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.una-ghost { color:#b6b6b6; }

.una-general { overflow:hidden; }

.una-hidden { display:none; }

/* The header must never be compressed by a growing journey. Flex items shrink
   by default, which is what pushed the action row up into the tabs. */
.una-drawer-bar, .una-owner, .una-user-top, .una-tabs { flex:none; }

.una-general, .una-journey { flex:1 1 auto; min-height:0; overflow:hidden; }

.una-journey { display:flex; flex-direction:column; gap:5px; }

/* what a promise actually holds: who owes it, to whom, who carries it out, when */
.una-tip { position:absolute; right:6px; top:calc(100% + 3px); width:262px; z-index:6;
          border:1px solid #ececec; border-radius:12px; background:#fff; padding:11px 13px;
          box-shadow:0 14px 34px rgba(20,20,20,.16); opacity:0; }

.una-tip-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }

.una-tip-label { font-size:8.5px; color:#8c8c8c; margin-bottom:2px; }

.una-tip-val { display:flex; align-items:center; gap:5px; font-size:10px; color:#141414; }

.una-tip-val .una-face { width:15px; height:15px; }

.una-date { font-size:9px; color:#8c8c8c; padding:3px 0 1px; }

.una-entry { position:relative; display:flex; align-items:center; gap:7px;
            border:1px solid #f2f2f2; border-radius:8px; padding:6px 8px; }

.una-entry-icon { width:17px; height:17px; border-radius:5px; display:flex; align-items:center;
                 justify-content:center; flex:none; }

.una-entry-icon svg { width:10px; height:10px; }

.una-icon-promise { background:#f3edff; color:#7c5cd6; }

.una-icon-mail    { background:#eaf3fe; color:#4b93e0; }

.una-icon-sms     { background:#eafaf0; color:#2b9a66; }

.una-icon-risk    { background:#fdeced; color:#dc3e42; }

.una-icon-broken  { background:#fdeaf0; color:#dc143c; }

.una-icon-reply   { background:#eef4ff; color:#4b6fd6; }

.una-icon-heart   { background:#fdeef4; color:#e0509a; }

.una-icon-chat    { background:#eef4ff; color:#4b6fd6; }

.una-icon-form    { background:#fff6e9; color:#d18a1e; }

.una-icon-cal     { background:#ffeceb; color:#ff3b30; }

.una-entry-text { flex:1; font-size:10px; min-width:0; overflow:hidden; text-overflow:ellipsis;
                 white-space:nowrap; }

.una-entry-time { font-size:9px; color:#a3a3a3; }

/* The due date is the anchor for the whole story — without it "due today"
   refers to nothing. It reddens when the date actually arrives. */
.una-due { font-size:9px; color:#6b6b6b; background:#f4f4f6; border-radius:999px;
          padding:2px 7px; white-space:nowrap; }

.una-due-hot { color:#dc3e42; background:#fdeced; }

/* Marks the rows Una produced by itself, so it is clear nobody did them. */
.una-auto { display:inline-flex; align-items:center; gap:3px; font-size:8.5px; font-weight:500;
           color:#7c5cd6; background:#f3edff; border-radius:999px; padding:4px 10px;
           white-space:nowrap; }

.una-auto svg { width:9px; height:9px; }