/* HeyKrew marketplace, signed-in application.
   Layered on css/site.css: tokens, type and buttons come from there.

   Different temperature from the portfolio on purpose. The public site sells;
   this is a tool people work in, so it is denser, quieter, and every state a
   record can be in has to be legible at a glance. */

.app{ display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

/* --- rail ---------------------------------------------------------------- */
.rail{
  background: var(--ink-2); border-right: 1px solid var(--line-2);
  padding: 22px 0; display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
.rail-head{ padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rail-brand{ display: block; color: var(--paper); }
.rail-nav{ display: flex; flex-direction: column; gap: 26px; overflow-y: auto; min-height: 0; flex: 0 1 auto; }
.rail-out{ font-family: var(--mono); font-size: 9.5px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--dim) !important; }
/* Only on narrow screens, where thirty-odd links cannot sit in a row. */
.rail-menu{ display: none; }
/* The wordmark's letterform paths carry no fill attribute, so they fall back
   to black. Setting `color` on the svg alone does nothing: the paths have to
   be told to use it. Only the bolt ships with a fill of its own, which is why
   it was the one piece showing up correctly. */
.rail-brand svg path:not([fill]){ fill: currentColor; }
.rail-brand svg{ width: 96px; height: auto; color: var(--paper); display: block; }
.rail-group{ display: flex; flex-direction: column; gap: 2px; }
.rail-label{
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); padding: 0 22px 8px;
}
.rail-nav a{
  display: flex; align-items: center; gap: 10px; padding: 9px 22px;
  text-decoration: none; color: var(--mute); font-size: .9rem;
  border-left: 2px solid transparent; transition: color .25s var(--ease), background .25s var(--ease);
}
.rail-nav a:hover{ color: var(--paper); background: rgba(255,230,197,.03); }
.rail-nav a[aria-current="page"]{ color: var(--paper); border-left-color: var(--brand); background: rgb(var(--brand-rgb) / .06); }
/* A section that is not in this phase. Dimmed rather than hidden, because
   the shape of the console is part of knowing what it will be -- and the
   link still opens, onto a screen that says what it is waiting for. */
.rail-nav a.is-soon{ color: var(--dim); }
.rail-nav a.is-soon:hover{ color: var(--mute); }
.rail-nav a .soon{
  margin-left: auto; font-family: var(--mono); font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 6px;
}
.rail-foot{ margin-top: auto; padding: 0 22px; }

/* --- a screen that is not built yet -------------------------------------- */
/* The screen behind it is the design, blurred and inert: enough to see what
   is coming without reading a number off it. It is never the only thing a
   person is told -- the card in front says which phase it belongs to. */
.later{ position: relative; }
.later > .wrap-app{ filter: blur(7px) saturate(.5); opacity: .5; pointer-events: none; user-select: none; }
/* The heading's own count is a fixture too, and it sits above the blur. */
.later .topbar .pill{ display: none; }
.later-card{
  position: absolute; left: 50%; top: 96px; transform: translateX(-50%);
  width: min(520px, calc(100% - 36px)); z-index: 2;
  border: 1px solid var(--line); border-radius: 4px; background: var(--ink-2);
  padding: 26px 26px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.later-card h2{ margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.later-card p{ margin: 0 0 10px; color: var(--mute); font-size: .92rem; line-height: 1.55; }
.later-card .pill{ margin-bottom: 14px; }
@media (prefers-reduced-motion: no-preference){
  .later-card{ animation: later-in .3s var(--ease) both; }
}
@keyframes later-in{ from{ opacity: 0; transform: translate(-50%, 6px); } to{ opacity: 1; transform: translate(-50%, 0); } }

/* Prototype only: lets the owner see one screen as each role. */
.role-switch{
  display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-2);
  border-radius: 3px; background: var(--ink);
}
.role-switch button{
  flex: 1; padding: 6px 4px; border: 0; border-radius: 2px; cursor: pointer;
  background: none; color: var(--dim);
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.role-switch button[aria-pressed="true"]{ background: var(--brand); color: var(--ink); }

/* --- main ---------------------------------------------------------------- */
.main{ min-width: 0; }
.topbar{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; background: rgba(10,10,11,.94);
  backdrop-filter: blur(14px); z-index: 20;
}
.topbar h1{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.025em; }
.topbar .crumb{ font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 4px; }
.wrap-app{ padding: clamp(22px, 3vw, 38px) clamp(20px, 3vw, 40px); max-width: 1180px; }

/* The rail's own answer to "who is this?", before it has one. Two bars
   where the name and the account line will be, and a blank disc where the
   face goes -- not a placeholder name, because a placeholder name is
   somebody else's name. */
.rail-me[data-waiting] .avatar{ background: var(--ink-3); border-color: transparent; }
.rail-me[data-waiting] b,
.rail-me[data-waiting] b + span{
  display: block; border-radius: 3px; background: var(--ink-3);
}
.rail-me[data-waiting] b{ width: 104px; height: 11px; margin: 3px 0 6px; }
.rail-me[data-waiting] b + span{ width: 68px; height: 8px; }
.rail-me[data-waiting]{ animation: waiting 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .rail-me[data-waiting]{ animation: none; } }

/* --- the screen before its answer ---------------------------------------- */
/* Every wired screen ships the prototype's content and rewrites it from the
   API. Showing that first and swapping it out is worse than showing nothing:
   for a moment it is indistinguishable from data, and the numbers in it are
   nobody's. So the content area starts as a loading state and fills once.

   The rail and the heading stay, because they are true before any request:
   whose account this is and which screen they are on. Only the part that
   comes from the API waits. */
html.api-pending .wrap-app > *{ visibility: hidden; }
html.api-pending .wrap-app{
  min-height: 420px;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--ink-2) 0 0),
    linear-gradient(var(--ink-2) 0 0),
    linear-gradient(var(--ink-2) 0 0);
  background-size: min(320px, 46%) 26px, 100% 132px, 100% 96px;
  background-position: left top, left 58px, left 206px;
  background-origin: content-box;
  background-clip: content-box;
  animation: waiting 1.5s ease-in-out infinite;
}
/* Auth screens are one card and have nothing to hold back but the form. */
html.api-pending .auth-main{ visibility: hidden; }

/* The public creator profile does not use the app shell, so the rule above
   it -- which keys on .wrap-app -- never covered it. It was the one live
   screen where the prototype's invented person showed in full while the
   API answered: a name, a rate, and "5.0 from 3 businesses" about somebody
   who does not exist. Every screen that loads live.js is now covered by one
   of these four selectors, and the pre-commit hook says so. */
html.api-pending .pub-main{ visibility: hidden; }
@keyframes waiting{ 0%, 100%{ opacity: 1 } 50%{ opacity: .45 } }
@media (prefers-reduced-motion: reduce){
  html.api-pending .wrap-app{ animation: none; opacity: .8; }
}

/* --- the shape of what is coming ----------------------------------------- */
/* The hold above is honest and blank. For as long as the API takes, the
   directory is an empty band under its filters and a creator's page is a
   nav bar over nothing, and neither says whether anything is on its way.
   These are also the two screens a business is most likely to land on cold,
   from a link, with no session and a Cloud Run instance still starting.

   So the held region carries a skeleton in the shape of its own content --
   cards where the cards go, a portrait and lines where the profile goes --
   and a sheen crosses it. Two things come from drawing the shape that a
   spinner cannot give: the screen is already about the right height, so
   little moves when the answer lands, and the wait reads as this page
   loading rather than as the browser having stopped.

   Nothing here is data. The skeleton says a name goes here, never whose.

   It is switched by the same class that does the holding, so it cannot
   outlive the wait and there is nothing to remember to remove.
   `visibility` is the one property a child can turn back on after an
   ancestor has turned it off -- which is why the hold uses it rather than
   `display` -- so the skeleton shows inside the very region whose real
   content stays hidden in the same box.

   live.js draws more of these later, for a filter change or a second page,
   which happen long after the hold has gone; those carry data-shim-on. */
[data-shim]{ display: none; }
html.api-pending [data-shim],
[data-shim][data-shim-on]{ display: var(--shim-flow, block); visibility: visible; }

/* A band of light, a little wider than it is steep, crossing the whole
   shape rather than each block glowing on its own clock: one sweep over a
   card reads as light moving over an object, and eleven separate pulses
   read as eleven things loading. It is cheaper too -- one animated layer
   per skeleton, composited, no repaint. */
@keyframes shim-sweep{
  from{ transform: translateX(-150%) skewX(-14deg); }
  to{ transform: translateX(150%) skewX(-14deg); }
}
.shim{ position: relative; overflow: hidden; }
.shim::after{
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 62%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,230,197,0) 0%, rgba(255,230,197,.035) 38%,
    rgba(255,230,197,.085) 50%, rgba(255,230,197,.035) 62%, rgba(255,230,197,0) 100%);
  animation: shim-sweep 1.75s cubic-bezier(.45,0,.55,1) infinite;
}

/* The blocks the light passes over. Two tones only: the plate a picture
   will fill, and the bars a line of text will fill. */
.shim-b{ background: var(--ink-3); border-radius: 2px; }
.shim-plate{ background: var(--ink-3); border-radius: 2px; }
.shim-line{ height: 9px; background: var(--ink-3); border-radius: 2px; }
.shim-line + .shim-line{ margin-top: 8px; }

/* Nothing sweeping, for anyone who has asked for that. The shape stays,
   which is the part that does the work; only the light stops. Held at a
   low contrast so it does not read as content that failed to render. */
@media (prefers-reduced-motion: reduce){
  .shim::after{ animation: none; opacity: .4; transform: none; width: 100%; }
}

/* --- a card on its way --------------------------------------------------- */
/* Deliberately not .ccard. A skeleton that borrows the card's class also
   borrows its hover lift and its link colours, and a grey rectangle that
   rises when the mouse passes over it is offering something it cannot do. */
