/* ============================================================================
   THE TWO STOPS OF THE FIRST RUN THAT ARE FORMS

   console-ask.css is the room, and the cards of answers that stand in it. This
   is the other kind of card: the opening stop, where somebody confirms their
   picture, their name and their clock, and the one after it, where they set
   seats aside for the colleagues who are going to need this too.

   EVERYTHING HERE IS THE ANSWER ROW WITH A CONTROL IN IT. The first cut of
   these two stops was a bare disc, a greyed-out button and two ordinary
   labelled fields dropped onto a full-bleed page whose other five cards are a
   column of large deliberate rows: it worked, and it read as a settings screen
   that had wandered into somebody else's design. So there is almost nothing new
   below. `.cb-ask-opt` already draws the hairline, the twenty-pixel radius, the
   padding and the wash on approach; a form row wears that class, and this file
   says only what is different about holding a control rather than being one.

   ITS OWN FILE RATHER THAN A SECTION OF THAT ONE, for docs/04's reason: that
   stylesheet is well past the size a file should be read at, and these are a
   different subject. Everything here hangs off `.cb-ask-form` or the two stops'
   own classes, so nothing in here can reach a question card by accident.
   ========================================================================= */

/* The body of a form card: one column, on the rhythm a list of answers uses, so
   the two kinds of stop do not read as two different screens. */
.cb-ask-form {
  display: grid;
  gap: var(--cb-space-lg);
}
/* The same air a list of options gets under the standfirst, written for the
   same three neighbours console-ask.css writes the option group's. */
.cb-ask-line + .cb-ask-form,
.cb-ask-lede + .cb-ask-form,
.cb-ask-title + .cb-ask-form {
  margin-block-start: var(--cb-space-6xl);
}

/* ---- The mark at the head of a row ----
   `.cb-ask-num` to the pixel: the same forty-pixel square, the same ten-pixel
   radius, the same sunken wash and the same hairline, so a reader coming off
   card two and going on to card four sees one column down the left edge of the
   whole run rather than three cards that each drew their own. It is a separate
   class only because what goes in it is a mark rather than a key, and a number
   slot that sometimes held a face would need the number's own states turned off
   one at a time. */
.cb-ask-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--cb-space-5xl);
  block-size: var(--cb-space-5xl);
  border: 1px solid var(--cbc-line);
  border-radius: var(--cb-radius-lg);
  background: var(--cbc-sunken);
  color: var(--cbc-ink-faint);
  overflow: hidden;
  transition:
    background var(--cb-motion-fast) var(--cb-motion-ease),
    border-color var(--cb-motion-fast) var(--cb-motion-ease),
    color var(--cb-motion-fast) var(--cb-motion-ease);
}
.cb-ask-chip .cb-icon {
  inline-size: var(--cb-space-2xl);
  block-size: var(--cb-space-2xl);
}
.cb-ask-opt:hover .cb-ask-chip {
  border-color: var(--cbc-line-strong);
  color: var(--cbc-ink);
}

/* ---- A control drawn straight onto the row ----
   No box inside a box. The row already has the hairline and the radius, so an
   input or a menu bringing its own would be two frames around one field, which
   is what made the first cut of these stops read as a form pasted onto a page.
   The row's own focus-within is the ring. */
.cb-ask-form .cb-ask-bare,
.cb-ask-form .cb-ask-bare .cb-pick {
  inline-size: 100%;
  padding: 0;
  border: none;
  background: none;
  color: var(--cbc-ink);
  font-size: var(--cb-type-lg-size);
  line-height: var(--cb-type-lg-line-height);
}
.cb-ask-form .cb-ask-bare:focus,
.cb-ask-form .cb-ask-bare:focus-visible,
.cb-ask-form .cb-ask-bare .cb-pick:focus,
.cb-ask-form .cb-ask-bare .cb-pick:focus-visible {
  outline: none;
  box-shadow: none;
}
/* The menu keeps its chevron, which is the only thing left saying it is a menu
   once the box around it has gone. */
.cb-ask-form .cb-pick-wrap.cb-ask-bare {
  padding-inline-end: var(--cb-space-4xl);
}

