/* JAP-only private-desk sign-in screen. */
body.access-pending > :not(#access-gate){ visibility: hidden; }
#access-gate{
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: var(--paper); padding: 24px;
}
#access-gate[hidden]{ display: none; }
.access-card{
  width: min(100%, 420px); padding: 38px;
  background: var(--card); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}
.access-eyebrow{
  font: 11px var(--mono); text-transform: uppercase; letter-spacing: .15em;
}
.access-card h1{ font: 38px var(--display); margin: 20px 0 8px; color: var(--ink); }
.access-card p{ line-height: 1.5; color: var(--ink); }
.access-card .access-login{
  display: block; margin-top: 24px; text-decoration: none; text-align: center;
  padding: 12px 18px; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); cursor: pointer; font: 11px var(--mono);
  text-transform: uppercase; letter-spacing: .12em;
}
.access-login[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; }
.access-card .access-error{ min-height: 20px; color: #a23528; font-size: 13px; }
.access-notice{
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9998;
  width: min(92%, 650px); padding: 16px; background: #fff3e0; color: #5d3210;
  border: 1px solid #c8a878; font: 14px var(--body);
}
.access-logout{
  border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 10px var(--mono); text-transform: uppercase; letter-spacing: .1em;
}
/* ==========================================================================
   Imara Opportunity Desk
   White ground, near-black ink, hairline rules, a lot of air. Colour is
   reserved for state: a badge is coloured because it means something, never
   because it is decoration. Bodoni for display, Inter for work, Plex Mono for
   the small capitals that label everything.
   ========================================================================== */

/* ------------------------------------------------------------------ themes

   Light is a soft paper rather than a bright white, because near-black type on
   #FFF glares. Dark is a warm charcoal rather than black, for the same reason
   in reverse. Components only ever read tokens, never a literal colour, so the
   two themes stay in step.
   -------------------------------------------------------------------------- */

:root{
  color-scheme: light;

  --paper:        #F7F6F3;
  --paper-deep:   #EFEEEA;
  --card:         #FDFDFB;
  --well:         #F1F0EC;

  --ink:          #1A1A18;   /* 16.1:1 */
  --ink-2:        #33322E;   /* 11.9:1 */
  --ink-soft:     #33322E;   /* collapsed into --ink-2 */
  --ink-faint:    #6B6860;   /*  5.2:1 */

  --line:         #E2E0DA;
  --line-strong:  #BEBBB2;

  --brass:        #6B6860;   /* collapsed into --ink-faint */
  --brass-soft:   #B2AEA4;
  --brass-wash:   #EEEDE8;

  --pursue:       #1A6547;  --pursue-wash: #E9F1EC;  --pursue-line: #BFD6C9;
  --pass:         #8E2027;  --pass-wash:   #F8ECEC;  --pass-line:   #DFC0C0;
  --park:         #7C5E12;  --park-wash:   #F7F1E2;  --park-line:   #DDCEA4;
  --info:         #204A72;  --info-wash:   #EBF0F6;  --info-line:   #BFD0E2;

  --focus:        #1A1A18;

  /* One type scale for the whole app. Seven steps, three trackings. A size
     that is not on this list does not exist: if something needs to stand out
     it changes step, it does not invent a size. */
  --t-label:  10.5px;   /* mono, uppercase, the small caps labels */
  --t-fine:   12.5px;   /* meta, counts, secondary detail */
  --t-body:   14.5px;   /* everything you actually read */
  --t-lead:   16px;     /* the opening line of a section */
  --t-name:   20px;     /* company names on cards, subheads */
  --t-title:  27px;     /* section titles */
  --t-figure: 38px;     /* the score, and nothing else */
  --t-lede:   clamp(17px, 1.9vw, 19px);  /* the one-line thesis under a name */
  --t-display:clamp(32px, 4.4vw, 44px);  /* the company name, once per page */

  --tr-label: .14em;    /* uppercase mono labels, one value for all of them */
  --tr-wide:  .04em;
  --tr-tight: -.011em;  /* body and display, optical only */

  --display: "Bodoni Moda", "Didot", Georgia, "Times New Roman", serif;
  --body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --shadow-file: none;
  --radius: 0px;

  --gap-1: 6px;  --gap-2: 12px; --gap-3: 20px;
  --gap-4: 32px; --gap-5: 52px; --gap-6: 84px;
}

/* The OS preference, unless she has explicitly asked for light. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --paper:        #16181C;
    --paper-deep:   #101216;
    --card:         #1D2025;
    --well:         #212429;

    --ink:          #EDEBE6;   /* 14.9:1 */
    --ink-2:        #C9C6BF;   /* 10.4:1 */
    --ink-soft:     #C9C6BF;   /* collapsed into --ink-2 */
    --ink-faint:    #8A877F;   /*  5.0:1 */

    --line:         #2C3036;
    --line-strong:  #464B53;

    --brass:        #8A877F;   /* collapsed into --ink-faint */
    --brass-soft:   #5E636B;
    --brass-wash:   #23262B;

    --pursue:       #5FC79B;  --pursue-wash: #16281F;  --pursue-line: #2F5544;
    --pass:         #E8827F;  --pass-wash:   #2B1A1A;  --pass-line:   #5C3735;
    --park:         #D6B65E;  --park-wash:   #262013;  --park-line:   #574A28;
    --info:         #7FB2E0;  --info-wash:   #16202B;  --info-line:   #2F4560;

    --focus:        #EDEBE6;
  }
}

/* And her explicit choice wins in both directions. */
:root[data-theme="dark"]{
  color-scheme: dark;

  --paper:        #16181C;
  --paper-deep:   #101216;
  --card:         #1D2025;
  --well:         #212429;

  --ink:          #EDEBE6;
  --ink-2:        #C9C6BF;
  --ink-soft:     #A6A39B;
  --ink-faint:    #8A877F;

  --line:         #2C3036;
  --line-strong:  #464B53;

  --brass:        #B5B1A8;
  --brass-soft:   #5E636B;
  --brass-wash:   #23262B;

  --pursue:       #5FC79B;  --pursue-wash: #16281F;  --pursue-line: #2F5544;
  --pass:         #E8827F;  --pass-wash:   #2B1A1A;  --pass-line:   #5C3735;
  --park:         #D6B65E;  --park-wash:   #262013;  --park-line:   #574A28;
  --info:         #7FB2E0;  --info-wash:   #16202B;  --info-line:   #2F4560;

  --focus:        #EDEBE6;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-lead);
  line-height: 1.68;
  letter-spacing: var(--tr-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: 72px;
}

button { font-family: inherit; }
a { color: var(--ink); }

.mono{ font-family: var(--mono); }

/* ------------------------------------------------------------- masthead */

.masthead{
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead-inner{
  max-width: 1180px; margin: 0 auto;
  padding: 20px 34px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.mark{
  font-family: var(--display);
  font-weight: 400; font-size: var(--t-name);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  text-decoration: none; color: var(--ink); line-height: 1;
}
.mark small{
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: var(--t-label); letter-spacing: var(--tr-label);
  color: var(--ink-faint); margin-top: 6px;
}
nav{ display: flex; gap: 2px; flex-wrap: wrap; }
nav{ gap: 0; }
nav button{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-faint); padding: 8px 14px 7px;
  cursor: pointer; transition: color .14s, border-color .14s;
}
nav button:hover{ color: var(--ink); }
nav button.on{ color: var(--ink); border-bottom-color: var(--ink); }

/* ------------------------------------------------------------- layout */

#main{ }
.view{ display: none; }
.view.on{ display: block; }

.wrap{ max-width: 840px; margin: 0 auto; padding: 0 34px; }
.wrap-wide{ max-width: 1180px; margin: 0 auto; padding: 0 34px; }

.page-head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gap-4); padding: var(--gap-6) 0 var(--gap-3);
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--gap-4);
}
.eyebrow{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-faint);
}
h1.title{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-display); line-height: 1.02;
  letter-spacing: var(--tr-tight); margin: 14px 0 0;
  text-wrap: balance;
}
.counter{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-2);
  border: 0; background: none; padding: 0 0 6px;
  white-space: nowrap;
}
.lede{
  color: var(--ink-2); max-width: 62ch; margin: 0 0 var(--gap-3);
  font-size: var(--t-body);
}

