/* Loom · person and organisation profile · built to loom-profiles-v1.html.
   Every measurement here is taken from that file rather than approximated.

   ── how this sheet relates to the mockup's :root block ──────────────────────────────────────
   The mockup declares its own palette. Most of it already exists in Loom under a different name,
   so the duplicate is gone and Loom's token is used instead. The mapping, once, here:

     mockup            Loom                 why
     --ground          --paper-2            same value, 100% match
     --card            --paper              the raised surface
     --panel           --paper-3            the recessed surface
     --line            --rule               a border
     --line-soft       --rule-soft          a border inside a component
     --ink             --navy               headings and the filled rung
     --body            --ink-soft           body copy
     --muted           --ink-muted          secondary text
     --faint           --ink-whisper        tertiary text
     --violet(-bg)     --purple(-bg)        the person chip
     --teal(-bg)       --green(-bg)         the organisation chip
     --amber(-bg)      --amber(-bg)         already identical in role and near in value
     --red(-bg)        --red(-bg)           the same
     --serif           --head               Loom sets every profile h1 in Space Grotesk. A serif
                                            on two pages alone would read as a different product.

   Two families in the mockup have no Loom equivalent and are genuinely new, so they were added to
   Loom's token block rather than left inline here: --khaki / --khaki-bg (the record class chip)
   and --heat0 through --heat4 (the activity ramp). Nothing outside these profiles reads either,
   so adding them changes no existing page.

   ── scoping ─────────────────────────────────────────────────────────────────────────────────
   The design uses generic names (.box, .band, .tile, .facts, .key) and the directory chrome
   already owns .rail, .stamp, .sub and .chip. Everything here is scoped under .rec, and those
   four are renamed to .railcol, .prov, .subline and .rchip so no chrome rule can leak into a
   component or the other way round. Nothing in this file can reach another page. */

.rec{color:var(--ink-soft);font-family:var(--sans);font-size:14px;line-height:1.5}
.rec a{color:inherit}
.rec button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
.rec :focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:2px}
.rec-wrap{padding:22px 34px 90px}

/* ── masthead ────────────────────────────────────────────────────────────────────────────── */
.rec .mast{display:flex;gap:22px;align-items:flex-start;padding-bottom:22px}
.rec .mono-av{width:66px;height:66px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:17px;letter-spacing:.03em;color:#fff;background:var(--purple)}
.rec .mono-av.org{border-radius:4px;background:var(--navy);font-size:15px}
.rec .mast-body{min-width:0}
.rec .mast h1{font-family:var(--head);font-size:33px;line-height:1.1;color:var(--navy);margin:0 0 4px;font-weight:600;letter-spacing:-.02em}
.rec .mast-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.rec .subline{color:var(--ink-muted);font-size:14.5px;margin:2px 0 12px}
.rec .subline a{color:var(--blue);text-decoration:none}
.rec .rchip{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  padding:4px 9px;border-radius:2px;text-transform:uppercase;border:none;line-height:1.5;white-space:nowrap}
.rec .rchip.person{background:var(--purple-bg);color:var(--purple)}
.rec .rchip.org{background:var(--green-bg);color:var(--green)}
.rec .rchip.box{background:var(--khaki-bg);color:var(--khaki)}
.rec .rchip.watch{background:var(--paper);color:var(--ink-muted);border:1px solid var(--rule)}
.rec .rchip.amber{background:var(--amber-bg);color:var(--amber)}
.rec .rchip.red{background:var(--red-bg);color:var(--red)}

/* ── follow control ──────────────────────────────────────────────────────────────────────── */
.rec .follow{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.rec .fbtn{border:1px solid var(--rule);background:var(--paper);border-radius:3px;padding:7px 14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);
  display:flex;align-items:center;gap:8px}
.rec .fbtn .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-whisper)}
.rec .fbtn[aria-pressed="true"]{background:var(--navy);color:var(--paper-2);border-color:var(--navy)}
.rec .fbtn[aria-pressed="true"] .dot{background:var(--green)}
.rec .fcad{font-family:var(--mono);font-size:10px;color:var(--ink-muted);letter-spacing:.06em;text-align:right}

/* ── relationship ladder spine ───────────────────────────────────────────────────────────── */
.rec .spine{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 2px 16px;margin-bottom:26px}
.rec .ladder{display:flex;align-items:flex-start;gap:0}
.rec .rung{flex:1;position:relative;padding-top:20px;min-width:0}
.rec .rung::before{content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--rule)}
.rec .rung.done::before,.rec .rung.now::before{background:var(--navy)}
.rec .rung .knob{position:absolute;top:1px;left:0;width:12px;height:12px;border-radius:50%;background:var(--paper-2);border:2px solid var(--rule)}
.rec .rung.done .knob{background:var(--navy);border-color:var(--navy)}
.rec .rung.now .knob{background:var(--paper-2);border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,43,76,.12)}
.rec .rung .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-whisper)}
.rec .rung.done .lab,.rec .rung.now .lab{color:var(--navy)}
.rec .rung.now .lab{font-weight:700}
.rec .rung .when{font-family:var(--mono);font-size:10px;color:var(--ink-muted);margin-top:3px}

