/* Loom · site profile · the reference stylesheet from reference/Grays_Ferry_Site_Profile.html.
   Every rule is scoped under .sp, which is the wrapper the site route renders and nothing else
   does, and the file is linked from the site route alone. The tokens live on .sp rather than
   :root so they cannot reach any other page or component. Loaded after loom.css, so where a
   class name is shared the two-class scope wins.

   The only deliberate divergence from the reference tokens: --font and --mono are bound to the
   Geist pair Loom already loads, instead of Inter and IBM Plex Mono which the app does not fetch.
   Every size, weight, colour and spacing value is the reference's. */

.sp{
  --ground:#f9f6f1; --panel:#ffffff; --panel-2:#fdfbf8;
  --ink:#17150f; --ink-2:#57524a; --ink-3:#918a7e; --ink-4:#b8b1a4;
  --rule:#e4ded3; --rule-2:#f0ebe2;
  --blue:#2c5b86; --blue-l:#eaf0f6;
  --green:#43765a; --green-l:#e9f1ec;
  --amber:#9d7129; --amber-l:#f7f0e3;
  --red:#ab3a2d; --red-l:#f8ebe8;
  --hm0:#efeae1; --hm1:#d6e2ee; --hm2:#a9c4dd; --hm3:#6d99c1; --hm4:#2c5b86;
  --font:'Geist',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,Consolas,monospace;
  background:var(--ground);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55;
  letter-spacing:normal;min-height:100vh;-webkit-font-smoothing:antialiased;
}
.sp .wrap{max-width:1320px;margin:0 auto;padding:0 34px 90px}

/* ---------- top bar ---------- */
.sp .topbar{position:static;height:auto;border-bottom:1px solid var(--rule);background:var(--panel-2);backdrop-filter:none;-webkit-backdrop-filter:none;display:block;padding:0}
.sp .topbar .in{max-width:1320px;margin:0 auto;padding:11px 34px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.sp .topbar .bc{font-size:12.5px;color:var(--ink-3)}
.sp .topbar .bc a{color:var(--ink-3);text-decoration:none}
.sp .topbar .bc a:hover{color:var(--blue)}
.sp .topbar .bc b{color:var(--ink);font-weight:600}
.sp .topbar .rt{display:flex;align-items:center;gap:8px}
.sp .tbtn{font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--rule);background:var(--panel);color:var(--ink-2);cursor:pointer;text-decoration:none;display:inline-block;border-radius:0}
.sp .tbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.sp .tbtn.on{border-color:var(--ink);color:var(--ink)}
.sp .topbar .dt{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:6px}