/* ------------------------------------------------------------- the file */

.file{
  position: relative;
  background: var(--card);
  border: 0; border-top: 1px solid var(--ink);
  border-radius: 0; box-shadow: none;
  margin-top: var(--gap-3);
}
.file-tab{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.file-tab .fam{ color: var(--ink); }
.file-body{ padding: var(--gap-4) 0 var(--gap-4); }

@media (max-width: 640px){
  .file-tab{ padding: 12px 20px; }
  .file-body{ padding: 22px 20px 26px; }
  .wrap, .wrap-wide{ padding: 0 16px; }
  h1.title{ font-size: var(--t-title); }
}

.loc{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.company-name{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-display); line-height: 1.04;
  letter-spacing: var(--tr-tight); margin: 12px 0 14px;
}
.thesis{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-name); line-height: 1.5; color: var(--ink-2);
  max-width: 56ch; margin: 0 0 6px;
}

.rule{ height: 1px; background: var(--line); margin: 24px 0; border: 0; }

.field{ margin: 18px 0; }
.field-k{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 8px;
}
.field-v{ font-size: var(--t-lead); color: var(--ink-2); max-width: 66ch; }

/* ------------------------------------------------------------- badges */

.badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 3px 0 3px 12px; border: 0; background: none;
  color: var(--ink-2); white-space: nowrap;
  position: relative;
}
.badge::before{
  content: ""; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  background: var(--ink-faint);
}
.badge.pursue{ color: var(--pursue); } .badge.pursue::before{ background: var(--pursue); }
.badge.pass  { color: var(--pass);   } .badge.pass::before  { background: var(--pass); }
.badge.park  { color: var(--park);   } .badge.park::before  { background: var(--park); }
.badge.info  { color: var(--info);   } .badge.info::before  { background: var(--info); }
.badge.brass { color: var(--ink-2); } .badge.brass::before{ background: var(--ink-faint); }

.tag-cf{
  display: inline-block;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 2px 6px; border-radius: 0; border: 1px solid;
  white-space: nowrap;
}
.tag-cf.v{ color: var(--pursue); background: none; border-color: var(--pursue-line); }
.tag-cf.r{ color: var(--ink-faint); background: none; border-color: var(--line); }
.tag-cf.c{ color: var(--ink-faint); background: none; border-color: var(--line-strong); border-style: dashed; }

.flag-strip{
  display: flex; gap: 14px; align-items: flex-start;
  border: 0; border-left: 2px solid var(--pass); background: none;
  padding: 2px 0 2px 16px; border-radius: 0;
  margin: 0 0 var(--gap-3);
}
.flag-strip .fk{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--pass); white-space: nowrap; padding-top: 2px;
}
.flag-strip .fv{ font-size: var(--t-lead); color: var(--ink-2); }

.window-open{
  display: inline-block; vertical-align: middle;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--paper); background: var(--pursue);
  padding: 4px 9px; border-radius: 0; margin-left: 14px;
  position: relative; top: -10px;
}

/* ------------------------------------------------------------- assessment */

.assess{
  border: 0; border-top: 1px solid var(--ink); border-radius: 0;
  background: none; padding: var(--gap-3) 0 0;
}
.assess-top{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 14px;
}
.assess-score{ display: flex; align-items: baseline; gap: 9px; }
.assess-score .big{
  font-family: var(--display); font-size: var(--t-figure); font-weight: 400; line-height: 1;
  letter-spacing: var(--tr-tight);
}
.assess-score .den{ font-family: var(--mono); font-size: var(--t-fine); color: var(--ink-faint); }
.assess-score .pct{ font-family: var(--mono); font-size: var(--t-label); color: var(--ink-2); }

.band{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 5px 10px; border-radius: 0;
  border: 1px solid; white-space: nowrap;
}
.band.t0{ color: var(--ink);       background: none; border-color: var(--ink); }
.band.t1{ color: var(--ink-2);     background: none; border-color: var(--line-strong); }
.band.t2{ color: var(--ink-faint); background: none; border-color: var(--line); }
.band.t3{ color: var(--ink-faint); background: none; border-color: var(--line); }

.cat{ border-top: 1px solid var(--line); padding: 13px 0 8px; }
.cat-head{ display: flex; align-items: baseline; gap: 11px; margin-bottom: 8px; }
.cat-num{ font-family: var(--mono); font-size: var(--t-label); color: var(--ink-faint); }
.cat-title{ font-family: var(--body); font-size: var(--t-body); font-weight: 500; flex: 1;
            letter-spacing: var(--tr-tight); }
.cat-sub{ font-family: var(--mono); font-size: var(--t-label); color: var(--ink-faint); }
.cat-bar{ height: 2px; background: var(--line); border-radius: 0; overflow: hidden; margin-bottom: 12px; }
.cat-bar > i{ display: block; height: 100%; background: var(--pursue); }