.shim-card{
  --shim-flow: flex;
  flex-direction: column;
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink-2);
}
.shim-card .shim-plate{ aspect-ratio: 4 / 3; border-radius: 0; }
.shim-card-body{ padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
/* The name, at the width a name is. Not full width: a bar the width of the
   card where "Zanele Ncube" goes overstates what is coming. */
.shim-card-body .shim-name{ height: 13px; width: 52%; }
.shim-card-body .shim-head{ height: 9px; }
.shim-card-body .shim-head-2{ width: 72%; }
.shim-card-meta{
  margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line-2);
}
.shim-card-meta .shim-b{ height: 9px; width: 32%; }

/* --- a creator on their way ---------------------------------------------- */
/* The held content comes out of the flow while the skeleton is in it, so the
   skeleton sits inside the wrap and is the width of the column it stands in
   for. Laying it over the top instead put it against the padding box -- the
   page gutter is padding on that same element -- and the whole skeleton ran
   off the left edge of the screen.
   
   `visibility` still does the hiding, because that is the rule the hook
   checks and the one that survives someone adding a child here; this only
   takes the height back so the page is the skeleton's height and not the
   skeleton's plus the fixture's. */
html.api-pending .pub-main > :not([data-shim]){ display: none; }
.shim-page .shim-crumb{ height: 9px; width: 220px; margin-bottom: 30px; }
.shim-cols{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.shim-head-row{ display: flex; gap: 20px; align-items: center; margin-bottom: 18px; }
.shim-face{ width: 84px; height: 84px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-3); border: 1px solid var(--line); }
.shim-titles{ flex: 1; min-width: 0; }
.shim-titles .shim-title{ height: 30px; width: min(340px, 70%); }
.shim-titles .shim-tags{ height: 11px; width: 150px; margin-top: 14px; }
.shim-page .shim-sub{ height: 9px; width: 86%; }
.shim-page .shim-sub-2{ width: 64%; }
.shim-facts{
  display: flex; flex-wrap: wrap; gap: 18px 40px;
  margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line-2);
}
.shim-facts > div{ display: flex; flex-direction: column; gap: 8px; }
.shim-facts .shim-k{ height: 7px; width: 54px; }
.shim-facts .shim-v{ height: 11px; width: 96px; }
.shim-h2{ height: 11px; width: 120px; margin: 40px 0 16px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.shim-work{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 8px; }
.shim-work > div{ display: flex; flex-direction: column; gap: 8px; }
.shim-work .shim-plate{ aspect-ratio: 4 / 3; }
.shim-work .shim-cap{ height: 9px; width: 70%; }
/* The bio, which every listed profile has -- five pieces, a rate, a city and
   a bio are the bar for being on the directory at all. Nothing stands in for
   the track record below it: a creator with no jobs yet has none, and a
   skeleton that draws reviews is promising something the page may not have. */
.shim-prose .shim-line{ height: 9px; }
.shim-prose .shim-line:nth-child(4){ width: 58%; }
.shim-side{
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink-2);
  padding: 22px; display: flex; flex-direction: column; gap: 18px;
}
.shim-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; }
.shim-stats > div{ background: var(--ink); padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.shim-stats .shim-n{ height: 15px; width: 54%; }
.shim-stats .shim-k{ height: 7px; width: 80%; }
.shim-btn{ height: 44px; border-radius: 3px; background: var(--ink-3); }

@media (max-width: 1000px){
  .shim-cols{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .shim-work{ grid-template-columns: repeat(2, 1fr); }
  .shim-face{ width: 64px; height: 64px; }
  .shim-titles .shim-title{ height: 24px; }
}

/* Said out loud, for anyone the shape cannot reach. A skeleton is a picture
   of a wait; a screen reader needs the sentence. */
.shim-said{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- panels -------------------------------------------------------------- */
.panel{
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink-2);
  padding: clamp(18px, 2.2vw, 26px); margin-bottom: 18px;
}
.panel > h2{
  margin: 0 0 4px; font-family: var(--display); font-weight: 800;
  font-size: 1.02rem; letter-spacing: -.02em;
}
.panel > .hint{ margin: 0 0 18px; color: var(--mute); font-size: .86rem; line-height: 1.55; }
.panel-split{ display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
/* Grid items will not shrink below their content by default, so a wide table
   inside one widened the page instead of scrolling in its own container. */
.panel-split > *, .split > *, .profile > *, .settings > *{ min-width: 0; }

/* --- forms --------------------------------------------------------------- */
.f{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.f label{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.f input, .f select, .f textarea{
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--paper); font-family: var(--sans); font-size: .93rem; padding: 11px 13px;
  transition: border-color .3s var(--ease);
}
.f input:focus, .f select:focus, .f textarea:focus{ outline: none; border-color: var(--brand); }
.f textarea{ resize: vertical; min-height: 128px; line-height: 1.6; }
.f .note{ font-size: .78rem; color: var(--dim); }
.f-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* --- toggle -------------------------------------------------------------- */
.toggle{
  display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink);
  cursor: pointer; transition: border-color .3s var(--ease);
}
.toggle:has(input:checked){ border-color: var(--brand); }
.toggle input{ margin: 3px 0 0; }
.toggle b{ display: block; font-family: var(--display); font-weight: 800; font-size: .95rem; margin-bottom: 4px; }
.toggle span{ color: var(--mute); font-size: .84rem; line-height: 1.55; }

/* --- money summary ------------------------------------------------------- */
.money{ border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); padding: 20px; position: sticky; top: 92px; }
.money h3{ margin: 0 0 14px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 400; }
.money dl{ margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 11px 12px; align-items: baseline; }
.money dt{ color: var(--mute); font-size: .88rem; }
/* Figures never wrap. A value that breaks onto a second line stops reading as
   belonging to the label beside it. */
.money dd{
  margin: 0; font-variant-numeric: tabular-nums; font-size: .92rem;
  text-align: right; white-space: nowrap;
}
.money .sep{ grid-column: 1 / -1; height: 1px; background: var(--line-2); margin: 4px 0; }
/* Notes under a figure are sentences, not figures, so they wrap. Inheriting
   nowrap pushed the pay screen wider than a phone. */
.money dd.note{ white-space: normal; }
.money .total dt, .money .total dd{ font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--paper); }
.money .muted{ opacity: .45; }

/* --- the Productions site, edited from the console ------------------------ */
.site-bar{ display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; }
.site-bar h2{ margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.site-bar .hint{ margin: 0; color: var(--mute); font-size: .86rem; line-height: 1.55; }
.site-crumb{ margin: 0 0 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.site-sub{ margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.site-tiles .img{ display: block; width: 100%; border: 0; padding: 0; cursor: pointer; }
.site-tiles .img .pill{ position: absolute; top: 8px; left: 8px; background: rgba(10,10,11,.78); }
.site-tile.is-dragging, .site-pic.is-dragging, .site-tag.is-dragging{ opacity: .4; }
.site-tile.is-over, .site-pic.is-over, .site-tag.is-over{ outline: 1px dashed var(--brand); outline-offset: 2px; }
.site-tile[draggable="true"], .site-pic, .site-tag{ cursor: grab; }
.site-move{ display: flex; gap: 4px; align-items: center; }
.site-move button:not(.link-quiet){
  width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--ink-2);
  color: var(--mute); cursor: pointer; font-size: 1rem; line-height: 1;
}
.site-move button:not(.link-quiet):hover:not(:disabled){ border-color: var(--brand); color: var(--brand); }
.site-move button:disabled{ opacity: .3; cursor: default; }
.site-move .link-quiet{ margin-left: 8px; }
.site-pics{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.site-pic{ display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; padding: 8px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); }
.site-pic-img{ aspect-ratio: 4 / 3; border-radius: 2px; background: var(--ink-3) center / cover no-repeat; }
.site-pic-body{ display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }
.site-pic-body input, .site-tag-home input[type="text"]{
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--ink-2); color: var(--paper); font: inherit; font-size: .84rem;
}
.site-pic-body input:focus, .site-tag-home input[type="text"]:focus{ outline: none; border-color: var(--brand); }
.site-drop{ min-height: 96px; cursor: pointer; }
[data-film-stage]:empty{ display: none; }
.site-pic-img{ position: relative; }
.site-pic-film{
  position: absolute; left: 4px; bottom: 4px; padding: 2px 6px; border-radius: 2px;
  background: rgba(10,10,11,.8); color: var(--paper); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
}
/* Choosing the frame on a film's tile, before it is sent. */
[data-film-stage]{ margin: 4px 0 12px; }
/* Stacked: the pictures column is narrow, and the frame is what matters. */
.site-film-stage{ display: grid; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--ink); }
.site-film-stage video{ width: 100%; max-height: 360px; background: #000; border-radius: 2px; display: block; }
.site-film-name{ margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: .9rem; }
.site-film-name b{ color: var(--paper); overflow-wrap: anywhere; }
.site-film-name span{ font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--mute); }
.note.is-error{ color: var(--orange); }
.site-drop b{ display: block; color: var(--paper); margin-bottom: 4px; }
.site-show{ display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: .88rem; }
.site-tags{ display: flex; flex-direction: column; gap: 8px; }
.site-tag{ display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,1.2fr) auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); }
.site-tag h3{ margin: 0 0 2px; font-family: var(--display); font-weight: 800; font-size: .95rem; }
.site-tag p{ margin: 0; }
.site-tag-home{ display: flex; flex-direction: column; gap: 8px; }
.site-tag-home .check{ margin: 0; }
.site-tag-actions{ display: flex; gap: 12px; }
.site-card-pic{
  display: flex; align-items: flex-end; min-height: 56px; padding: 8px; border: 1px dashed var(--line); border-radius: 2px;
  background: var(--ink-3) center / cover no-repeat; cursor: pointer; font-size: .78rem; color: var(--paper);
}
.site-card-pic span{ background: rgba(10,10,11,.72); padding: 2px 6px; border-radius: 2px; }
.site-slots{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.site-slot{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.site-slot-img{
  display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 2px;
  background: var(--ink-3) center / cover no-repeat; color: var(--dim); font-size: .76rem;
}
/* The shapes they have on the page, so a portrait is not chosen for a landscape tile blind. */
.site-slot--1{ aspect-ratio: 16 / 10; }
.site-slot--2{ aspect-ratio: 4 / 5; }
.site-slot--3, .site-slot--4, .site-slot--5{ aspect-ratio: 1; }
.site-slot-label{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.site-slot select{
  width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--ink-2); color: var(--paper); font: inherit; font-size: .84rem;
}
.site-slot select:focus{ outline: none; border-color: var(--brand); }
@media (max-width: 760px){
  .site-slots{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-tag{ grid-template-columns: auto minmax(0,1fr); }
  .site-tag-home, .site-tag-actions{ grid-column: 1 / -1; }
}

/* --- the conversation on a hire ------------------------------------------ */
/* Yours on the right with a faint brand wash, theirs on the left; no
   bubbles, because three people's lines in coloured bubbles reads as a
   phone, and this is a job sheet with people talking on it. */
.talk-list{ max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 4px; margin: 0 0 14px; overscroll-behavior: contain; }
.talk-msg{ max-width: 82%; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); }
.talk-msg.is-mine{ align-self: flex-end; border-color: rgb(var(--brand-rgb) / .28); background: rgb(var(--brand-rgb) / .06); }
.talk-meta{ margin: 0 0 4px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.talk-body{ margin: 0; color: var(--paper); font-size: .9rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.talk-empty{ margin: 0; color: var(--dim); font-size: .86rem; line-height: 1.55; }
.talk-form{ display: flex; gap: 10px; align-items: flex-end; }
.talk-form textarea{
  flex: 1; min-height: 46px; max-height: 200px; resize: vertical; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 3px; background: var(--ink); color: var(--paper); font: inherit; font-size: .9rem; line-height: 1.5;
}
.talk-form textarea:focus{ outline: none; border-color: var(--brand); }
@media (max-width: 560px){
  .talk-msg{ max-width: 92%; }
  .talk-list{ max-height: 60vh; }
}

/* --- posting a job, one step at a time ---------------------------------- */
/* Done steps are cream, not green: green here is the brand and #6ee7a8 is
   "OK". A finished step is neither a button nor a success, just behind you. */
.post-steps{ margin: 0 0 18px; }
.post-steps ol{ list-style: none; margin: 0 0 12px; padding: 0; display: flex; gap: 6px 18px; flex-wrap: wrap; }
.post-steps button{
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.post-steps button i{
  font-style: normal; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 9px; letter-spacing: 0;
}
.post-steps button:disabled{ cursor: default; opacity: .6; }
.post-steps button:not(:disabled):hover{ color: var(--paper); }
.post-steps .is-done button{ color: var(--mute); }
.post-steps .is-done button i{ border-color: var(--mute); }
.post-steps .is-now button{ color: var(--brand); }
.post-steps .is-now button i{ border-color: var(--brand); background: rgb(var(--brand-rgb) / .1); }
.post-steps button:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }
.post-steps-bar{ height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.post-steps-bar span{ display: block; height: 100%; width: 0; background: var(--brand); transition: width .4s var(--ease); }

.is-wizard .post-step:not(.is-on){ display: none; }
.post-step h2:focus{ outline: none; }
.post-step > .panel + .panel{ margin-top: 18px; }
.post-step-nav{ display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.post-step-nav [data-step-next]{ margin-left: auto; }
.post-step-error{ margin: 0; color: var(--orange); font-size: .84rem; line-height: 1.45; }
.post-step-error:empty{ display: none; }
/* Unstyled since the panel was written: .note is only dressed inside .f. */
[data-brief] .note{ margin: 12px 0 0; font-size: .78rem; color: var(--dim); line-height: 1.55; }

.post-guide{ border-left: 2px solid var(--line); padding: 2px 0 2px 16px; margin-top: 6px; }
.post-guide p{ margin: 0 0 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.post-guide ul{ margin: 0; padding-left: 18px; color: var(--mute); font-size: .84rem; line-height: 1.6; }

.post-review{ margin: 0; }
.post-review > div{ display: grid; grid-template-columns: 110px 1fr auto; gap: 6px 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-2); }
.post-review > div:last-child{ border-bottom: 1px solid var(--line-2); }
.post-review dt{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.post-review dd{ margin: 0; color: var(--paper); font-size: .92rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.post-review dd.is-missing{ color: var(--dim); }
.post-review-warn{ display: block; margin-top: 6px; color: var(--orange); font-size: .8rem; }
.post-review-edit{ background: none; border: 0; padding: 0; cursor: pointer; color: var(--mute); font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.post-review-edit:hover, .post-review-edit:focus-visible{ color: var(--brand); }
.post-after{ margin: 0; padding-left: 18px; color: var(--mute); font-size: .88rem; line-height: 1.65; }
.post-after li + li{ margin-top: 6px; }
.post-after b{ color: var(--paper); font-weight: 600; }
@media (max-width: 560px){
  /* Four labels wrap onto two lines at phone width; the number says where
     you are, the label only for the step you are on. */
  .post-steps li:not(.is-now) button span{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .post-review > div{ grid-template-columns: 1fr auto; }
  .post-review dd{ grid-column: 1 / -1; grid-row: 2; }
}

/* --- pills --------------------------------------------------------------- */
.pill{
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--mute); white-space: nowrap;
}
.pill::before{ content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.is-wait{ color: var(--mustard); border-color: rgba(252,172,0,.32); }
.pill.is-live{ color: #6ee7a8; border-color: rgba(110,231,168,.3); }
.pill.is-stop{ color: var(--orange); border-color: rgba(227,84,2,.36); }
.pill.is-done{ color: var(--dim); }
.pill.is-flag{ color: var(--brand); border-color: rgb(var(--brand-rgb) / .4); background: rgb(var(--brand-rgb) / .07); }

/* --- rows ---------------------------------------------------------------- */
.rows{ display: flex; flex-direction: column; gap: 8px; }
.row{
  display: grid; gap: 16px; align-items: center; padding: 16px 18px;
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink);
  transition: border-color .3s var(--ease);
}
.row:hover{ border-color: var(--line); }
.row h3{ margin: 0 0 3px; font-family: var(--display); font-weight: 800; font-size: .98rem; letter-spacing: -.02em; }
.row .sub{ margin: 0; color: var(--dim); font-size: .8rem; }
.row .num{ font-variant-numeric: tabular-nums; font-size: .92rem; white-space: nowrap; }
/* A row's stat columns: a label over a value.
   The value is a number in one column and a pill in the next. A number is a
   paragraph and carries a paragraph's margins; a pill is a span and carries
   none -- so the two columns came out 24px apart in height, and centring
   each one on its own content put their labels at visibly different heights
   across a single card.
   Every column is now the same two rows: the label, and a value box tall
   enough for either. So the labels line up and the values line up. The
   value row grows rather than clips if a value wraps onto two lines. */
/* Only the stat columns, which are the ones with no class on them: a label
   and a value. `div + div` also caught .actions, and turning a row of
   buttons into a two-row grid stacked them one per line down the side of
   every card that has any. */
.row > div + div:not([class]){
  display: grid; grid-template-rows: auto minmax(22px, auto);
  /* Stretched to the row and anchored at its top, so the labels sit on one
     line whatever the columns hold -- including the one value long enough
     to wrap onto two, which centring would have lifted above the others. */
  align-self: stretch; align-content: start; justify-items: start; gap: 4px;
}
.row > div + div:not([class]) > *{ margin: 0; align-self: center; }
/* Fixed tracks, not auto. Each row is its own grid, so auto columns size to
   their own content and the list stops lining up down the page. */
.row-pool{ grid-template-columns: minmax(0,1fr) 196px 176px 116px auto; }
.row-prop{ grid-template-columns: minmax(0,1fr) 132px 156px auto; }

/* The line under a row's title: who posted it, beside their mark. The mark
   is taller than the text, so the spacing below has to clear the mark
   rather than the words, or the next line sits against it.

   Written as `.row .row-by` rather than `.row-by`: both of these are also
   `.sub`, and `.row .sub` above zeroes the margin with two classes to this
   one. The single-class version lost every time and the note sat flush
   against the mark, which is exactly what it was added to prevent. */
.row .row-by{ display: flex; align-items: center; gap: 8px; min-width: 0; margin: 5px 0 0; }
.row .row-by > span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A note about this row and you — that you have bid, or why you cannot. A
   separate thought from who posted the job, and spaced as one. */
.row .row-note{ margin: 10px 0 0; color: var(--mustard); }

.who{ display: flex; align-items: center; gap: 12px; min-width: 0; }

/* A short list of labelled facts: the sheet that shows a whole bid, and the
   console's account screen. Two columns so the values line up down the
   page rather than each sitting wherever its label ended. */
.facts{ display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; margin: 16px 0 0; align-items: baseline; }
.facts dt{ font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.facts dd{ margin: 0; color: var(--paper); font-size: .9rem; }

/* A tab with nothing behind it still says the state exists, quietly. */
.tabs button.is-empty{ opacity: .45; }
.tabs button.is-empty[aria-selected="true"]{ opacity: 1; }

/* --- approval ------------------------------------------------------------ */
.approvals{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.approval{
  border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.approval.is-turn{ border-color: var(--brand); background: rgb(var(--brand-rgb) / .04); }
.approval.is-blocked{ opacity: .5; }
.approval h3{ margin: 0; font-family: var(--display); font-weight: 800; font-size: .95rem; }
.approval .who-line{ color: var(--mute); font-size: .84rem; margin: 0; }
.approval .btn{ align-self: flex-start; margin-top: 4px; }

.chain{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.chain-step{ display: flex; align-items: center; gap: 8px; color: var(--dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.chain-step.done{ color: #6ee7a8; }
.chain-step.now{ color: var(--brand); }
.chain-arrow{ color: var(--line); }

/* --- completeness -------------------------------------------------------- */
.bar{ height: 3px; border-radius: 2px; background: var(--ink-3); overflow: hidden; margin: 12px 0 16px; }
.bar i{ display: block; height: 100%; background: var(--brand); width: 0; transition: width .5s var(--ease); }
.checks{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.checks li{ display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--mute); }
.checks li .tick{
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--line); display: grid; place-items: center;
  font-size: 9px; color: var(--ink); background: transparent;
}
.checks li.ok{ color: var(--paper); }
.checks li.ok .tick{ background: #6ee7a8; border-color: #6ee7a8; }
.checks li.ok .tick::after{ content: '✓'; }

/* --- misc ---------------------------------------------------------------- */
.callout{ padding: 14px 16px; border-left: 2px solid var(--brand); background: var(--ink); margin: 16px 0; }
.callout p{ margin: 0; font-size: .86rem; color: var(--mute); line-height: 1.6; }
.actions{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.btn-ghost{ background: none; border: 1px solid var(--line); color: var(--mute); }
.btn-ghost:hover{ border-color: var(--brand); color: var(--brand); }
.empty{ padding: 40px 20px; text-align: center; border: 1px dashed var(--line-2); border-radius: 3px; color: var(--dim); }

/* The same label, telling the truth on a screen that is wired up. */
.proto{
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  pointer-events: none;   /* a label, never something to click through to */
  padding: 7px 12px; border-radius: 999px; background: rgba(227,84,2,.14);
  border: 1px solid rgba(227,84,2,.4); color: var(--orange);
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
}

@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; }
  /* Thirty-odd screens do not fit a horizontal scroller, so on a phone the
     rail is a bar with the current screen named, opening to the full list. */
  .rail{ position: sticky; top: 0; z-index: 40; height: auto; padding: 12px 0; gap: 0; }
  .rail-head{ padding: 0 16px; }
  .rail-brand svg{ width: 84px; }
  .rail-menu{
    display: inline-flex; align-items: center; gap: 10px; min-width: 0;
    padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink);
    color: var(--paper); cursor: pointer;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  }
  .rail-menu span:first-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52vw; }
  .rail-menu-icon{ width: 12px; height: 8px; flex: 0 0 auto; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
  .rail-menu-icon::after{ content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; transform: translateY(-50%); }
  .rail-nav{ display: none; gap: 18px; padding: 16px 0 6px; max-height: calc(100vh - 70px); }
  .rail.is-open .rail-nav{ display: flex; }
  .rail-foot{ margin: 0; padding: 12px 16px 0; }
  .rail-nav a{ padding: 9px 16px; }
  .rail-label{ padding: 0 16px 6px; }
  .rail-foot .rail-label{ padding: 0 0 6px; }
  /* The rail is the sticky bar here; two sticky bars at top:0 stack badly. */
  .topbar{ position: static; }
  .panel-split, .approvals, .f-row{ grid-template-columns: 1fr; }
  /* It was sitting on top of card content at this width. */
  .proto{ right: 8px; bottom: 8px; font-size: 8px; padding: 5px 9px; opacity: .82; }
  .money{ position: static; }
  .row-pool, .row-prop{ grid-template-columns: 1fr; gap: 10px; }
}

/* --- screen index ------------------------------------------------------- */
.row-index{ grid-template-columns: 1fr auto; text-decoration: none; color: inherit; }
.row-blurb{ margin: 6px 0 0; color: var(--mute); font-size: .86rem; line-height: 1.55; max-width: 64ch; }
.row-check{ margin: 8px 0 0; color: var(--brand); font-size: .8rem; }
.todo{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.todo li{ display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); color: var(--mute); font-size: .86rem; }
.todo-group{ font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); min-width: 62px; }

/* ==========================================================================
   Signed-out screens: sign up, log in, verification, password reset.
   A picture of the work on one side and one job on the other. No rail: a
   person who has not got an account yet has nowhere to navigate to.
   ========================================================================== */

.auth{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 560px); min-height: 100vh; }

.auth-visual{
  position: relative; overflow: hidden;
  background: var(--ink-2) var(--img) center / cover no-repeat;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(22px, 3vw, 40px);
}
.auth-visual::before{
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.05) 30%, rgba(10,10,11,.25) 60%, rgba(10,10,11,.9) 100%);
}
.auth-visual > *{ position: relative; }
.auth-logo{ display: block; width: 112px; color: var(--paper); }
.auth-logo svg{ display: block; width: 100%; height: auto; }
.auth-logo svg path:not([fill]), .auth-logo svg circle:not([fill]){ fill: currentColor; }
.auth-line{
  margin: 0; max-width: 18ch;
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
}
.auth-credit{ margin: 12px 0 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

.auth-main{
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 64px) clamp(22px, 4vw, 56px);
  background: var(--ink);
}
.auth-card{ width: 100%; max-width: 400px; margin: 0 auto; }
.auth-card .crumb{ font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 10px; }
.auth-card h1{ margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -.03em; line-height: 1.05; }
.auth-card .lede-s{ margin: 0 0 26px; color: var(--mute); font-size: .92rem; line-height: 1.6; }
.auth-card .btn{ width: 100%; justify-content: center; padding: 15px 22px; }
.auth-alt{ margin: 22px 0 0; text-align: center; color: var(--dim); font-size: .86rem; }
.auth-alt a{ color: var(--paper); }
.auth-alt a:hover{ color: var(--brand); }
.auth-fine{ margin: 16px 0 0; color: var(--dim); font-size: .78rem; line-height: 1.55; }
.auth-fine a{ color: var(--mute); }

/* A form field with a trailing control, e.g. show password. */
.f-inline{ position: relative; display: flex; }
.f-inline input{ flex: 1; padding-right: 64px; }
.f-inline button{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--dim);
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 8px;
}
.f-inline button:hover{ color: var(--paper); }
.f-head{ display: flex; justify-content: space-between; align-items: baseline; }
.f-head a{ font-size: .78rem; color: var(--mute); }
.f-head a:hover{ color: var(--brand); }

/* Validation. Said next to the field, in words, never by colour alone. */
.f.is-error input{ border-color: var(--orange); }
.f-error{ margin: 0; color: var(--orange); font-size: .8rem; display: flex; gap: 8px; align-items: baseline; }
.f-error::before{ content: '!'; font-family: var(--mono); font-weight: 700; }
.alert{
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; margin: 0 0 20px;
  border: 1px solid rgba(227,84,2,.36); background: rgba(227,84,2,.07); border-radius: 3px;
  color: var(--paper); font-size: .86rem; line-height: 1.55;
}
.alert.is-ok{ border-color: rgba(110,231,168,.3); background: rgba(110,231,168,.06); }
.alert.is-info{ border-color: var(--line); background: var(--ink-2); }
.alert p{ margin: 0; }

/* Password rules, ticked as they are met. */
.rules{ list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rules li{ font-size: .76rem; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.rules li::before{ content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--line); }
.rules li.ok{ color: #6ee7a8; }
.rules li.ok::before{ background: #6ee7a8; border-color: #6ee7a8; }

/* Account type cards on sign up. */
.kinds{ display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.kind{
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink-2);
  cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.kind:hover{ border-color: var(--line); }
.kind:has(input:checked){ border-color: var(--brand); background: rgb(var(--brand-rgb) / .05); }
.kind input{ grid-row: 1 / 3; margin: 3px 0 0; }
.kind b{ font-family: var(--display); font-weight: 800; font-size: .96rem; letter-spacing: -.01em; }
.kind span{ color: var(--mute); font-size: .82rem; line-height: 1.5; }
/* A figure named inside the sentence, which stays in the sentence. */
.kind em{ font-style: normal; color: var(--paper); font-variant-numeric: tabular-nums; }
.check{ display: flex; gap: 11px; align-items: flex-start; margin: 0 0 12px; color: var(--mute); font-size: .84rem; line-height: 1.55; cursor: pointer; }
.check input{ margin: 2px 0 0; }
.check a{ color: var(--paper); }

/* Big centred status, for "check your inbox" and friends. */
.status-mark{
  width: 54px; height: 54px; border-radius: 50%; margin: 0 0 22px;
  display: grid; place-items: center; border: 1px solid var(--line);
  font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--brand);
}
.status-mark.is-ok{ color: #6ee7a8; border-color: rgba(110,231,168,.4); }
.status-mark.is-stop{ color: var(--orange); border-color: rgba(227,84,2,.45); }

/* The preview switch for states, floating where it cannot cover the form. */
.auth-switch{
  position: fixed; left: 14px; bottom: 14px; z-index: 90; width: min(360px, calc(100vw - 28px));
  padding: 12px; border: 1px solid var(--line); border-radius: 4px;
  background: rgba(18,18,19,.94); backdrop-filter: blur(10px);
}
.auth-switch:empty{ display: none; }
.auth-switch .rail-label{ padding: 0 0 8px; }
.auth-switch .role-switch button{ padding: 7px 4px; }

@media (max-width: 900px){
  .auth{ grid-template-columns: 1fr; }
  .auth-visual{ min-height: 190px; }
  .auth-line{ font-size: 1.7rem; }
  .auth-main{ justify-content: flex-start; padding-bottom: 150px; }
  /* The preview switch owns the bottom edge here. */
  .auth-body .proto{ top: 12px; bottom: auto; }
}

.dock-back{ display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.dock-back:hover{ color: var(--brand); }
.auth-switch .rail-label + .role-switch + .dock-back{ margin-top: 10px; }
.auth-switch > .dock-back:first-child{ margin-top: 0; }

/* ==========================================================================
   Public marketplace pages: the creator directory and creator profiles.
   These are what Google indexes and what someone lands on from a search or
   an Instagram bio, so they wear the public site's header and footer rather
   than the app's rail.
   ========================================================================== */

.pub-body .nav{ background: rgba(10,10,11,.94); backdrop-filter: blur(14px); border-bottom-color: var(--line-2); }
.pub{ padding: calc(var(--nav-h) + clamp(28px, 5vh, 60px)) 0 clamp(60px, 10vh, 120px); }
.pub .wrap{ max-width: 1320px; }
.pub-crumb{ margin: 0 0 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.pub-crumb a{ color: var(--mute); text-decoration: none; }
.pub-crumb a:hover{ color: var(--brand); }
.pub-title{ margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1; font-size: clamp(2.2rem, 5vw, 4rem); }
.pub-sub{ margin: 14px 0 0; max-width: 62ch; color: var(--mute); font-size: 1rem; line-height: 1.6; }

/* filters */
.filters{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: clamp(26px, 4vh, 40px) 0 22px; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.chip{
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: none; cursor: pointer;
  color: var(--mute); font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.chip:hover{ border-color: var(--line); color: var(--paper); }
.chip[aria-pressed="true"]{ background: var(--brand); border-color: var(--brand); color: var(--ink); }
.filters select{
  background: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; color: var(--paper);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 9px 10px;
}
.filters .check{ margin: 0; font-size: .82rem; }
.filters-end{ margin-left: auto; display: flex; gap: 10px; align-items: center; }
.result-count{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

/* The creator card, its grid, the badges, the avatars and .mono-note moved to
   css/site.css. They are drawn in three places now -- this directory, the home
   page and /marketplace/ -- and only the first of those loads this file. Every
   page that loads this one also loads site.css, so nothing here lost anything
   by the move. */

.stars{ color: var(--brand); letter-spacing: .08em; font-size: .86rem; }
.stars i{ color: var(--line); font-style: normal; }

/* The same block, asked for rather than reported. Big enough to hit with a
   thumb, because a rating nobody can tap on a phone is a rating nobody
   leaves. */
.stars[role="radiogroup"]{ display: flex; gap: 6px; font-size: 1.9rem; line-height: 1; letter-spacing: 0; }
.stars[role="radiogroup"] button{
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--line); font-size: inherit; line-height: 1;
  transition: color .12s ease, transform .12s ease;
}
.stars[role="radiogroup"] button:hover{ transform: translateY(-1px); }
.stars[role="radiogroup"] button.is-on{ color: var(--brand); }
.stars[role="radiogroup"] button:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.pub-empty{ grid-column: 1 / -1; padding: 60px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 3px; color: var(--mute); }
.pub-empty h3{ margin: 0 0 8px; font-family: var(--display); font-weight: 800; color: var(--paper); }
.pub-band{ margin-top: clamp(40px, 7vh, 80px); padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink-2); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pub-band h3{ margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.pub-band p{ margin: 0; color: var(--mute); font-size: .9rem; }

/* profile */
.profile{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.profile-head{ display: flex; gap: 20px; align-items: center; margin-bottom: 14px; }
.avatar-lg{ width: 84px; height: 84px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-3) center / cover no-repeat; border: 1px solid var(--line); }
/* Placeholder people get initials. A real person's photograph standing in
   for an invented one misrepresents someone who never agreed to it. */
.avatar-initials{ display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--brand); }
.profile-tags{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* A creator with no badges yet still had the row, and its margin made the
   block taller than the name in it — so centring the block left the name
   sitting above the middle of their picture. */
.profile-tags:empty{ display: none; }

/* One column per fact: the label, then the answer under it. Laid out as a
   row of loose words it read as though the page had come apart. */
.profile-facts{ display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 22px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line-2); color: var(--mute); font-size: .9rem; }
.profile-facts li{ display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.profile-facts .k{ font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.profile-facts b{ color: var(--paper); font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 100%; }
.profile-facts a{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-facts a:hover{ color: var(--brand); border-bottom-color: var(--brand); }
.pub-h2{ margin: clamp(36px, 6vh, 60px) 0 16px; font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.portfolio{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.portfolio figure{ margin: 0; aspect-ratio: 3 / 4; background: var(--ink-3) center / cover no-repeat; border-radius: 2px; }
.portfolio figure:first-child{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* A real piece of work carries words as well as a picture: what it is
   called, what they did on it, and who for. The prototype's fixtures were
   pictures alone, which is why .portfolio above styles bare figures. */
.portfolio .piece{ display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; align-self: start; }
.portfolio .piece img, .portfolio .piece .piece-none{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: var(--ink-3); display: block; }
.portfolio .piece .piece-none{ display: grid; place-content: center; color: var(--dim); font-family: var(--mono); font-size: 9px; letter-spacing: .16em; }
.portfolio .piece h3{ margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.portfolio .piece .sub{ margin: 0; color: var(--mute); font-size: .78rem; line-height: 1.5; }
.portfolio .piece:hover h3{ color: var(--brand); }
/* The account was proved; the work was not. A quiet mark, not a badge. */
.portfolio .piece .piece-proved{ color: var(--mute); display: flex; align-items: center; gap: 6px; }
.portfolio .piece .piece-proved::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }

/* Work we hold opens at the size of the window rather than playing in a
   cell the size of a playing card. The thumbnail is a button, so it says so
   to a keyboard and to a screen reader without any help. */
.portfolio button.piece{
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; text-align: left; cursor: pointer; position: relative; width: 100%;
}
.portfolio .piece-open img{ transition: opacity .3s var(--ease); }
.portfolio .piece-open:hover img{ opacity: .82; }
.portfolio .piece-open:hover h3{ color: var(--brand); }
.portfolio .piece-open:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }

/* The play badge, over the still. Drawn rather than an image: one triangle
   in a circle, at any size, in the brand's own colour. */
.portfolio .piece-play{
  position: absolute; left: 50%; top: 0; transform: translate(-50%, 0);
  width: 100%; aspect-ratio: 4 / 3; display: grid; place-content: center;
  pointer-events: none;
}
.portfolio .piece-play::before{
  content: ""; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(10,10,11,.62); backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.28);
  display: block;
}
.portfolio .piece-play::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-40%, -50%);
  border-left: 14px solid #fff; border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

/* The viewer itself. One dialog for a video and for an image, sized to the
   window rather than to the grid. */
dialog.viewer{
  border: 0; padding: 0; background: none; max-width: min(1200px, 94vw); max-height: 92vh;
  color: var(--paper);
}
dialog.viewer::backdrop{ background: rgba(6,6,7,.86); backdrop-filter: blur(6px); }
.viewer-stage{ display: grid; place-items: center; }
.viewer-stage video, .viewer-stage img{
  max-width: min(1200px, 94vw); max-height: 82vh; width: auto; height: auto;
  display: block; border-radius: 3px; background: #000;
}
.viewer-title{
  margin: 12px 2px 0; font-family: var(--display); font-weight: 800;
  font-size: 1rem; letter-spacing: -.01em; color: #f5efe6;
}
.viewer-close{
  position: absolute; top: -34px; right: -2px; background: none; border: 0;
  color: #f5efe6; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.viewer-close:hover{ color: var(--brand); }
@media (max-width: 620px){
  .viewer-close{ top: -30px; right: 0; }
  .portfolio .piece-play::before{ width: 38px; height: 38px; }
}
.prose{ color: var(--mute); font-size: .98rem; line-height: 1.75; max-width: 68ch; }
.prose p{ margin: 0 0 14px; }

.reviews{ display: flex; flex-direction: column; }
.review{ padding: 20px 0; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; }
.review:last-child{ border-bottom: 1px solid var(--line-2); }
.review h3{ margin: 0; font-family: var(--display); font-weight: 800; font-size: .98rem; letter-spacing: -.01em; }
.review .by{ margin: 0; color: var(--dim); font-size: .8rem; }
.review blockquote{ grid-column: 1 / -1; margin: 8px 0 0; color: var(--mute); font-size: .92rem; line-height: 1.6; }

.side-card{ position: sticky; top: calc(var(--nav-h) + 20px); border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink-2); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.side-card .btn{ justify-content: center; }
.side-stat{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden; }
.side-stat div{ background: var(--ink); padding: 12px 14px; }
/* Three stats in a two-column grid left a fourth cell empty, which read as
   something that had failed to load. An odd last one takes the whole row. */
.side-stat div:last-child:nth-child(odd){ grid-column: 1 / -1; }
.side-stat b{ display: block; font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.side-stat span{ font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.side-note{ margin: 0; color: var(--dim); font-size: .8rem; line-height: 1.55; }
.link-quiet{ background: none; border: 0; padding: 0; cursor: pointer; color: var(--dim); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.link-quiet:hover{ color: var(--orange); }

/* dialog, for report and invite */
dialog.sheet{
  width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 4px;
  background: var(--ink-2); color: var(--paper);
}
dialog.sheet::backdrop{ background: rgba(6,6,7,.72); backdrop-filter: blur(4px); }
.sheet-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 22px 0; }
.sheet-head h2{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.sheet-close{ background: none; border: 0; color: var(--dim); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 4px; }
.sheet-close:hover{ color: var(--paper); }
.sheet-body{ padding: 14px 22px 22px; }
.sheet-body .hint{ margin: 0 0 16px; color: var(--mute); font-size: .86rem; line-height: 1.55; }
.options{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.options label{ display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 3px; cursor: pointer; font-size: .88rem; }
.options label:has(input:checked){ border-color: var(--brand); }
.options input{ accent-color: var(--brand); margin: 2px 0 0; }
.options small{ display: block; color: var(--dim); font-size: .78rem; margin-top: 2px; }

.m-only{ display: none; }
@media (max-width: 1000px){
  .profile{ grid-template-columns: 1fr; }
  /* Name first, then the action, then the numbers. Ordering the card first
     put a stats grid above who the person is. */
  .side-card{ position: static; }
  .m-only{ display: block; }
  .m-cta{ margin-top: 22px; }
  .m-cta .btn{ width: 100%; justify-content: center; }
}
@media (max-width: 900px){
  /* Room for the prototype's preview dock, so the last thing on the page is
     never stuck underneath it. */
  .pub-body{ padding-bottom: 150px; }
}
@media (max-width: 640px){
  .portfolio{ grid-template-columns: 1fr 1fr; }
  /* Spanning two rows needs neighbours to size those rows; across both columns
     it has none and collapsed to a sliver. */
  .portfolio figure:first-child{ grid-row: auto; aspect-ratio: 16 / 10; }
  .filters-end{ margin-left: 0; width: 100%; justify-content: space-between; }
  .profile-head{ align-items: flex-start; }
  .avatar-lg{ width: 64px; height: 64px; }
}

/* ==========================================================================
   Job board and job page, inside the app. Free and Pro creators see the same
   list; what differs is which jobs they can bid on, and that difference has
   to be explained on the row rather than discovered on a failed submit.
   ========================================================================== */
/* Budget is a range here too, and the same 150px was cutting it. */
.row-job{ grid-template-columns: minmax(0, 1fr) 210px 170px 70px 150px; }
.row-job .btn{ white-space: nowrap; }
.row-job.is-locked h3{ color: var(--mute); }
.row-job .btn{ justify-content: center; }
.pill.is-lock{ color: var(--mute); border-color: var(--line); }
.pill.is-lock::before{ content: none; }
.pill.is-lock::after{ content: ''; }
.tool-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.tool-bar select{ background: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; color: var(--paper); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 9px 10px; }
.tool-bar .check{ margin: 0 0 0 auto; font-size: .82rem; }

.job-facts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; margin: 18px 0 0; }
.job-facts div{ background: var(--ink); padding: 13px 15px; }
.job-facts span{ display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.job-facts b{ font-weight: 400; font-size: .92rem; font-variant-numeric: tabular-nums; }
.deliver-list{ margin: 0; padding-left: 18px; color: var(--mute); font-size: .9rem; line-height: 1.9; }

.picks{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 6px; }
.pick{ position: relative; aspect-ratio: 1; border-radius: 2px; background: var(--ink-3) center / cover no-repeat; border: 1px solid var(--line-2); cursor: pointer; overflow: hidden; }
.pick input{ position: absolute; opacity: 0; pointer-events: none; }
.pick::after{ content: ''; position: absolute; inset: 0; background: rgba(10,10,11,.35); transition: background .25s var(--ease); }
.pick:has(input:checked){ border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.pick:has(input:checked)::after{ background: transparent; }
.pick:has(input:checked)::before{ content: '\2713'; position: absolute; z-index: 1; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: var(--ink); font-size: 10px; display: grid; place-items: center; }
.pick:has(input:focus-visible){ outline: 2px solid var(--brand); outline-offset: 2px; }

.steps{ list-style: none; counter-reset: s; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.steps li{ counter-increment: s; display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .86rem; color: var(--mute); line-height: 1.5; }
.steps li::before{ content: counter(s); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 9px; color: var(--dim); }
.steps li b{ color: var(--paper); font-weight: 400; }

.gate{ text-align: left; }
.gate .status-mark{ margin-bottom: 16px; }

@media (max-width: 900px){
  .row-job{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .row-job > div:first-child, .row-job > .btn, .row-job > a.btn{ grid-column: 1 / -1; }
  .job-facts{ grid-template-columns: 1fr 1fr; }
  .picks{ grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Workspaces: creator and business home, bids, hired jobs, reviews.
   ========================================================================== */

.greet{ margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; margin-bottom: 18px; }
.stats div{ background: var(--ink-2); padding: 16px 18px; }
.stats b{ display: block; font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats span{ font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.stats small{ display: block; margin-top: 4px; color: var(--dim); font-size: .74rem; }

/* things that need the person, most urgent first */
.todo-rows{ display: flex; flex-direction: column; gap: 8px; }
.todo-row{ display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); text-decoration: none; color: inherit; transition: border-color .3s var(--ease); }
.todo-row:hover{ border-color: var(--line); }
.todo-row::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.todo-row.is-urgent::before{ background: var(--orange); }
.todo-row.is-good::before{ background: #6ee7a8; }
.todo-row.is-wait::before{ background: var(--mustard); }
.todo-row h3{ margin: 0 0 3px; font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.todo-row p{ margin: 0; color: var(--dim); font-size: .8rem; }

.tabs{ display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); margin: -4px 0 16px; overflow-x: auto; }
.tabs button{
  padding: 11px 14px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  color: var(--dim); font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
}
.tabs button[aria-selected="true"]{ color: var(--paper); border-bottom-color: var(--brand); }
.tabs button span{ margin-left: 6px; color: var(--dim); }

.row-bid{ grid-template-columns: minmax(0, 1fr) 120px 150px 140px; }
.row-bid .btn{ justify-content: center; white-space: nowrap; }
/* The money column holds a range -- "R135 000 — R180 000" is 174px, and a
   seven-figure job is 205 -- so 150 was never wide enough and the number
   ran under the stage beside it. The title column is minmax(0,1fr) and had
   the room to give. */
.row-hjob{ grid-template-columns: minmax(0, 1fr) 210px 190px 140px; }
.row-hjob .btn{ justify-content: center; white-space: nowrap; }

/* contact details, which only exist on a hired job */
.contacts{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact{ border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); padding: 16px; }
.contact .role{ margin: 0 0 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.contact h3{ margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: .98rem; }
.contact a{ display: block; color: var(--mute); font-size: .86rem; line-height: 1.8; text-decoration: none; }
.contact a:hover{ color: var(--brand); }

/* handover links */
.link-rows{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.link-row{ display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 8px; }
.link-row input{ background: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; color: var(--paper); font-family: var(--sans); font-size: .9rem; padding: 10px 12px; min-width: 0; }
.link-row input:focus{ outline: none; border-color: var(--brand); }
.link-row button{ background: none; border: 1px solid var(--line-2); border-radius: 2px; color: var(--dim); cursor: pointer; padding: 0 12px; }
.link-row button:hover{ color: var(--orange); border-color: rgba(227,84,2,.4); }

.history{ list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.history li{ position: relative; padding: 0 0 16px 18px; color: var(--mute); font-size: .86rem; line-height: 1.55; }
.history li::before{ content: ''; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line); }
.history li.is-now::before{ background: var(--brand); border-color: var(--brand); }
.history time{ display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }

/* star input: radios, so it is a real form control with arrow keys */
.star-input{ display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-input input{ position: absolute; opacity: 0; pointer-events: none; }
.star-input label{ font-size: 2rem; line-height: 1; color: var(--line); cursor: pointer; transition: color .15s linear, transform .2s var(--ease); }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label{ color: var(--brand); }
.star-input label:hover{ transform: scale(1.12); }
.star-input input:focus-visible + label{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.star-word{ margin-left: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.choice{ display: flex; gap: 8px; flex-wrap: wrap; }
.choice label{ padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer; font-size: .86rem; color: var(--mute); }
.choice label:has(input:checked){ border-color: var(--brand); color: var(--paper); background: rgb(var(--brand-rgb) / .06); }
.choice input{ position: absolute; opacity: 0; pointer-events: none; }

/* pay */
.pay-methods{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 10px; }
.pay-methods label{ display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 3px; cursor: pointer; font-size: .88rem; }
.pay-methods label small{ color: var(--dim); font-size: .76rem; }
.pay-methods label:has(input:checked){ border-color: var(--brand); background: rgb(var(--brand-rgb) / .05); }
.pay-methods input{ position: absolute; opacity: 0; pointer-events: none; }
.secure{ display: flex; gap: 8px; align-items: center; color: var(--dim); font-size: .76rem; margin-top: 10px; }
.secure::before{ content: ''; width: 10px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px 2px 3px 3px; box-shadow: inset 0 -5px 0 -3px currentColor; }

.logo-drop{ display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px dashed var(--line); border-radius: 3px; }
.logo-drop .avatar{ width: 56px; height: 56px; font-size: 1rem; border-radius: 3px; }
/* A company's logo is a square; a person's face is not. */
.logo-drop .avatar-md{ border-radius: 50%; }
/* The creator's one is inserted above a field row that has no top margin of
   its own, so its dashed edge was sitting on the labels under it. */
.logo-drop[data-face]{ margin-bottom: 20px; }
.preview-card{ border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); padding: 18px; }

@media (max-width: 900px){
  .stats{ grid-template-columns: 1fr 1fr; }
  .row-bid, .row-hjob{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .row-bid > div:first-child, .row-hjob > div:first-child, .row-bid > .btn, .row-hjob > .btn{ grid-column: 1 / -1; }
  .contacts, .pay-methods{ grid-template-columns: 1fr; }
  .link-row{ grid-template-columns: 1fr auto; }
  .link-row input:first-child{ grid-column: 1 / -1; }
}

/* --- settings ------------------------------------------------------------ */
.settings{ display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 26px; align-items: start; }
.settings-nav{ position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.settings-nav a{ padding: 8px 12px; border-left: 2px solid var(--line-2); color: var(--mute); font-size: .88rem; text-decoration: none; }
.settings-nav a:hover{ color: var(--paper); border-left-color: var(--line); }
/* Where you are in the page. Set by app.js as the sections go past. */
.settings-nav a.is-here{ color: var(--paper); border-left-color: var(--brand); }
.set-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-2); }
.set-row:first-of-type{ border-top: 0; padding-top: 4px; }
.set-row h3{ margin: 0 0 3px; font-family: var(--display); font-weight: 800; font-size: .94rem; }
.set-row p{ margin: 0; color: var(--dim); font-size: .82rem; line-height: 1.5; }
.set-row select{ background: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; color: var(--paper); font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 9px 10px; }
.switch{ position: relative; width: 38px; height: 22px; flex: 0 0 auto; }
.switch input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span{ position: absolute; inset: 0; border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line); transition: background .25s var(--ease); }
.switch span::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--mute); transition: transform .25s var(--ease), background .25s var(--ease); }
.switch input:checked + span{ background: var(--brand); border-color: var(--brand); }
.switch input:checked + span::after{ transform: translateX(16px); background: var(--ink); }
.switch input:disabled{ cursor: not-allowed; }
.switch input:disabled + span{ opacity: .55; }
.switch input:focus-visible + span{ outline: 2px solid var(--brand); outline-offset: 2px; }
.danger{ border-color: rgba(227,84,2,.3); }
.btn-danger{ border-color: rgba(227,84,2,.5); color: var(--orange); background: none; }
.btn-danger:hover{ background: var(--orange); border-color: var(--orange); color: var(--ink); }

/* --- producer credits ---------------------------------------------------- */
.credit-rows{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.credit-row{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 90px auto; gap: 8px; }
.credit-row input{ background: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; color: var(--paper); font-family: var(--sans); font-size: .9rem; padding: 10px 12px; min-width: 0; }
.credit-row button{ background: none; border: 1px solid var(--line-2); border-radius: 2px; color: var(--dim); cursor: pointer; padding: 0 12px; }

@media (max-width: 900px){
  .settings{ grid-template-columns: 1fr; }
  .settings-nav{ position: static; flex-direction: row; overflow-x: auto; gap: 0; border-bottom: 1px solid var(--line-2); }
  .settings-nav a{ border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .settings-nav a.is-here{ border-bottom-color: var(--brand); }
  .credit-row{ grid-template-columns: 1fr 90px auto; }
  .credit-row input:first-child{ grid-column: 1 / -1; }
}

/* ==========================================================================
   Admin. HeyKrew's own team, on admin.heykrew.app behind Cloudflare
   Access. Denser than the marketplace: tables, queues, a detail beside a
   list. Every destructive action states its consequence before it happens.
   ========================================================================== */

.table-wrap{ overflow-x: auto; border: 1px solid var(--line-2); border-radius: 3px; }
.table{ width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 720px; }
.table th{ text-align: left; padding: 11px 14px; background: var(--ink); border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-weight: 400; font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.table td{ padding: 12px 14px; border-bottom: 1px solid var(--line-2); color: var(--mute); vertical-align: middle; }
.table tbody tr:last-child td{ border-bottom: 0; }
.table tbody tr{ transition: background .2s var(--ease); }
.table tbody tr:hover{ background: rgba(255,230,197,.025); }
.table td b{ color: var(--paper); font-weight: 400; }
.table td .sub{ display: block; color: var(--dim); font-size: .76rem; margin-top: 2px; }
.table .num{ font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.table th.num{ text-align: right; }
.table a.rowlink{ color: var(--paper); text-decoration: none; }
.table a.rowlink:hover{ color: var(--brand); }
/* A row that opens something says so before it is clicked: the cursor and
   the ground both change, and the name it leads to lights up with the rest
   of the row rather than only under the pointer. */
.table tr.rowgo{ cursor: pointer; }
.table tr.rowgo:hover{ background: var(--ink-2); }
.table tr.rowgo:hover a.rowlink{ color: var(--brand); }
.flag{ display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(227,84,2,.16); color: var(--orange); font-family: var(--mono); font-size: 9px; }
.search{ background: var(--ink); border: 1px solid var(--line-2); border-radius: 2px; color: var(--paper); font-family: var(--sans); font-size: .9rem; padding: 9px 12px; min-width: 220px; }
.search:focus{ outline: none; border-color: var(--brand); }

/* list beside detail */
.split{ display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.list{ border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink-2); overflow: hidden; }
.list button{ display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 4px 12px; align-items: start; width: 100%; text-align: left; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid var(--line-2); color: inherit; cursor: pointer; font: inherit; }
.list button:last-child{ border-bottom: 0; }
.list button:hover{ background: rgba(255,230,197,.025); }
.list button[aria-selected="true"]{ background: rgb(var(--brand-rgb) / .06); box-shadow: inset 2px 0 0 var(--brand); }
.list button .dot{ width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: transparent; }
.list button .dot.is-new{ background: var(--brand); }
.list button .dot.is-urgent{ background: var(--orange); }
.list b{ display: block; font-family: var(--display); font-weight: 800; font-size: .92rem; color: var(--paper); }
.list span.meta{ display: block; color: var(--dim); font-size: .78rem; margin-top: 2px; }
.list time{ font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.list .excerpt{ grid-column: 2 / -1; color: var(--mute); font-size: .8rem; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* moderation / verification cards */
.q-card{ border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); padding: 18px; margin-bottom: 10px; }
.q-head{ display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.q-head h3{ margin: 0 0 3px; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
.q-head p{ margin: 0; color: var(--dim); font-size: .8rem; }
.q-quote{ margin: 10px 0 0; padding: 10px 14px; border-left: 2px solid var(--line); color: var(--mute); font-size: .88rem; line-height: 1.55; }
.q-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.q-grid h4{ margin: 0 0 8px; font-family: var(--mono); font-weight: 400; font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.q-grid ul{ margin: 0; padding-left: 16px; color: var(--mute); font-size: .84rem; line-height: 1.75; }
.rule{ padding: 12px 14px; border: 1px dashed var(--line); border-radius: 3px; color: var(--mute); font-size: .82rem; line-height: 1.55; }
.rule b{ color: var(--paper); font-weight: 400; }

/* category tree */
.tree{ list-style: none; margin: 0; padding: 0; }
.tree li{ display: grid; grid-template-columns: 18px minmax(0,1fr) 90px 90px 60px auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line-2); font-size: .88rem; }
.tree li.is-parent{ background: var(--ink); }
.tree li.is-parent .name{ font-family: var(--display); font-weight: 800; color: var(--paper); }
.tree li.is-child .name{ padding-left: 18px; color: var(--mute); }
.tree li.is-off .name{ opacity: .45; text-decoration: line-through; }
.tree .grip{ color: var(--line); cursor: grab; letter-spacing: -2px; font-size: .8rem; user-select: none; }
.tree .count{ font-variant-numeric: tabular-nums; color: var(--mute); text-align: right; font-size: .84rem; }
.tree-head{ display: grid; grid-template-columns: 18px minmax(0,1fr) 90px 90px 60px auto; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
.tree-head span:nth-child(3), .tree-head span:nth-child(4){ text-align: right; }

/* chart: single series columns, hand-rolled SVG like the live dashboard */
.chart{ position: relative; }
.chart svg{ display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line{ stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis text{ fill: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
.chart .bar{ fill: var(--brand); transition: opacity .2s var(--ease); }
.chart .hit{ fill: transparent; cursor: default; outline: none; }
.chart .hit:focus-visible + .bar, .chart .col:hover .bar{ opacity: .78; }
.chart .col:focus-within .bar{ opacity: .78; }
.chart .cap{ fill: var(--paper); font-family: var(--mono); font-size: 11px; }
.tip{ position: absolute; pointer-events: none; transform: translate(-50%, -100%); margin-top: -10px; padding: 8px 11px; border-radius: 3px; background: var(--ink-3); border: 1px solid var(--line); white-space: nowrap; font-size: .8rem; }
.tip b{ display: block; font-family: var(--display); font-weight: 800; font-size: .98rem; color: var(--paper); font-variant-numeric: tabular-nums; }
.tip span{ color: var(--dim); font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; }
.view-toggle{ display: inline-flex; border: 1px solid var(--line-2); border-radius: 3px; padding: 3px; gap: 3px; }
.view-toggle button{ background: none; border: 0; border-radius: 2px; padding: 6px 10px; cursor: pointer; color: var(--dim); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.view-toggle button[aria-pressed="true"]{ background: var(--ink-3); color: var(--paper); }

/* content manager */
.tiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tile-c{ border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; background: var(--ink); }
.tile-c .img{ aspect-ratio: 4 / 3; background: var(--ink-3) center / cover no-repeat; position: relative; }
.tile-c .img .grip{ position: absolute; top: 8px; left: 8px; padding: 3px 6px; border-radius: 2px; background: rgba(10,10,11,.7); color: var(--mute); font-size: .7rem; cursor: grab; letter-spacing: -2px; }
.tile-c .body{ padding: 10px 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; align-items: center; }
.tile-c h3{ margin: 0; font-family: var(--display); font-weight: 800; font-size: .88rem; }
.tile-c p{ margin: 2px 0 0; color: var(--dim); font-size: .74rem; }
.drop{ display: grid; place-items: center; text-align: center; min-height: 150px; border: 1px dashed var(--line); border-radius: 3px; color: var(--mute); font-size: .86rem; padding: 18px; }
.drop b{ display: block; color: var(--paper); font-weight: 400; margin-bottom: 4px; }
.logo-tile{ display: grid; place-items: center; aspect-ratio: 3 / 2; border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.01em; color: var(--mute); position: relative; }
.logo-tile .pill{ position: absolute; bottom: 8px; left: 8px; font-size: 7.5px; padding: 3px 7px; }

@media (max-width: 900px){
  .split, .q-grid{ grid-template-columns: 1fr; }
  .tree li, .tree-head{ grid-template-columns: 18px minmax(0,1fr) 60px auto; }
  .tree li > :nth-child(4), .tree li > :nth-child(5), .tree-head > :nth-child(4), .tree-head > :nth-child(5){ display: none; }
  .search{ min-width: 0; width: 100%; }
}

/* --- transactional email previews ---------------------------------------- */
/* Emails are light on purpose. Mail apps invert or partly invert dark HTML in
   their own dark modes, unpredictably; a light email with a dark wordmark
   survives that. Type is system sans, because web fonts do not load in most
   mail clients. */
.mail{ border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink-2); overflow: hidden; }
.mail-meta{ padding: 14px 18px; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 5px 12px; font-size: .84rem; }
.mail-meta dt{ font-family: var(--mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.mail-meta dd{ margin: 0; color: var(--mute); }
.mail-meta dd.subj{ color: var(--paper); font-family: var(--display); font-weight: 800; font-size: .98rem; }
.mail-canvas{ background: #0a0a0b; padding: clamp(16px, 3vw, 34px); }
/* These mirror api/src/email/render.ts. The real emails cannot use the CI
   typefaces — Gmail and Outlook drop @font-face — so the preview does not
   either, and the translucent greys are flattened the same way. */
.mail-doc{ max-width: 560px; margin: 0 auto; background: #121213; color: #ffe6c5; border: 1px solid #2a2723; border-radius: 4px; overflow: hidden; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.65; }
.mail-top{ padding: 24px 28px 20px; border-bottom: 1px solid #2a2723; }
.mail-top svg{ width: 150px; height: auto; display: block; color: #ffe6c5; }
.mail-top svg path:not([fill]), .mail-top svg circle:not([fill]){ fill: currentColor; }
.mail-main{ padding: 28px 28px 10px; }
.mail-crumb{ margin: 0 0 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #5d554a; }
.mail-main h2{ margin: 0 0 14px; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; font-weight: 800; color: #ffe6c5; }
.mail-main p{ margin: 0 0 14px; color: #988a77; }
.mail-main b{ color: #ffe6c5; }
.mail-btn{ display: inline-block; margin: 8px 0 20px; padding: 14px 24px; border-radius: 3px; background: var(--brand); color: #0a0a0b !important; font-weight: 700; text-decoration: none; font-size: 14px; }
.mail-box{ border: 1px solid #2a2723; border-radius: 4px; padding: 14px 16px; margin: 0 0 18px; }
.mail-box dl{ margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; font-size: 14px; }
.mail-box dt{ color: #988a77; }
.mail-box dd{ margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: #ffe6c5; }
.mail-box .tot{ font-weight: 700; border-top: 1px solid #2a2723; padding-top: 8px; }
.mail-list{ list-style: none; margin: 0 0 18px; padding: 0; }
.mail-list li{ padding: 12px 0; border-top: 1px solid #2a2723; }
.mail-list li:last-child{ border-bottom: 1px solid #2a2723; }
.mail-list b{ display: block; color: #ffe6c5; }
.mail-list span{ color: #988a77; font-size: 13px; }
.mail-fine{ padding: 16px 28px 26px; color: #5d554a; font-size: 12px; line-height: 1.6; border-top: 1px solid #2a2723; margin-top: 10px; }
.mail-fine a{ color: #988a77; }

/* ==========================================================================
   Click-through: who is signed in, the prototype tools, confirmations.
   ========================================================================== */
.rail-me{ display: flex; align-items: center; gap: 11px; padding: 0 22px; }
.rail-me .avatar{ width: 36px; height: 36px; }
.rail-me b{ display: block; font-family: var(--display); font-weight: 800; font-size: .9rem; letter-spacing: -.01em; color: var(--paper); }
.rail-me span span{ display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }

/* Prototype tools sit at the foot, dashed off from the product above them. */
.rail-proto{ margin-top: auto; margin: auto 14px 0; padding: 14px 10px 4px; border: 1px dashed var(--line); border-radius: 4px; display: flex; flex-direction: column; gap: 8px; }
.rail-proto .rail-label{ padding: 0; }
.rail-proto .rail-out{ padding: 4px 0 !important; border-left: 0 !important; background: none !important; }
.acct-switch{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.acct-switch a{ padding: 6px 4px !important; border: 1px solid var(--line-2) !important; border-radius: 2px; justify-content: center; font-family: var(--mono); font-size: 8.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--dim) !important; background: var(--ink) !important; }
.acct-switch a[aria-current="true"]{ border-color: var(--brand) !important; color: var(--brand) !important; }
.acct-switch a:hover{ color: var(--paper) !important; }

.toast{
  position: fixed; left: 50%; bottom: 22px; z-index: 300; transform: translate(-50%, 16px);
  max-width: min(460px, calc(100vw - 32px)); padding: 12px 16px 12px 40px; border-radius: 4px;
  background: var(--paper); color: var(--ink); font-size: .88rem; line-height: 1.45; box-shadow: 0 10px 40px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.toast::before{ content: '\2713'; position: absolute; left: 14px; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: #1f8f5a; color: #fff; font-size: 10px; display: grid; place-items: center; }
.toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

.done-note{ display: inline-flex; align-items: center; gap: 8px; color: #6ee7a8; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.done-note::before{ content: '\2713'; }
.is-handled{ opacity: .62; transition: opacity .4s var(--ease); }

/* Start points on the index. */
.journeys{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.journey{ display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line-2); border-radius: 3px; background: var(--ink); }
.journey h3{ margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; }
.journey ol{ margin: 0; padding-left: 18px; color: var(--mute); font-size: .82rem; line-height: 1.7; }
.journey .btn{ margin-top: auto; align-self: flex-start; }

details.expand > summary{ list-style: none; cursor: pointer; }
details.expand > summary::-webkit-details-marker{ display: none; }
details.expand[open] > summary{ margin-bottom: 12px; }

@media (max-width: 900px){
  .rail-me{ padding: 0 16px; }
  .rail-proto{ margin: 6px 12px 0; }
}
.proto-login{ margin-top: 26px; padding: 14px; border: 1px dashed var(--line); border-radius: 4px; }
.proto-login .acct-switch{ grid-template-columns: repeat(4, 1fr); }
.proto-login .acct-switch a{ display: flex; text-decoration: none; }
.proto-step{ width: 100%; justify-content: center; margin-top: 18px; border-style: dashed !important; }

/* ==========================================================================
   Radios and checkboxes, drawn rather than tinted.
   `accent-color` only colours the chosen state; the browser still draws an
   unchosen radio as a filled white dot, which on this ground reads as the
   one that is selected. On a three-way choice that is not a cosmetic
   problem: someone reads the wrong option as theirs. So the control is
   drawn here — an empty ring until it is chosen, a mustard dot when it is.
   ========================================================================== */
.kind input,
.toggle input,
.check input{
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 1.5px solid rgba(255,230,197,0.38);
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.kind input, .toggle input{ border-radius: 50%; }
.check input{ border-radius: 3px; }

.kind input::before,
.toggle input::before{
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  transition: transform .12s var(--ease);
}
.check input::before{
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ink);
  clip-path: polygon(14% 47%, 0 60%, 39% 100%, 100% 22%, 86% 9%, 37% 72%);
  transform: scale(0);
  transition: transform .12s var(--ease);
}

.kind input:checked,
.toggle input:checked{ border-color: var(--brand); }
.check input:checked{ border-color: var(--brand); background: var(--brand); }

.kind input:checked::before,
.toggle input:checked::before,
.check input:checked::before{ transform: scale(1); }

.kind input:hover,
.toggle input:hover,
.check input:hover{ border-color: rgba(255,230,197,0.6); }

.kind input:focus-visible,
.toggle input:focus-visible,
.check input:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

.kind input:disabled,
.toggle input:disabled,
.check input:disabled{ opacity: .45; cursor: default; }

@media (prefers-reduced-motion: reduce){
  .kind input::before, .toggle input::before, .check input::before{ transition: none; }
}

/* The one place on the profile that asks for something new. Set apart from
   the list above it, so adding a piece reads as its own act rather than a
   row that happens to have inputs in it. */
.add-piece{
  margin-top: 20px; padding: 18px 18px 20px;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--ink);
}
.add-piece h3{ margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.add-piece .f{ margin-bottom: 12px; }
.add-piece .note{ font-size: .78rem; color: var(--dim); line-height: 1.55; }

/* Overrides the .drop above, which is a grid. Leaving display as block here
   kept that rule's min-height and dropped its centring, so the label sat at
   the top of a tall empty box. */
.drop{
  display: grid; place-items: center; padding: 18px; text-align: center; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 4px; color: var(--mute);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.drop:hover{ border-color: var(--brand); color: var(--paper); }

/* The steps for proving a page, and the code itself — which has to be easy
   to read off a screen and paste somewhere else. */
.proof-steps{ margin: 0 0 16px; padding-left: 18px; color: var(--mute); font-size: .86rem; line-height: 1.7; }
.proof-steps li{ padding-left: 2px; }
.proof-code{
  display: inline-block; margin-top: 4px; padding: 5px 9px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .04em; color: var(--brand);
}

/* A URL with only one part left to fill in: the site is printed, the handle
   is typed, and nobody has to work out the shape of the address. */
.handle-field{
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line-2); border-radius: 2px; background: var(--ink); overflow: hidden;
}
.handle-field span{
  display: flex; align-items: center; padding: 0 2px 0 13px;
  font-family: var(--sans); font-size: .93rem; color: var(--dim); white-space: nowrap;
}
.handle-field input{
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  color: var(--paper); font-family: var(--sans); font-size: .93rem; padding: 11px 6px;
}
.handle-field .btn{ border: 0; border-left: 1px solid var(--line-2); border-radius: 0; }

/* --- rows, when the rail has taken its share ---------------------------- */
/*
 * These row grids collapse at 900px, which is the width of the window. What
 * they actually live in is the window minus a 210px rail and the panel's own
 * padding, so on a 1024px laptop a four column row is laid out in about 700px
 * and every column shreds: a name one word per line, a pitch one word per
 * line. Until these can be container queries, the breakpoint is the one that
 * matches what the row is really given.
 */
@media (max-width: 1140px){
  .row-pool, .row-prop{ grid-template-columns: 1fr; gap: 10px; }
  .row-job{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .row-job > div:first-child, .row-job > .btn, .row-job > a.btn{ grid-column: 1 / -1; }
  .row-bid, .row-hjob{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .row-bid > div:first-child, .row-hjob > div:first-child,
  .row-bid > .btn, .row-hjob > .btn, .row-bid > a.btn, .row-hjob > a.btn{ grid-column: 1 / -1; }
}