/* apps/org network-only styles.
   ---------------------------------------------------------------------------
   .org is a SIBLING of .com and .net, not a copy of either. It loads the same
   compiled app.css so all three are unmistakably one family, then overrides the
   tokens below so you know at a glance which surface you are on. Structure
   carries the family resemblance; colour distinguishes the property.

     .com  a product. Warm near-black, GOLD, editorial serif. It wants you to act.
     .net  a reference. Cooler ground, STEEL accent, sans display, tight rhythm.
           It wants you to scan and browse.
     .org  a schedule. Green-shifted ground, JADE accent. It wants you to say
           whether you are free.

   WHY JADE (#7fc79a), and why it is owned end to end — links, brand mark,
   favicon, and buttons:

   1. The object this property is built around is a day marked available. Green
      is the one colour every calendar in the world already uses for "free" —
      the accent states the product's core fact before a word is read. Gold says
      "premium", steel says "reference"; neither says "that date is open".
   2. It is the only hue left that is neither .com's warm gold nor .net's cool
      steel. Three properties, three well-separated points on the wheel, so a
      screenshot of any one of them is attributable without a wordmark.
   3. Buttons included, deliberately. A gold CTA on this page reads as .com's
      button pasted onto .org — which is precisely how the second-shooter
      network stayed invisible on .com in the first place. A jade thing on .org
      means .org; a gold thing means "this hands you off to Videographer.com".

   Keep new network styling on this side of the line — if a change would look
   equally at home on .com, it probably belongs in app.css instead. */

:root {
  /* Green-shifted ground: darker and cooler than .com's warm near-black, and
     tinted away from .net's blue-leaning grey. */
  --bg: #080d0a;
  --panel: #101713;
  --panel2: #151d18;
  --line: #202b25;
  --line2: #2f3d35;
  --ink: #e9f0ea;
  --muted: #a4b2a8;
  --faint: #7d8c83;

  /* Jade is the NETWORK's interactive colour. Gold survives only on the one
     cross-network handoff, so a gold thing on .org always means
     "this is Videographer.com". */
  --jade: #7fc79a;
  --jade-soft: #a8ddbd;

  /* Gold is REMAPPED here rather than overridden rule by rule, because it kept
     leaking. app.css spends var(--gold) in places .org had no override for —
     .answer's left border, the bold text inside it, .fine links, .status — and
     on a rendered page each one read as .com's accent pasted onto this property,
     which is the exact failure the rule above exists to prevent. Caught by
     looking at /dates, not by reading the stylesheet.

     The one deliberate handoff, .btn-com below, is written in literal hex
     precisely so it survives this remap. */
  --gold: #7fc79a;
  --gold2: #a8ddbd;
}

/* A crew network is read, not scanned: keep .com's editorial rhythm rather than
   .net's tighter directory rhythm, but drop the display serif on the small
   headings so the page reads as working copy, not marketing. */
.section-head h2, .cm-h { font-family: var(--sans); letter-spacing: -.018em; font-weight: 700; }

/* DEAD RULE REMOVED: this used to size `.home-hero h1`, and .home-hero stopped
   existing when the homepage moved onto the real `.hero` classes. It matched nothing.

   The hero h1 is NOT resized here on purpose. .org's headline is longer than .com's,
   so at 375px the shared clamp wraps it to four lines and orphans "free." on the
   last one — but diverging a shared type scale to fix one property's copy is how one
   component starts looking like three, which .net was right about. text-wrap:balance
   evens the lines at the same size instead, and is simply ignored where unsupported. */
.home-main .hero h1, .p-crew h1, .wrap h1 { text-wrap: balance; }