.crit{ display: flex; align-items: center; gap: 12px; padding: 3px 0; }
.crit-lab{ font-size: var(--t-body); color: var(--ink-2); flex: 1; }
.pips{ display: flex; gap: 3px; flex-shrink: 0; }
.pip{ width: 8px; height: 8px; border: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
.pip.on{ background: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------- ledger */

.ledger{
  font-family: var(--mono); font-size: var(--t-fine);
  background: var(--well); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 16px; color: var(--ink-2);
}
.ledger-row{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px dotted var(--line-strong);
}
.ledger-row:last-child{ border-bottom: 0; }
.ledger-k{ width: 118px; flex-shrink: 0; color: var(--ink-faint); font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; }
.ledger-v{ flex: 1; }
.cash-read{
  font-family: var(--body); font-size: var(--t-body); color: var(--ink-2);
  margin-top: 12px; max-width: 66ch;
}

.gate-line{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.gate-note{ font-size: var(--t-body); color: var(--ink-2); max-width: 66ch; }

.src-row{
  display: flex; gap: 13px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px dotted var(--line-strong);
}
.src-row:last-child{ border-bottom: 0; }
.src-claim{ font-size: var(--t-body); color: var(--ink-2); }
.src-from{ font-size: var(--t-fine); color: var(--ink-faint); margin-top: 2px; }
.src-legend{
  font-size: var(--t-fine); color: var(--ink-2);
  background: var(--brass-wash); border: 1px solid var(--line);
  border-left: 3px solid var(--brass-soft);
  padding: 12px 15px; border-radius: var(--radius); margin-top: 14px; max-width: 70ch;
}

/* ------------------------------------------------------------- actions */

.actions{
  display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap;
}
.actions button{
  flex: 1; min-width: 140px;
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 15px 16px; border-radius: var(--radius);
  cursor: pointer; border: 1px solid; transition: background .15s, color .15s;
}
.b-pass { background: var(--card); border-color: var(--pass-line); color: var(--pass); }
.b-pass:hover { background: var(--pass-wash); }
.b-park { background: var(--card); border-color: var(--park-line); color: var(--park); }
.b-park:hover { background: var(--park-wash); }
.b-yes  { background: var(--pursue); border-color: var(--pursue); color: var(--paper); }
.b-yes:hover  { background: #175A42; }

.btn{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 11px 18px; border-radius: 0;
  border: 1px solid var(--ink); background: var(--card);
  color: var(--ink); cursor: pointer; text-decoration: none;
  display: inline-block; transition: background .14s, color .14s;
}
.btn:hover{ background: var(--ink); color: var(--paper); }
.btn-solid{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-solid:hover{ background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }

.navrow{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  gap: 12px; flex-wrap: wrap;
}
.linkbtn{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  background: none; border: 0; color: var(--ink-2);
  cursor: pointer; padding: 4px 0; text-decoration: none;
}
.linkbtn:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------- stamp */

.stamp{
  position: absolute; top: 34%; left: 50%;
  transform: translate(-50%, -50%) rotate(-11deg) scale(1.5);
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-figure); letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 10px 30px;
  border: 3px double currentColor; border-radius: 5px;
  opacity: 0; pointer-events: none;
  background: rgba(252,251,247,.42);
  z-index: 6;
}
.stamp.show{
  animation: stamp-down .58s cubic-bezier(.2,.8,.3,1) forwards;
}
.stamp.pursue{ color: var(--pursue); }
.stamp.pass  { color: var(--pass); }
.stamp.park  { color: var(--park); }

@keyframes stamp-down{
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(-11deg) scale(1.65); }
  55%  { opacity: .96; transform: translate(-50%,-50%) rotate(-11deg) scale(.97); }
  70%  { transform: translate(-50%,-50%) rotate(-11deg) scale(1.01); }
  100% { opacity: .92; transform: translate(-50%,-50%) rotate(-11deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .stamp.show{ animation: none; opacity: .92; transform: translate(-50%,-50%) rotate(-11deg) scale(1); }
}

/* ------------------------------------------------------------- learning */

.learning{
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); padding: 16px 20px; margin-top: 8px;
}
.learning-k{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 10px;
}
.learning-row{ display: flex; gap: 12px; align-items: baseline; padding: 4px 0; flex-wrap: wrap; }
.learning-lab{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); width: 96px; flex-shrink: 0;
}
.chips{ display: flex; gap: 6px; flex-wrap: wrap; }
.chip{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-wide);
  padding: 4px 9px; border-radius: 2px; border: 1px solid;
}
.chip.pos{ color: var(--pursue); background: var(--pursue-wash); border-color: var(--pursue-line); }
.chip.neg{ color: var(--pass);   background: var(--pass-wash);   border-color: var(--pass-line); }
.learning-empty{ font-size: var(--t-fine); color: var(--ink-2); }

/* ------------------------------------------------------------- pass reasons */

.reasons{ margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.reasons-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px;
}
.rchips{ display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.rchip{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  padding: 8px 13px; border-radius: 0;
  border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink-2); cursor: pointer; transition: all .14s;
}
.rchip:hover{ border-color: var(--ink); color: var(--ink); }
.rchip.go{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rchip.go:hover{ background: var(--ink-2); color: var(--paper); }

textarea.notebox, input.field-input, select.field-input{
  width: 100%; font-family: var(--body); font-size: var(--t-body);
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 0;
  padding: 12px 14px; margin-bottom: 12px; resize: vertical;
}
textarea.notebox:focus, input.field-input:focus, select.field-input:focus{
  outline: none; border-color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
textarea.notebox{ min-height: 82px; }

.readback{
  border: 1px solid var(--line-strong); border-left: 3px solid var(--ink-faint);
  background: var(--brass-wash); border-radius: var(--radius);
  padding: 16px 18px; margin-top: 18px;
}
.readback-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}
.readback-v{ font-size: var(--t-body); color: var(--ink-2); max-width: 66ch; }
.readback-quote{
  font-size: var(--t-fine); color: var(--ink-2); font-style: italic;
  margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line-strong);
}

/* ------------------------------------------------------------- desk grid */

.filters{ display: flex; gap: 7px; flex-wrap: wrap; margin: 6px 0 26px; }
.fchip{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; padding: 8px 13px; border-radius: 0;
  border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink-2); cursor: pointer;
}
.fchip b{ font-weight: 500; color: var(--ink); margin-left: 5px; }
.fchip:hover{ background: var(--well); }
.fchip.on{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fchip.on b{ color: var(--paper); }

.grid{
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
/* Cards are a scanning surface, so every one carries the same four things in
   the same places: sector, name, where it is, and how it scored. Fixed height
   with the score pinned to the bottom, so a row lines up instead of stepping up
   and down with whatever badges each company happens to have. */
.card{
  background: var(--card); border: 0;
  border-top: 1px solid var(--line-strong);
  border-left: 2px solid transparent;
  border-radius: 0; padding: 15px 18px 15px 16px;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .14s, border-left-color .14s;
  display: flex; flex-direction: column; min-height: 168px;
}
.card:hover{ background: var(--well); border-left-color: var(--ink); }
/* One muted rule down the edge for a decision already taken. Five colours on a
   grid of cards read as five warnings; this reads as a margin note. */
.card.st-pursue{ border-left-color: var(--line-strong); }
.card.st-pass  { border-left-color: var(--line-strong); }
.card.st-park  { border-left-color: var(--line-strong); }
/* Sector names run long. Truncating them mid-word told her nothing, so they
   wrap to two lines and every card reserves the same room for them. */
.card-fam{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  line-height: 1.5; min-height: 3em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-name{
  font-family: var(--display); font-size: var(--t-name); font-weight: 400;
  line-height: 1.16; margin: 2px 0 5px; letter-spacing: var(--tr-tight);
  color: var(--ink);
}
/* Some records carry a whole sentence in the location field. On a card it gets
   one line, so a verbose record cannot push the grid out of shape. */
.card-loc{
  font-size: var(--t-fine); color: var(--ink-faint); letter-spacing: 0;
  text-transform: none; font-family: var(--body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.45; min-height: 1.45em;
}
.card-foot{
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: baseline; gap: 10px;
}
.card-score{
  font-family: var(--mono); font-size: var(--t-fine); color: var(--ink);
  border: 0; background: none; padding: 0;
  font-variant-numeric: tabular-nums; letter-spacing: var(--tr-wide);
}
/* The band was a coloured, bordered chip on every card, which made a grid of
   them look like a control panel. It is a label, and it reads like one now. */
.card-band{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
/* Colour is spent on the one finding that stops a deal, and nothing else. */
/* A due date that has not passed yet is information, not an alarm. */
.card-flag.quiet{ color: var(--ink-faint); }
/* The approach counter: a number she can type over, and a press for one more. */
.rf-count{ display: flex; align-items: stretch; gap: 0; }
.rf-count .rf-in{ flex: 1 1 auto; min-width: 0; }
.rf-bump{
  flex: 0 0 auto; margin-left: -1px;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  padding: 0 12px; cursor: pointer;
  background: var(--well); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 0;
}
.rf-bump:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

.card-flag{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; white-space: nowrap; color: var(--pass);
  margin-left: auto; align-self: center;
}
.card-loc b{ font-weight: 500; color: var(--ink-2); }
.card-meta{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.card-score{
  font-family: var(--mono); font-size: var(--t-label); color: var(--ink);
  border: 0; background: none; padding: 0;
  font-variant-numeric: tabular-nums; letter-spacing: var(--tr-wide);
}

/* ------------------------------------------------------------- lists */

.list-row{
  display: flex; gap: 20px; align-items: flex-start; justify-content: space-between;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 18px 2px; margin-bottom: 0;
}
.list-main{ flex: 1; min-width: 0; }
.list-name{ font-family: var(--display); font-size: var(--t-name); font-weight: 400;
            letter-spacing: var(--tr-tight); }
.list-sub{ font-size: var(--t-fine); color: var(--ink-2); margin-top: 4px; }
.list-side{ display: flex; gap: 7px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }

.section-head{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong);
}

.empty{
  color: var(--ink-2); font-size: var(--t-body);
  background: var(--card); border: 1px dashed var(--line-strong);
  border-radius: var(--radius); padding: 26px; text-align: center;
}

/* ------------------------------------------------------------- intro route */

.route-box{
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); padding: 20px 22px;
}
.route-who{ font-family: var(--display); font-size: var(--t-name); font-weight: 600; }
.route-firm{ font-size: var(--t-body); color: var(--ink-2); margin-top: 3px; }
.route-why{
  font-size: var(--t-fine); color: var(--ink-2); margin-top: 11px;
  padding-top: 11px; border-top: 1px solid var(--line);
}
.route-backup{ font-size: var(--t-fine); color: var(--ink-faint); margin-top: 9px; }

.match-row{
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px dotted var(--line-strong);
}
.match-row:last-child{ border-bottom: 0; }
.match-name{ font-size: var(--t-body); font-weight: 500; color: var(--ink); }
.match-sub{ font-size: var(--t-body); color: var(--ink-2); margin-top: 3px; }
.match-why{ font-size: var(--t-fine); color: var(--ink-faint); margin-top: 5px; font-family: var(--mono); letter-spacing: var(--tr-wide); }

.mailbox{
  width: 100%; min-height: 320px;
  font-family: var(--mono); font-size: var(--t-fine); line-height: 1.65;
  color: var(--ink-2); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 18px; resize: vertical;
}
.toolbar{ display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }

.helper-links{ display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }

/* --------------------------------------------------- deep research blocks */

.deep-list{
  margin: 8px 0 0; padding: 0 0 0 2px; list-style: none;
  max-width: 74ch;
}
.deep-list li{
  position: relative; padding: 6px 0 6px 20px;
  font-size: var(--t-body); color: var(--ink-2);
  border-bottom: 1px dotted var(--line);
}
.deep-list li:last-child{ border-bottom: 0; }
.deep-list li::before{
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 5px; height: 5px; border-radius: 1px; background: var(--brass-soft);
}
.deep-list.risk li::before{ background: var(--pass); }
.deep-list.muted li{ color: var(--ink-faint); font-size: var(--t-fine); }
.deep-list.muted li::before{ background: var(--line-strong); }

.timeline{ margin-top: 10px; }
.tl-row{
  display: flex; gap: 16px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px dotted var(--line);
}
.tl-row:last-child{ border-bottom: 0; }
.tl-date{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  width: 92px; flex-shrink: 0; padding-top: 2px;
}
.tl-body{ flex: 1; font-size: var(--t-body); color: var(--ink-2); max-width: 66ch; }
.tl-src{ font-size: var(--t-fine); color: var(--ink-faint); margin-top: 3px; }

.depth-tag{
  display: inline-block; margin-left: 10px;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--brass-soft); background: var(--brass-wash);
  padding: 3px 8px; border-radius: 2px; vertical-align: middle;
}

/* ------------------------------------------------------- the daily list */

.act-table{
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
}
.act-row{
  display: grid;
  /* The action wording gets its own full-width line so long sentences read
     in full. Everything else sits on the line above. */
  grid-template-columns: 22px 1fr 126px 104px 132px 86px auto;
  grid-template-areas:
    "sel co   due  who  move out  do"
    "sel text text text text text text"
    "sel note note note note note note";
  gap: 6px 10px; align-items: center;
  padding: 10px 14px 11px;
  border-bottom: 1px solid var(--line);
}
/* The approach count, sitting on the action row itself. */
.act-out{ grid-area: out; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-out-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.act-out-in{
  width: 100%; min-width: 0; padding: 5px 6px;
  font-family: var(--mono); font-size: var(--t-fine);
  font-variant-numeric: tabular-nums; text-align: center;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 0;
}
.act-out-in:focus{ outline: 2px solid var(--focus); outline-offset: -2px; }
.act-row.done .act-out{ opacity: .5; }

.act-sel{
  grid-area: sel; align-self: start;
  width: 16px !important; height: 16px;
  margin: 4px 0 0 !important; padding: 0 !important;
  min-width: 16px; cursor: pointer;
  accent-color: var(--pursue);
  border: 0 !important; background: none !important;
}
.act-sel:hover{ border: 0 !important; background: none !important; }
.act-row.picked{ background: var(--brass-wash); }
.act-row.picked:hover{ background: var(--brass-wash); }
.act-co   { grid-area: co; }
.act-text { grid-area: text; }
.act-due  { grid-area: due; }
.act-who  { grid-area: who; }
.act-move { grid-area: move; }
.act-do   { grid-area: do; }
.act-notes{ grid-area: note; }
.act-row:last-child{ border-bottom: 0; }
.act-row:hover{ background: var(--well); }
.act-row.overdue{ border-left: 3px solid var(--pass); padding-left: 11px; }
.act-row.done{ opacity: .5; }
.act-row.done .act-text{ text-decoration: line-through; }

.act-co{ min-width: 0; }
.act-co .linkbtn{
  font-family: var(--display); font-size: var(--t-body); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  text-align: left; display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.act-stage-now{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); margin-top: 2px;
}

.act-row input, .act-row select{
  font-family: var(--body); font-size: var(--t-fine); color: var(--ink);
  background: transparent; border: 1px solid transparent;
  border-radius: 2px; padding: 6px 8px; width: 100%; margin: 0;
  min-width: 0;                      /* let grid cells shrink, never overflow */
  text-overflow: ellipsis;
}
.act-row select{ padding-right: 4px; }
.act-row input:hover, .act-row select:hover{ border-color: var(--line-strong); background: var(--card); }
.act-row input:focus, .act-row select:focus{
  outline: 2px solid var(--brass-soft); outline-offset: -1px; background: var(--card);
}
.act-due, .act-who, .act-move{ font-family: var(--mono) !important; font-size: var(--t-label) !important; }
.act-move{ color: var(--ink-2); }

.act-do{ display: flex; gap: 5px; justify-content: flex-end; }
.act-do .btn{ padding: 7px 11px; font-size: var(--t-label); }

.act-notes{
  font-size: var(--t-fine); color: var(--ink-faint);
  padding: 1px 0 2px 2px;
}

/* The wording line reads as the row's main content. */
.act-text{
  font-size: var(--t-body) !important;
  border-color: var(--line) !important;
  background: var(--well) !important;
}
.act-text:hover, .act-text:focus{ background: var(--card) !important; }

@media (max-width: 820px){
  .act-row{
    grid-template-columns: 22px 1fr 1fr;
    grid-template-areas:
      "sel co   co"
      "sel text text"
      "sel due  who"
      "sel move do"
      "sel note note";
  }
  .act-do{ justify-content: flex-start; }
}

/* -------------------------------------------------------- the bulk bar */

.bulk-bar{
  position: fixed; left: 0; right: 0; bottom: 40px; z-index: 40;
  background: var(--ink);
  border-top: 2px solid var(--ink-faint);
  box-shadow: 0 -14px 34px -22px rgba(22, 53, 44, .8);
}
.bulk-inner{
  max-width: 1140px; margin: 0 auto;
  padding: 11px 26px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.bulk-count{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--paper); margin-right: 6px; white-space: nowrap;
}
.bulk-bar .btn{
  background: transparent; color: var(--paper);
  border-color: rgba(244, 242, 236, .32);
  padding: 8px 12px; font-size: var(--t-label);
}
.bulk-bar .btn:hover{ background: rgba(244, 242, 236, .12); }
.bulk-bar .linkbtn{ color: rgba(244, 242, 236, .7); }
.bulk-bar .linkbtn:hover{ color: var(--paper); }
.bulk-field{
  margin: 0 !important; padding: 7px 9px !important;
  font-family: var(--mono) !important; font-size: var(--t-label) !important;
  background: rgba(244, 242, 236, .1) !important;
  border-color: rgba(244, 242, 236, .32) !important;
  color: var(--paper) !important;
  width: auto !important; max-width: 148px;
}
.bulk-field option{ color: var(--ink); }

body:has(.bulk-bar){ padding-bottom: 116px; }

@media (max-width: 720px){
  .bulk-inner{ padding: 10px 16px; gap: 6px; }
  .bulk-count{ width: 100%; }
}

/* ------------------------------------------------------- the reason panel */

.modal-back{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(22, 53, 44, .34);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal{
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--brass-soft);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(22, 53, 44, .6);
  padding: 26px 28px 22px;
  width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto;
}
.modal-title{
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-title); line-height: 1.15; letter-spacing: var(--tr-tight);
  margin: 10px 0 0;
}
.modal .notebox{ min-height: 72px; }

/* ------------------------------------------------------------- colophon */

.colophon{
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
  z-index: 15;
}
.colophon-inner{
  max-width: 1140px; margin: 0 auto; padding: 11px 26px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: var(--t-fine); color: var(--ink-faint);
}
#saveflag{
  font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-faint); transition: color .3s;
}
#saveflag.saving{ color: var(--ink-faint); }

/* ------------------------------------------------------------- misc */

.spacer-lg{ height: 56px; }
.note-back{
  background: var(--well); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius); padding: 14px 16px;
  font-size: var(--t-body); color: var(--ink-2);
}
.note-back .nb-when{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px;
}
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px){ .two-col{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- desk search */

.searchbar{ display: flex; gap: 8px; align-items: stretch; margin: 2px 0 14px; }
.search-in{
  flex: 1 1 auto; min-width: 0;
  font-family: var(--body); font-size: var(--t-body); color: var(--ink);
  padding: 12px 15px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--card);
}
.search-in::placeholder{ color: var(--ink-faint); }
.search-in:focus{
  outline: none; border-color: var(--brass-soft);
  box-shadow: 0 0 0 3px var(--brass-wash);
}
.searchbar .fchip{ flex: 0 0 auto; }

.section-rule{
  display: flex; align-items: center; gap: 12px;
  margin: 30px 0 16px; color: var(--ink-faint);
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.section-rule::after{
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}

/* ------------------------------------------------------- who to approach */

.match-box{
  margin-top: 10px; padding: 4px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.ct-email{ margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-email code{
  font-family: var(--mono); font-size: var(--t-fine); color: var(--ink);
  background: var(--well); border: 1px solid var(--line);
  border-radius: 4px; padding: 3px 8px;
}
.ask-line{
  margin-top: 10px; padding: 10px 13px;
  font-family: var(--mono); font-size: var(--t-fine); color: var(--ink-2);
  background: var(--well); border: 1px solid var(--line); border-radius: var(--radius);
}

/* ==========================================================================
   The company page. One company, one page: a header that answers stage,
   score, contact and what they do, then folded sections.
   ========================================================================== */

.co-hero{ padding: 4px 0 2px; }

.co-eyebrow{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.co-name{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-display); line-height: 1.06;
  color: var(--ink); margin: 12px 0 0; letter-spacing: var(--tr-tight);
}
.co-loc{ font-size: var(--t-fine); color: var(--ink-2); margin-top: 10px; }
.co-thesis{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-lede); line-height: 1.5;
  color: var(--ink-2); max-width: 62ch; margin: 22px 0 0;
}
.co-does{ margin-top: 24px; max-width: 74ch; }
.co-does-v{ font-size: var(--t-body); line-height: 1.62; color: var(--ink-2); margin-top: 8px; }

.co-page .co-hero, .co-page .co-sections, .co-page .co-do{ max-width: 900px; }

.co-glance{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0; background: none;
  border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  border-radius: 0; overflow: visible; margin-top: var(--gap-4);
}
.gl{ background: none; padding: 18px 22px 20px 0; min-width: 0;
     border-right: 1px solid var(--line); }
.gl:last-child{ border-right: 0; }
.gl + .gl{ padding-left: 22px; }
.gl-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.gl-v{
  font-size: var(--t-body); color: var(--ink); margin-top: 8px;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.gl-s{
  font-size: var(--t-fine); color: var(--ink-2); margin-top: 7px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.gl-s .mono{ font-size: var(--t-label); color: var(--ink-2); word-break: break-word; }
.gl-tag{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.co-pct{
  font-family: var(--display); font-size: var(--t-figure); line-height: .92;
  color: var(--ink); letter-spacing: var(--tr-tight);
}
.co-of{ font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--ink-faint); }
.co-none{ font-size: var(--t-body); color: var(--ink-faint); font-style: italic; }
.co-late{ color: var(--pass); }

.co-flags{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ------------------------------------------------------------- sections */

.co-sections{ margin-top: 38px; border-top: 1px solid var(--line-strong); }

.sec{ border-bottom: 1px solid var(--line); }
.sec > summary{
  list-style: none; cursor: pointer; padding: 19px 2px;
  display: flex; align-items: center; gap: 15px;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-2);
  transition: color .12s ease;
}
.sec > summary::-webkit-details-marker{ display: none; }
.sec > summary::marker{ content: ""; }
.sec > summary::before{
  content: "+"; color: var(--ink-faint); font-size: var(--t-fine);
  width: 11px; flex: 0 0 11px; text-align: center;
}
.sec[open] > summary::before{ content: "\2013"; color: var(--ink); }
.sec > summary:hover{ color: var(--ink); }
.sec[open] > summary{ color: var(--ink); }
.sec-t{ flex: 1 1 auto; }
.sec-n{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  color: var(--ink-faint); text-transform: none;
}
.sec-body{ padding: 2px 2px 30px; max-width: 78ch; }
.sec-body .field:first-child{ margin-top: 0; }
.sec-body > .field-k:first-child{ margin-top: 0; }

.co-read{
  font-size: var(--t-lead); line-height: 1.68; color: var(--ink-2);
  max-width: 68ch; white-space: pre-wrap;
}

.co-do{
  margin-top: 34px; padding: 26px 28px;
  background: var(--well); border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ------------------------------------------------- the independence check */

.ind-box{
  margin-top: 12px; padding: 18px 20px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.ind-top{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ind-when{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.ind-verdict{
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2);
  margin-top: 13px; max-width: 66ch;
}
.ind-rows{ margin-top: 16px; }
.ind-row{
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-top: 1px dotted var(--line);
}
.ind-row:first-child{ border-top: 0; }
.ind-mark{
  flex: 0 0 18px; text-align: center; font-size: var(--t-fine); line-height: 1.5;
  font-family: var(--mono);
}
.ind-row.ok   .ind-mark{ color: var(--pursue); }
.ind-row.bad  .ind-mark{ color: var(--pass); font-weight: 600; }
.ind-row.unrun .ind-mark{ color: var(--ink-faint); }
.ind-q{ font-size: var(--t-fine); color: var(--ink); }
.ind-note{ font-size: var(--t-fine); color: var(--ink-2); margin-top: 4px; }
.ind-row.bad .ind-q{ color: var(--pass); }

/* ----------------------------------------------------- status markers */

.mk-strip{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin: 4px 0 26px;
}
.mk-group{
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 14px 16px 10px;
}
.mk-head{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; justify-content: space-between; align-items: baseline;
}
.mk-n{ color: var(--ink-faint); }
.mk-row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; padding: 9px 0; cursor: pointer;
  background: none; border: 0; border-top: 1px dotted var(--line);
}
.mk-group .mk-row:first-of-type{ border-top: 0; }
.mk-row:hover .mk-name{ color: var(--ink-faint); }
.mk-name{ font-size: var(--t-body); color: var(--ink); }
.mk-when{ font-family: var(--mono); font-size: var(--t-label); color: var(--ink-2); white-space: nowrap; }
.mk-when.past{ color: var(--pass); }
.mk-when.muted{ color: var(--ink-faint); }

/* ------------------------------------------------- who introduced it */

.in-sugg{ margin-top: 8px; }
.in-sugg-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.in-hit{
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; cursor: pointer; background: var(--well);
  border: 1px solid var(--line); border-radius: 4px; margin-bottom: 5px;
}
.in-hit:hover{ background: var(--card); border-color: var(--brass-soft); }
.in-hit-n{ font-size: var(--t-fine); color: var(--ink); flex: 0 0 auto; }
.in-hit-s{ font-size: var(--t-fine); color: var(--ink-2); flex: 1 1 auto; }
.in-hit-h{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); flex: 0 0 auto;
}

/* ------------------------------------------------------- a research run */

.run-live{
  display: flex; align-items: flex-start; gap: 11px;
  margin: 10px 0 4px; padding: 13px 15px;
  background: var(--card); border: 1px solid var(--brass-soft);
  border-radius: var(--radius);
  font-size: var(--t-fine); line-height: 1.55; color: var(--ink-2);
}
.run-dot{
  flex: 0 0 9px; width: 9px; height: 9px; margin-top: 6px;
  border-radius: 50%; background: var(--ink-faint);
  animation: run-pulse 1.4s ease-in-out infinite;
}
@keyframes run-pulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%     { opacity: .35; transform: scale(.75); }
}

/* --------------------------------------------------------- who is signed in */

.whobar{
  margin-left: auto; margin-right: 22px;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.whobar b{ font-weight: 400; color: var(--ink-faint); }
.whobar .linkbtn{ font-size: var(--t-label); letter-spacing: var(--tr-label); }
@media (max-width: 760px){ .whobar{ display: none; } }

/* ------------------------------------------------- just added a company */

.added-strip{
  margin: 0 0 30px; padding: 18px 22px 20px;
  background: var(--pursue-wash);
  border: 1px solid var(--pursue-line);
  border-radius: var(--radius);
  max-width: 900px;
}
.added-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--pursue);
}
.added-v{
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-2);
  margin-top: 9px; max-width: 68ch;
}
.added-strip .btn{ background: var(--card); }

/* ----------------------------------------------------- the record, editable */

/* Underlined fields rather than boxes, so a form of fourteen inputs reads as
   a record rather than a wall of containers. */
.rf-name{ display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--gap-4); }
.rf-name-in{
  font-family: var(--display); font-size: var(--t-title); font-weight: 400;
  letter-spacing: var(--tr-tight); padding: 0 0 10px;
  border: 0; border-bottom: 1px solid var(--ink); background: none;
}
.rf-name-in:focus{ box-shadow: none; border-bottom-width: 2px; }

.rf-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--gap-3) var(--gap-4); margin-top: 4px;
}
.rf{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rf-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.rf-in{
  font-family: var(--body); font-size: var(--t-body); color: var(--ink);
  padding: 3px 0 8px; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--line-strong); background: none;
  width: 100%; min-width: 0;
}
.rf-in::placeholder{ color: var(--ink-faint); font-style: normal; opacity: .75; }
.rf-in:hover{ border-bottom-color: var(--ink-2); }
.rf-in:focus{
  outline: none; border-bottom-color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--ink);
}
select.rf-in{ padding-left: 0; }

