/* Loom · focus area profile · built to reference/Loom_Focus_Area_Profile_v1.html.
   Every measurement here is taken from that file rather than approximated, and the chassis rules
   (masthead, finish block, paired feature block, tiles, the one page body with its band headings
   and sticky rail) carry the same values as public/opportunity-profile.css, because it is the same
   chassis. What is only here is the condition ladder, which stands where the stage rail stands on
   an opportunity and where the nine stop road stands on a site, plus the rollup, risk and group
   components the focus area page needs.

   The design uses generic names (.zone, .band, .tile, .av, .pill, .btn) that already mean other
   things in loom.css, so the whole sheet is scoped under .fapro. Nothing here can reach another
   page, and loom.css keeps rendering the chrome around it untouched. */

.fapro{--fa-rule:#E4DED0;--fa-rule-soft:#EDE8DC;--fa-rule-strong:#D3CABA;
  --fa-paper:#FFFDF8;--fa-paper-2:#F7F4EC;--fa-paper-3:#F0ECE1;
  --fa-ink:#171410;--fa-ink-soft:#4A443B;--fa-ink-muted:#6E6659;--fa-ink-whisper:#9A9184;
  --fa-navy:#1F3A5F;--fa-red:#B54A3A;--fa-amber:#C08A2E;--fa-green:#3F7A63;
  --fa-hm0:#F0ECE1;--fa-hm1:rgba(31,58,95,.20);--fa-hm2:rgba(31,58,95,.45);
  --fa-hm3:rgba(31,58,95,.72);--fa-hm4:rgba(31,58,95,.92);
  --fa-r-md:7px;--fa-r-lg:11px;
  font-size:13px;line-height:1.55;color:var(--fa-ink)}
.fapro .wrap{max-width:1180px;margin:0 auto;padding:0 26px 90px}

/* ── top bar ─────────────────────────────────────────────────────────────────────────────────
   The site profile's bar, rule for rule. loom.css declares .topbar as the home chrome's sticky
   glass bar, fixed at 52px and pinned to top:0. On a page this long that bar detaches and rides
   down over the content, which is what put it across the Activity card and the first rail card.
   The site profile answers the same problem by making the bar static with an inner .in carrying
   the measure, and that is what is reproduced here. Not sticky, first in the document, full
   width, and never over anything. */
.fapro .topbar{position:static;height:auto;display:block;padding:0;
  background:var(--fa-paper-2);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--fa-rule)}
