/* Leading Your Team. Loaded only by disc-guide.html, on top of app.css for the tokens and
   masthead. Deliberately does not load disc.css: that file carries the board's grid, its
   1860px width override and its wheel sizing, none of which this page wants. The four
   quadrant tokens are the only thing worth borrowing, so they are restated here. */

:root{
  --d-q:var(--green-bg);  --d-qi:var(--green-ink);
  --i-q:var(--red-bg);    --i-qi:var(--red-ink);
  --s-q:var(--ms-bg);     --s-qi:var(--ms-ink);
  --c-q:var(--amber-bg);  --c-qi:var(--amber-ink);
}

/* Narrower than the board on purpose. This page is mostly prose, and prose set to 1860px is
   unreadable however good the content is. */
.wrap, .container{ max-width:1180px; padding-inline:clamp(.7rem,1.4vw,1.25rem); }
/* Tight to the masthead. The default left 30px of page background showing between the banner
   and the h1, which reads as a stray tan band rather than as breathing room. */
.container{ padding-block:.15rem 2rem; }
.foot{ max-width:1180px; }

.gstate{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  padding:1.2rem 1.3rem; margin:1.2rem 0; color:var(--muted); box-shadow:var(--shadow); }
.gstate h2{ color:var(--ink); font-size:1.1rem; margin:0 0 .5rem; }
.gstate p{ margin:.45rem 0; max-width:62ch; line-height:1.5; }
.gstate.denied{ border-left:4px solid var(--amber); }
.gstate.err{ border-left:4px solid var(--accent); color:var(--accent); }

.ghead{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; padding:.3rem 0 .6rem; }
.ghead h1{ margin:0; font-size:1.5rem; }
.ghead .sub{ margin:.2rem 0 0; color:var(--muted); font-size:.9rem; max-width:60ch; }
.lead-pick{ display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem;
  color:var(--muted); }
.lead-pick select{ font:inherit; font-size:.88rem; padding:.35rem .5rem; max-width:22rem;
  border:1px solid var(--rule); border-radius:9px; background:var(--tint); color:var(--ink); }

.ghead2{ font-size:1.15rem; margin:1.6rem 0 .2rem; }
.gnote{ font-size:.82rem; color:var(--amber-ink); margin:.3rem 0 .6rem; }

.card{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--shadow); margin:.9rem 0; }
.card h2{ margin:0 0 .35rem; font-size:1.1rem; display:flex; align-items:center; gap:.5rem; }
.card h3{ margin:0; font-size:1rem; display:flex; align-items:center; gap:.5rem; }
/* Section labels were small uppercase muted text, which is exactly the treatment a reader
   skips. They are now a tinted chip in full ink: still compact, but they divide a long card into
   findable parts instead of dissolving into it. inline-block so the chip is the width of its own
   label rather than the card. */
.card h4{ display:inline-block; margin:.75rem 0 .3rem; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  background:var(--tint); border:1px solid var(--rule); border-radius:6px;
  padding:.17rem .45rem; }
.chint{ margin:.1rem 0 .7rem; font-size:.82rem; color:var(--muted); max-width:70ch; }
.warn{ margin:.3rem 0; font-size:.87rem; color:var(--amber-ink); }

/* One dot of the person's own quadrant colour beside their name, matching the board so the
   two pages read as the same system. */
.dotkey{ width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.25); }
.dotkey.d{ background:var(--d-qi); } .dotkey.i{ background:var(--i-qi); }
.dotkey.s{ background:var(--s-qi); } .dotkey.c{ background:var(--c-qi); }

.styleline{ margin:.15rem 0 .5rem; font-size:.85rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }

/* Two columns: label left, description right, one row each. Stacked, these five rows cost
   about 190px of a card that is mostly reference text; side by side they cost half that and read
   as a table, which is what they are. The label column is `auto` so it sizes to the longest
   label rather than to a guess, and the descriptions get whatever is left. */