/* Interactive text is jade here; .com's gold links would read as one site.
   EXCEPT THE NETWORK NAMES. .nw-name carries a per-property colour from the
   shared stylesheet — .nw-com gold, .nw-net steel, .nw-org jade — so that a row
   of the three reads the same on whichever site you are standing on. This rule
   was repainting all three jade, base AND hover, because :not(.brand):not(.btn)
   out-specifies a plain .nw-com. That is the .brand mistake again: a local rule
   quietly beating a shared one.

   TWO PREFIXES, BECAUSE ONE WAS NOT ENOUGH. .com later redrew the line to match
   the block — the anchor became a bare .nl-to with the suffix in a nested
   <b class="nw-com"> — so an exclusion keyed only on "nw-" stopped catching the
   anchor and the wordmark went jade again. Their naming is nw-* and nl-*; both
   are excluded now, so the rule survives the next redraw as well.

   EXCLUDED BY FAMILY, NOT BY CLASS. The first version listed .nw-name and missed
   the network LINE, whose anchors are .nl-to — .com shipped that component the
   same day and my exclusion had never heard of it. A list grows every time they
   ship anything shared, which is the trap they named. Every network anchor in
   both components carries a class containing "nw-" (nw-name, nl-to nw-com,
   nl-here nw-org), so one attribute selector covers the family and whatever they
   add next.

   NOT `color: revert`, which .com proposed: revert rolls back the cascade ORIGIN
   and would hand these links the user-agent blue, not the .nw-com beneath. The
   fix is for this rule to stop matching, not for the value to be undone. */
.wrap a:not(.brand):not(.btn):not([class*="nw-"]):not([class*="nl-"]), .container a:not(.brand):not(.btn):not([class*="nw-"]):not([class*="nl-"]),
.section-lede a, .ml-prose a { color: var(--jade); }
.wrap a:not(.brand):not(.btn):not([class*="nw-"]):not([class*="nl-"]):hover, .container a:not(.brand):not(.btn):not([class*="nw-"]):not([class*="nl-"]):hover { color: var(--jade-soft); }
.brand { color: var(--ink); }
.brand b { color: var(--jade); }

/* THE WORDMARK MUST NOT MOVE ON HOVER. Owner, 2026-07-26, on the footer network
   block: "hovering them should not change the color of Videographer". The shared
   sheet has `.nw-name:hover { color: var(--gold2) }`, and on this property that
   variable is remapped to jade, so the word turned green and underlined itself
   under the cursor. The SUFFIX is what carries the property's identity — .com
   gold, .net steel, .org jade — and it already stands out; recolouring the word
   in front of it makes the whole row change character for a pointer passing over.

   Hover still has to be legible as a control, so the row keeps its underline on
   the suffix. What goes is the colour change on the word and the underline under
   it. This lives here rather than in the shared sheet because that sheet is .com's
   to edit; the same two lines belong there, and they have been told. */
.ftr-network .nw-name:hover, .ftr-network .nw-name:focus-visible { color: var(--ink); text-decoration: none; }
.ftr-network .nw-name:hover b { text-decoration: underline; }

/* The two siblings sit closer than the property you are on, per the owner's
   split: this one is named above with a full description, they get one line each
   and a tighter rhythm so the three read as one-plus-two, not as three equals. */
.ftr-brandcol .ftr-network { gap: .4rem; margin-top: 1.5rem; }