.fapro .topbar .in{max-width:1180px;margin:0 auto;padding:11px 26px;display:flex;
  justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.fapro .topbar .bc{font-size:12.5px;color:var(--fa-ink-muted);min-width:0}
.fapro .topbar .bc a{color:var(--fa-ink-muted);text-decoration:none}
.fapro .topbar .bc a:hover{color:var(--fa-navy)}
.fapro .topbar .bc b{color:var(--fa-ink);font-weight:600}
.fapro .topbar .rt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fapro .tbtn{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border:1px solid var(--fa-rule-strong);background:var(--fa-paper);
  color:var(--fa-ink-muted);cursor:pointer;text-decoration:none;display:inline-block;border-radius:99px}
.fapro .tbtn:hover{border-color:var(--fa-navy);color:var(--fa-navy)}
.fapro .topbar .dt{font-family:var(--mono);font-size:11px;color:var(--fa-ink-whisper);margin-left:6px}

/* ── masthead ───────────────────────────────────────────────────────────────────────────── */
.fapro .mast{display:grid;grid-template-columns:1fr 300px;gap:34px;padding:26px 0 0}
.fapro .eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fa-ink-whisper)}
.fapro .h1row{display:flex;align-items:center;gap:11px;margin-top:5px;flex-wrap:wrap}
.fapro h1{font-family:var(--head);font-size:31px;font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.1}
.fapro .tag{font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;background:rgba(31,58,95,.09);border:1px solid rgba(31,58,95,.22);color:var(--fa-navy);border-radius:5px;padding:3px 8px}
.fapro .stance{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--fa-ink-soft);max-width:60ch}
.fapro .stance.na{font-family:var(--mono);font-size:11px;color:var(--fa-rule-strong);letter-spacing:.03em}
.fapro .mast-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fapro .owners{display:flex;align-items:center;gap:5px}
.fapro .av{width:25px;height:25px;border-radius:50%;background:var(--fa-navy);color:#fff;font-family:var(--mono);font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.fapro .av.g{background:var(--fa-paper-3);color:var(--fa-ink-muted);border:1px solid var(--fa-rule)}
.fapro .av.lg{width:31px;height:31px;font-size:10px}
.fapro .btn{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--fa-rule-strong);background:var(--fa-paper);border-radius:99px;padding:5px 13px;color:var(--fa-ink-muted);cursor:pointer;text-decoration:none;display:inline-block}
.fapro .btn.blue{border-color:var(--fa-navy);color:var(--fa-navy)}
.fapro .btn.solid{background:var(--fa-navy);border-color:var(--fa-navy);color:#fff}
.fapro .btn.sm{padding:3px 10px;font-size:8.5px}
.fapro .mast-meta{font-family:var(--mono);font-size:10px;color:var(--fa-ink-whisper);text-align:right}
.fapro .finish{width:100%;background:var(--fa-paper);border:1px solid var(--fa-rule);border-radius:var(--fa-r-lg);padding:13px 15px}
.fapro .finish .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fa-ink-whisper)}
.fapro .finish .v{font-family:var(--head);font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:3px;line-height:1.15}
.fapro .finish .v.na{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--fa-rule-strong);letter-spacing:.03em}
.fapro .finish .sub{font-family:var(--mono);font-size:9.5px;color:var(--fa-ink-muted);margin-top:5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fapro .pill{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:2px 8px}
.fapro .pill.ok{background:rgba(63,122,99,.14);color:#2F5C4A}
.fapro .pill.warn{background:rgba(192,138,46,.18);color:#8A6217}
.fapro .pill.bad{background:rgba(181,74,58,.18);color:#8E3628}

/* ── the condition ladder. This is what stands where the stage rail stands on an opportunity and
      where the nine stop road stands on a site. A focus area is not at a stage: it is a set of
      things that all have to become true, so the component is a ladder of conditions and not a
      progress bar. ─────────────────────────────────────────────────────────────────────────── */
.fapro .ladder{margin-top:26px;background:var(--fa-paper);border:1px solid var(--fa-rule);border-radius:var(--fa-r-lg);padding:6px 16px 12px}
.fapro .lrow{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--fa-rule-soft)}
.fapro .lrow:first-of-type{border-top:none}
.fapro .marker{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--fa-rule-strong);background:var(--fa-paper);display:flex;align-items:center;justify-content:center;position:relative}
.fapro .lrow.met .marker{background:var(--fa-navy);border-color:var(--fa-navy)}
.fapro .lrow.met .marker::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg);margin-top:-2px}
.fapro .lrow.now .marker{border-color:var(--fa-navy);border-width:2.5px;box-shadow:0 0 0 3px rgba(31,58,95,.12)}
.fapro .lrow .cond{font-size:13.5px;font-weight:500}
.fapro .lrow.met .cond{color:var(--fa-ink-muted)}
.fapro .lrow .when{font-family:var(--mono);font-size:9px;color:var(--fa-ink-whisper);white-space:nowrap}
.fapro .lrow .when.now{color:var(--fa-navy);font-weight:600}
.fapro .ladhint{font-family:var(--mono);font-size:9px;color:var(--fa-ink-whisper);margin-top:7px;letter-spacing:.03em;line-height:1.6}