/* ---- The picture ----
   The row is the control, so the face sits in the mark's slot and is round: the
   one thing on this card that is a person rather than a category. */
.cb-ask-chip-face {
  border-radius: var(--cb-radius-full);
  border-color: transparent;
  background: none;
}
.cb-ask-chip-face .cb-avatar {
  inline-size: 100%;
  block-size: 100%;
  font-size: var(--cb-type-md-size);
}
/* The mark over the face, and it arrives with the pointer (rule 14). A camera
   parked on somebody's photograph at all times is a badge, and a badge is a
   thing to look at rather than a thing to press. It fades rather than slides,
   because there is nowhere for a layer over a whole disc to arrive from. */
.cb-pic-over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--cb-radius-full);
  background: var(--cbc-veil);
  color: var(--cbc-on-accent);
  opacity: 0;
  transition: opacity var(--cb-motion-fast) var(--cbc-spring);
}
.cb-pic:hover .cb-pic-over,
.cb-pic:focus-visible .cb-pic-over,
.cb-pic[data-reading] .cb-pic-over {
  opacity: 1;
}
.cb-pic-over .cb-icon {
  inline-size: var(--cb-space-2xl);
  block-size: var(--cb-space-2xl);
}
/* While a file is being decoded, which is a couple of frames for anything a
   phone produced. The overlay is held open rather than a spinner put up: a
   spinner that appears and goes inside a tenth of a second is a flash rather
   than a reassurance, and holding the affordance says the press landed. */
.cb-pic[data-reading] {
  cursor: progress;
}

/* The picture's row, the way back under it, and the sentence when a file could
   not be read. Both of those are indented to the row's words rather than to its
   edge, so they read as belonging to the picture and not to the card. */
.cb-pic-set {
  display: grid;
  gap: var(--cb-space-md);
  justify-items: start;
}
.cb-pic-set > .cb-pic {
  justify-self: stretch;
}
/* A refusal lines up with the row's WORDS rather than its edge, so it reads as
   belonging to the picture and not to the card.

   THE WAY BACK USED TO BE INDENTED HERE TOO. It was a named button under the
   row, off for as long as nobody had chosen a picture; it is a cross in the
   corner of the face now (face-control.ts), so there is nothing left down here
   to line up. */
.cb-pic-said {
  margin-inline-start: calc(var(--cb-space-5xl) + var(--cb-space-3xl) + var(--cb-space-xl));
}
.cb-pic-said {
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
  color: var(--cbc-poor-text);
}
.cb-pic-said:empty {
  display: none;
}

/* ---- The way back off a picture somebody chose ----

   A CROSS IN THE CORNER OF THE FACE, and only where there is a face of their
   own to take off. What was here was a whole named button, "Use my initials
   instead", standing under the row and turned off for as long as nobody had
   chosen anything, which is nearly everybody nearly always: a control that
   spends its life greyed out, explaining itself, to undo a thing most people
   never do.

   PINNED TO THE DISC, WHICH IS WHY IT MAY BE REMOVED RATHER THAN TURNED OFF.
   Rule 15 is about a control leaving a row and shifting every control beside
   it; this one is absolutely positioned on a corner and its absence moves
   nothing at all. The disc is the containing block, and it is the row's chip
   rather than the row, so the cross sits on the face and not on the card.

   IT IS ALWAYS THERE ONCE THERE IS SOMETHING TO CLEAR, unlike the camera mark
   underneath it which arrives with the pointer. The camera says what pressing
   the picture does, which is a thing to discover; this takes something away,
   which is a thing to be able to find. */