/* ── the four tiles ──────────────────────────────────────────────────────────────────────── */
.rec .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.rec .tile{background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:13px 15px 15px;min-height:82px;display:flex;flex-direction:column;min-width:0}
.rec .tile .cap{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--ink-muted);text-transform:uppercase}
.rec .tile .cap .flag{color:var(--ink-whisper);white-space:nowrap}
.rec .tile .val{font-size:17px;color:var(--navy);margin-top:11px;line-height:1.3;word-wrap:break-word}
.rec .tile .val.long{font-size:15px}
.rec .tile .val a{color:var(--blue);text-decoration:none}
.rec .tile .val.empty{color:var(--ink-whisper);font-size:14px;font-style:italic}
.rec .tile .prov{margin-top:auto;padding-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--ink-whisper)}

/* ── band headings and boxes ─────────────────────────────────────────────────────────────── */
.rec .band{margin:34px 0 0}
.rec .band-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.rec .band-head h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;font-weight:600;white-space:nowrap}
.rec .band-head .rule{flex:1;height:1px;background:var(--rule)}
.rec .band-head .aside{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-whisper);text-transform:uppercase;white-space:nowrap}
.rec .box{background:var(--paper);border:1px solid var(--rule);border-radius:3px}
.rec .pad{padding:16px 18px}
.rec .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── the body grid and the sticky rail ───────────────────────────────────────────────────── */
.rec .body-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:26px;align-items:start}
.rec .body-col{min-width:0}
.rec .railcol{position:sticky;top:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.rec .railcol .box{padding:15px 17px}
.rec .railcol h3{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 12px;font-weight:400}
.rec .kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.rec .kv:last-child{border-bottom:none}
.rec .kv .k{color:var(--ink-muted)}
.rec .kv .v{color:var(--navy);text-align:right;font-weight:500}
.rec .kv .v.empty{color:var(--ink-whisper);font-weight:400;font-style:italic}
.rec .kv .v.am{color:var(--amber)}
.rec .kv .v.rd{color:var(--red)}

/* ── the fact row and its source stamp, and the open slot ────────────────────────────────── */
.rec .facts{display:flex;flex-direction:column}
.rec .fact{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.rec .fact:last-child{border-bottom:none}
.rec .fact .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted)}
.rec .fact .v{color:var(--navy);min-width:0;word-wrap:break-word}
.rec .fact .v a{color:var(--blue)}
.rec .fact .src{font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--ink-whisper);white-space:nowrap}
.rec .slot{display:flex;align-items:center;gap:9px}
.rec .slot .rule{flex:1;height:1px;border-bottom:1px dashed var(--rule-strong);min-width:34px}
.rec .slot .capture{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);white-space:nowrap}

/* ── activity heatmap ────────────────────────────────────────────────────────────────────── */
.rec .heat{display:grid;grid-template-columns:repeat(52,1fr);grid-auto-rows:9px;gap:3px}
.rec .heat i{background:var(--heat0);border-radius:1px;display:block;height:9px}
.rec .heat i.l1{background:var(--heat1)}
.rec .heat i.l2{background:var(--heat2)}
.rec .heat i.l3{background:var(--heat3)}
.rec .heat i.l4{background:var(--heat4)}
.rec .heat-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:11.5px;color:var(--ink-muted)}
.rec .legend{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10px}
.rec .legend i{width:10px;height:10px;border-radius:1px;display:block}

/* ── the dated ledger ────────────────────────────────────────────────────────────────────── */
.rec .ledger{display:flex;flex-direction:column}
.rec .led{display:grid;grid-template-columns:96px 86px 1fr auto;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule-soft)}
.rec .led:last-child{border-bottom:none}
.rec .led .d{font-family:var(--mono);font-size:11.5px;color:var(--navy);letter-spacing:.02em}
.rec .led .d.undated{color:var(--ink-whisper)}
.rec .led .t{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.rec .led .w{color:var(--ink-soft);min-width:0}
.rec .led .w small{display:block;color:var(--ink-muted);font-size:12px;margin-top:2px}
.rec .led .src{font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--ink-whisper);white-space:nowrap}
.rec .led.ahead .d{color:var(--amber)}