/* ---------- masthead ---------- */
.sp .mast{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-top:30px}
.sp .mast .crumb{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.sp .mast h1{font-family:var(--font);font-size:34px;font-weight:600;letter-spacing:-0.025em;line-height:1.05}
.sp .mast .who{color:var(--ink-2);font-size:14px;margin-top:6px}
.sp .mast .line{color:var(--ink-2);font-size:13.5px;margin-top:14px;max-width:660px;line-height:1.5}
.sp .mast .line b{color:var(--ink);font-weight:600}
.sp .mast .line.none{font-style:italic;color:var(--ink-3)}
.sp .mright{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.sp .team{display:flex;align-items:center;gap:7px;padding:0;flex-wrap:nowrap}
.sp .av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;font-weight:600;color:#fff;flex-shrink:0}
.sp .av.s{width:22px;height:22px;font-size:9px}
.sp .av.ml{background:var(--blue)}
.sp .av.pt{background:var(--amber)}
.sp .av.ex{background:var(--ink-3)}
.sp .meta-line{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.sp .target .lab{font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3)}
.sp .target .date{font-size:23px;font-weight:600;letter-spacing:-0.02em;margin-top:4px}
.sp .target .date.none{font-size:15px;font-weight:500;color:var(--ink-3);font-style:italic}
.sp .target .cd{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:2px}
.sp .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;padding:5px 10px;border:1px solid;margin-top:9px;color:var(--ink-3);border-color:var(--rule)}
.sp .pill i{width:6px;height:6px;border-radius:50%;display:block;background:var(--ink-4)}
.sp .pill.risk{color:var(--amber);border-color:var(--amber);background:var(--amber-l)}
.sp .pill.risk i{background:var(--amber)}
.sp .pill.ontrack{color:var(--green);border-color:var(--green);background:var(--green-l)}
.sp .pill.ontrack i{background:var(--green)}

/* The pod deployment masthead. With the counter line, the countdown, the empty state line and the
   target editor gone, what is left is a two line title block and a short right hand cluster, so the
   band closes up: less padding above it, the two columns centred on each other rather than hanging
   from the top, a tighter gap under the eyebrow and between the cluster's rows, and the card below
   pulled up behind it. A site emits neither .tight nor .compact and keeps every value above. */
.sp .mast.tight{padding-top:18px;align-items:center}
.sp .mast.tight .crumb{margin-bottom:5px}
.sp .mast.tight .mright{gap:8px}
/* .bare is the target with no label over it. .date carried a 4px top margin to clear that label,
   which is the only gap the label leaves behind, so it comes off. Size and alignment are untouched,
   so the value reads exactly as it did and simply sits up under the avatars and Join. */
.sp .target.bare .date{margin-top:0}
.sp .road.compact{margin-top:18px}

/* ---------- road ---------- */
.sp .road{margin-top:30px;background:var(--panel);border:1px solid var(--rule);padding:26px 28px 22px}
.sp .road-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px;gap:16px}
.sp .road-h b{font-family:var(--mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.sp .road-h span{font-size:12.5px;color:var(--ink-2)}
.sp .road-h span em{font-style:normal;color:var(--ink);font-weight:600}
.sp .rail{position:relative;display:grid;grid-template-columns:repeat(9,1fr);padding-top:4px}
.sp .rail:before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--rule)}
.sp .rail .fill{position:absolute;left:0;top:11px;height:2px;background:var(--blue);transition:width .35s}
.sp .stop{position:relative;text-align:center;padding:0 4px;cursor:pointer;background:none;border:none;font-family:inherit;display:block;width:100%}
.sp .stop .dot{width:24px;height:24px;border-radius:50%;background:var(--ground);border:2px solid var(--rule);margin:0 auto;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;font-family:var(--mono);font-size:9.5px;color:var(--ink-4);font-weight:600;transition:.15s}
.sp .stop:hover .dot{border-color:var(--ink-3)}
.sp .stop.done .dot{background:var(--blue);border-color:var(--blue);color:#fff}
.sp .stop.now .dot{background:var(--panel);border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 5px var(--blue-l)}
.sp .stop.shut{cursor:not-allowed}
.sp .stop.shut .dot{border-style:dashed;color:var(--ink-4)}
.sp .stop.shut:hover .dot{border-color:var(--rule)}
.sp .stop .nm{display:block;font-size:11px;line-height:1.3;margin-top:11px;color:var(--ink-3);font-weight:500}
.sp .stop.done .nm{color:var(--ink-2)}
.sp .stop.now .nm{color:var(--ink);font-weight:600}
.sp .stop .dt{display:block;font-family:var(--mono);font-size:9px;color:var(--ink-4);margin-top:4px;min-height:12px}
.sp .hint{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:20px;letter-spacing:0.04em}
.sp .road-f{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:16px}
.sp .tile{background:var(--panel-2);padding:15px 17px}
.sp .tile .k{font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);min-height:15px}
.sp .tile .v{font-size:25px;font-weight:600;letter-spacing:-0.025em;margin-top:5px;line-height:1}
.sp .tile .v.none{font-size:15px;font-weight:500;color:var(--ink-3);font-style:italic;padding:5px 0}
.sp .tile .s{font-size:11px;color:var(--ink-3);margin-top:6px;line-height:1.35}
.sp .tile .v.hot{color:var(--red)}
/* ── the focus area's progress card ──────────────────────────────────────────────────────────
   Two scoped variants, .road.compact on the card and .road-f.tracks on its foot. A site emits
   neither, so nothing here can reach a site profile: the nine rung road keeps every value above.

   .compact carries the five stage ladder. Same spine, drawn smaller: 17px nodes instead of 24px,
   the connecting line and the fill moved up to match their new centre, tighter gaps under the node
   and its caption, and less padding at the head and foot of the card. */