.qdl{ margin:.4rem 0 0; display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:1rem; row-gap:.32rem; align-items:baseline; }
.qdl dt{ grid-column:1; font-weight:600; font-size:.8rem; color:var(--ink); margin:0;
  white-space:nowrap; }
.qdl dd{ grid-column:2; margin:0; font-size:.82rem; line-height:1.45; color:var(--muted); }
/* Below this the two columns leave the descriptions too narrow to be worth it, so they stack. */
@media(max-width:620px){
  .qdl{ grid-template-columns:minmax(0,1fr); row-gap:.1rem; }
  .qdl dt{ grid-column:1; margin-top:.45rem; }
  .qdl dt:first-child{ margin-top:0; }
  .qdl dd{ grid-column:1; }
}
.selfnote{ margin:.8rem 0 0; font-size:.82rem; line-height:1.5; color:var(--muted);
  border-top:1px solid var(--rule); padding-top:.6rem; max-width:72ch; }

/* ---- team shape ---- */
.bars{ margin:.5rem 0 .9rem; display:grid; gap:.3rem; }
.bar-row{ display:grid; grid-template-columns:11rem 1fr 2rem; align-items:center; gap:.6rem; }
.bar-row .bl{ font-size:.82rem; color:var(--ink); }
.bar-row .bt{ background:var(--tint); border-radius:6px; height:14px; overflow:hidden; }
.bar-row .bf{ display:block; height:100%; border-radius:6px; min-width:0; }
.bar-row .bf.d{ background:var(--d-qi); } .bar-row .bf.i{ background:var(--i-qi); }
.bar-row .bf.s{ background:var(--s-qi); } .bar-row .bf.c{ background:var(--c-qi); }
.bar-row .bn{ font-size:.82rem; color:var(--muted); text-align:right;
  font-variant-numeric:tabular-nums; }
.shape h3{ font-size:.92rem; margin:.9rem 0 .25rem; }
.gaps{ margin:.2rem 0 0; padding-left:1.1rem; }
.gaps li{ font-size:.85rem; line-height:1.55; color:var(--muted); margin:.3rem 0; max-width:78ch; }
.gaps b{ color:var(--ink); }
.strength, .watch, .even{ margin:.25rem 0; font-size:.85rem; line-height:1.55; max-width:78ch; }
.strength{ color:var(--muted); }
.watch{ color:var(--ink); }
.even{ color:var(--muted); }

/* ---- pair cards ---- */
/* Two columns from 900px, because a lead with six reports should be able to scan them rather
   than scroll a single long ribbon. One column below that. */
.pairs{ display:grid; gap:.9rem; grid-template-columns:1fr; }
@media(min-width:900px){ .pairs{ grid-template-columns:1fr 1fr; } }
.card.pair{ margin:0; }
.card.pair header{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem; flex-wrap:wrap; }
/* The effort badge is the one place colour carries meaning rather than decoration, so it uses
   the app's semantic tokens rather than a quadrant colour: a quadrant colour here would read
   as a style, which it is not. */
.effort{ font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; font-weight:700;
  padding:.15rem .45rem; border-radius:6px; white-space:nowrap; }
.effort.high{ background:var(--amber-bg); color:var(--amber-ink); }
.effort.some{ background:var(--tint); color:var(--muted); }
.effort.low{ background:var(--ms-bg); color:var(--ms-ink); }
/* The left edge encodes the same thing as the badge, and originally only the hardest level
   carried one. That was consistent but not legible: with a single amber stripe appearing on some
   cards and nothing on the rest, the stripe read as arbitrary rather than as a scale. All three
   levels now carry an edge in the same colour as their own badge, so the pattern explains itself
   and the hardest relationships are still what catches the eye first. */
.card.pair.high{ border-left:3px solid var(--amber); }
/* --muted rather than --rule for the middle step. --rule measured 1.23:1 against the card in
   dark mode, so the edge was invisible and the scale still read as "amber on some cards, nothing
   on others". A meaningful edge has to clear 3:1 in both themes to be a step at all. */