/* ── the paired feature block, the tiles ────────────────────────────────────────────────── */
.fapro .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.fapro .pf{border:1px solid var(--fa-rule);border-radius:var(--fa-r-lg);padding:15px 17px;background:var(--fa-paper)}
.fapro .pf.win{border-left:3px solid var(--fa-green)}
.fapro .pf.kill{border-left:3px solid var(--fa-red)}
.fapro .pf .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fa-ink-whisper)}
.fapro .pf .v{font-family:var(--head);font-size:15.5px;font-weight:600;letter-spacing:-.012em;line-height:1.4;margin-top:6px}
.fapro .pf .v.na{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--fa-rule-strong);letter-spacing:.03em}
.fapro .pf .src{font-family:var(--mono);font-size:8.5px;color:var(--fa-ink-whisper);margin-top:8px}

.fapro .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.fapro .tile{border:1px solid var(--fa-rule);border-radius:var(--fa-r-lg);background:var(--fa-paper);padding:13px 15px;min-width:0}
.fapro .tile .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fa-ink-whisper)}
.fapro .tile .v{font-family:var(--head);font-size:23px;font-weight:700;letter-spacing:-.025em;margin-top:4px;line-height:1.05}
.fapro .tile .v small{font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--fa-ink-whisper);letter-spacing:.03em;margin-left:3px}
.fapro .tile .v.warn{color:var(--fa-amber)}
.fapro .tile .v.bad{color:var(--fa-red)}
.fapro .tile .v.na{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--fa-rule-strong);letter-spacing:.03em}
.fapro .tile .sub{font-family:var(--mono);font-size:9px;color:var(--fa-ink-muted);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── the one page body · main column and the sticky rail. No tabs: everything is on the page and
      the band headings down the left are what separate one section from the next. ──────────── */
/* Two sibling columns in one grid, align-items:start, exactly the shape of .sp .cols on the site
   profile. The rail is a column and nothing more. It was position:sticky with top:64px, which is
   what walked it down the document until its first card sat level with the Activity band; the site
   profile rail is not sticky, so neither is this one, and both cards now start on the same line. */
.fapro .body{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:20px;align-items:start;margin-top:30px}
.fapro .main{min-width:0}
.fapro .railcol{min-width:0}

.fapro .band{display:flex;align-items:center;gap:12px;margin:32px 0 12px}
.fapro .band:first-child{margin-top:0}
.fapro .band b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fa-ink-soft);font-weight:600;white-space:nowrap}
.fapro .band i{flex:1;height:1px;background:var(--fa-rule);display:block}
.fapro .band em{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--fa-ink-whisper);font-style:normal;white-space:nowrap}

.fapro .zone{background:var(--fa-paper);border:1px solid var(--fa-rule);border-radius:var(--fa-r-lg);padding:15px 17px;min-width:0}
.fapro .zone + .zone{margin-top:13px}
.fapro .zone h3{font-family:var(--head);font-size:14.5px;font-weight:700;letter-spacing:-.012em;margin:0 0 3px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fapro .zone h3 span{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--fa-ink-whisper);font-weight:400}
.fapro .empty{font-family:var(--mono);font-size:10.5px;color:var(--fa-ink-whisper);letter-spacing:.02em;padding:10px 0 2px;line-height:1.6}
.fapro .empty b{color:var(--fa-ink-muted);font-weight:500}
.fapro .two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fapro .two .zone + .zone{margin-top:0}

.fapro .chk{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--fa-rule-soft)}
.fapro .chk:first-of-type{border-top:none}
.fapro .box{width:14px;height:14px;border:1.5px solid var(--fa-rule-strong);border-radius:3px;flex:none;margin-top:2px;cursor:pointer;background:none;padding:0}
.fapro .box.on{background:var(--fa-navy);border-color:var(--fa-navy);position:relative}
.fapro .box.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.fapro .chk .t{flex:1;min-width:0}
.fapro .chk.done .t{color:var(--fa-ink-whisper);text-decoration:line-through}
.fapro .chk .who{font-family:var(--mono);font-size:8.5px;color:var(--fa-ink-whisper);white-space:nowrap}