/* Jade CTAs. --jade is light, so the label goes dark for contrast. */
.btn-gold { background: var(--jade); color: #06140d; }
.btn-gold:hover { background: var(--jade-soft); color: #06140d; box-shadow: 0 4px 16px -6px rgba(127,199,154,.5); }
.btn-gold:active { background: var(--jade); box-shadow: none; }
.site-nav a.btn-gold { color: #06140d; }
.eyebrow { color: var(--jade); }

/* The one deliberate exception: the handoff back to .com keeps .com's gold, so
   "leaving this property" is a colour, not a label you have to read. */
.btn-com { background: transparent; color: #e8b04b; border: 1px solid rgba(232,176,75,.45); }
.btn-com:hover { background: rgba(232,176,75,.1); color: #e8b04b; }

/* The skip link's background follows the remapped --gold, so it is already jade;
   only its label needs correcting, because app.css hardcodes .com's brown. */
.skip-link { color: #06140d; }

/* Which nav item you are on. The aria-current attribute carries this for a
   screen reader; this is the sighted half of the same fact, and it is keyed off
   the SAME attribute so the two can never disagree. */
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { content: ""; display: block; height: 1px; background: var(--jade); margin-top: 2px; }

/* The availability strip — the property's one piece of native furniture. Three
   states, stated in colour, matching what the API stores: available, busy, and
   the unmarked day that is deliberately never surfaced in a search. */
.av-key { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.av-key li { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .92rem; }
.av-key i { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.av-free { background: var(--jade); }
.av-busy { background: var(--line2); }
.av-unset { background: transparent; border: 1px dashed var(--line2); }

/* Numbered steps, borrowed structure from .com's .ps-list but jade-numbered. */
.ps-list .n { color: var(--jade); }

/* THE CREW PRODUCT — /dates, /search and /requests.

   These components are written HERE rather than inherited, and that was not the
   plan. Every rule .com's account page uses for the same furniture (.cal-grid,
   .ss-card, .ss-conn, .lbtn, .status) is compiled into the shared app.css this
   property already serves — but every one of them is scoped under .p-account or
   .p-pro, .com's own page classes. On .org they never match, so the calendar
   rendered as a bare column of unstyled buttons.

   Borrowing .p-account was the cheap fix and is the wrong one twice over: it
   declares .org's pages to BE .com's account page, it needs .p-pro at the same
   time for the buttons, and it hands .com silent control of this property's
   product styling. So .org owns its product surface under .p-crew, in jade
   natively instead of overriding gold. */

.p-crew .cm-h { font-size: 1.05rem; margin: 2rem 0 .8rem; }
.p-crew .notice { border-radius: 10px; padding: .7rem .95rem; margin: 1.1rem 0; font-size: .9rem; border: 1px solid var(--line2); background: var(--panel); }
.p-crew .notice-ok { border-color: #2e5a3a; color: var(--jade-soft); }
.p-crew .notice-err { border-color: #6b3a3a; color: #e9b8b8; }

/* Two months, side by side on a desktop and stacked on a phone. */
.p-crew .cal-wrap { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.4rem 0; }
.p-crew .cal-month { flex: 1 1 17rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem 1.2rem; box-shadow: var(--shadow); }
.p-crew .cal-mhead { font-family: var(--sans); font-weight: 700; font-size: .95rem; margin: 0 0 .7rem; }
.p-crew .cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; margin: 0 0 .35rem; }
.p-crew .cal-dow span { text-align: center; font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; color: var(--faint); }
.p-crew .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }

/* Each day is its own one-button form, and display:contents keeps the BUTTON as
   the grid item so a form wrapper cannot break the seven-column rhythm. */
.p-crew .cal-cell { display: contents; }

.p-crew .cal-day { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; width: 100%; font: inherit; font-size: .82rem; color: var(--muted); background: rgba(0, 0, 0, .18); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.p-crew button.cal-day:hover { border-color: var(--jade); color: var(--ink); box-shadow: var(--shadow-lift); }

/* Available is the one state the whole property exists to express, so it is the
   only one that gets the accent. */
.p-crew .cal-day.av { background: rgba(127, 199, 154, .16); border-color: #2e5a3a; color: var(--jade); font-weight: 700; }
.p-crew .cal-day.bz { background: rgba(0, 0, 0, .4); border-color: var(--line2); color: var(--faint); text-decoration: line-through; }
.p-crew .cal-day.cal-pad { background: none; border: 0; cursor: default; }
/* NOT opacity. `opacity: .3` composited the text down with everything else and
   measured 1.87:1 against the cell — 24 cells on a normal day, the entire first
   month block, and the thing that tells you where today sits in the grid.
   Colouring the text directly fixes that. #6b776f was the first candidate and
   only reaches 4.02, which still FAILS AA — measured in a browser against the
   cell's real composited background, rgb(13,19,16). #76837a gives 4.74 there and
   4.59 against the bare panel, so it clears 4.5 whichever way the cell paints,
   and at 4.74 against --muted's 8.51 it still reads as past rather than active.
   Reaching 4.5 by raising the opacity instead needs .7, which stops looking past
   at all. apps/org/test/contrast.test.js pins this. */
.p-crew .cal-day.cal-past { color: #76837a; cursor: default; }

/* The read-only discoverability panel. The warn variant is the load-bearing one:
   dates saved plus discoverability off means nobody can find you. */
.p-crew .crew-panel { margin: 1.6rem 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--jade); border-radius: 10px; background: var(--panel); }
.p-crew .crew-panel p { margin: 0 0 .5rem; }
.p-crew .crew-panel p:last-child { margin: 0; }
.p-crew .crew-panel-warn { border-left-color: #d8a24b; }
.p-crew .crew-actions { margin: 1.1rem 0; }

/* One date, one city, one button. Baseline-aligned so it reads as a single ask. */
.p-crew .crew-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin: 1.4rem 0; padding: 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.p-crew .crew-field, .crew-router .crew-field { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 9rem; }
.p-crew .crew-field-lead, .crew-router .crew-field-lead { flex: 2 1 15rem; }
.p-crew .crew-field span, .crew-router .crew-field span { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.p-crew .crew-field input, .crew-router .crew-field input { font: inherit; font-size: .92rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; padding: .55rem .7rem; }
/* The border change alone was a 1px cue; WCAG 2.2 SC 2.4.11 wants a 2px
   perimeter, and app.css already ships a global 2px jade :focus-visible ring.
   This rule used to say `outline: none`, which out-specified it and left these
   two inputs as the only focusable controls on the property with no ring. */
.p-crew .crew-field input:focus, .crew-router .crew-field input:focus { border-color: var(--jade); }

/* Search results. */
.p-crew .ss-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 1.4rem 0; }
/* A column with the action pushed to the bottom, so every Ask button in a row
   sits on the same line. Grid rows already stretch cards to the tallest one; the
   buttons were floating at whatever height their own note ended at, which read as
   misalignment rather than as variation. */
.p-crew .ss-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.p-crew .ss-card:hover { border-color: var(--line2); box-shadow: var(--shadow-lift); }
.p-crew .ss-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.p-crew .ss-city, .p-crew .ss-when { color: var(--muted); font-size: .82rem; }
.p-crew .ss-when i { margin-right: .3rem; color: var(--faint); }
.p-crew .ss-reel { font-size: .8rem; }
.p-crew .ss-reel i { margin-right: .25rem; }
.p-crew .ss-types { margin: .45rem 0 0; color: var(--muted); font-size: .84rem; }
.p-crew .ss-cnote { margin: .5rem 0 0; color: var(--ink); font-size: .88rem; }
.p-crew .ss-card-foot { margin: .9rem 0 0; padding-top: .2rem; margin-top: auto; }
.p-crew .ss-hint, .p-crew .empty, .p-crew .locked { color: var(--muted); font-size: .9rem; }

/* Add-a-note, collapsed. A native <details> so the control needs no JavaScript;
   the marker is the only jade thing in a card foot, because it is the only
   optional action there. list-style on the summary kills the default triangle in
   Firefox, ::-webkit-details-marker in Safari, and the caret is drawn from the
   same border trick the nav hamburger uses rather than a glyph font. */
.p-crew .ss-addnote { margin: 0 0 .55rem; }
.p-crew .ss-addnote > summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; color: var(--jade); font-size: .86rem; list-style: none; }
.p-crew .ss-addnote > summary::-webkit-details-marker { display: none; }
.p-crew .ss-addnote > summary::before { content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s ease; }
.p-crew .ss-addnote[open] > summary::before { transform: rotate(90deg); }
.p-crew .ss-addnote-in { display: block; width: 100%; box-sizing: border-box; margin: .5rem 0 0; font: inherit; font-size: .88rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; padding: .5rem .6rem; resize: vertical; }
.p-crew .ss-addnote-in:focus { border-color: var(--jade); }

/* Request rows. The left border states the row's kind without a label. */
.p-crew .crew-group { margin: 1.8rem 0; }
.p-crew .ss-conn { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin: 0 0 .6rem; padding: .85rem 1rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 10px; }
/* 60% basis so a long note wraps INSIDE this block and the contact stays on the
   right. Without it, a row with a note pushed the revealed email onto its own
   line while the row above kept it right-aligned, and two adjacent rows of the
   same kind looked unfinished. */
.p-crew .ss-conn-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; flex: 1 1 60%; }
.p-crew .ss-conn-in { border-left-color: var(--jade); }
.p-crew .ss-conn-ok { border-left-color: #2e5a3a; }
.p-crew .ss-conn-dir { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.p-crew .ss-conn-type { color: var(--muted); font-size: .82rem; }
.p-crew .ss-conn-note { flex-basis: 100%; color: var(--ink); font-size: .88rem; }
.p-crew .ss-email { color: var(--jade); font-size: .86rem; }

/* Accept is the only jade button in a row, because it is the only one that does
   something irreversible: it reveals both addresses. */
.p-crew .lbtns { display: flex; gap: .5rem; }
.p-crew .lbtns form { margin: 0; }
.p-crew .lbtn { font: inherit; font-size: .85rem; font-weight: 600; border-radius: 9px; padding: .45rem .95rem; cursor: pointer; border: 1px solid var(--line2); background: none; color: var(--muted); }
.p-crew .lbtn.accept { background: var(--jade); color: #06140d; border: 0; }
.p-crew .lbtn.accept:hover { background: var(--jade-soft); }
.p-crew .lbtn.decline:hover { color: var(--ink); border-color: var(--faint); }
.p-crew .status { display: inline-block; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); border: 1px solid var(--line2); border-radius: 999px; padding: .18rem .5rem; }
.p-crew .status.accepted { color: var(--jade); border-color: #2e5a3a; }

/* On a 375px phone the seven-column grid put the day box at 40px, under the
   44px a thumb actually wants. Measured, not guessed. Side padding and grid gap
   are the cheapest things to trade for tap area, and this is the surface the
   no-JS argument rests on: a videographer marking one Saturday one-handed on a
   shoot day. 44x44 holds at 375px, verified in a browser. At 320px the same
   trade lands at 36x36 — still clear of the 24px WCAG 2.5.8 floor, but not 44,
   and the earlier version of this comment claimed 44 outright. */
@media (max-width: 430px) {
  .p-crew .cal-month { padding: .9rem .5rem 1rem; }
  .p-crew .cal-grid, .p-crew .cal-dow { gap: .16rem; }

  /* A full-width action is easier to hit than two side-by-side ones. */
  .p-crew .lbtns { width: 100%; }
  .p-crew .lbtns form { flex: 1 1 0; }
  .p-crew .lbtn { width: 100%; padding: .6rem .95rem; }
}

/* THE HOMEPAGE ROUTER. The hero used to be a slogan and a link that sent you
   elsewhere to start, so the first thing this property showed a videographer was
   a description of itself. This is the working input, in the same position .com
   puts its describe box, and it is a plain GET form so the homepage is not a
   special case anyone has to maintain separately.

   Deliberately bigger than the /search form it submits to: on the homepage it is
   the primary act, and further in it is a control on a page that already has
   results. */
.crew-router { display: flex; flex-wrap: wrap; gap: .85rem; align-items: flex-end; margin: 1.6rem 0 .9rem; padding: 1.25rem; border: 1px solid var(--line2); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.crew-router .crew-field span { font-size: .68rem; }
.crew-router .crew-field input { font-size: 1rem; padding: .7rem .8rem; }
.crew-router .btn { padding: .75rem 1.3rem; }

/* The other direction, kept close to the router: the same network from the
   supply side, and half the people arriving want that half. */
.crew-router-flip { color: var(--muted); font-size: .92rem; margin: 0 0 1.6rem; }

/* The gate's secondary explanation when the panel slot is already taken by the
   specific thing the visitor asked for. Prose, not a second bordered box. */
.p-crew .crew-why { color: var(--muted); font-size: 1rem; margin: 1.1rem 0; max-width: 46rem; }

/* THE EXCHANGE, on /how-it-works. Two columns per message: what moves, and what
   does not. The second column is the reason the page exists — a prose description
   of privacy always states the first half and leaves the second implied, and the
   second half is the one somebody is actually worried about. So it is given equal
   width and its own colour, and jade is deliberately NOT used on it: jade means
   "this is live, this is yours" everywhere else here, and this list is the
   absence of something. */
.xch-list { display: grid; gap: 1rem; margin: 1.6rem 0; }
.xch { border: 1px solid var(--line); border-left: 3px solid var(--jade); border-radius: 12px; background: var(--panel); padding: 1.1rem 1.2rem; }
.xch-head { display: flex; gap: .85rem; align-items: baseline; }
.xch-t { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; letter-spacing: -.018em; margin: 0; }
.xch-head p { color: var(--muted); margin: .3rem 0 0; font-size: .94rem; }
.xch-n { font-family: var(--mono); font-size: .78rem; color: var(--jade); padding-top: .15rem; }

/* Side by side where there is room, stacked on a phone — the two lists are a
   comparison, so they must not read as one continuous list. */
/* align-items:start so each box hugs its own list. Stretching them to match left
   the one-item 'what does not' column in step 01 as a mostly-empty panel the
   height of a five-item list, which read as something missing. */
.xch-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; margin: 1rem 0 0; align-items: start; }
.xch-col { border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; background: var(--bg); }
.xch-k { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 .5rem; font-weight: 600; }
.xch-col ul { margin: 0; padding: 0 0 0 1rem; }
.xch-col li { color: var(--ink); font-size: .9rem; margin: 0 0 .35rem; }
.xch-col li:last-child { margin: 0; }

/* The absence column: same weight, deliberately not jade. */
.xch-not { border-color: var(--line2); }
.xch-not .xch-k { color: #d8a24b; }
.xch-not li { color: var(--muted); }

/* "You are free" / "you marked this busy" on a request row. The busy case is the
   one that matters: somebody is asking for a day you already said no to, and that
   must not look like the ordinary case. Amber, not jade — jade means available
   everywhere else on this property, so using it here would say the opposite. */
.p-crew .ss-mine { font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .16rem .5rem; border: 1px solid transparent; }
.p-crew .ss-mine-free { color: var(--jade); border-color: #2e5a3a; }
.p-crew .ss-mine-busy { color: #d8a24b; border-color: rgba(216, 162, 75, .45); }

/* The revealed address is the payoff of the whole loop, and it was floating at the
   far right of a wide row with nothing tying it to the name it belongs to. */
.p-crew .ss-conn-contact { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.p-crew .ss-contact-k { font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* THE THREE GLYPHS THAT USED TO COST 280,922 BYTES. Font Awesome's subset CSS plus
   its sharp-duotone woff2 was 42% of a cold homepage, font-display:block, to draw
   a hamburger, a play triangle and a calendar. The calendar is simply gone — the
   date beside it reads "Monday 3 August", which does not need a picture of a
   calendar to be understood. The other two are shapes. */

/* Three bars, centred in the 44px target app.css already gives the button. */
.navtoggle { display: none; align-items: center; justify-content: center; }
@media (max-width: 820px) { .navtoggle { display: flex; } }
.navtoggle-bars { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.navtoggle-bars::before, .navtoggle-bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.navtoggle-bars::before { top: -6px; }
.navtoggle-bars::after { top: 6px; }

/* A play triangle from a border, inheriting the link's colour so it stays jade. */
.p-crew .ss-reel-play { display: inline-block; width: 0; height: 0; margin-right: .35rem; vertical-align: baseline; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

/* ONE UNBROKEN STRING USED TO BREAK THE WHOLE PAGE. Measured at 1280px: a 280-char
   note with no spaces gave a /requests row a scrollWidth of 3183 against a 1280
   client, ran the text over the neighbouring cards, and put a horizontal scrollbar
   on the document — which also shoved every other row's Accept and Decline out of
   alignment.

   Not synthetic. 280 chars is the API's own cap on a request note, and pasting a
   long URL into "up to 280 characters you wrote" is the obvious thing a requester
   does. A name is capped at 120 with no space requirement, which still overflows a
   272px card several times over.

   `anywhere` rather than `break-word` so it also applies while computing intrinsic
   widths, and min-width:0 because a flex child will not shrink below its content
   without it — which is what let the row grow instead of the text wrapping. */
.p-crew .ss-card, .p-crew .ss-conn, .p-crew .xch-col { overflow-wrap: anywhere; }
.p-crew .ss-conn-main, .p-crew .ss-card-head { min-width: 0; }
.p-crew .ss-cnote, .p-crew .ss-conn-note, .p-crew .ss-email { overflow-wrap: anywhere; }

/* The shoot-type filter, made visible. It only ever arrives from a shared link, and
   as a hidden field it silently filtered everything out while the empty state told
   the reader to clear it. A filter you cannot see is not a filter. */
.p-crew .crew-filter { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; }

/* The state a card is already in, in place of a button that would repeat a question.
   Declined is deliberately NOT red-as-error — they said no to one date, which is a
   normal answer and the whole point of declining being free. It is just not jade,
   because jade on this property means "you can act on this". */
.p-crew .ss-state { display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line2); border-radius: 999px; padding: .3rem .6rem; }
.p-crew .ss-state-ok { color: var(--jade); border-color: #2e5a3a; }
.p-crew .ss-state-no { color: var(--muted); }

/* The 404's index. .ps-list is .com's numbered-steps layout, reused without the
   numbers, because these are destinations rather than an ordered process. */
.nf-list { margin: 1.6rem 0 0; }
.nf-list .ps b a { font-size: 1.02rem; }


/* A warning that is a line rather than a panel. .fine is muted by design, so the
   one case where it carries a fault needs to read as one without becoming a box —
   this sits inside the green "You are findable" panel, correcting one detail of it. */
.p-crew .crew-fine-warn { color: #d8b45f; }
.p-crew .crew-fine-warn a { color: #d8b45f; text-decoration: underline; }

/* TAP TARGETS, MEASURED AT 375px RATHER THAN ASSUMED. .net raised their own floor
   from 24 to 44 and found 13 controls their probe had been certifying, including
   a shared header brand mark. Running the same audit here found 127 controls under
   44px, and — the part that is not a style preference — FIVE distinct controls
   under 24px, which is the WCAG 2.5.8 AA minimum rather than platform guidance:

     the footer brand link          139x20, on all seven pages
     the /404 index links            79x19, its entire navigation
     the reel link on a result card  37x20
     the add-a-note disclosure      306x22, which I added today
     the revealed email link        126x22

   The calendar day cells did NOT appear, which is the one part of this that had
   already been measured — that earlier 44px work holds at 375px.

   Two floors on purpose. 24px everywhere, because a 20px target is bad with any
   pointer and AA does not care what you are holding. 44px for ACTIONS on a phone,
   which is platform guidance and the number a thumb actually wants. min-height
   needs a block-ish display to do anything, so the inline ones get one. */
.p-crew .ss-reel { display: inline-flex; align-items: center; min-height: 24px; }
.p-crew .ss-email { display: inline-block; min-height: 24px; padding: .1rem 0; }
.p-crew .ss-addnote > summary { min-height: 24px; }
/* THE BRAND IS .com's NOW, and this rule had to go rather than stay harmlessly.
   I fixed the 139x20 footer wordmark locally with inline-block + min-height: 24px.
   .com then fixed it properly in the SHARED component — .brand { display:
   inline-flex; align-items: center; min-height: 44px } — and my selector,
   `.site-footer .brand`, outranks their bare `.brand` on specificity. So .org
   alone would have kept a 24px inline-block wordmark while .net and .com got a
   44px inline-flex one: a local patch quietly beating the shared fix that
   replaced it. Deleted, not narrowed. They also had the better reason for
   inline-flex over padding — padding on an inline element grows the hit box
   without moving the line box, so the footer reflows and the fix reads as a bug. */
.nf-list .ps b a { display: inline-flex; align-items: center; padding: .15rem 0; }

@media (max-width: 620px) {

  /* The actions, at the full 44. These are the controls the product IS — ask,
     accept, decline, search, and the two homepage CTAs — so a near miss at 40 or
     41px is worth the vertical space it costs. */
  .p-crew .lbtn, .p-crew .btn, .crew-router .btn, .btn { min-height: 44px; }
  .p-crew .crew-field input, .crew-router .crew-field input { min-height: 44px; }
  .p-crew .ss-addnote > summary { min-height: 44px; }
}

/* A LINK THAT IS ITS WHOLE PARAGRAPH IS A CONTROL, not a word in a sentence, and
   .com's classifier is what surfaced this: compare a link's text to its parent's,
   and if they are equal the link IS the block. "Now find someone for a date you
   are booked on" measured 317x16 at the foot of /dates — a standalone navigation
   link, under the 24px AA floor, and my earlier display-based exemption waved it
   through because the parent was a <p>.

   :only-child is the selector that draws exactly the right line. These same .fine
   paragraphs also carry links mid-sentence — "Turn it off any time on your
   listing", "Not listed yet? List free" — and those are the real 2.5.8 inline
   exception: forcing them to 24px would break the line rhythm and fix nothing.

   inline-flex rather than padding, which is .com's point about the brand: padding
   on an inline element grows the hit box without moving the line box, so the
   surrounding text reflows and the fix reads as a new bug. */
.p-crew p.fine > a:only-child, p.fine > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* 44, NOT THE 24 I FIRST WROTE, and .com's lesson is why: they declined to take
   "the footer" to 44, then found the network rows inside it were specific controls
   that deserved it and had been swept along with a decision about a REGION. My
   version of that mistake was treating the AA floor as the target — I raised five
   controls to exactly 24 and stopped, which is conformance rather than a thumb
   being able to hit them.

   These are the ones where 44 is plainly right and cheap: a standalone link that
   IS its paragraph is a next-step control ("The longer version…", "Now find
   someone for a date you are booked on"), and the /404 index is the only route out
   of a dead end — if any navigation on this property earns the full target, it is
   the page whose entire job is getting you somewhere else. Five links, 13px each.

   DELIBERATELY LEFT AT THE AA FLOOR, so nobody raises them by sweep later:
     .ss-reel and .ss-email sit inside dense card and connection rows, where 44px
     each inflates every card in the grid for a link beside other text.
     The footer link lists stay at 29 — twelve rows at 44 is roughly +180px, and
     Corey has rejected this footer's look twice. .com made that call and I agree:
     trading a refused aesthetic for guidance already met is a bad trade. */
.nf-list .ps b a { min-height: 44px; }

/* The full description needs room to be full. The shared .ftr-tag caps at 24rem,
   which is right for the one-line form it was built for and forces this property's
   three-line description into four. Widened here only, and only on the footer
   brand column, so nothing else that uses .ftr-tag changes. */
.ftr-brandcol .ftr-tag { max-width: 30rem; }

/* THE TYPING MOVED OUT OF CSS. It was an overlay over the field, positioned against
   the panel's padding — so it printed over the LABEL, and because CSS cannot write
   into a form control the read pane could not follow it. Both were visible on the
   owner's screen before they were visible to me.

   app/public/console.demo.js types into the real textarea now, the way .net and .com
   do, and swaps in a pane the SERVER rendered for each example. So .ctype, its
   keyframes and its reduced-motion branch are all gone: there is no overlay to
   position, nothing to clip to one nowrap line, and no width for a sentence to fit.
   .vh survives below — the example hint still uses it. */

/* Visually hidden, still announced. Used by the console's example hint: the typed
   line is aria-hidden (it animates mid-word), and the placeholder cannot come back
   because it renders under that overlay — so the example a sighted user watches is
   also carried here for anyone who cannot watch it.

   clip-path rather than width/height alone, so the text is not read as a single
   collapsed line, and nowrap so it never reflows the layout it sits in. If .com
   wants this it belongs in the shared sheet; nothing there provides it today, and
   .skip-link is a link treatment rather than a utility. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}