.cb-pic-set {
  position: relative;
}
.cb-pic-clear {
  position: absolute;
  inset-block-start: 0;
  /* THE END CORNER, BECAUSE THE SHUFFLE HAS THE START ONE. It used to be here
     on the left, which was fine while it was the only thing on the disc; there
     are two controls now, they are the two things you can do to a picture you
     did not choose, and each having its own corner is what stops either of them
     turning up where the other was a second ago (console-face.css). */
  inset-inline-end: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--cb-space-3xl);
  block-size: var(--cb-space-3xl);
  padding: 0;
  /* THE SAME LIFT AS THE SHUFFLE IN THE OPPOSITE CORNER (console-face.css).
     Two controls on one disc have to read as a pair, and a hairline chip in the
     raised colour is invisible on a light card: it was a smudge on the picture
     until it was hovered. */
  border: 1px solid var(--cbc-line-strong);
  border-radius: var(--cb-radius-full);
  background: var(--cbc-raised);
  box-shadow: var(--cb-shadow-card);
  color: var(--cbc-ink);
  cursor: pointer;
  transition:
    background var(--cb-motion-fast) var(--cb-motion-ease),
    color var(--cb-motion-fast) var(--cb-motion-ease),
    border-color var(--cb-motion-fast) var(--cb-motion-ease);
}
.cb-pic-clear:hover {
  background: var(--cbc-poor);
  border-color: var(--cbc-poor);
  color: var(--cbc-on-accent);
}
.cb-pic-clear .cb-icon {
  inline-size: var(--cb-space-xl);
  block-size: var(--cb-space-xl);
}

/* ---- The clock under the zone menu ----
   The one piece of feedback that tells somebody they picked the right zone
   without their having to know what offset their city is on this month. In the
   accent, because it is the only line on the card that is a live reading rather
   than an explanation. */
.cb-ask-clock {
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
  /* NOT THE ACCENT, and it was. On this card the accent is within a shade of
     `--cbc-poor`, which is the colour a refused save is written in two lines
     below, so a perfectly ordinary reading of the clock looked like something
     had gone wrong. Muted ink says the same thing and cannot be misread. */
  color: var(--cbc-ink-muted);
  font-weight: var(--cb-font-weight-medium);
}
.cb-ask-clock:empty {
  display: none;
}

/* Whatever the server said about a save. Empty almost always, and holding no
   space when it is: a permanently reserved error line is a card that looks like
   it is about to go wrong. */
.cb-ask-said {
  font-size: var(--cb-type-sm-size);
  line-height: var(--cb-type-sm-line-height);
  color: var(--cbc-poor-text);
}
.cb-ask-said:empty {
  display: none;
}

/* ---- The invite rows have gone ----

   Everything that was here drew a row per invitation on the old team stop: a
   chip, two boxes, a menu and a drop control, wearing `.cb-ask-opt` so it read
   as one of the questions' answer rows. That stop is its own screen now, with a
   roster and a seat control of its own, and it brought its own stylesheet
   (console-settle-team.css). Deleted rather than left: an unused rule is a rule
   the next person reads, matches against markup that no longer exists, and
   trusts. */

/* ---- The same picture control on the profile screen ----
   It is changed from two places and it is one control in both, which is what
   stops "use the account's" meaning two different things
   (views/profile-identity.ts). What differs is the room, and it differs a lot:
   the first run's stop is a column of rows that each have to introduce
   themselves, and this panel is a face, a name and an address on one line under
   a heading that already says "You".

   SO THE ROW'S WORDS COME OFF HERE. "Your picture / The one you chose" beside
   somebody's own name, under a heading called You, is the same fact written
   three times, and it pushed the name and the address off the end of the panel.
   What is left is the face, which is what this panel always drew, with the
   press and the mark on approach that it never had. */
.cb-me .cb-pic-set {
  inline-size: auto;
  flex: none;
  gap: var(--cb-space-sm);
  justify-items: center;
}
.cb-me .cb-pic .cb-ask-words {
  display: none;
}
.cb-me .cb-ask-opt.cb-pic {
  padding: 0;
  border-color: transparent;
  background: none;
}
.cb-me .cb-ask-opt.cb-pic:hover {
  background: none;
  border-color: transparent;
}
/* The size this panel has always drawn a face at. It is the subject of a card
   on the first run and one fact among three here. */
.cb-me .cb-ask-chip-face {
  inline-size: var(--cb-space-7xl);
  block-size: var(--cb-space-7xl);
}
.cb-me .cb-ask-chip-face .cb-avatar {
  font-size: var(--cb-type-md-size);
}
.cb-me .cb-pic-said {
  margin-inline-start: 0;
}