/* ===========================================================================
   THE WORK ROOM — the room's own rules.
   ===========================================================================
   Moved out of app.css (rebuild, 15 Oct). Loaded right after it.

   STAYS IN app.css because other pages use it: the --area-work and
   --work-metal tokens (stated per theme in the token blocks), the nav row's
   colour (.nav-item[data-group="work"]) and the shared .media-panel / .lucid-door
   rules that areaRender() draws the page's frame with.

   Gone with the move: the .work-peek ledger (Home's old Work strip) — nothing
   draws those classes any more.
   tests/test-room-work-unchanged.js holds the result to the old pixels.
   =========================================================================== */

  /* Work borrows this renderer, so its solo door has to take Work's ink for the
     same reason its focus ring does — see #workBody below. */
  #workBody .media-panel-door.solo{ color:var(--area-work);
    border-color:color-mix(in srgb, var(--area-work) 34%, transparent); }
  #workBody .media-panel-door.solo:hover{
    border-color:color-mix(in srgb, var(--area-work) 70%, transparent);
    background:color-mix(in srgb, var(--area-work) 10%, transparent); }

  /* ==========================================================
     THE WORK FRONT PAGE — item 288, TREATMENT A.
     ==========================================================
     Drawn before it was built, the same method as Media: four treatments at
     full size in tools/work-demo/work-area-ideas.html, and Matt on
     4 September — "The only one I like is A. Lets try it your way
     (suggestion)." The reasoning behind every rule below is written up beside
     WORK_AREA in app.js; what is here is only the part that is CSS.

     THE ONE THING THAT WILL LOOK WRONG NEXT TO THE MEDIA BLOCK ABOVE, so it
     is the first thing said: WORK'S BAND IS A FILLED SLAB AND MEDIA'S
     DELIBERATELY IS NOT. That is not a lapse and it is not two people
     disagreeing. Media's four cards are four SUBJECTS and each is meant to
     read on its own, so they sit in a field between two hairlines with air
     around them. Work's four are four READINGS OF ONE LIST, and the whole
     promise of the page is that you can compare them at a glance — four
     people waiting is worse than twelve late things, and you can only know
     that if all four are set the same way on one ground. Four large numerals
     with nothing under them read as four loose figures floating on the
     gradient rather than as one instrument.

     EVERY COLOUR IS A TOKEN AND THE ACCENT IS --area-work, which app.css says
     elsewhere is deliberately the same value as --brass, "because Work IS the
     brass in this scheme rather than a sixth colour competing with it". So the
     lit card is the same metal as the masthead rule and the focus ring, and
     that has to read as deliberate rather than as a page that ran out of
     colours — which is why the lit state below is a ring, an edge and a tint
     rather than a wash. */

  /* ---- DOES THIS WEEK FIT ---------------------------------------------

     The four-figure band that stood here — 30 WAITING ON YOU / 5 LATE /
     1 MOVING / 6 STALLED — was CUT on 25 September. Matt: "Work page band
     was replaced with does it fit and the pills on top. Cut the old cards."
     Its rules are gone with it rather than left behind commented out; what
     is above this block is the hero, and what is below it is the one list.

     THE SEVEN DAYS ARE A SHAPE, AND THE SHAPE IS THE ARGUMENT. Seven ruled
     columns, one figure each, so the eye reads a skyline rather than seven
     numbers. Which is why the seven STAY SEVEN at a phone width and the
     FIGURE pays for it instead — a skyline broken over three rows is not a
     skyline. Same trade .media-tile makes at two-up. */
  .work-fit{ margin:0 0 var(--space-8); }

  /* A STANDING HEAD, not a card title: letterspaced small capitals over a
     hairline, which is the register app.js already calls "rules and air".
     It is also the mark the pill row sits above, and the thing the page is
     measured from. */
  .work-fit-head{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
    letter-spacing:.14em; color:var(--text-dim); margin:0 0 var(--space-3);
    padding-bottom:var(--space-2); border-bottom:1px solid var(--glass-border); }

  .work-fit-lead{ font-family:var(--font-display); font-weight:600;
    font-size:var(--type-title); line-height:1.3; color:var(--text);
    margin:var(--space-4) 0 0; max-width:54ch; }
  .work-fit-sub{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6;
    margin:var(--space-2) 0 0; max-width:66ch; }

  /* Set in the mono because it is a measurement ABOUT the page rather than a
     sentence on it — the same argument .work-hero-src makes one band up. */
  .work-fit-src{ font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:var(--type-label); letter-spacing:.02em; color:var(--text-faint);
    margin:var(--space-3) 0 0; line-height:1.5; }

  .work-week{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
    border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border);
    margin:var(--space-5) 0 var(--space-4); }
  .work-day{ padding:var(--space-4) var(--space-2) var(--space-4) 0; }
  .work-day + .work-day{ border-left:1px solid var(--glass-border); padding-left:var(--space-2); }
  .work-day-d{ display:block; font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--text-faint); margin-bottom:var(--space-2); }
  .work-day-fig{ display:block; font-family:var(--font-display); font-weight:600;
    font-size:var(--fig-week, 40px); line-height:1; color:var(--text);
    font-variant-numeric:tabular-nums lining-nums; }

  /* THE ZERO INVERSION, which is his own rule off .media-tile.empty: a day
     with nothing on it puts the ink in the WEEKDAY and takes it out of the
     figure, so an empty Saturday reads as a gap rather than as a nought
     shouting. */
  .work-day[data-zero="1"] .work-day-fig{ color:var(--text-faint); }
  .work-day[data-zero="1"] .work-day-d{ color:var(--text); }
  .work-day[data-heaviest="1"] .work-day-fig{ color:var(--brass); }
  .work-day[data-heaviest="1"] .work-day-d{ color:var(--brass); }
  .work-day[data-today="1"]{ background:linear-gradient(180deg, var(--glass-border), transparent 60%); }

  .work-day-who{ display:block; margin-top:var(--space-2);
    font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px;
    color:var(--text-faint); line-height:1.5; }
  .work-day-who b{ color:var(--brass); font-weight:500; }

  /* The same sentence the columns say, for the width where a 60px column
     cannot hold a name. Hidden where the columns can say it themselves. */
  .work-week-who{ display:none; font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:var(--type-label); color:var(--text-faint); margin:var(--space-3) 0 0;
    line-height:1.7; }
  .work-week-who b{ color:var(--brass); font-weight:500; }

  .work-week-unknown{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6;
    padding:var(--space-5) 0; border-top:1px solid var(--glass-border);
    border-bottom:1px solid var(--glass-border); margin:var(--space-5) 0 var(--space-4);
    max-width:70ch; }

  .work-fit-rule{ font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:var(--type-label); color:var(--text-faint); line-height:1.7;
    margin:0 0 var(--space-6); max-width:74ch; }

  .work-exposed{ margin-top:var(--space-6); }
  .work-exposed h3{ font-family:var(--font-display); font-weight:600;
    font-size:var(--type-lead); color:var(--text); margin:0 0 var(--space-hair); }
  .work-exposed-sub{ font-size:var(--type-body); color:var(--text-dim);
    margin:0 0 var(--space-3); max-width:66ch; line-height:1.6; }
  .work-ex-row{ display:grid; grid-template-columns:1fr auto; gap:var(--space-4);
    align-items:center; padding:var(--space-3) 0; border-bottom:1px solid var(--glass-border); }
  .work-ex-t{ display:block; font-family:var(--font-display);
    font-size:var(--type-lead); line-height:1.35; color:var(--text); }
  .work-ex-s{ display:block; margin-top:var(--space-hair);
    font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:var(--type-label);
    color:var(--text-faint); }
  .work-ex-r{ font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:var(--type-label); color:var(--brass); white-space:nowrap; }
  .work-ex-private .work-ex-r{ color:var(--text-faint); }

  .work-fit-foot{ font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:var(--type-label); color:var(--text-faint); line-height:1.7;
    margin:var(--space-6) 0 0; max-width:78ch; }

  /* ---- THE ONE LIST ---------------------------------------------------
     The panel frame is mediaPanel()'s, unchanged, so walking from Work into
     Projects is not a change of typeface — and so the door in the heading is
     already a real <button> with the keyboard behaviour that took a regression
     to get right. The one thing that has to move with the area is the focus
     ring: the shared rule paints it in --area-media, and a teal ring on the
     brass page would be the only thing on it wearing another area's colour. */
  #workBody .media-panel-door:focus-visible{ outline-color:var(--area-work); }

  /* A ROW OF THE ONE LIST.
     A <button> rather than a div with a click handler, for the same reason the
     cards are: this list is the substance of the page, and a list nobody can
     walk with a keyboard would be a worse front page than the dropdown it
     replaced. */
  .work-row{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; width:100%;
    background:none; border:0; border-radius:0; font:inherit; color:inherit;
    text-align:left; cursor:pointer; }
  .work-row + .work-row{ border-top:1px solid var(--glass-border); }
  .work-row:hover .work-row-t{ color:var(--area-work); }
  .work-row:focus-visible{ outline:2px solid var(--area-work); outline-offset:-2px;
    border-radius:var(--radius-control); }

  /* THE MARK IS A FACE OR IT IS NOTHING, AND THE SPACE IS HELD EITHER WAY.
     This is the third graft — treatment B's faces, moved off the band and down
     into the rows where the people actually are, which is also the route into
     Organizations. What it must NOT do is acquire a stand-in on the rows that
     are not people: a photograph and a project-coloured disc as the same circle
     in the same list tells a small lie about what is underneath them, because
     one is somebody you owe a reply to and the other is a colour somebody
     picked in a settings box. So a task row and a project row carry nothing
     here — and the slot stays, so every title in the list starts on the same
     left edge. Media's two rules at once: "real content or nothing, there is no
     placeholder", and the reserved row that keeps a card with no artwork from
     pulling its name off the line. */
  /* THE INITIALS WERE READ AGAINST WHATEVER HAPPENED TO BE BEHIND THEM.
     The wash used to be var(--blue) 35% and var(--green) 25% mixed into
     TRANSPARENT, so the colour the letters actually stood on was not a
     colour anybody chose - it fell out of the stack. That is fine while the
     theme's blue is bright (#3D6BFF in the default), and it collapses where
     the theme's blue is ink: denim's --blue is #26306E and its --text is
     #101827, which is dark letters on a dark disc at 2.32:1 against a 4.5
     floor. Terracotta, the other coloured paper, measured 2.41:1 for the
     same arithmetic.
     Mixed into --bg-mid instead, and weaker, the disc now sits in the same
     light neighbourhood as the page in every theme, so --text carries it
     everywhere rather than in the eleven themes where the accent was pale.
     Same blue-to-green sweep, same size, same weight. */
  .work-row-face{ width:30px; height:30px; flex:none; border-radius:var(--radius-round);
    overflow:hidden; display:flex; align-items:center; justify-content:center;
    font-size:var(--type-label); font-weight:700; color:var(--text);
    border:1px solid var(--glass-border-hi);
    background:linear-gradient(135deg, color-mix(in srgb, var(--blue) 15%, var(--bg-mid)),
                                       color-mix(in srgb, var(--green) 11%, var(--bg-mid))); }
  /* NOTHING PAINTED, ONLY SPACE HELD. No border, no fill, no outlined circle
     where a person would be — three faint rings on the rows that are tasks is
     a placeholder, which is the thing the rule above refuses. */
  .work-row-face.none{ border:0; background:none; }
  .work-row-face img{ width:100%; height:100%; object-fit:cover; display:block; }

  .work-row-main{ flex:1; min-width:0; }
  .work-row-t{ display:block; font-size:var(--type-body); font-weight:600; color:var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    transition:color var(--dur-fast) var(--ease-out); }
  .work-row-s{ display:block; font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-hair);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* WHICH KIND THIS ROW IS, AND IT IS THE PRICE OF MERGING FOUR LISTS INTO
     ONE. Without it "Send the revised statement of work" and "Dan Osei" sit on
     consecutive lines with nothing saying that one is a task and the other is a
     person waiting for a reply.

     A LABEL, NOT A PILL, AND THE FIRST SCREENSHOTS ARE WHY. The demo drew it as
     the demo drew everything — a brass chip with a rounded border — and in the
     picture it read as a column of small buttons running down the right of a
     list whose rows are themselves buttons. A bordered chip inside a control is
     a second, smaller control inside the first, and the first thing a person
     does with two controls on one row is press the wrong one. It says the same
     word with none of that: small caps, tracked, one ink token down, in the
     same register as the card labels on the band above it. */
  .work-row-kind{ flex:none; font-size:var(--type-label); font-weight:700; text-transform:uppercase;
    letter-spacing:.11em; color:var(--text-dim); white-space:nowrap;
    padding:0 var(--space-hair); }
  /* BOTH SIDES WERE RIGHT AND THEY WERE FIXING DIFFERENT THINGS. Live moved the
     font to the --font-mono token (the one mechanical migration, 171 selectors,
     keep it). Master raised the ink because var(--text-dim) alone failed the
     readability check on the work row. Taking either branch whole loses the
     other's fix, so this line is the union: live's token, master's colour. */
  .work-row-r{ flex:none; font-family:var(--font-mono);
    font-size:var(--type-body); color:color-mix(in srgb, var(--text) 30%, var(--text-dim)); font-variant-numeric:tabular-nums;
    min-width:64px; text-align:right; }

  .work-empty{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6; padding:var(--space-3) 0;
    max-width:70ch; }
  .work-basis-line{ font-size:var(--type-body); color:var(--text-dim); line-height:1.6;
    margin:var(--space-hair) 0 var(--space-3); max-width:78ch; }
  /* THE COUNT LINE, AND IT IS NOT A CONTROL. It exists because the card's
     number and the list's length genuinely disagree: pulse-stats slices
     `waiting` at twelve however many there are, and a list of a hundred and
     twenty-eight moving tasks is a scroll rather than a page. A page that shows
     six of twelve and does not say so is lying quietly. */
  .work-more{ font-size:var(--type-body); color:var(--text-dim); padding:var(--space-3) 0 0; line-height:1.7; }

  .work-setup{ border:1px solid var(--glass-border); border-radius:var(--radius-card);
    background:var(--glass-bg); padding:var(--space-hair) var(--space-4); }
  .work-setup-row{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) 0; }
  .work-setup-row + .work-setup-row{ border-top:1px solid var(--glass-border); }
  .work-setup-main{ flex:1; min-width:0; }
  /* display:block, not inline. As spans the name and the sentence ran together
     on one line — "Connect a mailbox So Lucid can see who wrote to you" — which
     reads as a typo rather than as two fields. */
  .work-setup-n{ display:block; font-size:var(--type-body); font-weight:650; color:var(--text); }
  .work-setup-w{ display:block; font-size:var(--type-body); color:var(--text-dim); margin-top:var(--space-hair);
    line-height:1.5; }

  /* THE OTHER ROOMS, AS PILLS — item 620, revised 25 September.
     ---------------------------------------------------------------------
     What stood here was a GRID OF FOUR CARDS, one per room, each with a
     name, a count and a sentence. Matt, looking at the live page: "I asked
     about repositioning the 4 buttons as they are caught in between. Maybe
     skinny and shorten the pills to stack a row accross the top."

     So: one short row at the very top of the page. A FLEX LINE, NOT A GRID,
     and this is the one place the old row's argument reverses — four equal
     columns made sense for four cards carrying sentences, because a flex row
     would have sized Board at a third of Organizations. A pill carries a
     name and a figure and nothing else, so sizing it to its own name is
     exactly right, and wrapping is what lets four of them survive a phone
     without any of them going to two lines.

     THE SENTENCE UNDER EACH NAME IS GONE with the cards, and that is the
     cost. It was the thing that told you what was behind a door before you
     opened it; the rail and the phone sheet still carry it, and the pills
     carry it in their title and aria-label rather than on the screen.

     IT IS A BUTTON. Enter, Space, a focus ring and a state a screen reader
     can read, all real rather than promised. */
  .work-pills{ display:flex; flex-wrap:wrap; gap:var(--space-2);
    margin:0 0 var(--space-5); }

  /* 9px by 14px, a full round, 12.5px of type, a hairline at 15% of the text
     ink and no ground at all — the shape Matt approved on the mock. At 1400
     that is a 33px row against the 233px the 2x2 grid of cards cost. */
  .work-pill{ display:inline-flex; align-items:center; gap:7px;
    padding:9px 14px; border-radius:999px;
    border:1px solid color-mix(in srgb, var(--text) 15%, transparent);
    background:transparent; color:inherit; font:inherit; font-size:12.5px;
    line-height:1; cursor:pointer; white-space:nowrap;
    transition:border-color var(--dur-fast) var(--ease-in-out),
               color var(--dur-fast) var(--ease-in-out); }
  .work-pill:hover{ border-color:color-mix(in srgb, var(--text) 34%, transparent); }
  .work-pill:focus-visible{ outline:2px solid var(--area-work); outline-offset:2px; }
  .work-pill-name{ font-weight:600; color:var(--text-dim); }
  .work-pill-n{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px;
    font-variant-numeric:tabular-nums; color:var(--brass); }

  /* THE GLOW, AND IT IS BORDER-COLOUR AND COLOUR ONLY. No animation — this
     page has enough moving parts — and nothing that costs a re-layout, so a
     pill lighting up cannot shift the row beside it by a pixel.

     ONLY data-due="some" LIGHTS. Organizations and Pulse can never carry that
     value: workPillPastDue() returns false for any room not on
     WORK_PILL_GLOW_ROOMS and there is no counting branch for them to reach.
     There is deliberately NO RULE HERE for data-due="na" either, so even a
     hand-written attribute could not find one. */
  .work-pill[data-due="some"]{
    border-color:color-mix(in srgb, var(--brass) 62%, transparent); }
  .work-pill[data-due="some"] .work-pill-name{ color:var(--text); }
  .work-pill[data-due="some"] .work-pill-n{
    color:color-mix(in srgb, var(--brass) 65%, var(--text)); }

  /* AND THE THIRD STATE — rule 211 at pill size. A read that fell over must
     not draw like a room with nothing past due. The hairline goes DASHED,
     which is a shape rather than a colour, so it reads the same way on all
     fourteen themes and in the one where brass and text sit close together. */
  .work-pill[data-due="unknown"]{ border-style:dashed;
    border-color:color-mix(in srgb, var(--text) 22%, transparent); }

  /* ---- WHERE THE ROW GIVES UP ITS SHAPE — and it is the seven days now ---

     THE SEVEN STAY SEVEN AT EVERY WIDTH, and the FIGURE pays for it. The
     shape of the seven figures is the whole argument of this page, and a
     skyline broken over three rows is not a skyline — seven does not divide
     into a phone. So the figure steps down instead, which is the same trade
     .media-tile makes at two-up.

     AND THE NAMES MOVE RATHER THAN GO. Whose name is on which day is the
     point of the page, so where a 60px column can no longer hold one, the
     names drop out of the columns and into the sentence beneath them. */
  @media (max-width: 1240px){
    .work-fit-lead{ font-size:var(--type-title); }
    .work-week{ --fig-week:34px; }
  }
  @media (max-width: 900px){
    .work-week{ --fig-week:29px; }
    .work-day{ padding:var(--space-3) 5px var(--space-3) 0; }
    .work-day + .work-day{ padding-left:5px; }
  }
  @media (max-width: 760px){
    .work-week{ --fig-week:23px; }
    .work-day{ padding:var(--space-3) 3px var(--space-3) 0; }
    .work-day + .work-day{ padding-left:3px; }
    .work-day-d{ font-size:9px; letter-spacing:.04em; }
    .work-day-who{ display:none; }
    .work-week-who{ display:block; }
    .work-ex-row{ grid-template-columns:1fr; gap:var(--space-2); }
  }

  /* At a phone width the kind tag and the right-hand figure cannot both sit on
     the row. THE FIGURE WINS — "9 days" is why the row is there — and the tag
     drops under the subtitle, where it still says which kind this row is. */
  @media (max-width: 560px){
    .work-row-kind{ display:none; }
    .work-row-s::after{ content:' · ' attr(data-kind); }
    .work-row-r{ min-width:0; }
  }


