/* ====================================================================
   THE EARLY STAGE DEALROOM — the event skin.
   ====================================================================
   This sheet loads LAST, on top of rdy-noir.css (the component library)
   and app.css (page layout). It is the whole visual difference between
   this edition and rdy.vc, and it is deliberately small: two things
   changed, and everything else inherited.

     1. THE LIGHT. rdy is one violet on pure black. The event poster is a
        sphere — deep indigo at the top, violet at the bottom left, a
        blown-out orange on the right — and that sphere is the only
        decoration in the product. It sits behind every page, full size on
        the door and dimmed behind a working screen, the same way the film
        works on rdy.vc.

     2. THE VOICE. rdy sets display type lowercase and light. A poster
        shouts: display type here is UPPERCASE and heavy, tight, with
        emphasis carried by the sphere's own gradient poured into the
        letters. Everything that is not a display heading — labels,
        questions, body copy, rows — is untouched, because a poster voice
        applied to a form is a form nobody can read.

   THE RULE FROM THE HOUSE STILL HOLDS: nothing is a box, things are
   separated by hairlines, an input is an underline, and there is one
   button. New components below follow it.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   1. THE PALETTE — the poster's, not rdy's
   -------------------------------------------------------------------- */
:root{
  --accent:#ff6a1a;                     /* the orange side of the sphere */
  --accent-bright:#ff9552;              /* orange for small text on black */
  --accent-hover:#ff5100;
  --accent-soft:rgba(255,106,26,.16);
  --violet:#6b4bd8;                     /* the other side of it */
  --violet-soft:rgba(107,75,216,.18);
  --aur-1:#4a2ff0;
  --aur-2:#ff6a1a;
  /* the sphere, as a gradient anything can pour into itself */
  --sweep:linear-gradient(96deg,#5b3df5 0%,#8b4bd0 38%,#ff6a1a 78%,#ff9552 100%);
  --sect:clamp(60px,6.5vw,104px);
}
::selection{background:var(--accent);color:#fff}
mark{background:var(--accent-soft);color:#ffd0b0}
.chip.accent{border-color:rgba(255,106,26,.5);color:var(--accent-bright)}
.savestate.on{color:var(--accent-bright)}
.fprog i{background:var(--sweep)}

/* WHITE ON WHITE. The house pill fills with off-white on hover and turns its
   label black; `.on` — the tab you are already on — sets its label to white,
   is written later, and carries the same weight, so it won the colour and
   lost the fill: the page you are standing on became unreadable the moment
   you pointed at it. Hovering the current tab now fills orange instead,
   which is the one colour in this product that already means "yours". */
.pill.on:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* THE HAT SWITCH IS NOT A TAB. An organiser who is also an investor has two
   products behind one login, and the pill that crosses between them sits in
   the same row as the pills that move around inside one. Violet — the other
   half of the sphere, and the one accent the room never uses for a page you
   are on — says "somewhere else entirely" without a second shape. */
.pill.hat{border-color:rgba(107,75,216,.55);color:#cfc2ff}
.pill.hat:hover{background:var(--violet);border-color:var(--violet);color:#fff}
/* the same collision, one row further in: a picked founder's button is
   already filled, so the house's pale hover fill has nothing to add */
.pickbtn.on:hover,.pickbtn.on:focus-visible{background:var(--accent-hover);
  border-color:var(--accent-hover);color:#fff}

/* --------------------------------------------------------------------
   2. THE SKY

   A real place now, not a painting of one: sky.js runs a three.js scene
   on the one canvas below — an unseen light walking the left edge of the
   page, two planets carrying day and night sides as it goes, gas far
   behind everything, and a camera that leans with the cursor. Depth is
   geometry there, not layer order here.

   WHAT CSS STILL OWNS. The void (the radial gradient under a transparent
   canvas, so a machine with no WebGL still gets the right night), the
   veil (legibility is a 2D problem and stays one), and `--dim`: the
   canvas dims, blurs and desaturates through the same custom property
   the old sky used, so `body.deal` (a working list) and `body.formspace`
   (one question on a screen) still pull the whole sky back with a single
   declaration — a planet behind a list of people is noise on somebody's
   pitch.
   -------------------------------------------------------------------- */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  --dim:1;--veil-flat:rgba(4,3,12,0);
  background:radial-gradient(122% 104% at 76% 2%,#1b1149 0%,#130c34 30%,#08051c 62%,#04030c 100%)}
.sky>*{position:absolute;display:block}

/* ---- THE GAS. Two enormous soft blooms, blue-violet high on the left and
   purple low of centre, that the scene used to draw as additive sprites
   the size of the frame. They drifted — by about a twelfth of a screen
   over a minute, which is to say invisibly — and charged two full-screen
   blended passes on every single frame for the privilege. Here they cost
   nothing, sit in the same place, and dim through the same --dim, which
   is why they are on ::before rather than in .sky's own background: the
   void has to stay lit when the sky steps back. Paints before the canvas
   because a generated first child does. ---- */
.sky::before{content:'';position:absolute;inset:0;opacity:var(--dim);
  transition:opacity 1.2s var(--ease);
  background:
    radial-gradient(56% 90% at 31% 31%,rgba(90,53,232,.28) 0%,
      rgba(90,53,232,.07) 55%,rgba(90,53,232,0) 100%),
    radial-gradient(41% 66% at 59% 74%,rgba(138,79,230,.17) 0%,
      rgba(138,79,230,.042) 55%,rgba(138,79,230,0) 100%)}

/* ---- the scene. The canvas fills the sky and answers to --dim like
   every layer before it did ---- */
.sky #sky3d{inset:0;width:100%;height:100%;opacity:var(--dim);
  transition:opacity 1.2s var(--ease),filter 1.2s var(--ease)}

/* ---- the veil. Everything under it is decoration; this is the layer
   that decides whether the product can be read. ---- */
.sky .veil{inset:0;transition:background 1.2s var(--ease);
  background:
    linear-gradient(var(--veil-flat),var(--veil-flat)),
    linear-gradient(101deg,rgba(4,3,12,.88) 0%,rgba(4,3,12,.72) 18%,
      rgba(4,3,12,.32) 40%,rgba(4,3,12,.06) 62%,rgba(4,3,12,0) 80%),
    /* THE FORM SITS ON THE LIT SIDE. Everything else on the door is on the
       dark left, but the account column is over the top of the planet, so
       the veil carries one more falloff for it: no edge, no box, just the
       upper right losing two thirds of its light. The bottom right — the
       limb and the bloom — is deliberately left alone. */
    radial-gradient(76% 58% at 80% 20%,rgba(4,3,12,.66) 0%,rgba(4,3,12,.34) 44%,rgba(4,3,12,0) 78%),
    radial-gradient(130% 74% at 50% 0%,rgba(4,3,12,.5) 0%,rgba(4,3,12,.14) 44%,rgba(4,3,12,0) 74%),
    linear-gradient(to top,rgba(4,3,12,.72) 0%,rgba(4,3,12,.12) 26%,rgba(4,3,12,0) 52%)}

/* a working screen: the whole scene steps back and goes soft, because
   what is left of it has no business competing with somebody's pitch */
/* .dimsky is the same wall asked for by a page that is neither: the
   timetable scrolls the document rather than a band of its own, so it has no
   #dscroll for the router to notice, and eighteen slot rows read over a
   full-strength planet are unreadable. See initSchedule(). */
body.deal .sky,body.formspace .sky{--dim:.4;--veil-flat:rgba(4,3,12,.42)}
/* AND THE TIMETABLE GOES FURTHER THAN THE LIST DOES, because it is the one
   working page that scrolls the document: the room's band is one screen and
   the scene behind it never moves, while this page drags eighteen rows of
   small type across a planet's limb. Same wall, one stop heavier — the scene
   is still there, it is just behind something. */
body.dimsky .sky{--dim:.16;--veil-flat:rgba(4,3,12,.78)}
/* a 14px gaussian over a full-screen layer that changes every frame is one
   of the most expensive things a page can ask a compositor for. sky.js
   renders the canvas at a quarter scale here, and the upscale to CSS pixels
   is already most of a blur — this radius is only there to take the
   bilinear diamonds off it. Same wash, a fraction of the bill. */
body.deal .sky #sky3d,body.formspace .sky #sky3d,body.dimsky .sky #sky3d{filter:blur(6px) saturate(1.1)}

@media (max-width:900px){
  /* the words sit ON the sky on a phone, so the veil leans harder */
  .sky .veil{background:
    linear-gradient(var(--veil-flat),var(--veil-flat)),
    linear-gradient(101deg,rgba(4,3,12,.92) 0%,rgba(4,3,12,.84) 20%,
      rgba(4,3,12,.6) 44%,rgba(4,3,12,.3) 66%,rgba(4,3,12,.08) 86%),
    radial-gradient(140% 60% at 50% 0%,rgba(4,3,12,.66) 0%,rgba(4,3,12,0) 70%),
    linear-gradient(to top,rgba(4,3,12,.8) 0%,rgba(4,3,12,.16) 30%,rgba(4,3,12,0) 56%)}
  body.deal .sky,body.formspace .sky{--dim:.3}
  body.dimsky .sky{--dim:.12}
}
/* sky.js reads prefers-reduced-motion itself and renders one still frame */

/* --------------------------------------------------------------------
   3. THE VOICE — display type only

   Uppercase, 700, tight, and negative tracking so a long word still
   reads as one shape. `em` inside a display heading stops being italic
   and becomes the sphere's gradient poured into the letters: emphasis
   is a colour here, not a slant.
   -------------------------------------------------------------------- */
h1.big,h2.big,.fgate-h,.door-h,.detail .dhead-main h1,.psec.lg{
  text-transform:uppercase;font-weight:700;letter-spacing:-.02em;line-height:.95}
h1.big em,h2.big em,.fgate-h em,.door-h em,.door-fh em,.detail .dhead-main h1 em,.psec.lg em,.em{
  font-style:normal;font-weight:700;
  background:var(--sweep);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* a divider heading is a small poster line, not a paragraph opener */
.psec{text-transform:uppercase;font-weight:700;letter-spacing:.005em;
  font-size:clamp(16px,1.7vw,21px)}
.psec.sm{text-transform:uppercase;font-size:clamp(13px,1.2vw,15px);letter-spacing:.06em}
.sect-sub{font-weight:400}
/* THE BAR IS GLASS, NOT PAINT. rdy.vc puts a solid black strip across the
   top; here that strip would cut the sky in half. So there is no colour in
   it at all — only a blur of whatever is behind it, which is what keeps the
   type on it legible without a fill. Scrolled it blurs harder and takes the
   faintest tint, because by then there is body copy passing underneath. */
header.topbar{background:transparent;border-bottom-color:rgba(255,255,255,.07);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  transition:background .45s var(--ease),height .45s var(--ease),
    border-color .45s var(--ease),backdrop-filter .45s var(--ease)}
header.topbar.scrolled{background:rgba(4,3,12,.28);
  backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15)}

/* ---- THE TWO ORGANISERS, TOP LEFT. This is not a credit, it is THE mark
   of the event: both organisers at full strength — rdy, a hairline cross,
   syndicate one — and clicking it is the way home.

   IT LIVES IN THE CORNER BECAUSE THE CORNER IS WHERE HOME IS. It spent a
   while dead centre, which read better and worked worse: a centred mark is
   a decoration until you find out it is a button, and staying centred meant
   being absolutely positioned, so it was in a standing argument with every
   door on the right and gave up the middle on a phone regardless. In the
   corner it is in the flow of the bar, it never moves, and it only gets
   smaller. ---- */
.cobrand{display:inline-flex;align-items:center;gap:13px;opacity:.94;
  flex-shrink:0;transition:opacity .4s var(--ease)}
.cobrand:hover,.cobrand:focus-visible{opacity:1}
.cobrand img{display:block;width:auto}
.cobrand .cb-rdy{height:17px}
.cobrand .cb-syn{height:12.5px;transform:translateY(.5px)}
.cobrand .cb-x{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--muted);
  opacity:.8;transform:translateY(-.5px)}
@media (max-width:640px){
  .cobrand{gap:9px}
  .cobrand .cb-rdy{height:14px}
  .cobrand .cb-syn{height:10px}
  .cobrand .cb-x{font-size:9px}}

/* ---- ROOM FOR THE DOORS. The bar carries the whole navigation now —
   profile, schedule, and the founder list for an investor — and with the
   lockup in the corner the two sides share one flex row, so a narrow bar is
   the doors giving ground rather than a collision in the middle. Both things
   that go are things you still have: the identity chip is the same door as
   the profile pill, and log out is on the profile page. ---- */
@media (max-width:1040px){ .actions button.who{display:none} }
@media (max-width:820px){ .actions .logout-pill{display:none} }
/* ---- AND UNDER 760 THE BAR STOPS GIVING GROUND AND CHANGES SHAPE.
   Everything below this width used to be more of the same: tighter gaps,
   smaller type, and then the organiser's hat dropped at 520 behind a `:has`
   that checked whether hiding it would shut them in the back office. It
   still did not fit at 375, and what was left was the founder list running
   off the right edge with nothing to say it was there — three doors gone on
   the width where every one of them is the only route to its page.

   So a phone gets one button and a drawer instead, and every door comes
   back at the size of a thumb: mobile.css §1 and §2, out of the same list
   the pills above are drawn from (doorList() in app.js). The pills are not
   restyled down here any more — they are not on the screen. ---- */

/* --------------------------------------------------------------------
   4. THE DOOR — one column, centred, and four screens deep.

   IT WAS A POSTER THAT FIT AND IT IS A SCROLL NOW. Two columns and four
   sections inside one viewport meant every part of this page was sized by
   what was left over from the others: a floor under the form so opening it
   did not shove the wall down, faces at 52px because they were the fourth
   row, margins in vh so the page could give way at 760px of height.

   The first screen is the name of the event and the two ways in, centred,
   and the arrow at its foot says the page carries on. Then the wall, then
   the panel, then the dates — one under the other, each with room, each
   arriving as a reveal. Nothing is sized by what is left over any more.
   It is still the only page in the product that gets the sphere at full
   strength, and the only one that is allowed to be a poster.
   -------------------------------------------------------------------- */
.door-wrap{display:flex;flex-direction:column;max-width:var(--w);margin:0 auto;
  text-align:center;gap:clamp(76px,13vh,152px)}
/* THE FIRST SCREEN IS A SCREEN, and the height it asks for is the viewport
   minus the top padding that clears the fixed bar — so the arrow at its foot
   lands just above the fold rather than under it. dvh, because on a phone vh
   is the address bar's opinion and the section would be one bar too tall. */
.door-first{display:flex;flex-direction:column;align-items:center;
  min-height:calc(100dvh - clamp(150px,19vh,210px))}
/* TWO AUTO MARGINS, NOT justify-content:center. The arrow belongs at the foot
   of the section and the title belongs in the middle of what is left, and one
   auto margin would give all the slack to the arrow and leave the title against
   the top edge. Two of them split the slack: the air above the title equals the
   air under the doors, and the ring sits on the bottom edge. */
.door-first .door-hero{margin-top:auto}

.door-kick{margin:0 0 clamp(18px,2.4vw,26px);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted2)}
/* THE TITLE IS THE FIRST SCREEN, so it is the size of one: it has no form
   beside it to leave room for and nothing under it but two lines. */
.door-h{margin:0;font-size:clamp(46px,9.6vw,148px);text-transform:uppercase;font-weight:700;
  letter-spacing:-.025em;line-height:.88}
/* the qualifier steps back so it holds one line; the name keeps full size */
.door-h .door-h-top{display:block;font-size:.55em;letter-spacing:-.015em;white-space:nowrap}
.door-lead{margin:clamp(20px,2.6vw,30px) auto 0;max-width:36ch;
  font-size:clamp(17px,1.7vw,21px);font-weight:500;line-height:1.45;color:var(--ink)}
/* the two ways in, under the title: a column the width of a paragraph,
   centred on the page, with its own rows still read from the left */
.door-form{width:100%;max-width:min(560px,100%);margin:clamp(30px,5vh,56px) auto 0;
  text-align:left}
.door-form .backlink{margin-bottom:14px}

/* ---- THE ARROW AT THE FOOT OF THE FIRST SCREEN. A page that ends at the
   fold and a page that continues past it look identical until something
   points down, and this page now genuinely continues: three sections of it.
   It is a white ring rather than the house ↗ because it is not a link to
   somewhere — it is the page saying which way it goes. It nudges, slowly,
   and it is a real button: pressing it takes you to the first thing below.

   IT IS PUSHED TO THE BOTTOM AND NOT PLACED THERE. margin-top:auto inside
   the centred flex column leaves the title and the doors optically centred
   and puts the ring at the bottom edge of the section, whatever the form
   above it is currently doing. ---- */
.scrolldown{display:block;margin:auto 0 0;padding:clamp(30px,6vh,72px) 10px 0;
  background:none;border:0;cursor:pointer;color:#fff}
.sd-ring{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  animation:sd-nudge 2.4s var(--ease) infinite;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.sd-ring svg{width:17px;height:17px;display:block}
.scrolldown:hover .sd-ring{border-color:#fff;background:rgba(255,255,255,.09)}
@keyframes sd-nudge{0%,58%,100%{transform:translateY(0)}78%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.sd-ring{animation:none}}
/* the form is open, so the first screen has a job on it and the arrow is a
   second thing to press on a screen that is now asking for a password */
.door-first:has(.form-grid) .scrolldown{display:none}
/* ---- AND ON A SHORT SCREEN THE FIRST SCREEN GIVES WAY, because the arrow is
   the whole point of it: a ring the fixed footer is sitting on top of says the
   page ends here, which is the opposite of what it is for. 1280×720 and
   1440×810 are the two that do not fit at full size — the title comes down a
   size, the lead and the doors tighten, and the ring lands clear of the footer
   with the two ways in still the second thing on the page. ---- */
@media (max-height:860px) and (min-width:761px){
  .door-h{font-size:clamp(44px,7.2vw,104px)}
  .door-lead{margin-top:clamp(14px,1.8vw,22px);font-size:clamp(16px,1.5vw,19px)}
  .door-form{margin-top:clamp(18px,3.4vh,34px)}
  .sidecard{padding:clamp(13px,1.7vw,19px) 0}
  .door-alt{margin-top:16px}
  .scrolldown{padding-top:clamp(14px,3vh,34px)}
}
/* ---- NO FLOOR UNDER THE FORM ANY MORE. There used to be a 380px minimum on
   this box, and it was there because the poster and the form were two columns
   of one grid: everything under them shared a row, so a form growing when you
   pressed "sign in" shoved the wall, the faces and the dates a hundred pixels
   down the page. Nothing is beside the form now and nothing is in the same
   screen as it, so the three states can be the three heights they are.
   The tighter row-gap stays — 32px between underline fields is the grammar of
   a full-page questionnaire, not of the box under a title. ---- */
.door-form .form-grid{row-gap:clamp(14px,2.2vh,20px)}

/* an amount you type. Lining figures, so 750,000 and 1,250,000 have the
   same digit width and a column of them is comparable at a glance. */
.fld input.money{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.door-fh{margin:0 0 6px;font-size:clamp(22px,2.4vw,30px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05}
.door-form .qa-label{margin:0 0 14px}
.door-alt{margin:22px 0 0;font-size:13.5px;font-weight:400;color:var(--muted);text-align:center}
.door-alt .tlink{font-size:13.5px}
.fmsg{margin:14px 0 0;font-size:13.5px;font-weight:400;line-height:1.6;color:var(--ink);min-height:1.2em}

/* ---- the two sides. A door, not a card: a hairline, a heavy word, and the
   arrow that says it opens. Nothing explains itself here — the next screen
   is the explanation. ---- */
.sidecards{display:flex;flex-direction:column}
.sidecard{display:flex;justify-content:space-between;align-items:center;gap:18px;
  width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--divider);
  padding:clamp(18px,2.2vw,24px) 0;cursor:pointer;font:inherit;
  transition:padding-left .35s var(--ease)}
.sidecard:last-child{border-bottom:1px solid var(--divider)}
.sidecard:hover:not(:disabled){padding-left:10px}
.sc-t{font-size:clamp(19px,2.1vw,25px);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.05;color:var(--ink);transition:color .3s var(--ease)}
.sidecard:hover:not(:disabled) .sc-t{color:#fff}
.sc-go{display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);
  white-space:nowrap}
.sidecard:hover:not(:disabled) .sc-go{color:var(--accent-bright)}
.sidecard:hover:not(:disabled) .sc-go .circ{transform:rotate(45deg);border-color:var(--accent)}
.sidecard.shut{opacity:.4;cursor:default}

/* ---- THE WALL: WHO IS ALREADY COMING, AS A WALL ---------------------------
   The first section past the fold, because it is the argument for the two
   doors above it. It used to be two marquees sliding in opposite directions —
   the only way a row of funds could fill a page with no room for a second row
   — and the price was that you could not read it: a name you had started
   leaves the screen, and both ends of every row were behind an edge mask.

   IT IS A GRID OF HAIRLINES NOW. Two rows of equal columns, every fund on the
   screen at once, nothing moving. `--n` comes off the markup (auth.js iwWall)
   because the column count is the list's length, not a breakpoint's opinion.

   THE HAIRLINES ARE BORDERS AND NOT A GAP OVER A FILL. The one-pixel-gap
   trick needs every cell opaque, and the sky behind this page is a moving
   canvas — twelve opaque cells would be twelve holes in it. So: a rule above
   and below the block, one between the rows, and a left border on every cell
   but the first of its row. ---- */
.iwall{min-width:0}
.iw-title{margin:0 0 clamp(20px,2.6vw,30px);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted2);text-align:center}
.iw-wall{border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.iw-line{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.iw-line + .iw-line{border-top:1px solid var(--divider)}
/* a cell is a plate of the wall, not a slot in a track: it takes its share of
   the width and it is tall enough for the row to read as a band */
.iw-cell{display:flex;align-items:center;justify-content:center;min-width:0;
  height:clamp(76px,8.4vw,112px);padding:0 clamp(10px,1.4vw,20px);
  border-left:1px solid var(--divider);
  opacity:.72;transition:opacity .3s var(--ease),background .3s var(--ease)}
.iw-line>.iw-cell:first-child{border-left:0}
.iw-cell:hover{opacity:1;background:rgba(255,255,255,.03)}
/* the padding cells that square off a half-empty last row: they hold the
   column, and there is nothing in them to light up */
.iw-cell.empty{pointer-events:none}
.iw-word{display:block;max-width:100%;font-size:clamp(14px,1.5vw,18px);font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;text-align:center;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis}
/* a fund's own mark, in the wall's ink rather than its own. brightness(0)
   flattens whatever colours the file has to black with its shape intact,
   invert(1) lifts that to white — so a logo lands as a silhouette at the
   same weight as the names beside it, and no logo brings its own plate. */
.iw-mark{display:block;max-width:100%;max-height:clamp(24px,3vw,38px);width:auto;
  object-fit:contain;filter:brightness(0) invert(1)}

/* --------------------------------------------------------------------
   5. THE ROOM — what this product adds to the rdy card

   A card here is not only somebody to open, it is somebody to CHOOSE, so
   it grows a foot: how much of their afternoon is left on the left, the
   one control on the right. A chosen card carries the orange rule down
   its left edge — the only place in the product where a colour means
   "mine".
   -------------------------------------------------------------------- */
.plist{min-height:1px}

/* ---- THE CARD IS LED BY TWO MARKS, so it is built as three lines rather
   than the rdy card's wordmark-on-top: a face with the name beside it, the
   company under them, and the sentence that earned the card at the foot.
   The round face is why the box is rounder here than on the rdy site —
   a 3px corner beside a 46px circle reads as a mistake. ---- */
.pcard.rcard{gap:11px;border-radius:10px;padding:clamp(13px,1.1vw,17px);position:relative}
/* ---- the corner mark that says the card opens. Same arrow and the same
   45° turn on hover as every row in the product, at row scale rather than
   card scale so it reads as a hint and not a second button. It is
   pointer-events:none on purpose: the target is the whole card. ---- */
.pc-open{position:absolute;top:10px;right:10px;width:22px;height:22px;pointer-events:none;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--line-soft);color:var(--muted2);opacity:.62;
  transition:transform .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),opacity .3s var(--ease)}
.pc-open svg{width:10px;height:10px}
.pcard.click:hover .pc-open{transform:rotate(45deg);opacity:1;color:#fff;border-color:var(--ink)}
.pcard.picked .pc-open{border-color:rgba(255,106,26,.45);color:var(--accent);opacity:1}
/* …and the name stops where the arrow starts, so a long one never runs under it */
.pc-head{display:flex;align-items:center;gap:12px;min-width:0;padding-right:24px}
.pc-head .pc-id{flex:1 1 auto}
/* a face is a circle and fills it; initials are the same circle with a
   hairline and the two letters centred, so no card is missing a shape */
.pc-av{width:46px;height:46px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:rgba(255,255,255,.028);font-size:13.5px;color:var(--muted);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.pc-av b{font-weight:600;letter-spacing:.01em}
.pc-av.has-img{border-color:transparent;background:none}
.pc-av.has-img b{display:none}
.pc-av img{width:100%;height:100%;object-fit:cover;display:block}
.pcard:hover .pc-av{border-color:var(--line-strong)}
.pcard.picked .pc-av{border-color:rgba(255,106,26,.45)}

/* the company line. The chip goes to the end of it, which is what took
   the top line off the card entirely. */
.pc-org{display:flex;align-items:center;gap:8px;min-width:0}
.pc-org .chip{flex:0 0 auto;margin-left:auto;white-space:nowrap}
.pc-orgmark{width:26px;height:26px;flex:0 0 auto;border:1px solid var(--line);border-radius:5px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:9.5px;color:var(--muted2);transition:background .3s var(--ease)}
.pc-orgmark b{font-weight:600;letter-spacing:.02em}
/* A WORDMARK IS WIDE. Squeezing one into a 26px square makes a grey smudge,
   so with a file the plate keeps its height and takes the width the image
   needs, up to a third of the card; without one it stays a square, because
   two letters in a wide box is a box with a gap in it. */
.pc-orgmark.has-logo{width:auto;min-width:26px;max-width:112px;
  background:#f4f4f4;border-color:transparent;padding:3px 6px}
/* the same square, empty, when there is no company: the line below still
   starts where every other card's does */
.pc-orgmark.none{border-style:dashed;border-color:var(--line-soft)}
.pc-orgmark.has-logo b{display:none}
.pc-orgmark img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pcard:hover .pc-orgmark.has-logo{background:#fff}
/* one line, ellipsis — the rdy card lets a wordmark wrap to two because it
   is the top of that card; here it is a caption under a name */
.pc-org .pc-word{display:block;font-size:12.5px;font-weight:400;color:var(--muted2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pcard:hover .pc-org .pc-word{color:var(--ink)}

/* the foot. With nothing on the left — a card already chosen — the button
   keeps the right edge instead of sliding under the name. */
.pc-foot{margin-top:10px;padding-top:11px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:flex-end;gap:10px}
.pc-left{margin-right:auto;font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickbtn{flex:0 0 auto;border:1px solid var(--line-strong);background:none;color:var(--ink);
  border-radius:var(--pill-radius);padding:5px 13px;font:inherit;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.pickbtn:hover:not(:disabled){border-color:var(--accent);color:#fff;background:var(--accent-soft)}
.pickbtn.on{border-color:var(--accent);background:var(--accent);color:#fff}
.pickbtn.on:hover{background:var(--accent-hover)}
.pickbtn:disabled{color:var(--ink-ghost);border-color:var(--line-soft);cursor:default}
.pcard.picked{border-color:rgba(255,106,26,.42);background:rgba(255,106,26,.045)}
.pcard.picked:hover{border-color:var(--accent)}
.pickmeter{font-size:12.5px;font-weight:400;color:var(--muted2);white-space:nowrap}
.pickmeter b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.warnhint{color:var(--warn)}
/* the search line is one line among rows here, not a question alone on a
   screen */
.dr.browse .dr-ask{padding-top:clamp(10px,2vh,22px)}

/* --------------------------------------------------------------------
   6. MARKS — a logo gets paper, a face gets a circle

   Same reason as the rdy dealroom: a mark is an image, and a founder's
   PNG is as likely to be dark ink as white, so it sits on a near-white
   plate. A photograph does not need paper — it needs to be round and to
   fall back to initials when there is no file.
   -------------------------------------------------------------------- */
.orgmark{width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);border-radius:4px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:13px;font-weight:700;color:var(--muted2)}
.orgmark.has-logo{background:#f4f4f4;border-color:transparent;padding:5px}
.orgmark.has-logo b{display:none}
.orgmark img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.orgmark.big{width:64px;height:64px;font-size:19px}
.rows .row .orgmark{align-self:center}

.avatar-plate{width:72px;height:72px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:22px;font-weight:700;color:var(--ink-ghost)}
.avatar-plate.has-logo{border-color:transparent}
.avatar-plate.has-logo b{display:none}
.avatar-plate img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.has-img{overflow:hidden;border-color:transparent}
.avatar.has-img b{display:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar b{font-weight:700}
.file-pill.off{opacity:.4;cursor:default}
.fsaved{font-size:12px;font-weight:400;color:var(--muted2);display:inline-block;margin-top:10px}
.fsaved b{font-weight:700;color:var(--accent-bright)}

/* the org picker inside registration: rows with a mark in front */
.orglist{max-height:min(46vh,380px);overflow-y:auto;margin-top:6px}
.orglist .row{grid-template-columns:auto minmax(0,1fr) auto;gap:14px}

/* --------------------------------------------------------------------
   7. YOUR AFTERNOON — the timetable as a column of slots

   A slot is a row with the number and the clock leading it, because the
   two questions somebody has of this page are "when" and "who", in that
   order. An empty slot is drawn, not skipped: the gap is the information.
   -------------------------------------------------------------------- */
.slots{margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--divider)}
.slot{display:grid;grid-template-columns:34px 96px 40px minmax(0,1fr) auto;gap:clamp(10px,1.4vw,18px);
  align-items:center;padding:clamp(12px,1.5vw,17px) 0;border-bottom:1px solid var(--divider);
  transition:padding-left .35s var(--ease),background .3s var(--ease)}
.slot:not(.free){cursor:pointer}
.slot:not(.free):hover{padding-left:9px;background:rgba(255,255,255,.02)}
.slot.free{opacity:.5}
.sl-n{font-size:12.5px;font-weight:700;color:var(--muted2);font-variant-numeric:tabular-nums}
.sl-t{font-size:13px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sl-mark{width:36px;height:36px;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--muted2)}
.sl-mark.has-logo{background:#f4f4f4;border-color:transparent;padding:4px}
.sl-mark.has-logo b{display:none}
.sl-mark img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sl-mark.empty{border-style:dashed;border-color:var(--line-soft)}
.sl-who{min-width:0}
.sl-nm{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s var(--ease)}
.slot:hover .sl-nm{color:#fff}
.sl-nm.off{font-weight:400;color:var(--ink-ghost)}
.sl-sub{font-size:12.5px;font-weight:400;color:var(--muted2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-end{display:flex;gap:10px;align-items:center;white-space:nowrap}
.sl-end .rarrow{width:16px;height:16px;opacity:.5}
.slot.filler .sl-nm{font-weight:500}
@media (max-width:640px){
  .slot{grid-template-columns:28px minmax(0,1fr) auto;row-gap:4px}
  .sl-t{grid-column:2;grid-row:2;font-size:12px}
  .sl-mark{display:none}
  .sl-end .rarrow{display:none}
}

/* --------------------------------------------------------------------
   8. THE ORGANISERS' SCREENS
   -------------------------------------------------------------------- */
/* one request, read whole. It is the one place in the product that IS a
   block with an edge, because a decision needs a boundary around the
   thing being decided. */
.reqcard{border:1px solid var(--divider);border-radius:6px;padding:clamp(18px,2.2vw,26px);
  margin-bottom:clamp(16px,2vw,22px);background:rgba(255,255,255,.014)}
.reqcard .lead{margin:18px 0 0;font-size:16px}
.rq-head{display:flex;gap:clamp(14px,1.8vw,20px);align-items:flex-start;flex-wrap:wrap}
.rq-id{flex:1;min-width:220px}
.rq-id h3{margin:0;font-size:clamp(19px,2.1vw,25px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.012em;line-height:1.05}
.rq-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rq-facts{display:flex;gap:clamp(18px,2.6vw,40px);flex-wrap:wrap;margin:22px 0 4px;
  padding:16px 0 0;border-top:1px solid var(--line-soft)}
.reqcard .roq{margin:22px 0 0}
.reqcard .roq.off{opacity:.45}
.reqcard .roq p.none{font-style:italic;color:var(--muted2)}

/* the timetable, slot by slot */
.planwrap{margin-top:8px}
.planslot{border-top:1px solid var(--divider);padding:clamp(12px,1.6vw,18px) 0}
.ps-head{display:flex;gap:14px;align-items:baseline;margin-bottom:6px}
.ps-head b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.ps-head span{font-size:12.5px;font-weight:400;color:var(--muted2);font-variant-numeric:tabular-nums}
.ps-head .count{margin-left:auto}
.planslot .rows .row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:14px;align-items:center}
@media (max-width:760px){
  .planslot .rows .row{grid-template-columns:minmax(0,1fr) auto}
  .planslot .rows .row .rmeta:nth-child(2){display:none}
}

/* A PASSWORD, SHOWN ONCE. Monospace so a letter cannot be mistaken for a
   number, and text-transform:none because the house lowercases every name in
   a row — which on a credential is not a style, it is a wrong value. */
.credline{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  letter-spacing:0;text-transform:none;color:var(--ink);user-select:all}

.mailbody{max-width:70ch;margin-top:26px;border-top:1px solid var(--divider);padding-top:22px}
.mailbody p{font-size:15.5px;line-height:1.75;color:var(--ink2);margin:0 0 18px;white-space:pre-wrap}

/* ---- the letter, previewed. The second thing in this product with an
   edge around it, and for the same reason as the request card: this is not
   our page, it is somebody else's inbox quoted on ours, and a quote needs a
   boundary. The body deliberately does NOT inherit the house type — it is
   Helvetica at 15px because that is what the edge function inlines, and a
   preview that flatters the letter is worse than none. ---- */
.mailprev{max-width:72ch;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.02)}
.mp-head{padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
  font-size:13px;line-height:1.9;color:var(--ink2)}
.mp-l{display:inline-block;min-width:64px;text-transform:uppercase;letter-spacing:.09em;
  font-size:10px;font-weight:600;color:var(--muted)}
.mp-note{margin-left:8px;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  opacity:.7}
.mp-body{padding:22px 20px 6px;font-family:Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6}
.mp-body p{margin:0 0 16px;color:var(--ink2)}
/* the letter renders in its own document. It carries its own colours, its
   own widths and a table layout; dropped into this page it would inherit the
   house stylesheet and stop being a preview of anything. */
.mp-frame{display:block;width:100%;height:780px;border:0;background:#04030c}
code.mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  letter-spacing:-.01em;color:var(--accent)}

/* --------------------------------------------------------------------
   9. A PROFILE, OPENED

   The house rule is that nothing is a box. A profile is the third place
   in this product that breaks it, and for the same reason the request
   card does: this page is TWO subjects — a person and a company — and
   with no edge between them the company's facts read as more sentences
   about the person. So the company gets one bordered unit with its mark
   at the head, its website as the button it always was, and the four
   facts laid ACROSS it rather than down: they are four values of two
   words each, and a column of those was most of a screen of scrolling
   to learn where somebody is based.

   The hairlines between the facts are the grid's own gap showing
   through, which is the only way to draw them that survives the cells
   wrapping to a second row on a narrow screen.
   -------------------------------------------------------------------- */
.detail .dhead{align-items:flex-start;margin-bottom:clamp(18px,2.2vw,26px)}
.detail .dhead .avatar{width:64px;height:64px;font-size:21px}
.detail .dhead-main .meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:9px}
.detail .dabout{margin:0 0 clamp(22px,2.6vw,32px)}

.dorg{border:1px solid var(--divider);border-radius:7px;overflow:hidden;
  background:rgba(255,255,255,.014);margin:0 0 clamp(26px,3.2vw,40px)}
.dorg-head{display:flex;gap:clamp(14px,1.8vw,20px);align-items:center;flex-wrap:wrap;
  padding:clamp(16px,2vw,22px)}
.dorg-id{flex:1;min-width:180px}
.dorg-name{font-size:clamp(17px,1.9vw,22px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.012em;line-height:1.1;color:#fff}
.dorg-line{margin:7px 0 0;font-size:14.5px;font-weight:400;line-height:1.6;color:var(--muted);
  max-width:56ch}
.dorg-go{flex:0 0 auto}
/* the website and the deck, stacked at the end of the head. Two pills side
   by side push the one-liner into a column on a narrow panel, so they sit
   above one another and take the width they need. */
.dorg-links{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:8px}

/* the facts, side by side. Every cell carries its own left and top
   hairline and then pulls itself a pixel over the neighbour's, so the
   lines never double up — and the ones that land on the panel's own edge
   are clipped by its overflow, which is what keeps a wrapped second row
   from growing a stray line down the outside. The cells stay transparent:
   this panel is a tint over the sky, not a lid on it. */
.dorg-head:has(+ .dfacts){border-bottom:1px solid var(--divider)}
.dfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.dfacts .fact{padding:clamp(13px,1.5vw,16px) clamp(14px,1.8vw,18px);
  border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft);
  margin:-1px 0 0 -1px}
.dfacts .fl{color:var(--muted2);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:5px}
.dfacts .fv{color:#fff;font-size:15px;font-weight:500;line-height:1.4}
.dfacts .fv .off{color:var(--ink-ghost);font-weight:400}

/* ---- AND THE SAME BAND OUTSIDE A PANEL. `.facts` is the house sheet's
   label-over-value pair and there it is a column, which is right where it
   came from: two or three facts down the side of an open drawer. Every use of
   it in this product is a counter strip at the top of a screen — seven of
   them on the founders tab — and stacked that is eight hundred pixels of
   numbers standing between an organiser and the list they came to read.
   So it is the same band as .dfacts, in the same grammar, and it earns the
   clipping .dfacts got from its panel with an overflow of its own: each cell
   pulls a pixel over its neighbour so no line doubles, and the ones that fall
   on the strip's own edge are cut. The rule above and below is what makes it
   a band rather than a row of numbers nobody drew a box around. ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  gap:0;overflow:hidden;font-size:15px;
  border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.facts .fact{padding:clamp(12px,1.4vw,15px) clamp(12px,1.5vw,17px);
  border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft);
  margin:-1px 0 0 -1px}
.facts .fl{margin-bottom:5px;color:var(--muted2);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.35}
.facts .fv{color:#fff;font-size:15px;font-weight:500;line-height:1.4}
.facts .fv .off{color:var(--ink-ghost);font-weight:400}

/* ---- THE ANSWERS. A section is a stretch with a rule over it, and inside
   it a question is small, quiet, and carries the orange edge; the answer is
   the bright type under it. Nothing here is uppercase except the section
   heading — a question in poster voice is a question nobody reads. ---- */
.dqsec{border-top:1px solid var(--divider);padding-top:clamp(16px,2vw,22px);
  margin-top:clamp(26px,3.2vw,40px)}
.dqsec .psec{margin:0 0 clamp(14px,1.8vw,20px)}
.detail .roq{margin:0;padding:clamp(14px,1.7vw,19px) 0;border-bottom:1px solid var(--line-soft)}
.dqsec .roq:last-child{border-bottom:none;padding-bottom:2px}
.detail .roq .ql{margin:0;padding-left:13px;border-left:2px solid var(--accent);
  font-size:13px;font-weight:400;line-height:1.55;color:var(--muted2);max-width:62ch}
.detail .roq p{margin:11px 0 0;padding-left:15px;font-size:16px;font-weight:400;line-height:1.75;
  color:var(--ink);max-width:70ch}

@media (max-width:560px){
  .dorg-head{align-items:flex-start}
  .dorg-links{width:100%}
  .dorg-go{width:100%;justify-content:center}
  .detail .roq p{font-size:15.5px}
}

/* --------------------------------------------------------------------
   10. THE FOOTER — the two organisers' addresses, and nothing else

   It used to open with the event in small caps and carry the arithmetic of
   the day beside the links. Both are on the page itself now, so the row is
   one thing: where rdy and syndicate one live. Nothing here may reach for
   `>span:first-child` again — that is the link row now.
   -------------------------------------------------------------------- */
.site-footer .foot-links{font-size:11.5px}
body.doorspace .site-footer{background:linear-gradient(to top,rgba(4,3,12,.92),transparent)}

/* --------------------------------------------------------------------
   11. THE TWO WAITS — before the room opens, and while it is being
   worked out.

   Both are pages with nothing on them, which is the hardest kind to make
   look deliberate rather than broken. Both answer it the same way: the
   thing being waited for is the biggest object on the screen, it moves,
   and the house rule holds — hairlines, no boxes.

   THE THING BEING WAITED FOR IS A DATE, IN WORDS. There used to be a
   running clock here, four cells of display type with the sphere's gradient
   through them. It is gone, along with every other countdown in the
   product: what a reader waiting for a gate needs is the instant, written
   so they can put it in a calendar.
   -------------------------------------------------------------------- */
.cdwrap .sect-head{margin-bottom:clamp(30px,4vw,50px)}
/* --------------------------------------------------------------------
   WHILE THE OPTIMISER IS RUNNING. Not a skeleton of the timetable: the
   answer is about to be different, not slower to arrive, and a grey
   outline of eighteen slots promises the shape of a result nobody has
   worked out yet. One mark, one sentence, and the reason.
   -------------------------------------------------------------------- */
.calc{display:flex;gap:clamp(14px,1.8vw,20px);align-items:flex-start;
  padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid var(--divider);
  border-bottom:1px solid var(--divider)}
.calc b{display:block;font-size:clamp(16px,1.8vw,20px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.008em;color:#fff}
.calc span:not(.spinner){display:block;margin-top:8px;font-size:14.5px;font-weight:400;line-height:1.65;
  color:var(--muted);max-width:52ch}
.spinner{flex:0 0 auto;width:22px;height:22px;margin-top:2px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:sp-turn .8s linear infinite}
@keyframes sp-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2.4s}
}

/* --------------------------------------------------------------------
   THE TWO NOTES ABOUT TIME. The one that says the timetable still moves
   leads both afternoons, so it gets air under it; the one that says
   choosing is closed sits inside the room's own bar, where the search
   line's spacing already applies and only the gap below is missing.
   -------------------------------------------------------------------- */
.movenote{margin:0 0 clamp(24px,3vw,34px)}
.dr.browse .shutnote{margin:0 0 clamp(14px,1.6vw,20px)}

/* --------------------------------------------------------------------
   12. A MOMENT, TYPED — the back office's day/month/year/time row.

   Four controls on one underline-per-box line, in the order this event is
   read in: 29 · july · 2026 · at · 09:00. The month is a word, which is
   what settles the order for good — no locale, no mm/dd, and nothing for a
   platform popup to draw in its own colours. `color-scheme:dark` is on the
   time box because the one native picker left has to open black.

   Every box is sized to its content rather than the column, because a
   two-digit day in a half-width field is a field that looks like it wants
   more than two digits.
   -------------------------------------------------------------------- */
/* THE ROW STYLES ITS OWN BOXES, and it did not used to. Every rule here was
   qualified with `.fld`, which was true of the one place this row started
   life: a field on the afternoon tab. The countdowns tab puts five of these
   rows outside any .fld — and outside it the boxes fell all the way through
   to the browser's own number, select and time widgets: white, rounded, dark
   text, on a black page, which is the one thing on this product that is
   unmistakably not ours. The month even read as an empty grey slab, because
   it was selected all along and drawing its text in the UA's colour.
   So `.dtrow` is the scope now and a moment looks the same wherever it is
   typed. It reprises the house underline rather than inheriting it, because
   the house rule is keyed to .fld and this row is deliberately not one. */
.dtrow{display:flex;align-items:baseline;gap:clamp(7px,.9vw,13px);flex-wrap:wrap}
.dtrow input,.dtrow select{width:auto;min-width:0;background:none;border:none;
  border-bottom:1px solid var(--field-line);border-radius:0;padding:var(--field-pad);
  outline:none;color:var(--ink);font-size:var(--field-size);font-weight:400;
  color-scheme:dark;transition:border-color .3s var(--ease)}
.dtrow input:hover,.dtrow select:hover{border-bottom-color:var(--line-strong)}
.dtrow input:focus,.dtrow select:focus{border-bottom-color:var(--field-line-focus)}
.dtrow select{appearance:none;-webkit-appearance:none;cursor:pointer;text-transform:lowercase;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;
  background-size:5px 5px;background-repeat:no-repeat}
.dtrow select option{background:#0a0a0a;color:var(--ink)}
/* AND THE SPINNER GOES. A stepper on a day box is a rounded grey box sitting
   on a hairline — the house has no boxes — and it steps a field nobody
   arrives at wanting to nudge by one: you know which day you mean, and you
   type it. Scoped to this row, so number fields elsewhere keep theirs. */
.dtrow input[type=number]{appearance:textfield;-moz-appearance:textfield}
.dtrow input[type=number]::-webkit-outer-spin-button,
.dtrow input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* the five of them plus the gaps have to clear one column of .form-grid,
   which is about 516px at the width the back office is actually read at —
   so each box is as narrow as its own longest value ("september", "11:00")
   and not a round number. TWO CLASSES DEEP so they still beat `.fld
   input{width:100%}` in the rows that ARE inside a field. */
.dtrow .dt-d{width:3.9em}
.dtrow .dt-y{width:5.4em}
.dtrow .dt-m{width:auto;min-width:8.4em;padding-right:24px}
.dtrow .dt-t{width:6.9em}
.dt-at{font-size:12.5px;font-weight:400;color:var(--muted2)}
/* the ✕ carries no label of its own, so it keeps the row's baseline rather
   than the tog pill's own vertical rhythm */
.dtrow .dt-x{flex:0 0 auto;align-self:center}
@media (max-width:820px){
  /* the row is five things wide and a narrow column is not, so `at` goes
     and the time takes the line under the date it belongs to */
  .dt-at{display:none}
  .fld .dtrow .dt-t{width:9em}
}

/* --------------------------------------------------------------------
   13. THE TWO DOORS — the date on the card, and the door as ONE SCREEN.

   THE ONE QUESTION BOTH SIDES ARRIVE WITH IS "WHEN", and it used to be
   answered nowhere: the poster named the day of the event, the two cards
   said "start", and whether starting was possible today was something you
   found out by pressing one. So the card carries its own moment — the date
   under the name, in words, where a clock used to tick.

   IT IS ON THE CARD AND NOT IN A SECOND BLOCK FURTHER DOWN. Naming the same
   two doors twice on one page is the same information twice, and this page
   does not scroll: the poster, the two ways in, the panel and the wall, all
   of it inside one screen. The two full-width rows under the fold therefore
   get margins that give way (see §15 and the .iwall override below) instead
   of the standing-room gap they had when scrolling was the point.
   -------------------------------------------------------------------- */
/* the card becomes two columns rather than a label and a word: the name and
   its date on the left, the arrow on the right */
.sidecard .sc-id{display:block;min-width:0}
.sc-when{display:block;margin-top:5px;font-size:11.5px;font-weight:400;letter-spacing:.02em;
  text-transform:none;color:var(--muted2);opacity:.7}
.sidecard.before,.sidecard.ended{opacity:.86}
/* nothing to press, so nothing moves */
.sidecard.before:hover,.sidecard.ended:hover{padding-left:0}

/* ---- THE FIVE MOMENTS AS A STRIP — the back office's dates tab. Not a
   chart and not a stepper with
   chevrons: five rows, each one a hairline apart, with a dot that is filled
   for what has happened, ringed in the accent for what is next, and hollow
   for what has not. The date leads, because the reader's question is "when",
   and the sentence after it is what changes on that day.

   THE VERTICAL RULE THROUGH THE DOTS is drawn on the list rather than per
   row, so it stops at the last dot instead of running off the bottom — and
   the dots sit on it rather than beside it. ---- */
.tline{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0;position:relative}
.tline::before{content:"";position:absolute;left:4px;top:14px;bottom:14px;width:1px;
  background:var(--line-soft)}
.tl-step{position:relative;display:grid;grid-template-columns:24px minmax(90px,auto) minmax(0,1fr);
  gap:4px clamp(10px,1.4vw,18px);align-items:baseline;
  padding:clamp(9px,1.1vw,13px) 0}
.tl-dot{grid-row:1/span 2;width:9px;height:9px;margin-top:6px;border-radius:50%;
  border:1px solid var(--line);background:#04030c;position:relative;z-index:1}
.tl-step.done .tl-dot{background:var(--ink);border-color:var(--ink);opacity:.35}
.tl-step.next .tl-dot{background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft)}
.tl-when{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted2);font-variant-numeric:tabular-nums}
.tl-step.next .tl-when{color:var(--accent-bright)}
.tl-what{font-size:14.5px;font-weight:500;color:var(--muted)}
.tl-step.next .tl-what{color:#fff;font-weight:700}
.tl-note{grid-column:3;font-size:12.5px;font-weight:400;line-height:1.55;color:var(--muted2);
  opacity:.6}
.tl-step.done{opacity:.5}
.tline .off{opacity:.5}
@media (max-width:640px){
  .tl-step{grid-template-columns:24px minmax(0,1fr)}
  .tl-note{grid-column:2}
}

/* ---- THE SAME STRIP, TIGHTENED — the front page's copy of it.
   Still five rows down a rule, because that is what a sequence of dates
   is. Two things come off it and both are the door's doing: the sentence
   under each date, which is for the organiser deciding it and not for the
   reader of a poster, and about a third of the height, because the door does
   not scroll and this now shares a column with the two ways in.

   ONE LINE PER MOMENT is what the height comes from. With the note gone the
   step's third column has nothing under it, so the date and what happens on
   it sit on the same baseline and a moment costs a line of type instead of
   three. Everything else here is that decision paid for: a smaller dot, a
   narrower date column, and the vertical rule's ends moved up to meet the
   first and last dot at their new centres. ---- */
/* AND IT IS DRAWN ONE STEP STRONGER THAN THE BACK OFFICE'S. Same object, but
   the countdowns tab is a form on flat near-black, where --line-soft is a
   hairline; the door puts the same rule and the same dots over the lit half of
   the sphere, where 5% white is nothing at all. */
.tline.rail{margin:0}
.tline.rail::before{left:3px;top:15px;bottom:15px;background:var(--line-strong)}
.tline.rail .tl-step{grid-template-columns:20px minmax(76px,auto) minmax(0,1fr);
  gap:0 clamp(8px,1vw,13px);padding:clamp(5px,.8vh,8px) 0}
/* only the moments still to come take the stronger edge: `done` and `next`
   are both one class deeper than this and set their own */
.tline.rail .tl-dot{width:7px;height:7px;margin-top:5px;border-color:var(--line-strong)}
.tline.rail .tl-step.next .tl-dot{box-shadow:0 0 0 3px var(--accent-soft)}
.tline.rail .tl-when{font-size:10.5px;letter-spacing:.1em}
.tline.rail .tl-what{font-size:12.5px;line-height:1.35}
/* done is already at half strength on the dot and on the type; the whole step
   fading as well is a past moment you cannot read, and on the front page the
   dates that have gone are half the reason the next one makes sense */
.tline.rail .tl-step.done{opacity:.72}

/* --------------------------------------------------------------------
   15. THE PANEL ON THE DOOR — faces, under the wall of wordmarks.

   A fund is a word and a person is a face, so the wall above is a grid of
   names and this is a row of circles. It used to be half of the bottom row
   of four things on one screen, with the dates in the other half, and the
   faces were capped at 52px because they were the fourth thing to be paid
   for. They have a section of their own now: bigger circles, a name under
   each, centred on the page, and the row wraps rather than dividing itself
   into thumbnails when an organiser adds a seventh person.
   -------------------------------------------------------------------- */
.panelwall{min-width:0}
/* THE DATES ARE THE LAST SECTION AND THEY ARE THEIR OWN. A column of five
   moments hung off a vertical rule is read down its left edge, so the block
   centres on the page and the type inside it does not — centring the rows
   would detach every date from the dot it belongs to.
   Still no heading over them: the panel and the wall each get one because a
   row of circles and a grid of wordmarks do not say what they are, and five
   dates down a rule do. */
.tlwall{min-width:0;max-width:30em;margin:0 auto;text-align:left}
/* ---- IT WRAPS NOW, AND THAT IS WHAT THE SCROLL BOUGHT. In half a screen the
   row could not wrap — a fifth person starting a second line grew the section
   by 176px and the whole page scrolled, so the cells divided the column
   instead and eight people meant eight 52px circles. There is no fold to
   protect any more: a cell claims a width, the row centres, and a ninth
   person is a second line rather than everybody shrinking. ---- */
.pw-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(22px,3.4vw,52px) clamp(18px,2.6vw,40px)}
.pw-one{margin:0;flex:0 0 auto;width:clamp(96px,9vw,128px);text-align:center}
.pw-face{display:grid;place-items:center;width:clamp(64px,6.6vw,88px);
  aspect-ratio:1;height:auto;
  margin:0 auto clamp(11px,1.2vw,15px);border-radius:50%;overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.pw-face b{font-size:clamp(15px,1.5vw,20px);font-weight:700;letter-spacing:.02em;
  color:var(--muted2);opacity:.7}
.pw-face.has-img b{display:none}
.pw-face img{width:100%;height:100%;object-fit:cover;display:block}
.pw-nm{display:block;font-size:13px;font-weight:700;line-height:1.3;color:#fff}
.pw-sub{display:block;margin-top:3px;font-size:11px;font-weight:400;line-height:1.4;
  color:var(--muted2);opacity:.7}

/* ---- THE PAGE SCROLLS, SO THE SPACING STOPS APOLOGISING.

   Every number under here used to be viewport-relative and stingy with it:
   four sections had to land inside one screen, so the margins, the labels and
   the gaps between them were all sized by what was left. The sections are a
   sequence now — .door-wrap's own gap is the space between them, and it is
   generous on purpose, because arriving at a section should feel like
   arriving somewhere rather than reading the next line.

   THE TOP PADDING CLEARS THE BAR AND IS NOT NEGOTIABLE: 72px of glass with
   the two marks in it, and the kicker tucks under it the moment this is
   trimmed. The bottom padding clears the fixed footer, 46px of it — the last
   thing on the page is a list of dates and a date behind the footer is a date
   the page got wrong. ---- */
body.doorspace .wrap{padding-top:clamp(84px,10vh,116px);
  padding-bottom:clamp(90px,12vh,150px)}
@media (max-width:900px){
  /* the footer is two or three lines tall down here rather than one, so the
     clearance under the last section grows with it */
  body.doorspace .wrap{padding-bottom:clamp(110px,18vw,150px)}
  .door-wrap{gap:clamp(64px,15vw,110px)}
  /* AND THE WALL GOES TO TWO COLUMNS, whatever --n says. Seven funds across a
     phone is seven ellipses; the column count that reads as a wall on a
     desktop is a wall of nothing here. The rows keep their hairlines. */
  .iw-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iw-cell{height:clamp(66px,17vw,86px)}
  /* the cells that square off a short last row are squaring off a column
     count that no longer applies, so they are a hole in the wall here */
  .iw-cell.empty{display:none}
  /* AND THE HAIRLINES FOLLOW THE WRAP, NOT THE MARKUP. A desktop row of seven
     is two columns here, so every second cell starts a new visual row: the
     left-hand one of each pair drops its left border, and the rule between
     rows is drawn on the cells instead of between the two .iw-line blocks,
     which are no longer where the rows are. */
  .iw-line>.iw-cell{border-top:1px solid var(--divider)}
  .iw-line>.iw-cell:nth-child(odd){border-left:0}
  .iw-line:first-child>.iw-cell:nth-child(-n+2){border-top:0}
}

/* --------------------------------------------------------------------
   16. CHOOSING — the strip over the list, and the ordered list itself.

   THE DEADLINE IS THE FIRST THING ON THE ROOM, because it is the only
   thing on that screen with a limit on it: the list has none, the number
   of requests has none, and the one scarce thing left is how many days
   are left to make them in. Beside it, the count and the way into the
   second view — which is the whole reason the strip is not just a date.
   -------------------------------------------------------------------- */
.selbar{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,40px);align-items:flex-start;
  justify-content:space-between;padding:0 0 clamp(16px,2vw,22px);
  border-bottom:1px solid var(--divider);margin:0 0 clamp(14px,1.8vw,20px)}
.sb-clock{min-width:0}
.sb-l{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-bright)}
.sb-when{margin:8px 0 0;font-size:12.5px;font-weight:400;color:var(--muted2)}
.sb-state{margin:0;font-size:14.5px;font-weight:400;color:var(--muted)}
.sb-state b{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.sb-hint{margin:0;font-size:12px;font-weight:400;line-height:1.5;color:var(--muted2);
  opacity:.65;max-width:38ch}
@media (max-width:760px){
  .selbar{flex-direction:column;gap:16px}
}

/* ---- THE FILTER ROW AND THE WAY ON, one line. The dropdowns take
   whatever width they need and the call to action holds the right end of
   the same line, which is where a reader working left to right along the
   filters arrives. It is the loudest control on the page on purpose: it is
   the only one that goes somewhere. ---- */
.frow{display:flex;align-items:flex-end;gap:clamp(16px,2.4vw,32px)}
.frow .fbar{flex:1 1 auto;min-width:0}
.selcta{flex:0 0 auto;max-width:min(46vw,340px);display:flex;flex-direction:column;
  align-items:flex-end;text-align:right;gap:7px}
.selcta .sb-state{font-size:13px}
.selcta .sb-hint{max-width:34ch}
/* the accent pill. Every other pill in the product is a hairline; this one
   is filled, because "there is a second half to this job" is the one thing
   on the page somebody must not have to look for. */
.pill.cta-sel{background:var(--accent);border-color:var(--accent);color:#fff;white-space:nowrap}
.pill.cta-sel:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.pill.cta-sel .circ{border-color:rgba(255,255,255,.5)}
@media (max-width:900px){
  .frow{flex-wrap:wrap}
  .selcta{max-width:none;flex:1 1 100%;align-items:flex-start;text-align:left}
}
/* the same clock over a page that is not the room: the ranking view and the
   two timetables */
.rk-clock{padding:0 0 clamp(14px,1.8vw,20px);border-bottom:1px solid var(--divider);
  margin:0 0 clamp(20px,2.4vw,28px)}

/* ---- YOUR SELECTION. Rows, numbered, with one hairline across the list at
   the slot count — because the whole point of the screen is which side of
   that line somebody is on. The rows below it stay legible rather than being
   greyed to nothing: they are not rejects, they are what happens when the
   ones above turn out to be somebody else's first choice.

   THE ROW IS A LINK AND THE HANDLE IS THE ONLY EXCEPTION. Everything on it
   opens the founder; the grip re-orders, the bin removes, and neither is a
   word competing with the row for the same click.  ---- */
.ranklist,.fundorder,.panellist{list-style:none;margin:0;padding:0}
.rk-row,.fo-row{display:grid;align-items:center;gap:clamp(10px,1.4vw,18px);
  grid-template-columns:2.2em 34px minmax(0,1fr) auto auto;
  padding:clamp(11px,1.3vw,15px) 0;border-bottom:1px solid var(--line-soft)}
/* the selection's own row has two more cells than the back office's: what
   they do, and the arrow that says the row opens */
.ranklist .rk-row{grid-template-columns:2.2em 34px minmax(0,1fr) auto auto auto;
  cursor:pointer;transition:background .25s var(--ease)}
.ranklist .rk-row:hover{background:rgba(255,255,255,.03)}
.ranklist .rk-row:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
.rk-how{margin:0 0 14px;font-size:12.5px;font-weight:400;color:var(--muted2);opacity:.8}
.rk-sector .chip{white-space:nowrap}
/* the arrow, the same one every row in the product ends with */
.rk-open{width:30px;height:30px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted2);
  transition:transform .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.rk-open svg{width:11px;height:11px}
.ranklist .rk-row:hover .rk-open{transform:rotate(45deg);color:#fff;border-color:var(--ink)}
/* the two controls. The grip has touch-action:none so a finger on it drags
   the row instead of scrolling the page — and so a finger anywhere else
   still scrolls it. */
.rk-grip,.rk-del{width:34px;height:34px;flex:0 0 auto;border:1px solid transparent;background:none;
  border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--muted2);transition:color .2s var(--ease),border-color .2s var(--ease),
  background .2s var(--ease)}
.rk-grip{cursor:grab;touch-action:none}
.rk-grip:active{cursor:grabbing}
.rk-grip svg,.rk-del svg{width:16px;height:16px}
.rk-grip:hover{color:#fff;border-color:var(--line)}
.rk-del:hover{color:var(--warn);border-color:rgba(255,106,26,.4);background:rgba(255,106,26,.06)}
/* the row in the hand, and the page while one is: no text selection, and no
   pointer events on the row being dragged so the one underneath answers */
.rk-row.dragging{pointer-events:none;background:rgba(255,106,26,.07);
  border-color:rgba(255,106,26,.4);opacity:.95}
body.rk-dragging{user-select:none;cursor:grabbing}
.rk-row:first-child,.fo-row:first-child{border-top:1px solid var(--divider)}
.rk-n,.fo-n,.pl-n,.wh-n{font-size:clamp(15px,1.7vw,19px);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#fff;text-align:right}
.rk-row.spare{opacity:.62}
.rk-row.spare .rk-n{color:var(--muted2)}
.rk-who,.fo-who{min-width:0;display:block}
.rk-who .rname,.fo-who .rname{display:block}
.rk-who .rmeta,.fo-who .rmeta{display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-heat{text-align:right;white-space:nowrap;opacity:.7}
.rk-act,.fo-act,.fo-mark{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:flex-end}
.rk-act .tog,.fo-act .tog{min-width:32px;justify-content:center}
/* the line across the list at the slot count */
.rk-line{display:flex;align-items:center;gap:14px;padding:clamp(16px,2vw,22px) 0 clamp(10px,1.2vw,14px)}
.rk-line span{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-bright)}
.rk-line::after{content:"";flex:1 1 auto;height:1px;background:var(--sweep);opacity:.5}
@media (max-width:820px){
  .rk-row,.fo-row,.ranklist .rk-row{grid-template-columns:2.2em 34px minmax(0,1fr) auto;row-gap:8px}
  .rk-heat{grid-column:2/span 2;text-align:left}
  .rk-act,.fo-act,.fo-mark{grid-column:2/span 2;justify-content:flex-start}
  /* the two controls keep the right edge of the first line; what they do
     goes under the name rather than fighting them for it */
  .ranklist .rk-act{grid-column:4;grid-row:1;justify-content:flex-end;margin:0}
  .rk-sector{grid-column:3;grid-row:2}
  .rk-open{display:none}
}

/* --------------------------------------------------------------------
   17. THE BACK OFFICE, RE-ARRANGED.

   TEN TABS IN ONE ROW IS A LIST, NOT A SHAPE, so the nav has a gap in it
   between the people and the machinery — which is also the order somebody
   works in: six weeks on the first four and two visits to the rest.

   AND THE PHASE IS ON EVERY SCREEN. Every decision on every tab means
   something different depending on which of the five moments has just
   passed, and an organiser who has to work that out from a date on another
   tab will get it wrong once — which, on the tab where accepting somebody
   sends an email, is once too often.
   -------------------------------------------------------------------- */
/* ten tabs and a separator at the house's 30px gap is 1157px of nav in a
   1080px column, so it wrapped one tab onto a line of its own — which reads
   as an afterthought rather than as the last of ten. The gap gives way
   instead; below 1180px it wraps properly, in twos and threes. */
.admin .panelnav{gap:clamp(10px,1.15vw,16px)}
.pn-gap{flex:0 0 auto;width:1px;align-self:stretch;margin:0 clamp(3px,.5vw,8px);
  background:var(--line)}
.aphase{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(10px,1.6vw,22px);
  padding:clamp(12px,1.5vw,18px) 0;border-top:1px solid var(--line-soft)}
.ap-now{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#fff}
.ap-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft)}
.ap-next{font-size:12.5px;font-weight:400;color:var(--muted2)}
.ap-next b{font-weight:700;color:var(--muted)}

/* ---- the dates tab: five moments, each a block with its own state.
   A past moment is dimmed rather than hidden, because the date it happened
   on is still the answer to a question somebody will ask. ---- */
.whenlist{display:block}
.wh-row{padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line-soft)}
.wh-row:first-child{border-top:1px solid var(--divider)}
.wh-row.past{opacity:.55}
.wh-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:12px}
.wh-head label{font-size:14.5px;font-weight:700;color:#fff;text-transform:none;letter-spacing:0}
.wh-n{min-width:1.4em}
.wh-state{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-bright)}
.wh-row.past .wh-state{color:var(--muted2)}
.wh-row .hint{margin-top:10px;max-width:70ch}
/* ---- and the two sentences beside the date. A row of two underline fields
   rather than a form-grid: this list is not a form of pairs, it is five
   blocks that each happen to hold one, and borrowing the questionnaire's
   32px column gap would put the note a third of a screen from the label it
   belongs to. Wrapping is by content — the note is the longer of the two, so
   it gets the wider share until there is no room for a share at all. ---- */
.wh-words{display:flex;flex-wrap:wrap;gap:14px clamp(16px,2vw,30px);margin-top:16px;max-width:70ch}
.wh-words .fld{flex:1 1 14em;min-width:0}
.wh-words .fld:last-child{flex-grow:1.6}
.wh-words input::placeholder{color:var(--ink-ghost);opacity:1}

/* ---- the panel tab: one block per person, the photograph and the moves on
   top, the four fields under them. ---- */
.pl-row{padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line-soft)}
.pl-row:first-child{border-top:1px solid var(--divider)}
.pl-top{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);margin-bottom:14px}
.pl-act{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  justify-content:flex-end}
.pl-fields{margin:0}
.pl-row .avatar-plate{flex:0 0 auto}

/* ---- the funds' order: the same row as the ranking list, with the logo
   control in the middle of it. ---- */
.fo-mark{gap:6px}
.fo-mark .fsaved{font-size:11px}
.fundorder .fo-row{grid-template-columns:2.2em 34px minmax(0,1fr) auto auto}

/* --------------------------------------------------------------------
   PUBLISHING — the bar, the dialog, and the row that is finished.

   THE BAR IS NOT A CALLOUT. A callout in this house is a hairline on the
   left and some prose; this is a statement and a button on one line, and it
   has to read as an instrument rather than as a note — so it gets a rule
   above and below it and the accent when there is something to do.
   -------------------------------------------------------------------- */
.pubbar{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.4vw,32px);
  flex-wrap:wrap;margin:18px 0 22px;padding:16px 0 17px;
  border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.pubbar.due{border-top-color:rgba(255,106,26,.42);border-bottom-color:rgba(255,106,26,.42)}
.pb-say{min-width:0;display:flex;flex-direction:column;gap:3px}
.pb-say b{font-weight:500;color:#fff;font-size:15.5px;letter-spacing:-.008em}
.pubbar.due .pb-say b{color:var(--accent-bright)}
.pb-say span{font-size:13px;line-height:1.55;color:var(--muted2);max-width:62ch}
.pubbar .pill[disabled]{opacity:.4;pointer-events:none}

/* a decision that has gone out. The row keeps its shape — forty rows that
   change height as they are published is forty rows that move under the
   cursor — and loses only the buttons. */
.rows .row.locked .rname{color:var(--muted)}

/* ---- the dialog. It goes inside .modal, so it owns the padding and
   nothing else: the sheet, its border and its ambient light are the
   house's. ---- */
.pubdlg{padding:var(--sheet-pad)}
.pd-l{margin:0 0 6px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-bright)}
.pd-h{margin:0 0 18px;font-size:clamp(21px,2.6vw,27px);font-weight:500;letter-spacing:-.014em;
  line-height:1.1;color:#fff;text-transform:lowercase}
.pd-n{display:flex;align-items:baseline;gap:12px;padding:14px 0 16px;border-top:1px solid var(--divider);
  border-bottom:1px solid var(--divider)}
.pd-n b{font-size:clamp(34px,5vw,46px);font-weight:400;line-height:1;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums}
.pd-n span{font-size:13.5px;line-height:1.5;color:var(--muted2)}
.pd-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.pd-list li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.pd-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--accent)}
.pd-list b{color:#fff;font-weight:500}
.pd-act{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px}
.pd-state{margin:12px 0 0;font-size:12.5px;color:var(--muted2);min-height:1.2em}

/* --------------------------------------------------------------------
   EMAILING — five letters as a rail, one editor beside it.

   THE RAIL IS THE POINT. A toggle between two letters was fine at two; at
   five the list has to be visible at once, or "which of these have we
   written" is a question you answer by clicking through all of them.
   -------------------------------------------------------------------- */
.mailgrid{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:clamp(20px,2.6vw,38px);
  align-items:start}
@media (max-width:900px){.mailgrid{grid-template-columns:minmax(0,1fr)}}
.ml-rail{display:flex;flex-direction:column;border-top:1px solid var(--divider);position:sticky;top:84px}
@media (max-width:900px){.ml-rail{position:static}}
.ml-r{display:grid;gap:3px;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);
  padding:13px 12px 14px 10px;cursor:pointer;border-left:2px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.ml-r:hover{background:rgba(255,255,255,.03)}
.ml-r.on{border-left-color:var(--accent);background:rgba(255,106,26,.06)}
.ml-nm{font-size:14.5px;font-weight:500;color:var(--muted);letter-spacing:-.006em}
.ml-r.on .ml-nm{color:#fff}
.ml-who{font-size:11.5px;line-height:1.45;color:var(--muted2);opacity:.8}
.ml-r .chip{justify-self:start;margin-top:5px;font-size:10.5px;padding:2px 8px}
/* A LETTER WITH PEOPLE WAITING FOR IT reads as work rather than as wording.
   Every publish button in this back office is on this rail now, so the row
   has to be able to say "there is something to press in here" from the
   outside — otherwise the buttons are exactly as hard to find as they were
   when they were scattered over four tabs. The left edge is the same mark the
   open row uses, in the warning colour, so an open row that is also due keeps
   its accent and gains nothing confusing. */
.ml-r.due{border-left-color:var(--warn)}
.ml-r.due.on{border-left-color:var(--accent)}
.ml-r.due .ml-nm{color:#fff}
.ml-edit{min-width:0}
.ml-head{border-bottom:1px solid var(--divider);padding-bottom:14px;margin-bottom:18px}
.ml-head h3{margin:0 0 5px;font-size:clamp(18px,2.1vw,22px);font-weight:500;letter-spacing:-.012em;
  color:#fff;text-transform:lowercase}
.ml-when{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted2);max-width:60ch}
.ml-when b{color:var(--muted);font-weight:500}

/* the placeholders, folded away. They are a reference somebody glances at
   while typing, and fifteen rows of them between the letter and its preview
   is fifteen rows of scrolling every time a word changes. */
.tokbox{margin:4px 0 18px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.tokbox summary{padding:11px 2px;font-size:12.5px;color:var(--muted2);cursor:pointer;list-style:none}
.tokbox summary::-webkit-details-marker{display:none}
.tokbox summary::before{content:"+ ";color:var(--accent-bright)}
.tokbox[open] summary::before{content:"– "}
.tokbox summary:hover{color:var(--ink)}
.toklist{display:flex;flex-wrap:wrap;gap:8px 18px;padding:4px 2px 16px}
.tok{display:flex;align-items:baseline;gap:7px;font-size:12px}
.tok code{color:var(--accent-bright);font-size:11.5px}
.tok i{font-style:normal;color:var(--muted2);opacity:.75}
/* a link inside a field's hint is part of the sentence, not a control that
   happens to sit after it */
.fq-tip .tlink,.hint .tlink{font-size:inherit;line-height:inherit;vertical-align:baseline}

/* --------------------------------------------------------------------
   THE BLAST — the list of people is half the screen, because ticking them
   is the whole decision.
   -------------------------------------------------------------------- */
.blastgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);
  align-items:start}
@media (max-width:980px){.blastgrid{grid-template-columns:minmax(0,1fr)}}
.bl-list{border-top:1px solid var(--divider)}
.bl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;
  padding:11px 8px 11px 2px;border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .25s var(--ease)}
.bl-row:hover{background:rgba(255,255,255,.03)}
.bl-row.on{background:rgba(255,106,26,.07)}
.bl-row input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;grid-row:span 2}
.bl-nm{font-size:14.5px;color:var(--muted);letter-spacing:-.005em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-row.on .bl-nm{color:#fff}
.bl-sub{grid-column:2;font-size:11.5px;color:var(--muted2);opacity:.75;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-row .chip{grid-column:3;grid-row:1 / span 2;align-self:center;font-size:10.5px;padding:2px 8px}

/* --------------------------------------------------------------------
   A PAGE THAT IS NOT OPEN YET — one line, and it is the whole page.

   It is deliberately not a .callout: a callout is a note attached to
   something, and there is nothing here for it to be attached to. So it is a
   line of type at the size of a sentence somebody is meant to read once and
   leave, with the rule above it that every section in this product has.
   -------------------------------------------------------------------- */
/* THERE IS NO .calbtn ANY MORE. Every date this product prints used to carry
   a hairline "add to calendar" chip beside it — on the timeline steps, the
   deadline strips, the doors-at line, and every one of eighteen slot rows.
   They are gone: a date is read once, in an inbox, and the .ics now travels
   as an attachment on the letter that carries the news. See esd/cal.js. */

.lockline{padding:clamp(22px,3vw,30px) 0;border-top:1px solid var(--divider);
  font-size:clamp(15.5px,1.8vw,18px);line-height:1.6;color:var(--muted);letter-spacing:-.006em}
.lockline b{color:#fff;font-weight:500}

/* the empty-a-slot buttons on the timetable: one on the slot's head, one at
   the end of every conversation in it. `.count` already claims the auto
   margin, so this one only needs to sit after it. */
.ps-head .tlink{font-size:11.5px}
.planslot .rend .tlink.danger{opacity:0;transition:opacity .25s var(--ease)}
.planslot .row:hover .rend .tlink.danger,
.planslot .rend .tlink.danger:focus-visible{opacity:1}
@media (hover:none){.planslot .rend .tlink.danger{opacity:1}}