/* apps/launcher/ui/landing.css — the launcher landing screen.
 *
 * WHY THIS FILE EXISTS. Two reasons, in this order.
 *
 * 1. THE VOICE (founder, 2026-08-11: "update the brand styling - the new voice
 *    is as per the homepage - clean and minimalistic", then "i like concept5 the
 *    most"). The design of record is frame 5, "the blend", of
 *    projects/landing-google-concepts/index.html. Everything here is that frame:
 *    white canvas, one ink, one muted, one faint, a hairline, and tomato as the
 *    ONLY accent. No Bebas, no 800/900 weights, no uppercase stamps, no 1.5px
 *    ink borders, no hard offsets, and no yellow anywhere — yellow marks an
 *    earned state and nothing on this screen has earned one.
 *
 * 2. THE RATCHET. index.html was at 827 of its 1000 authored lines with the old
 *    two-pane workspace CSS inside it. The same split that moved the roster into
 *    workspace.js and the meter into credits.js moves the landing's layout here:
 *    index.html keeps mounts, chrome and boot; this file keeps the look.
 *
 * SCOPE. Every rule is prefixed with #home so the overlay screens (Hiring, My
 * connections, Credits) and the guards keep BRAND §8's ink exactly as it was —
 * the same containment #home's token remap has always had.
 *
 * THE CONTRACT WITH ui/landing.js. This file styles mounts it does not fill.
 * landing.js writes:
 *   #landDate                plain text
 *   #landGreet               the COMPANY'S name — the org chart's root, and
 *                            since 2026-08-12 no longer a greeting
 *   #landOrg                 the organization chart: .org-row of .org-limb, a
 *                            limb holding either an .org-dept BUTTON plus its
 *                            .org-fold-wrapped nested .org-row, or one .org-person link
 *                            whose children are .face (36px avatar or
 *                            initials), .who (name) and .chip.hot/.chip.calm
 *   #landJoining             one line about the ones still joining
 *   #landFoot                the honestly worded second-brain invitation
 *   #landStars               a deterministic constellation, drawn to the canvas
 *   #landStars.is-diving     the step-inside pulse; the transition is here
 * and toggles #home.stepped-in to swap the landing for the brain.
 * It must NOT render into #landTools — index.html owns the one door there,
 * because its Credits handler lives there. Hiring moved to #landJoining.
 *
 * HONESTY (BRAND §8). Not one number, name or status is written in this file or
 * in index.html's markup: every one of them is computed from rows landing.js
 * read. The constellation is decorative ambience and carries no count at all —
 * it is a drawing of "there is a graph here", never a readout of it.
 */

#home{
  /* THE CONCEPT-5 PALETTE IS THE ESTATE'S PALETTE, and since 2026-08-20 it is
     served rather than copied. Founder ruling 1 — "Serve the values": the ten
     declarations that stood here (--land-ink --land-muted --land-faint
     --land-hair --land-box --land-accent --land-accent-hover --land-accent-bg
     --land-calm-bg --land-sans) are deleted. /shell/tokens.css publishes every
     one of those NAMES pointed at its canonical token, and index.html links it
     above this sheet — so not one var(--land-*) call below changed, and the two
     that survive here are the two the estate has no token for.

     --land-sans is one of the ten: the sheet points it at --font (ruling 3,
     "Which font are we using on the homepage? That is what we have to stick
     to"), and this screen IS the homepage's voice, so the name it always used
     now resolves to the estate's one face. The weights stay 400/500 — a display
     default is overridable, and this surface's recorded canon is the light
     one. */

  /* The chart's own ink. Connectors at the hairline grey read as damage the
     moment anything interrupts them (founder, 2026-08-12: "make these lines a
     bit darker and cleaner"), so the drawing gets a darker grey of its own
     while the borders it runs between stay at --land-hair. It is a drawing
     weight, not a palette entry, which is why it stays local. */
  --land-line:#bdc1c6;
  /* What the sticky shell bar leaves behind. --ws-top is measured off the real
     bar by workspace.js' watchHeight(); the
     56px fallback is the minimal header's own height, so an unmeasured first
     paint is still the right size rather than a guess. */
  --land-top:var(--ws-top,56px);
  color:var(--land-ink);
  font-family:var(--land-sans);
}

/* A label a screen reader gets and a cursor never sees. */
#home .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;border:0;clip:rect(0 0 0 0);clip-path:inset(50%)}

/* ── the landing ────────────────────────────────────────────────────────────
   A column, not a stack of absolutes: the stage grows, the bottom row is the
   last item, and on a short screen the two never overlap. min-height (not
   height) so a long greeting or a tall card scrolls instead of clipping. */
#home .land{position:relative;display:flex;flex-direction:column;min-height:calc(100vh - var(--land-top));overflow:hidden}
#home.stepped-in .land{display:none}