.sp .road.compact{padding:16px 28px 14px}
.sp .road.compact .road-h{margin-bottom:12px}
.sp .road.compact .rail{grid-template-columns:repeat(5,1fr);padding-top:2px}
.sp .road.compact .rail:before,.sp .road.compact .rail .fill{top:8px}
.sp .road.compact .stop .dot{width:17px;height:17px;font-size:8.5px;border-width:1.5px}
.sp .road.compact .stop.now .dot{box-shadow:0 0 0 3px var(--blue-l)}
.sp .road.compact .stop .nm{margin-top:7px;font-size:10.5px;line-height:1.25}
.sp .road.compact .stop .dt{margin-top:2px;font-size:8.5px;min-height:10px}
.sp .road.compact .road-f{margin-top:14px}

/* The four tracks at the foot of that card. The grid, the block background and the 1px dividers
   are the ones above, untouched: what differs is what a block holds. The label sits left and the
   button sits right on one line, and the description spans the block underneath them. */
.sp .road-f.tracks{
  /* The hover step. --green-l is the soft fill and --green the border, both already in the palette
     above; there is no tint between them, so this is the one token added, mixed from the same
     family so the three read as one set. Declared here, on the only block that uses it. */
  --green-l-2:#d9e7de;
}
/* One line per block. The tile is the row: label left, button right, nothing under them, so the
   padding is all that sets the height and it is trimmed to sit close around the button. */
.sp .road-f.tracks .tile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 15px}
/* The four labels name the thing, so they carry a heading's weight rather than a caption's: 600,
   which is the heaviest this sheet uses, 12px, which it already uses, and the navy loom.css sets
   as heading ink across the app, inherited because .sp does not redefine --navy. Uppercase, mono
   and left aligned as before. Tracking drops to 0.07em, the tightest positive value already in the
   sheet, so the longest of the four still sits on one line beside its button at narrow width. */
.sp .road-f.tracks .tile .k{min-height:0;font-size:12px;font-weight:600;letter-spacing:0.07em;color:var(--navy)}
/* The workstream a task came from, on the parent's task rows. Only a task carrying a track gets
   one, so a site's tasks are untouched. It is a link, because the workstream has a page. */
.sp .task .t .trk{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-l);border:1px solid var(--blue-border,var(--rule));
  padding:1px 6px;margin-left:8px;text-decoration:none;white-space:nowrap;vertical-align:1px}
.sp .task .t .trk:hover{border-color:var(--blue)}
/* The four buttons are the primary action on this card, so they carry weight the quiet .tbtn does
   not: the soft green fill, the darker green border it belongs with, ink rather than grey for the
   text, and a shadow just heavy enough to lift them off the block. Size and position are the ones
   .tbtn already sets, so they stay where they were and all four are identical. */
.sp .road-f.tracks .tile .tbtn{flex:none;background:var(--green-l);border-color:var(--green);
  color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(23,21,15,.07)}
.sp .road-f.tracks .tile .tbtn:hover{background:var(--green-l-2);border-color:var(--green);
  color:var(--ink);box-shadow:0 2px 5px rgba(23,21,15,.11)}