.card.pair.some{ border-left:3px solid var(--muted); }
.card.pair.low{ border-left:3px solid var(--ms-ink); }

.gapblock{ margin:.55rem 0 0; padding-top:.5rem; border-top:1px solid var(--rule); }
.gapblock h4{ margin:0 0 .35rem; }
.you-see, .they-see{ margin:.2rem 0; font-size:.85rem; line-height:1.55; max-width:74ch; }
.you-see{ color:var(--ink); }
.they-see{ color:var(--muted); }
.you-see b, .they-see b{ font-weight:700; }
.intensity{ margin:.6rem 0 0; font-size:.82rem; line-height:1.5; color:var(--muted);
  font-style:italic; max-width:74ch; }
.dos{ margin:.2rem 0 0; padding-left:1.1rem; }
.dos li{ font-size:.85rem; line-height:1.55; color:var(--ink); margin:.28rem 0; max-width:74ch; }
.theirs{ margin:.7rem 0 0; padding-top:.55rem; border-top:1px solid var(--rule); }
.theirs p{ margin:.18rem 0; font-size:.8rem; line-height:1.5; color:var(--muted); }
.theirs b{ color:var(--ink); }

/* ---- compare any two ---- */
.cmp-row{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin:.2rem 0 .8rem; }
.cmp-row label{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem;
  color:var(--muted); }
.cmp-row select{ font:inherit; font-size:.88rem; padding:.35rem .5rem; max-width:14rem;
  border:1px solid var(--rule); border-radius:9px; background:var(--tint); color:var(--ink); }
/* Already inside a card, so the result drops its own frame rather than nesting two. */
.card.pair.inline{ border:0; box-shadow:none; padding:0; background:transparent; }
.card.pair.inline.high{ border-left:0; }

.caveat{ margin:1.6rem 0 .4rem; font-size:.82rem; line-height:1.6; color:var(--muted);
  max-width:80ch; border-top:1px solid var(--rule); padding-top:.8rem; }

/* ---- the assessed block ---- */
/* Set apart from the derived guidance above it, because its provenance is different: this is
   what a report measured, not what the geometry implies. */
.assessed{ margin:.7rem 0 0; padding-top:.55rem; border-top:1px solid var(--rule); }
.prios{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.45rem; }
.prios li{ display:grid; gap:.1rem; }
.prios b{ font-size:.82rem; color:var(--ink); }
.prios .does{ font-size:.8rem; line-height:1.45; color:var(--muted); }
.prios .ldo{ font-size:.8rem; line-height:1.45; color:var(--ink); }
/* A stretch priority is the individual part of a report, so it is marked rather than blended
   into the typical three. */
.prios li.stretch{ border-left:2px solid var(--amber); padding-left:.5rem; margin-left:-.05rem; }
.prios .tag{ font-size:.68rem; letter-spacing:.02em; text-transform:uppercase; font-weight:700;
  color:var(--amber-ink); background:var(--amber-bg); border-radius:5px; padding:.05rem .3rem;
  margin-left:.3rem; white-space:nowrap; }
.stretchnote{ margin:.5rem 0 0; font-size:.79rem; line-height:1.5; color:var(--muted);
  max-width:74ch; }
.asof{ margin:.5rem 0 0; font-size:.76rem; color:var(--muted); font-variant-numeric:tabular-nums; }
/* Two states that must not be quiet: the board disagreeing with the report, and no report. */
.mismatch{ margin:.5rem 0 0; font-size:.8rem; line-height:1.5; color:var(--amber-ink);
  background:var(--amber-bg); border-radius:8px; padding:.4rem .55rem; max-width:74ch; }
.noprofile{ margin:.7rem 0 0; padding-top:.55rem; border-top:1px solid var(--rule);
  font-size:.8rem; line-height:1.5; color:var(--muted); max-width:74ch; }