/* ── the rollup, the reason to open this page ───────────────────────────────────────────── */
.fapro .roll{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--fa-rule-soft)}
.fapro .roll:first-of-type{border-top:none}
.fapro .roll .nm{font-weight:500}
.fapro .roll a.nm{color:inherit;text-decoration:none}
.fapro .roll a.nm:hover{color:var(--fa-navy)}
.fapro .roll .sub{font-family:var(--mono);font-size:9px;color:var(--fa-ink-whisper);margin-top:1px}
.fapro .roll .st{font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:2px 8px;white-space:nowrap;background:var(--fa-paper-3);color:var(--fa-ink-muted)}
.fapro .roll .st.hot{background:rgba(31,58,95,.11);color:var(--fa-navy)}
.fapro .roll .st.amber{background:rgba(192,138,46,.16);color:#8A6217}
.fapro .roll .q{font-family:var(--mono);font-size:9.5px;color:var(--fa-ink-muted);white-space:nowrap;min-width:64px;text-align:right}
.fapro .roll .q.quiet{color:var(--fa-red);font-weight:600}
.fapro .grp{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--fa-ink-whisper);padding:12px 0 2px;border-top:1px solid var(--fa-rule);margin-top:4px}
.fapro .grp:first-of-type{border-top:none;margin-top:0;padding-top:6px}

/* ── risk ───────────────────────────────────────────────────────────────────────────────── */
.fapro .risk{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:11px 0;border-top:1px solid var(--fa-rule-soft);align-items:start}
.fapro .risk:first-of-type{border-top:none}
.fapro .sev{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:3px 0;text-align:center}
.fapro .sev.h{background:rgba(181,74,58,.18);color:#8E3628}
.fapro .sev.m{background:rgba(192,138,46,.18);color:#8A6217}
.fapro .sev.l{background:var(--fa-paper-3);color:var(--fa-ink-muted)}
.fapro .risk .rb{font-size:12.5px;line-height:1.5}
.fapro .risk .rs{font-family:var(--mono);font-size:8.5px;color:var(--fa-ink-whisper);margin-top:3px}

/* ── the spine and the 52 week heatmap ──────────────────────────────────────────────────── */
.fapro .spine{margin-top:4px}
.fapro .ev{display:grid;grid-template-columns:52px 14px 1fr;gap:9px;padding:7px 0;align-items:start}
.fapro .ev .dt{font-family:var(--mono);font-size:9px;color:var(--fa-ink-whisper);text-align:right;padding-top:3px}
.fapro .ev .dot{position:relative;padding-top:6px}
.fapro .ev .dot i{display:block;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--fa-rule-strong);background:var(--fa-paper)}
.fapro .ev .dot.key i{border-color:var(--fa-navy);background:var(--fa-navy)}
.fapro .ev .dot::before{content:"";position:absolute;left:3px;top:14px;bottom:-9px;width:1px;background:var(--fa-rule-soft)}
.fapro .ev:last-child .dot::before{display:none}
.fapro .ev .bd{font-size:12.5px;line-height:1.5}
.fapro .ev .bd b{font-weight:600}

/* The heatmap, taken from the site profile: fixed 10px cells on a 7 row grid flowing in columns,
   scrolling sideways rather than squeezing, with the scale as .hm-key in the footer line. The
   reference's <span class="sc"> legend is gone. .sc in loom.css is the home page site card, a
   318px tall flex column with overflow:hidden, and that is what the legend was inheriting: a
   narrow vertical strip 318px tall that overflowed the card and set the card's height. Renaming
   the element to the site profile's own class removes the collision at the source. */
.fapro .hm-wrap{padding:6px 0 0}
.fapro .hm-h{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--fa-ink-whisper);margin-bottom:9px}
.fapro .hm{display:grid;grid-template-rows:repeat(7,10px);grid-auto-flow:column;grid-auto-columns:10px;gap:3px;overflow-x:auto;padding-bottom:4px}
.fapro .hm i{display:block;width:10px;height:10px;border-radius:2px;background:var(--fa-hm0)}
.fapro .hm i.l1{background:var(--fa-hm1)}
.fapro .hm i.l2{background:var(--fa-hm2)}
.fapro .hm i.l3{background:var(--fa-hm3)}
.fapro .hm i.l4{background:var(--fa-hm4)}
.fapro .hm i.future{background:transparent}
.fapro .hm-f{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:9px;color:var(--fa-ink-whisper);margin-top:9px}
.fapro .hm-key{display:flex;align-items:center;gap:4px}
.fapro .hm-key i{display:block;width:10px;height:10px;border-radius:2px;background:var(--fa-hm0);flex:none}
.fapro .hm-key i.l1{background:var(--fa-hm1)}
.fapro .hm-key i.l2{background:var(--fa-hm2)}
.fapro .hm-key i.l3{background:var(--fa-hm3)}
.fapro .hm-key i.l4{background:var(--fa-hm4)}