/* ---------- tabs ---------- */
.sp .tabs{display:flex;gap:2px;margin-top:30px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.sp .tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:11px 17px;font-family:var(--font);font-size:13px;font-weight:500;color:var(--ink-3);cursor:pointer;margin-bottom:-1px;border-radius:0;letter-spacing:normal;text-transform:none}
.sp .tabs button:hover{color:var(--ink-2);background:none}
.sp .tabs button.on{color:var(--ink);border-bottom-color:var(--blue);font-weight:600}
.sp .tabs button u{text-decoration:none;font-family:var(--mono);font-size:9.5px;color:#fff;background:var(--ink-3);padding:1px 5px;margin-left:7px;vertical-align:1px}
.sp .tabs button.on u{background:var(--blue)}
.sp .panel{display:none;padding-top:26px}
.sp .panel.on{display:block}

/* ---------- shell ---------- */
.sp .cols{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;margin-top:0}
.sp .card{background:var(--panel);border:1px solid var(--rule);border-radius:0}
.sp .card+.card{margin-top:22px}
.sp .card-h{display:flex;justify-content:space-between;align-items:baseline;padding:16px 20px;border-bottom:1px solid var(--rule);gap:14px}
.sp .card-h h3{font-family:var(--font);font-size:14px;font-weight:600;letter-spacing:-0.01em;color:var(--ink)}
.sp .card-h .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.sp .card-h em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.sp .card-h .hr{display:flex;align-items:center;gap:9px;flex-shrink:0}
.sp .bar{height:5px;background:var(--rule-2)}
.sp .bar i{display:block;height:100%;background:var(--blue)}
.sp .bar.g i{background:var(--green)}
.sp .empty{padding:18px 20px;font-size:12.5px;color:var(--ink-3);font-style:italic}

/* ---------- tasks / checklist ---------- */
.sp .task{display:grid;grid-template-columns:26px 1fr 128px 96px;gap:14px;padding:14px 20px;border-bottom:1px solid var(--rule-2);align-items:start}
.sp .task:last-child{border-bottom:none}
.sp .task:hover{background:var(--panel-2)}
.sp .tick{width:19px;height:19px;border:1.5px solid var(--rule);border-radius:50%;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:11px;color:transparent;flex-shrink:0;cursor:pointer;background:none;padding:0}
.sp .task.done .tick{background:var(--green);border-color:var(--green);color:#fff}
.sp .task.doing .tick{border-color:var(--blue)}
.sp .task.doing .tick:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.sp .task.blocked .tick{border-color:var(--red)}
.sp .task .t{font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.sp .task.done .t{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4);font-weight:400;opacity:1}
.sp .task .d{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.sp .task .d b{color:var(--red);font-weight:600}
.sp .owner{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2)}
.sp .owner i{font-style:normal;display:block;font-size:11px;color:var(--ink-3);margin-top:-2px}
.sp .due{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-align:right}
.sp .due i{display:block;font-style:normal;font-size:9.5px;color:var(--ink-3);margin-top:2px}
.sp .due.hot,.sp .due.hot i{color:var(--red)}
.sp .task .ed{opacity:0;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:2px 0;display:block;margin-top:4px;text-align:right;width:100%}
.sp .task:hover .ed{opacity:1}
.sp .task .ed:hover{color:var(--blue)}

/* add row */
.sp .addrow{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--rule-2);background:var(--panel-2);margin-top:0;grid-template-columns:none}
.sp .addrow input,.sp .addrow select,.sp .addrow textarea{font-family:var(--font);font-size:13px;padding:9px 11px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);outline:none;border-radius:0}
.sp .addrow input:focus,.sp .addrow textarea:focus{border-color:var(--blue)}
.sp .addrow input{flex:1}
.sp .btn{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;border-radius:0}
.sp .btn:hover{background:#24496b}
.sp .btn.ghost{background:var(--panel);color:var(--ink-2);border-color:var(--rule)}
.sp .btn.ghost:hover{border-color:var(--ink-3);color:var(--ink);background:var(--panel)}

/* ---------- peek ---------- */
.sp .peek{padding:18px 20px}
.sp .peek p{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:13px}
.sp .peek p:last-child{margin-bottom:0}
.sp .peek ul{list-style:none;display:grid;gap:8px}
.sp .peek li{font-size:12.5px;color:var(--ink-2);padding-left:17px;position:relative;line-height:1.4}
.sp .peek li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border:1.5px solid var(--ink-4);border-radius:50%}
.sp .peek li b{color:var(--ink);font-weight:600}

/* ---------- ball ---------- */
.sp .ball .row{display:grid;grid-template-columns:26px 1fr 40px;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--rule-2)}
.sp .ball .row:last-child{border-bottom:none}
.sp .ball .nm{font-size:13px;font-weight:500}
.sp .ball .nm i{display:block;font-style:normal;font-size:11px;color:var(--ink-3);font-weight:400;margin-top:1px}
.sp .ball .ct{font-family:var(--mono);font-size:16px;font-weight:600;text-align:right}
.sp .ball .row.zero .ct{color:var(--ink-4)}