/* The constellation. Behind everything, clickable through the stage above it,
   and the one element on this screen that may move. */
#home #landStars{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:pointer;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s ease}
#home #landStars.is-diving{transform:scale(1.7);opacity:.25}
/* The halo is what makes text readable over the stars without a card behind it. */
#home #landHalo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 760px 560px at 50% 44%,var(--paper) 40%,rgba(255,255,255,.88) 62%,rgba(255,255,255,0) 80%)}

/* pointer-events is inherited, so the stage lets clicks fall through to the
   canvas while each thing standing on it stays pressable. */
#home .land-stage{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;padding:clamp(28px,11vh,116px) 20px 20px;pointer-events:none}
#home .land-stage>*{pointer-events:auto}

/* The min-heights are reserved space, not decoration: these three fill in after
   a read, and a line that appears from nothing shoves the cards down the page. */
#home .land-date{min-height:21px;margin:0 0 10px;color:var(--land-muted);font-size:14px;font-weight:400}
/* The company's name, and the root of the chart below it — which is why the
   margin under it is now 6px and not 36px: the hairline that drops out of
   #landOrg has to read as hanging off THIS line. */
#home .land-greet{min-height:44px;margin:0 0 6px;font-size:36px;font-weight:400;letter-spacing:-.01em;line-height:1.2;text-align:center}

/* ── the organization chart (founder, 2026-08-12) ──────────────────────────
   "We can just have an organization structure where all the agents get a
   workflow … In Sales: Salesperson and Relationship Manager. In Marketing:
   Super Social Manager. In HR: Super Recruiter."

   NO LIBRARY AND NO SVG. Every connector on this screen is one of two
   hairlines on .org-limb: a vertical drop into the limb, and the limb's share
   of the horizontal bus tying its row together. The row's first and last limbs
   stop that bus at their own centre, so a department with ONE person draws no
   bus at all — the first and last rules both apply to it and cancel out. That
   is the whole mechanism; it works at any depth and at any roster size, and
   nothing measures anything.

   The row therefore has NO gap: each limb draws its own stretch of bus, so any
   flex gap between limbs is a stretch nobody draws — the founder read those
   holes as the lines "breaking up" (2026-08-12). Breathing room between limbs
   is padding INSIDE the limb, which its bus segment covers. */
#home .land-org{position:relative;display:flex;justify-content:center;width:100%;margin:0 0 20px;padding-top:22px}
/* The drop out of the company name into the departments' bus. */
#home .land-org::before{content:'';position:absolute;top:0;left:50%;width:1px;height:22px;background:var(--land-line)}
#home .org-row{display:flex;justify-content:center;align-items:stretch}
#home .org-limb{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px clamp(5px,1vw,14px) 0}
#home .org-limb::before{content:'';position:absolute;top:0;left:50%;width:1px;height:22px;background:var(--land-line)}
#home .org-limb::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--land-line)}
#home .org-row>.org-limb:first-child::after{left:50%}
#home .org-row>.org-limb:last-child::after{right:50%}
/* The fold (founder, 2026-08-12): a department's people sit in a one-track
   grid, and pressing the pill animates that track to nothing — the people zoom
   out and fade while the limb narrows and its neighbours close ranks, which IS
   the "folds under Marketing" he asked for; no measurement, the track does it.
   The fold also carries the drop out of the pill into its people. */
#home .org-fold{position:relative;display:grid;grid-template-columns:1fr;flex:1;margin-top:12px;transition:grid-template-columns .32s ease}
#home .org-fold::before{content:'';position:absolute;top:-12px;left:50%;width:1px;height:12px;background:var(--land-line);transition:opacity .2s ease}
#home .org-fold>.org-row{min-width:0;min-height:0;overflow:hidden;transform-origin:50% 0;transition:transform .32s ease,opacity .26s ease}
#home .org-limb.is-folded .org-fold{grid-template-columns:0fr}
#home .org-limb.is-folded .org-fold::before{opacity:0}
#home .org-limb.is-folded .org-fold>.org-row{transform:scale(.6);opacity:0}
/* A department is a BUTTON now (founder, 2026-08-12, supersedes the label-not-
   a-door rule): press it and its people fold away; press again and they come
   back out. Same quiet pill — the press is the affordance, not the paint. */
#home .org-dept{padding:5px 14px;border:1px solid var(--land-line);border-radius:999px;background:var(--paper);color:var(--land-muted);font:inherit;font-family:var(--land-sans);font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer}
#home .org-dept:hover{color:var(--land-ink)}
#home .org-dept:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* A person. Compact on purpose — everybody is on screen at once now, so a node
   carries a face, a name and the state a read produced, and nothing else. */