/* ── signals and the watch terms row ─────────────────────────────────────────────────────── */
.rec .sig{display:grid;grid-template-columns:96px 1fr auto;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule-soft);align-items:start}
.rec .sig:last-child{border-bottom:none}
.rec .sig .d{font-family:var(--mono);font-size:11.5px;color:var(--navy)}
.rec .sig .h{color:var(--navy);font-size:14.5px;line-height:1.35}
.rec .sig .m{margin-top:5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--ink-whisper);text-transform:uppercase}
.rec .sig .m .tag{border:1px solid var(--rule);border-radius:2px;padding:2px 6px}
.rec .sig .m a{color:var(--blue);text-decoration:none}
.rec .new{background:var(--amber-bg);color:var(--amber);border-radius:2px;padding:2px 6px;font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.rec .ack{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);
  border:1px solid var(--rule);border-radius:2px;padding:4px 9px;white-space:nowrap}
.rec .ack[aria-pressed="true"]{background:var(--paper-3);color:var(--ink-whisper)}
.rec .terms{display:flex;flex-wrap:wrap;gap:7px;padding:14px 18px;border-top:1px solid var(--rule-soft);align-items:center}
.rec .terms .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-right:4px}
.rec .term{border:1px solid var(--rule);background:var(--paper-2);border-radius:2px;padding:4px 9px;font-size:12.5px;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:7px}
.rec .term .x{font-family:var(--mono);font-size:11px;color:var(--ink-whisper);line-height:1}
.rec .term .x:hover{color:var(--red)}
.rec .term.add{color:var(--blue);border-style:dashed}
.rec .term-in{border:1px solid var(--rule);background:var(--paper);border-radius:2px;padding:4px 9px;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);width:190px}

/* ── people here ─────────────────────────────────────────────────────────────────────────── */
.rec .plist{display:flex;flex-direction:column}
.rec .prow{display:grid;grid-template-columns:34px 1fr 130px 96px auto;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.rec .prow:last-child{border-bottom:none}
.rec .prow .av{width:30px;height:30px;border-radius:50%;background:var(--paper-3);color:var(--navy);
  font-family:var(--mono);font-size:9.5px;display:flex;align-items:center;justify-content:center}
.rec .prow .nm{color:var(--navy);font-weight:500;min-width:0}
.rec .prow .nm a{text-decoration:none}
.rec .prow .nm small{display:block;font-weight:400;color:var(--ink-muted);font-size:12px}
.rec .prow .rl{color:var(--ink-muted);font-size:13px}
.rec .prow .q{font-family:var(--mono);font-size:11px}
.rec .q.ok{color:var(--ink-muted)}
.rec .q.am{color:var(--amber)}
.rec .q.rd{color:var(--red)}

/* ── open actions ────────────────────────────────────────────────────────────────────────── */
.rec .act{display:grid;grid-template-columns:1fr 130px 96px;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule-soft);align-items:center}
.rec .act:last-child{border-bottom:none}
.rec .act .w{color:var(--navy);min-width:0}
.rec .act .o{color:var(--ink-muted);font-size:13px}
.rec .act .due{font-family:var(--mono);font-size:11.5px;color:var(--ink-muted);text-align:right}
.rec .act .due.late{color:var(--red)}

.rec .empty-note{color:var(--ink-whisper);font-style:italic}
.rec .feed-note{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-whisper);padding:12px 18px;border-top:1px solid var(--rule-soft);line-height:1.6}

/* ── where each field comes from ─────────────────────────────────────────────────────────── */
.rec .key{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--rule)}
.rec .key div{padding:14px 16px;border-right:1px solid var(--rule-soft)}
.rec .key div:last-child{border-right:none}
.rec .key b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--navy);margin-bottom:6px}
.rec .key span{font-size:12.5px;color:var(--ink-muted);line-height:1.45}

/* ── the mockup's own breakpoints ────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .rec .body-grid{grid-template-columns:minmax(0,1fr)}
  .rec .railcol{position:static;flex-direction:row;flex-wrap:wrap}
  .rec .railcol .box{flex:1 1 260px}
  .rec .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .rec-wrap{padding:18px 16px 70px}
  .rec .tiles{grid-template-columns:1fr}
  .rec .two{grid-template-columns:1fr}
  .rec .fact{grid-template-columns:1fr;gap:2px}
  .rec .led{grid-template-columns:78px 1fr;row-gap:4px}
  .rec .led .src{grid-column:1 / -1}
  .rec .prow{grid-template-columns:34px 1fr auto}
  .rec .prow .rl,.rec .prow .q{display:none}
  .rec .mast h1{font-size:27px}
  .rec .mast{flex-wrap:wrap}
  .rec .follow{margin-left:0;width:100%;justify-content:flex-start}
  .rec .key{grid-template-columns:1fr 1fr}
  .rec .sig{grid-template-columns:1fr;gap:6px}
  .rec .act{grid-template-columns:1fr;gap:2px}
  .rec .act .due{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .rec *{transition:none !important;animation:none !important}
}