/* ---------- flags ---------- */
.sp .flag{padding:15px 20px;border-bottom:1px solid var(--rule-2);border-left:3px solid var(--rule)}
.sp .flag:last-of-type{border-bottom:none}
.sp .flag.act{border-left-color:var(--red);background:var(--red-l)}
.sp .flag.watch{border-left-color:var(--amber);background:var(--amber-l)}
.sp .flag.info{border-left-color:var(--blue)}
.sp .flag .sev{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600}
.sp .flag.act .sev{color:var(--red)}
.sp .flag.watch .sev{color:var(--amber)}
.sp .flag.info .sev{color:var(--blue)}
.sp .flag h4{font-family:var(--font);font-size:13px;font-weight:600;margin-top:5px;line-height:1.35;color:var(--ink)}
.sp .flag p{font-size:12px;color:var(--ink-2);margin-top:5px;line-height:1.45}
.sp .flag .do{font-size:12px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(0,0,0,.07);line-height:1.45}
.sp .flag .do b{font-family:var(--mono);font-size:9px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:3px;font-weight:500}
.sp .flag .meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:9px;gap:10px}
.sp .flag .meta button{font-family:var(--mono);font-size:10px;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:0}
.sp .flag .meta button:hover{color:var(--blue)}

/* ---------- dates ---------- */
.sp .dates .row{display:flex;justify-content:space-between;gap:12px;padding:11px 20px;border-bottom:1px solid var(--rule-2);font-size:12.5px;align-items:baseline}
.sp .dates .row:last-child{border-bottom:none}
.sp .dates .row span{color:var(--ink-2)}
.sp .dates .row b{font-family:var(--mono);font-size:11.5px;font-weight:500;white-space:nowrap}
.sp .dates .row.next b{color:var(--blue);font-weight:600}
.sp .dates .row .ed{opacity:0;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:0}
.sp .dates .row:hover .ed{opacity:1}

/* ---------- opportunities ---------- */
.sp .opp{padding:14px 20px;border-bottom:1px solid var(--rule-2);background:none;border-radius:0;box-shadow:none;height:auto;display:block;border-left:none;border-right:none;border-top:none;overflow:visible}
.sp .opp:last-child{border-bottom:none}
.sp .opp .h{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.sp .opp .h b{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.sp .tag{font-family:var(--mono);font-size:8.5px;letter-spacing:0.09em;text-transform:uppercase;padding:2px 6px;flex-shrink:0;white-space:nowrap}
.sp .tag.meet{background:var(--blue-l);color:var(--blue)}
.sp .tag.build{background:var(--amber-l);color:var(--amber)}
.sp .tag.present{background:var(--green-l);color:var(--green)}
.sp .tag.followup{background:var(--red-l);color:var(--red)}
.sp .tag.book{background:var(--rule-2);color:var(--ink-2)}
.sp .opp p{font-size:11.5px;color:var(--ink-2);margin-top:5px;line-height:1.4}
.sp .opp .btn{margin-top:9px;padding:5px 10px;font-size:9px;display:inline-block;text-decoration:none}

/* ---------- requirements ---------- */
.sp .reqgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
/* Inside a grid the gap already spaces the cards, so the stacked-card rule would push every
   card after the first down by a row it does not need. */
.sp .reqgrid>.card+.card,.sp .facts>.card+.card{margin-top:0}
.sp .rq{display:grid;grid-template-columns:1fr 118px;gap:14px;padding:13px 20px;border-bottom:1px solid var(--rule-2);align-items:center}
.sp .rq:last-of-type{border-bottom:none}
.sp .rq .t{font-size:13px;font-weight:500;color:var(--ink)}
.sp .rq .t i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);font-weight:400;margin-top:3px;line-height:1.4}
/* .st is also a Loom stagebar step, which carries a pill background of its own. Inside the
   requirements grid it is only a right aligned cell, so that chrome is cleared. */