#home .org-person{display:flex;flex:1;flex-direction:column;align-items:center;gap:8px;width:clamp(140px,15vw,184px);padding:14px 12px;border:1px solid var(--land-hair);border-radius:14px;background:var(--paper);color:inherit;font:inherit;font-family:var(--land-sans);text-align:center;text-decoration:none;cursor:pointer;transition:box-shadow .15s ease}
#home .org-person:hover{box-shadow:var(--lift)}
#home .org-person:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#home .org-person .face{display:flex;align-items:center;justify-content:center;overflow:hidden;width:36px;height:36px;border-radius:50%;background:var(--land-hair);color:var(--land-muted);font-size:14px;font-weight:500}
#home .org-person .face img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/* The portraits are whole scenes — a desk from above, a meeting, a table of
   cards — and at 36px a scene is noise. Zoom each circle onto the person doing
   the work (founder, 2026-08-12: "zoom in on the working person and use that
   part of the image"); the origin holds the person still while the scene
   grows past the rim. Tuned per photo, by eye, against the real files.
   Mechanics: scale about the person's own point in the photo, then translate
   that point to the circle's centre — translate(50%−fx, 50%−fy) scale(N),
   origin fx fy. Both photos and circle are square, so percentages agree. */
#home .org-person[data-employee="sales"] .face img{transform:translate(10%,-30%) scale(2.2);transform-origin:40% 80%}
#home .org-person[data-employee="crm"] .face img{transform:translate(-22%,14%) scale(2.1);transform-origin:72% 36%}
#home .org-person[data-employee="social"] .face img{transform:translate(4%,26%) scale(1.9);transform-origin:46% 24%}
/* An employee with no portrait yet: her own initial, in the same circle, at
   the weight of a name rather than of a photograph. */
#home .org-person .face-mark{font-size:15px;font-weight:500;line-height:1;color:var(--land-ink)}
/* min-height reserves the second line every long name takes, so two nodes side
   by side hold their chips at the same height whether or not one wraps. */
#home .org-person .who{display:block;min-height:36px;font-size:14px;font-weight:500;line-height:1.28}
/* The chip is the last thing in the node, pushed to its floor, so a wrapped
   name never leaves one node's state sitting higher than its neighbour's. It
   is a size smaller here than the served reading's 13px: "Not able to check
   right now" has to fit a node this narrow WITHOUT being shortened, because
   shortening it is how an honest failure line turns into a vague one — a
   deliberate hierarchy step, not drift.

   `white-space` is put back for the same sentence. /shell/controls.css's
   `.chip` is nowrap, which is right for a one-word status and wrong for a node
   clamped to 140-184px carrying a whole line; nowrap here would push the state
   straight out of the chart. Everything this rule used to say and no longer
   does — the 999px pill, the --calm ground, the muted 500, the 4px/10px
   padding — is the served sheet's now, to the value. */
#home .org-person .chip{margin-top:auto;font-size:11.5px;line-height:1.3;white-space:normal}
/* (The fold wrapper's flex:1 is what keeps every node on one floor — the limbs
   of a row stretch to the tallest, and the fold fills the limb it hangs in.) */

/* Tomato says something is waiting on you; calm says nothing is. Those are the
   only two, and both are states a read produced.

   ADOPTED 2026-08-21 — the estate's chip grammar (founder: "fix this too"). A
   state a read produced is a READING, and readings are /shell/controls.css's
   `.chip`. So this file's own base is DELETED (the sheet serves the pill, the
   --calm ground, muted 13px/500, and the 4px/10px padding in place of the 5px
   and 12px this rule had invented), and `.calm` is DELETED with it because calm
   is now what a chip IS when nothing else is said.

   `.hot` stays typed here rather than swapped for the served `.chip--live`
   class: landing.js's className is graded verbatim — "chip hot" / "chip calm"
   — by test_landing.mjs, so `hot` and `calm` remain this screen's LOCAL ALIASES
   of the served pair rather than becoming a second grammar. Nothing moved when
   they did: tokens.css points --land-accent-bg at --tomato-wash and
   --land-accent-hover at --tomato-dark, which is `.chip--live` to the value,
   including the ruling's legibility fix (the darkened red on the wash reads
   5.2:1 where the flat hue reads 3.8:1 and fails AA at this size). */
#home .chip.hot{background:var(--land-accent-bg);color:var(--land-accent-hover)}

/* One small line (founder, 2026-08-11): the joining roster collapsed to a
   quiet computed count — and the line is the one door into Hiring, where the
   fourteen it counts live ("remove hiring also"). */
#home .land-joining{display:block;margin:0 auto 24px;min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--land-faint);font:inherit;font-family:var(--land-sans);font-size:13px;text-align:center;cursor:pointer}
#home .land-joining:hover{color:var(--land-muted)}
#home .land-joining:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── the way in, and the one quiet door that exists nowhere else ───────────
   #landFoot is the invitation AND the step-inside affordance: the same words
   that invite you in are what you press to enter. */
#home .land-bottom{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 20px 24px;pointer-events:none}
#home .land-bottom>*{pointer-events:auto}
#home .land-foot{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:0;border-radius:999px;background:none;color:var(--land-faint);font:inherit;font-family:var(--land-sans);font-size:13px;text-align:center}
#home .land-foot:hover{color:var(--land-ink)}
#home .land-foot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

#home .land-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
#home .land-tools button{min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--land-faint);font:inherit;font-family:var(--land-sans);font-size:12.5px}
#home .land-tools button:hover{color:var(--land-ink);text-decoration:underline}
#home .land-tools button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── stepped inside ────────────────────────────────────────────────────────
   The same second brain, full-bleed: /wiki/brain.html under this origin, in the
   iframe that never leaves the DOM. Hidden, not unmounted — stepping in and back
   out must cost nothing, and an iframe that is display:none keeps its page. */
#home .ws{display:none;position:relative;height:calc(100vh - var(--land-top))}
#home.stepped-in .ws{display:block}
#home .ws-brain{position:absolute;inset:0;min-width:0}
#home .ws-brain iframe{display:block;width:100%;height:100%;border:0}

/* Nothing floats over the brain any more (founder, 2026-08-21: "The floating
   '<' circle goes — wordmark = workspace, like every app."). The estate bar's
   SUPASMART is the way out, so the pane is the whole stage. */

/* Under 900px the chart stacks into one column and the stage sits higher. The
   constellation stays exactly as it is: it is the screen's ambience, not a
   widget that gets dropped when the viewport narrows. */
@media (max-width:900px){
  #home .land-stage{padding-top:clamp(20px,7vh,56px)}
  /* The halo is sized in pixels, so on a phone the same ellipse whites out the
     whole screen and the constellation is there in the DOM and nowhere on the
     glass. Tighten it to the reading column instead. */
  #home #landHalo{background:radial-gradient(ellipse 420px 460px at 50% 38%,var(--paper) 34%,rgba(255,255,255,.9) 60%,rgba(255,255,255,0) 82%)}
  #home .land-greet{min-height:36px;font-size:30px}
  /* Side by side there is no room for four columns, so the chart becomes one:
     every department under the last, every person under their department. The
     drop into each limb survives — it is what still reads as a chart rather
     than a list — and the horizontal bus goes, because a bus over a single
     stacked limb is a line pointing at nothing. */
  #home .org-row{flex-direction:column;align-items:center}
  /* The stacked chart takes its column's full width. Left shrink-to-fit, the
     whole limb chain wraps the widest NAME (~260px) while the card is 320 —
     the card used to overflow that chain invisibly, and the fold's own
     overflow:hidden turned the same overflow into clipped card sides. */
  #home .land-org>.org-row{width:100%}
  /* Stacked, the drop must end exactly where the limb's content begins: a
     22px stub over 16px of padding ran six pixels INTO every pill and card,
     which is the "breaking up" the founder saw on the phone (2026-08-12). */
  #home .org-limb{width:100%;padding:16px 0 0}
  #home .org-limb::before{height:16px}
  #home .org-limb::after{content:none}
  /* 100%, not a vw figure: the stage has 20px of side padding, and a node
     measured against the viewport instead of the column it sits in is how a
     phone ends up scrolling sideways by two pixels. */
  /* Stacked, every node costs vertical room the ask box below it needs, so the
     node turns on its side: the face beside the name instead of above it, which
     is the rail's own idiom and halves the height without dropping anything.
     Nothing is centred here — a column of centred rows reads as four unrelated
     cards rather than as one branch. */
  #home .org-person{display:grid;grid-template-columns:auto 1fr;column-gap:12px;justify-items:start;width:min(320px,100%);padding:12px 14px;text-align:left}
  #home .org-person .face{grid-row:1/span 2;width:32px;height:32px}
  /* Stacked, a name has the whole width and rarely wraps, so the reserved
     second line would only add air between every node. */
  #home .org-person .who{min-height:0}
  #home .org-person .chip{margin-top:4px}
  /* Stacked, a fold gives back HEIGHT, not width: the track that collapses is
     the row, so a folded department hands its room to the ones below it. It
     also stretches to the limb — the centred (shrink-to-fit) fold the desktop
     wants would clip the card sides against its own overflow:hidden here. */
  #home .org-fold{align-self:stretch;grid-template-columns:1fr;grid-template-rows:1fr;transition:grid-template-rows .32s ease}
  #home .org-limb.is-folded .org-fold{grid-template-columns:1fr;grid-template-rows:0fr}
}

/* A fold still folds under reduced motion — it just does it at once. The state
   change is the reader's own press; only the travel is decoration. */
@media (prefers-reduced-motion:reduce){
  #home .org-fold,#home .org-fold::before,#home .org-fold>.org-row{transition:none}
}