/* --------------------------------------------------------- appearance */

.themebtn{
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase;
  background: none; border: 1px solid var(--line-strong);
  color: var(--ink-2); padding: 6px 12px; margin-right: 18px;
  cursor: pointer; border-radius: 0; white-space: nowrap;
  transition: color .14s, border-color .14s;
}
.themebtn:hover{ color: var(--ink); border-color: var(--ink); }
.themebtn:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 900px){ .themebtn{ display: none; } }

/* ------------------------------------------------------- correspondence */

.mail-head{
  display: flex; gap: 22px; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.mail-list{ display: block; }
.mail-row{
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.mail-row:hover{ background: var(--well); }
.mail-dir{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.mail-dir.out{ color: var(--info); }
.mail-dir.in { color: var(--pursue); }
.mail-body{ display: block; min-width: 0; }
.mail-subj{ display: block; font-size: var(--t-lead); color: var(--ink); }
.mail-who{
  display: block; font-family: var(--mono); font-size: var(--t-label);
  color: var(--ink-faint); margin-top: 4px;
}
.mail-sum{
  display: block; font-size: var(--t-body); color: var(--ink-2); margin-top: 6px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.mail-when{
  font-family: var(--mono); font-size: var(--t-label); color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 640px){
  .mail-row{ grid-template-columns: 1fr; gap: 6px; }
  .mail-when{ order: -1; }
}

/* ----------------------------------------------- meeting notes and files */

.fileset{ padding: 18px 0; border-bottom: 1px solid var(--line); }
.fileset:last-of-type{ border-bottom: 0; }
.fileset-head{
  display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.fileset-when{ color: var(--ink); }
.fileset-who{ color: var(--ink-faint); }
.fileset-n{ color: var(--ink-faint); margin-left: auto; }
.fileset-cap{
  font-size: var(--t-body); color: var(--ink-2); margin-top: 9px;
  white-space: pre-wrap; max-width: 70ch;
}
.thumbs{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.thumb{
  width: 132px; height: 132px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--well);
  transition: border-color .14s;
}
.thumb:hover{ border-color: var(--ink); }
.thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.lightbox{ padding: 24px; }
.lb-inner{
  max-width: min(1100px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--card); border: 1px solid var(--line-strong); padding: 18px;
}
.lb-inner img{
  max-width: 100%; max-height: 74vh; object-fit: contain;
  display: block; margin: 0 auto; background: var(--well);
}
.lb-cap{ font-size: var(--t-body); color: var(--ink-2); }
.lb-close{ display: flex; gap: 10px; justify-content: flex-end; }

/* ------------------------------------------------------ the one history */

.hist{ padding: 20px 0; border-bottom: 1px solid var(--line); }
.hist:last-child{ border-bottom: 0; }
.hist-when{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink);
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.hist-who{ color: var(--ink-faint); }
.hist-src{ color: var(--ink-faint); }
.hist-text{
  font-size: var(--t-lead); line-height: 1.65; color: var(--ink-2);
  margin-top: 10px; white-space: pre-wrap; max-width: 72ch;
}
.hist .thumbs{ margin-top: 14px; }

/* -------------------------------------------- bands, so sections group up */

.band-h{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink);
  margin: var(--gap-5) 0 0; padding: 0 0 12px;
  border-bottom: 2px solid var(--ink);
}
.co-sections > .band-h:first-child{ margin-top: 0; }

/* An open section should look open: indented, with a rule down its edge. */
.sec[open]{ background: var(--well); }
.sec[open] > summary{ color: var(--ink); }
.sec[open] > .sec-body{
  border-left: 2px solid var(--line-strong);
  padding-left: 20px; margin-left: 2px;
}
.sec > summary:hover{ background: var(--well); }
.sec[open] > summary:hover{ background: transparent; }

@media (max-width: 640px){
  .sec[open] > .sec-body{ padding-left: 12px; }
}

/* ------------------------------------------------------------ step lists */

.steps{
  margin: 4px 0 0; padding-left: 20px;
  font-size: var(--t-body); line-height: 1.7; color: var(--ink-2); max-width: 66ch;
}
.steps li{ margin-bottom: 6px; }
.steps li::marker{ color: var(--ink-faint); font-family: var(--mono); font-size: var(--t-fine); }
.steps b{ color: var(--ink); font-weight: 500; }

/* The one action in the header that actually starts something. */
.linkbtn.go{
  color: var(--ink); border-bottom: 1px solid var(--ink);
  padding-bottom: 1px; font-weight: 500;
}
.linkbtn.go:hover{ color: var(--pursue); border-bottom-color: var(--pursue); }

/* ------------------------------------- the standing research control */

.co-hero{ position: relative; }
.co-act{
  float: right; margin: 0 0 18px 28px; text-align: right;
  max-width: 260px;
}
.co-act.live{
  display: flex; align-items: flex-start; gap: 11px; text-align: left;
  border: 1px solid var(--brass-soft); padding: 13px 15px;
  font-size: var(--t-body); color: var(--ink-2); line-height: 1.5;
}
.co-act.live b{ color: var(--ink); font-weight: 500; }
.co-act-sub{
  display: block; font-size: var(--t-fine); color: var(--ink-faint);
  margin-top: 7px; line-height: 1.45;
}
@media (max-width: 720px){
  .co-act{ float: none; margin: 0 0 20px; max-width: none; text-align: left; }
}

/* ---------------------------------------------------- the notice bar */

.notice{
  position: sticky; top: 61px; z-index: 18;
  background: var(--pursue); color: #FFFFFF;
}
.notice-in{
  max-width: 1180px; margin: 0 auto; padding: 11px 34px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.notice-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; white-space: nowrap;
}
.notice-list{ display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; }
.notice-co{
  font-family: var(--body); font-size: var(--t-body); color: #FFFFFF;
  background: rgba(255,255,255,.14); border: 0; padding: 5px 12px;
  cursor: pointer;
}
.notice-co:hover{ background: rgba(255,255,255,.26); }
.notice-x{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: #FFFFFF;
  background: none; border: 1px solid rgba(255,255,255,.5);
  padding: 5px 11px; cursor: pointer; white-space: nowrap;
}
.notice-x:hover{ background: rgba(255,255,255,.16); }

.crit-note{
  display: block; font-size: var(--t-fine); line-height: 1.55;
  color: var(--ink-faint); margin-top: 5px; max-width: 62ch;
}


/* ==========================================================================
   The company file: a rail of facts, detail beside it

   Asked what a clean CRM looks like, she picked a fixed left panel that never
   scrolls away, with the detail scrolling next to it, and said the page had too
   many words and too little formatting. So the rail is label-and-value only,
   no sentences, and the explanatory copy has gone from the body.
   ========================================================================== */
.co-grid{
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: var(--gap-5);
  align-items: start;
}
.co-main{ min-width: 0; }

/* The rail holds the facts and the whole section list, which together are
   taller than a screen. It scrolls on its own so the list is always reachable
   without scrolling the section she is reading. */
.co-rail{
  position: sticky; top: 14px;
  align-self: start;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding-right: var(--gap-3);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.rail-top{ padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.rail-sector{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); line-height: 1.5;
}
.rail-name{
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-title); line-height: 1.1;
  letter-spacing: var(--tr-tight); margin: 6px 0 4px; color: var(--ink);
}
.rail-loc{
  font-size: var(--t-fine); color: var(--ink-faint); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.rail-score{ padding: 16px 0; border-bottom: 1px solid var(--line); }
.rail-score-v{ display: flex; align-items: baseline; gap: 8px; }
.rail-score-s{ margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* A definition list, because that is what this is: fields and their values. */
.rail-facts{ margin: 0; padding: 16px 0 0; }
.rail-facts dt{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); margin-top: 14px;
}
.rail-facts dt:first-child{ margin-top: 0; }
.rail-facts dd{
  margin: 3px 0 0; font-size: var(--t-body); color: var(--ink); line-height: 1.35;
  overflow-wrap: anywhere;
}
.rail-sub{
  font-size: var(--t-fine); color: var(--ink-faint); margin-top: 3px;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}
.rail-sub .mono{ font-family: var(--mono); }

.rail-flags{ display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.rail-links{ display: flex; gap: 14px; margin-top: 18px; }
.rail-links a{ font-size: var(--t-fine); color: var(--ink-2); }

/* The section list lives in the rail, so navigation and context are the same
   thing. One column, quiet until it is the one she is in. */
.rail-nav{ margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.rail-nav .cx-band{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  margin: 16px 0 6px;
}
.rail-nav .cx-group:first-child .cx-band{ margin-top: 0; }
.rail-nav .cx-items{ display: flex; flex-direction: column; }
.rail-nav .cx-item{
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 5px 8px; margin-left: -8px;
  background: none; border: 0; border-radius: 0;
  font-family: var(--body); font-size: var(--t-fine); color: var(--ink-2);
}
.rail-nav .cx-item:hover{ background: var(--well); color: var(--ink); }
.rail-nav .cx-item.on{ background: none; color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--ink); }
.rail-nav .cx-t{ flex: 1 1 auto; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.rail-nav .cx-n{
  font-family: var(--mono); font-size: var(--t-label); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.rail-nav .cx-head{ display: flex; gap: 12px; padding-bottom: 12px; }

.co-lead{ margin-bottom: var(--gap-3); }

@media (max-width: 900px){
  .co-grid{ grid-template-columns: 1fr; gap: var(--gap-3); }
  .co-rail{ position: static; border-right: 0; border-bottom: 1px solid var(--line);
            padding-right: 0; padding-bottom: var(--gap-3); }
  .rail-nav .cx-items{ flex-direction: row; flex-wrap: wrap; }
}

/* ---- Fewer words -------------------------------------------------------- */
/* The body carried standing explanations of how the app works. She has read
   them. They are noise on every visit after the first. */
.co-main .lede,
.co-main .src-legend,
.co-main .co-note-help{ display: none; }

/* Open all / close all, sitting with the sections rather than in the rail. */
.sec-tools{
  display: flex; gap: 16px; justify-content: flex-end;
  padding-bottom: 10px;
}

/* ==========================================================================
   Master and detail

   The rail lists every section, including Your record and each part of the
   business. The pane beside it shows the one she picked and nothing else.
   ========================================================================== */
.rail-nav{ margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.rail-nav .cx-band{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  margin: 18px 0 6px;
}
.rail-nav .cx-group:first-child .cx-band{ margin-top: 0; }
.rail-nav .cx-items{ display: flex; flex-direction: column; }
.rail-nav .cx-item{
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 6px 8px; margin-left: -8px;
  background: none; border: 0; border-radius: 0;
  font-family: var(--body); font-size: var(--t-fine); color: var(--ink-2);
}
.rail-nav .cx-item:hover{ background: var(--well); color: var(--ink); }
.rail-nav .cx-item.on{
  color: var(--ink); font-weight: 500;
  box-shadow: inset 2px 0 0 var(--ink); background: var(--well);
}
.rail-nav .cx-t{ flex: 1 1 auto; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.rail-nav .cx-n{
  font-family: var(--mono); font-size: var(--t-label); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Nothing shows until she chooses. */
.co-pane{ padding: var(--gap-4) 0; }
.pane-empty{ font-size: var(--t-fine); color: var(--ink-faint); }

/* The band headings were signposts down a long scroll. The rail carries that
   job now, so they go. */
.co-sections .band-h{ display: none; }

.co-sections details.sec{ display: none; border: 0; }
.co-sections details.sec.showing{ display: block; }

/* The chosen section is the page, so its heading is a page heading and is not
   a control any more. */
.co-sections details.sec.showing > summary{
  list-style: none; cursor: default; pointer-events: none;
  padding: 0 0 14px; margin-bottom: var(--gap-3);
  border-bottom: 1px solid var(--line-strong);
}
.co-sections details.sec.showing > summary::-webkit-details-marker{ display: none; }
.co-sections details.sec.showing > summary::marker{ content: ""; }
.co-sections details.sec.showing .sec-body{ padding: 0 0 var(--gap-5); max-width: 82ch; }
.co-sections details.sec.showing .sec-body .rf-grid,
.co-sections details.sec.showing .sec-body .act-table,
.co-sections details.sec.showing .sec-body table{ max-width: none; }

/* The website on the origination card, under the company name. */
.file-site{ margin: -2px 0 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.file-site a{ font-size: var(--t-body); color: var(--ink-2); }
.file-site a:hover{ color: var(--ink); }
.file-site-n{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
}

/* The introduction letter on the pursue screen. */
.intro-letter{ margin-top: 10px; }
.il-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.il-row .field-input{ flex: 1 1 240px; margin: 0; }
.intro-letter .mailbox{ min-height: 340px; }

.il-alts{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.il-alts-k{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint); margin-right: 2px;
}
.il-role{ color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

/* ---- To discuss internally ---------------------------------------------- */
.dd-add{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.dd-add .field-input{ margin: 0; }
.dd-add #dd-text{ flex: 1 1 300px; }
.dd-add #dd-who{ max-width: 150px; }

.dd-table{ border-top: 1px solid var(--line); }
.dd-row{
  display: grid;
  grid-template-columns: minmax(0,1fr) 140px 110px auto;
  gap: 10px; align-items: center;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.dd-row.done{ opacity: .55; }
.dd-row.done .dd-text{ text-decoration: line-through; }
.dd-text, .dd-who{
  font-family: var(--body); font-size: var(--t-body);
  background: none; color: var(--ink);
  border: 1px solid transparent; border-radius: 0; padding: 5px 6px; min-width: 0;
}
.dd-text:hover, .dd-who:hover{ border-color: var(--line); }
.dd-text:focus, .dd-who:focus{ border-color: var(--line-strong); outline: 2px solid var(--focus); outline-offset: -2px; }
.dd-when{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-wide);
  color: var(--ink-faint); white-space: nowrap;
}
.dd-done{ margin-top: 14px; }
.dd-done summary{
  cursor: pointer; font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-faint);
  padding: 8px 0;
}
@media (max-width: 760px){
  .dd-row{ grid-template-columns: 1fr; }
  .dd-when{ display: none; }
}

/* A company flagged for discussion sits in the same list as a typed topic. */
.dd-co{
  font-family: var(--body); font-size: var(--t-body); text-align: left;
  background: none; border: 0; padding: 5px 6px; color: var(--ink);
  cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-co:hover{ text-decoration: underline; }
.dd-who-s{ font-size: var(--t-fine); color: var(--ink-faint); padding: 0 6px; }

/* Awaiting response: the one thing she scans a stage for, so it reads at a
   glance without shouting like an overdue date does. */
.card-wait{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; white-space: nowrap; color: var(--info);
  margin-left: auto;
}
.card-wait + .card-flag{ margin-left: 10px; }

/* ==========================================================================
   The three standing columns at the top of the Daily page
   ========================================================================== */
.dcols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0 var(--gap-4);
  align-items: start;
}
.dcol{ border-top: 1px solid var(--ink); min-width: 0; }
.dcol-h{
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink);
  padding: 10px 0 8px;
}
.dcol-n{ color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.dcol-b{ border-top: 1px solid var(--line); }
.dcol-none{ font-size: var(--t-fine); color: var(--ink-faint); padding: 10px 0; }

/* Name, then its one piece of detail, then Done. Tight, because three of these
   have to sit across the page. */
.col-row{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 6px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.col-co, .col-text{
  font-family: var(--body); font-size: var(--t-fine); text-align: left;
  background: none; border: 1px solid transparent; border-radius: 0;
  padding: 4px 5px; color: var(--ink); cursor: pointer; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-text{ cursor: text; }
.col-co:hover{ text-decoration: underline; }
.col-text:hover{ border-color: var(--line); }
.col-text:focus{ border-color: var(--line-strong); outline: 2px solid var(--focus); outline-offset: -2px; }
.col-date{
  font-family: var(--mono); font-size: var(--t-label);
  background: none; color: var(--ink-2);
  border: 1px solid transparent; border-radius: 0; padding: 3px 4px; width: 118px;
}
.col-date:hover{ border-color: var(--line); }
.col-note{
  font-size: var(--t-label); color: var(--ink-faint);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.col-x{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-faint);
  background: none; border: 1px solid var(--line); border-radius: 0;
  padding: 3px 7px; cursor: pointer; white-space: nowrap;
}
.col-x:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

.col-add{ display: flex; gap: 5px; padding: 9px 0 0; flex-wrap: wrap; }
.col-add input, .col-add select{
  font-family: var(--body); font-size: var(--t-fine);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 0; padding: 5px 6px; min-width: 0;
}
.col-add input{ flex: 1 1 110px; }
.col-add select{ flex: 0 1 90px; }
.col-add button{
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: 0; padding: 5px 10px;
}

@media (max-width: 1000px){
  .dcols{ grid-template-columns: 1fr; gap: 10px; }
}

/* A meeting with no date yet shows as blank, not as dd/mm/yyyy shouting for
   attention. It comes back the moment she goes near it. */
.col-date.empty{ opacity: .18; }
.col-date.empty:hover, .col-date.empty:focus{ opacity: 1; border-color: var(--line); }

/* The + that opens the company picker on a column. */
.dcol-add{
  margin-left: auto; cursor: pointer;
  font-family: var(--mono); font-size: var(--t-fine); line-height: 1;
  background: none; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 0; padding: 2px 7px 3px;
}
.dcol-add:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dcol .col-add{ padding: 8px 0 10px; border-bottom: 1px solid var(--line); }