.sp .rq .st{text-align:right;flex:none;background:none;border:none;border-radius:0;padding:0;font-family:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit;cursor:default;transition:none;box-shadow:none;font-weight:400}
.sp .rq .ed{opacity:0;display:block;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:3px 0 0;margin-left:auto}
.sp .rq:hover .ed{opacity:1}
.sp .rq .ed:hover{color:var(--blue)}
.sp .st-pill{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border:1px solid}
.sp .st-pill.ok{color:var(--green);border-color:var(--green);background:var(--green-l)}
.sp .st-pill.wait{color:var(--amber);border-color:var(--amber);background:var(--amber-l)}
.sp .st-pill.need{color:var(--blue);border-color:var(--blue);background:var(--blue-l)}
.sp .st-pill.marg{color:var(--amber);border-color:var(--amber);background:var(--amber-l)}
.sp .st-pill.kill{color:var(--red);border-color:var(--red);background:var(--red-l)}
.sp .st-pill.na{color:var(--ink-3);border-color:var(--rule);background:var(--panel-2)}
.sp .summary{display:flex;gap:22px;padding:14px 20px;background:var(--panel-2);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11px;color:var(--ink-2);flex-wrap:wrap}
.sp .summary b{font-weight:600;color:var(--ink)}
.sp .gateline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 20px;background:var(--panel-2);border-bottom:1px solid var(--rule-2);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sp .gateline .rt{display:flex;align-items:center;gap:9px}

/* ---------- documents ---------- */
.sp .doc{display:grid;grid-template-columns:1fr 76px 128px 104px 74px;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rule-2);align-items:center;justify-content:normal;font-size:14px}
.sp .doc:last-of-type{border-bottom:none}
.sp .doc:hover{background:var(--panel-2)}
.sp .doc .t{font-size:13.5px;font-weight:500;color:var(--ink)}
.sp .doc .t i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.sp .doc .rg{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.sp .doc .dl{text-align:right}
.sp .dlbtn{font-family:var(--mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);border:1px solid var(--rule);background:var(--panel);padding:5px 8px;cursor:pointer;text-decoration:none;display:inline-block}
.sp .dlbtn:hover{border-color:var(--blue)}
.sp .dlbtn:disabled,.sp .dlbtn.off{color:var(--ink-4);cursor:default;border-color:var(--rule-2)}
.sp .drop{margin:18px 20px 20px;border:1.5px dashed var(--rule);padding:26px;text-align:center;color:var(--ink-3);font-size:12.5px;cursor:pointer;background:var(--panel-2);border-radius:0;font-family:var(--font)}
.sp .drop:hover,.sp .drop.over{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
.sp .drop b{display:block;font-size:13px;color:var(--ink-2);font-weight:600;margin-bottom:4px}
.sp .drop.over b{color:var(--blue)}
.sp .drop.busy{opacity:.6;pointer-events:none}

/* ---------- facts ---------- */
.sp .facts{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.sp .fact{padding:12px 20px;border-bottom:1px solid var(--rule-2)}
.sp .fact:last-child{border-bottom:none}
.sp .fact b{font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;display:block}
.sp .fact .v{font-size:14.5px;font-weight:500;margin-top:4px;line-height:1.35}
.sp .fact .v.warn{color:var(--red)}
.sp .fact .prov{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);margin-top:5px;letter-spacing:0.02em}
.sp .fact .prov.none{font-style:italic}
.sp .fmark{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-left:7px}
.sp .people .row{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:11px 20px;border-bottom:1px solid var(--rule-2);align-items:baseline}
.sp .people .row:last-child{border-bottom:none}
.sp .people b{font-family:var(--mono);font-size:9.5px;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.sp .people span{font-size:13px}

/* ---------- heatmap ---------- */
.sp .hm-wrap{padding:18px 20px 6px}
.sp .hm-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-bottom:10px;gap:12px}
.sp .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}
.sp .hm i{display:block;width:10px;height:10px;background:var(--hm0);border-radius:0}
.sp .hm i.l1{background:var(--hm1)}
.sp .hm i.l2{background:var(--hm2)}
.sp .hm i.l3{background:var(--hm3)}
.sp .hm i.l4{background:var(--hm4)}
.sp .hm i.future{background:transparent}
.sp .hm-f{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:10px;padding-bottom:14px}
.sp .hm-key{display:flex;align-items:center;gap:4px}
.sp .hm-key i{width:10px;height:10px;display:block;background:var(--hm0)}
.sp .hm-key i.l1{background:var(--hm1)}
.sp .hm-key i.l2{background:var(--hm2)}
.sp .hm-key i.l3{background:var(--hm3)}
.sp .hm-key i.l4{background:var(--hm4)}

/* ---------- activity ---------- */
.sp .ev{display:grid;grid-template-columns:92px 22px 1fr;padding:0 20px;gap:0}
.sp .ev .dt{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:14px 16px 14px 0;text-align:right}
.sp .ev .ln{position:relative}
.sp .ev .ln:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--rule);transform:translateX(-.5px)}
.sp .ev .ln:after{content:"";position:absolute;left:50%;top:20px;width:7px;height:7px;border-radius:50%;background:var(--ink-4);transform:translateX(-50%);border:2px solid var(--panel)}
.sp .ev.key .ln:after{background:var(--blue);width:9px;height:9px}
.sp .ev.owed .ln:after{background:var(--red);width:9px;height:9px}
.sp .ev.up .ln:after{background:var(--green);width:9px;height:9px}
.sp .ev:first-child .ln:before{top:20px}
.sp .ev:last-child .ln:before{bottom:calc(100% - 20px)}
.sp .ev::before{display:none}
.sp .ev .bd{padding:14px 0 14px 16px}
.sp .ev .bd b{font-size:13.5px;font-weight:600;display:block;color:var(--ink)}
.sp .ev .bd span{font-size:12.5px;color:var(--ink-2);display:block;margin-top:2px;line-height:1.45}