/* The glyph inside the face disc (14 Oct, AVATAR 2): without this an icon fills
   the whole disc edge to edge. Shared with the other faces in app.css. */
.work-row-face .ci-glyph{ width:52%; height:52%; display:block; flex:none; }

/* =========================================================================
   THE WORK PAGE'S PROVENANCE, FOLDED AWAY.

   Matt: "Work has a dissertation nobody wanted." He was right — about a
   hundred and fifty words of monospaced capitals sat above the content,
   explaining the page's own methodology and naming a source file.

   The words are kept exactly as written and moved inside a <details> that is
   shut by default; the argument is in the comment on workFitProvenanceHtml.
   What is styled here is only the asking, not the answer: .work-fit-rule and
   .work-fit-foot keep the type they already had, so opening it shows what it
   always showed.

   AT THE END OF THE FILE, like the blocks above it: this stylesheet carries a
   :root override thousands of lines below the rules it overrides, and the
   four-across fix lost to it silently three times before being moved here.
   ========================================================================= */
.work-prov{
  margin:0 0 var(--space-6);
  max-width:74ch;
}
/* Quiet, and unmistakably a thing you can press. The marker is the browser's
   own, because a hand-drawn triangle is one more thing to keep in step with
   twelve themes. */
.work-prov-say{
  cursor:pointer;
  display:inline-block;
  font-size:var(--type-label);
  color:var(--text-dim);
  padding:2px 0;
  border-bottom:1px dotted color-mix(in srgb, var(--text) 26%, transparent);
}
.work-prov-say:hover{ color:var(--text); }
/* A real focus ring, because a <summary> is keyboard-reachable for free and a
   control you can reach but cannot see you have reached is worse than one you
   cannot reach at all. */
.work-prov-say:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius-tight);
}
.work-prov[open] .work-prov-say{
  color:var(--text);
  margin-bottom:var(--space-3);
}
/* The kept text, unchanged. .work-fit-rule carries its own type; this only
   stops its bottom margin doubling up inside the fold. */
.work-prov-body > :last-child{ margin-bottom:0; }