/* ── the sticky rail's own rows ─────────────────────────────────────────────────────────── */
.fapro .kv{display:grid;grid-template-columns:96px 1fr;gap:5px 12px;margin:0}
.fapro .kv dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fa-ink-whisper);padding-top:2px}
.fapro .kv dd{margin:0;font-size:12.5px}
.fapro .kv dd.na{font-family:var(--mono);font-size:10px;color:var(--fa-rule-strong)}
.fapro .kv dd a{color:var(--fa-navy);text-decoration:none}
.fapro .kv dd a:hover{text-decoration:underline}
.fapro .kvr{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--fa-rule-soft);font-size:12.5px}
.fapro .kvr:first-of-type{border-top:none}
.fapro .kvr span{color:var(--fa-ink-muted)}
.fapro .kvr b{font-weight:600}

/* A note. Same shape as the note on the site profile: who, when, then the body. */
.fapro .note{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--fa-rule-soft)}
.fapro .note:first-of-type{border-top:none}
.fapro .note .bd{flex:1;min-width:0}
.fapro .note .bd b{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--fa-ink-muted);font-weight:600}
.fapro .note .bd b i{font-style:normal;color:var(--fa-ink-whisper);font-weight:400}
.fapro .note .bd p{margin:4px 0 0;font-size:12.5px;line-height:1.5}

.fapro .drop{border:1.5px dashed var(--fa-rule-strong);border-radius:var(--fa-r-md);padding:16px;text-align:center;font-family:var(--mono);font-size:9.5px;color:var(--fa-ink-whisper);line-height:1.6;margin-top:10px;cursor:pointer}
.fapro .ta{width:100%;border:1px solid var(--fa-rule-strong);border-radius:var(--fa-r-md);padding:10px 12px;font-family:var(--sans);font-size:12.5px;resize:vertical;min-height:62px;background:var(--fa-paper-2);color:var(--fa-ink);margin-top:10px}
.fapro .rowend{display:flex;justify-content:flex-end;margin-top:9px}

/* The site profile's breakpoint, at the same width. Below it the rail drops under the main column
   and the masthead stacks. */
@media(max-width:1080px){
  .fapro .body{grid-template-columns:minmax(0,1fr)}
  .fapro .mast{grid-template-columns:1fr;gap:18px}
  .fapro .mast-r{align-items:flex-start}
  .fapro .mast-meta{text-align:left}
  .fapro .finish{max-width:340px}
}
@media(max-width:720px){
  .fapro .tiles{grid-template-columns:1fr 1fr}
  .fapro .pair,.fapro .two{grid-template-columns:1fr}
  .fapro .ladder .lrow{grid-template-columns:26px 1fr;row-gap:2px}
  .fapro .lrow .when{grid-column:2;text-align:left}
  /* The quick add row is loom.css's .addrow, a three track grid. At this width the owner picker
     and the button need their own line or the input is crushed to nothing. */
  .fapro .addrow{grid-template-columns:1fr;gap:7px}
  .fapro .roll{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .fapro .roll .q{grid-column:2;text-align:right}
}
@media(max-width:520px){
  .fapro .tiles{grid-template-columns:1fr}
  .fapro .kv{grid-template-columns:1fr;gap:2px 0}
  .fapro .kv dd{margin-bottom:6px}
}