/* ---------- notes ---------- */
.sp .note{padding:14px 20px;border-bottom:1px solid var(--rule-2);display:grid;grid-template-columns:26px 1fr;gap:12px}
.sp .note:last-of-type{border-bottom:none}
.sp .note .bd b{font-size:12.5px;font-weight:600}
.sp .note .bd b i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:400;margin-left:8px}
.sp .note .bd p{font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.sp .composer{padding:16px 20px;background:var(--panel-2);border-top:1px solid var(--rule-2);display:block;margin-top:0;grid-template-columns:none}
.sp .composer textarea{width:100%;min-height:74px;resize:vertical;font-family:var(--font);font-size:13px;padding:11px;border:1px solid var(--rule);background:var(--panel);outline:none;line-height:1.5;border-radius:0;color:var(--ink)}
.sp .composer textarea:focus{border-color:var(--blue)}
.sp .composer .r{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.sp .composer .r span{font-size:11.5px;color:var(--ink-3);font-style:italic}

/* Join writes an optimistic .mchip into the avatar row before the reload, so it has to read as
   one of the reference avatars rather than as a Loom board chip. */
.sp .team .mchip{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;font-weight:600;color:#fff;background:var(--blue);flex-shrink:0;padding:0;border:none;letter-spacing:normal}

/* archived site · the reference has no archive state, so the read only banner reuses Loom's */
.sp .arch-banner{margin-top:22px;padding:12px 16px;border:1px solid var(--amber);background:var(--amber-l);color:var(--amber);font-family:var(--mono);font-size:11px;display:flex;justify-content:space-between;align-items:center;gap:12px}

@media(max-width:1080px){
  .sp .cols{grid-template-columns:1fr}
  .sp .reqgrid,.sp .facts{grid-template-columns:1fr}
  .sp .rail{grid-template-columns:repeat(5,1fr);row-gap:22px}
  .sp .rail:before,.sp .rail .fill{display:none}
  .sp .road-f{grid-template-columns:repeat(2,1fr)}
  .sp .mast{flex-direction:column}
  /* .tight centres the two columns against each other while they sit side by side. Once the
     masthead stacks, that same property is the horizontal axis, so it has to come back off or the
     title and the cluster both slide to the middle of the page. */
  .sp .mast.tight{align-items:stretch}
  .sp .mright{align-items:flex-start;text-align:left}
  .sp .doc{grid-template-columns:1fr 100px}
  .sp .doc .rg,.sp .doc .due{display:none}
}