/* ============================================================================
   BB84 v2 — COMPONENTS
   Every component owns its own size and spacing. A screen may place a
   component but may never adjust one: if a component is the wrong size in
   some context, the fix belongs here, not on the screen.
   ========================================================================= */

/* --- status strip -------------------------------------------------------- */
.c-status{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4);
  padding:var(--space-2) var(--space-5);
  background:#070709;
  font-family:var(--font-figure);
  font-size:var(--size-micro);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-3);
}
.c-status__live{ color:var(--accent-bright) }
.c-status__dot{
  display:inline-block; width:6px; height:6px; margin-left:var(--space-2);
  border-radius:var(--radius-pill); background:var(--accent-bright);
  vertical-align:middle;
}

/* --- masthead ------------------------------------------------------------ */
.c-masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6);
  padding:var(--space-5) var(--space-6);
}
.c-masthead__mark{ height:56px; width:auto; flex:none }
.c-masthead__side{
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-2);
}

/* --- who ----------------------------------------------------------------- */
.c-who{
  font-size:var(--size-label);
  letter-spacing:.02em;
  color:var(--accent-bright);
  white-space:nowrap;
}

/* --- menu bar ------------------------------------------------------------ */
.c-menubar{
  display:flex; align-items:center; gap:var(--space-3);
  flex-wrap:wrap; row-gap:var(--space-2);
}
.c-menubar__item{
  border:.5px solid var(--hairline);
  background:transparent;
  border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-4);
  /* The same size as a small button, because that is what it is: a small pill.
     At the micro size it came out 34px against the button's 35, which is not a
     difference anyone can name and is exactly the sort that reads as sloppy. */
  font-size:var(--size-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-2);
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-menubar__item:hover{ border-color:var(--accent-edge); color:var(--text-1) }
.c-menubar__item[aria-current="page"]{
  border-color:var(--accent-edge); background:var(--accent-wash); color:var(--accent-bright);
}
.c-menubar__item[aria-disabled="true"]{
  color:var(--text-3); border-style:dashed; cursor:not-allowed;
}
.c-menubar__item[aria-disabled="true"]:hover{ border-color:var(--hairline); color:var(--text-3) }

/* --- page heading --------------------------------------------------------
   Three things across and the line under them: what the screen is, where things
   stand, and what you can do about it.

   A grid rather than a row that wraps. As a wrapping row the line under the
   title had to be told to take the whole width, and a reading measure on it
   defeated that: the browser breaks a line on what an item would like to be,
   and a lede capped at 640px would like to be 640px, so on a screen with room
   for 640px it stayed up beside the meters and on one without it did not. Which
   row a thing is on is not something to leave to arithmetic. */
.c-heading{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-3) var(--space-4);
  /* A little more underneath than there was, because there is now a line down
     there, and on the screens that scroll under a fixed heading the first
     section was arriving almost against it. */
  padding:var(--space-5) var(--space-6) var(--space-3);
}
/* Placed rather than flowed. The line is written straight after the title,
   which is where it has to be read, and auto placement would then push the
   meters and the controls down to a row of their own. */
.c-heading__title{ grid-row:1; grid-column:1 }
.c-heading__meters{ grid-row:1; grid-column:2 }
.c-heading__aside{ grid-row:1; grid-column:3 }
.c-heading__lede{ grid-row:2; grid-column:1 / -1 }

.c-heading__title{
  margin:0;
  font-family:var(--font-identity);
  font-size:var(--size-title);
  font-weight:var(--weight-heavy);
  letter-spacing:var(--track-identity);
  text-transform:uppercase;
  line-height:var(--line-tight);
}
.c-heading__meters{ display:flex; gap:var(--space-3); flex-wrap:wrap; justify-self:center }
.c-heading__aside{
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-2);
  font-size:var(--size-small); color:var(--text-2);
  justify-self:end;
}

/* Narrow enough and three across is one thing on top of another. */
@media (max-width:900px){
  .c-heading{ grid-template-columns:minmax(0,1fr) }
  .c-heading__title,.c-heading__meters,.c-heading__aside,.c-heading__lede{
    grid-row:auto; grid-column:1;
  }
  .c-heading__meters{ justify-self:start }
  .c-heading__aside{ justify-self:start; justify-content:flex-start }
}

/* --- meter --------------------------------------------------------------- */
.c-meter{
  border:.5px solid var(--hairline);
  border-radius:var(--radius-pill);
  padding:var(--space-2) var(--space-5);
  text-align:center;
}
.c-meter__value{
  font-size:var(--size-title); font-weight:var(--weight-strong);
  font-family:var(--font-figure); line-height:var(--line-tight);
}
.c-meter--accent .c-meter__value{ color:var(--accent-bright) }
/* A meter holding a word rather than a figure.

   Monospace is for figures, and a figure is what a meter usually holds. "No
   date", "Tester", "Australia" and "Not stated" are not figures, and at the
   meter's size in the figure face they shouted louder than the money beside
   them. The same reasoning as c-card__value--none, which the cards already do:
   where there is no figure to show, the words are set as words. */
.c-meter__value--words{
  font-family:var(--font-body);
  font-size:var(--size-heading);
  font-weight:var(--weight-regular);
  line-height:var(--line-body);
}
/* A meter that is also the switch between two lists.

   The count of each was already on this screen, sitting there being read. A
   person looking for the people list looks at the number of people, so the
   number of people is the thing to press. It takes the same shape as c-seg's
   chosen state, because being the one you are on is the same idea in both. */
.c-meter--pressable{
  font-family:inherit;
  background:transparent;
  cursor:pointer;
  color:inherit;
  transition:border-color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
.c-meter--pressable:hover{ border-color:var(--accent-edge) }
.c-meter--pressable:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:2px }
.c-meter--pressable[aria-current="true"]{
  background:var(--accent-wash);
  border-color:var(--accent-edge);
}
.c-meter--pressable[aria-current="true"] .c-meter__value{ color:var(--accent-bright) }
.c-meter--pressable[aria-current="true"] .c-meter__label{ color:var(--accent) }

.c-meter__label{
  margin-top:var(--space-1);
  font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3);
}

/* Where something was captured.

   A small map, dark like everything else, with the point on it. The tiles are
   inverted rather than swapped for a dark set, because there is no dark tile
   service that does not want an account.

   Deliberately not big and deliberately not zoomed in. Indoors a fix is the
   building and not the stand, and a map zoomed to a rooftop would be dressing a
   guess up as a reading. */
.c-map{
  position:relative; width:100%; max-width:360px; height:180px;
  border-radius:var(--radius-panel); overflow:hidden;
  border:.5px solid var(--hairline); background:var(--surface-2);
}
/* What the box says when there is no map to draw in it. Not a broken map and
   not an empty grey square: a sentence saying what is wrong, which is the only
   thing that helps anybody. */
.c-map__instead{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:var(--space-5); text-align:center;
  font-size:var(--size-small); color:var(--text-3); line-height:var(--line-body);
}

/* A person's face, where there is one.

   The only image this application shows other than the wordmark. It lives in a
   meter, because on a person record their photograph is one of the facts about
   them and sits beside the others. Round, like everything else here, and the
   size of the figure a meter would otherwise hold. */
.c-avatar{
  width:56px; height:56px; border-radius:var(--radius-pill);
  object-fit:cover; display:block; margin:0 auto;
  border:.5px solid var(--hairline); background:var(--surface-2);
}
/* The card itself, at the size you can read it. On a contact record the
   photograph is not a decoration beside the facts, it is the fact: it is what
   reminds somebody who this was. The same shape a business card is, and the
   same width as the map under it so the two stack as one thing. */
.c-avatar--card{
  width:100%; max-width:360px; height:auto; aspect-ratio:3.5 / 2;
  border-radius:var(--radius-panel); margin:0;
}

/* --- filter row ---------------------------------------------------------- */
.c-filters{
  display:flex; align-items:center; gap:var(--space-3);
  flex-wrap:wrap; row-gap:var(--space-2);
  padding:var(--space-2) var(--space-6) var(--space-1);
}

/* --- field --------------------------------------------------------------- */
.c-input,.c-select{
  background:var(--surface-1);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-4);
  font-size:var(--size-small);
  color:var(--text-1);
  transition:border-color var(--motion-fast) var(--motion-ease);
}
/* Chrome sizes a date field and a file field itself, and its idea of the box is
   two pixels and one pixel taller than a line of text in the same padding. A
   form that mixed a text field with a date came out with fields at two heights,
   which is the sort of thing you see without being able to say what it is. */
.c-input[type="date"],
.c-input[type="file"]{ height:var(--control-height) }
.c-input::placeholder{ color:var(--text-3) }
.c-input:focus,.c-select:focus{ outline:none; border-color:var(--accent-edge) }
.c-input--search{ min-width:260px; flex:1 1 260px; max-width:420px }
.c-input--search::-webkit-search-cancel-button{ -webkit-appearance:none }
/* The stage on a record's head. A select among buttons, so it takes the button
   width rather than a form field's, and it is the one thing in that row that
   states where the deal is. */
.c-select--stage{ min-width:150px; color:var(--accent-bright); border-color:var(--accent-edge) }
.c-select{
  appearance:none; -webkit-appearance:none;
  padding-right:var(--space-8);
  color:var(--text-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23F0F0EC' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right var(--space-4) center;
}

/* --- column -------------------------------------------------------------- */
.c-column{
  display:flex; flex-direction:column; min-width:0;
  background:var(--surface-1);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-large);
  min-height:130px;
}
.c-column.is-over{ background:var(--accent-wash); box-shadow:inset 0 0 0 .5px var(--accent-edge) }
.c-card.is-dragging{ opacity:.4 }
.c-card[draggable="true"]{ cursor:grab }
.c-column__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-4) var(--space-4) var(--space-3);
  font-size:var(--size-micro);
  font-weight:var(--weight-heavy);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-3);
}
.c-column__count{ font-family:var(--font-figure); letter-spacing:0 }
.c-column__body{
  display:flex; flex-direction:column; gap:var(--space-2);
  padding:0 var(--space-3) var(--space-3);
  min-width:0;
}

/* --- deal card ----------------------------------------------------------- */
.c-card{
  display:block; width:100%; text-align:left; min-width:0;
  background:var(--surface-2);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-panel);
  padding:var(--space-3) var(--space-4);
  transition:border-color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
.c-card:hover{ border-color:var(--accent-edge); background:var(--surface-3) }
.c-card__name{
  font-size:var(--size-small); font-weight:var(--weight-strong);
  line-height:var(--line-tight); overflow-wrap:break-word;
  /* A card is a summary. Three lines is enough to recognise a tender by; the
     few titles that run to three hundred characters are read in full on the
     record, not here, and are not allowed to make one card four times the
     height of its neighbours. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.c-card__org{
  margin-top:var(--space-1);
  font-size:var(--size-label); color:var(--text-3); overflow-wrap:break-word;
}
.c-card__meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); margin-top:var(--space-3);
}
.c-card__value{
  font-size:var(--size-small); font-weight:var(--weight-strong);
  font-family:var(--font-figure);
}
/* Monospace is for figures. Where there is no figure to show, the words are
   set as words. */
.c-card__value--none{
  font-family:var(--font-body);
  font-weight:var(--weight-regular);
  color:var(--text-3);
}
.c-card__date{ font-size:var(--size-label); color:var(--text-3) }
/* What has to happen next, under the figures. Late says so in the danger colour
   rather than only in a tag, so the card reads as late from across the board. */
.c-card__next{
  margin-top:var(--space-2); font-size:var(--size-small);
  color:var(--text-3); line-height:var(--line-body);
  /* Two lines, because the date is the half that matters and clipping to one
     took it off the card. A longer action is cut; the date always survives. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:break-word;
}
.c-card__next--late{ color:var(--danger) }

.c-card__tags{
  display:flex; flex-wrap:wrap; gap:var(--space-2); row-gap:var(--space-2);
  margin-top:var(--space-3);
}

/* --- card head, for a card that carries a figure beside its title -------- */
.c-card__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-3);
}
.c-card__score{
  flex:none;
  font-family:var(--font-figure);
  font-size:var(--size-heading);
  font-weight:var(--weight-strong);
  line-height:var(--line-tight);
  white-space:nowrap;
}
.c-card__score-unit{ font-size:var(--size-micro); font-weight:var(--weight-regular); color:var(--text-3) }
.c-card__score--none{
  font-family:var(--font-body);
  font-size:var(--size-micro);
  font-weight:var(--weight-regular);
  letter-spacing:.04em;
  color:var(--text-3);
}

/* --- card state line -----------------------------------------------------
   What the board can say about a card for itself, kept clear of what Bob
   matched it against. It sits directly under the buyer and above the
   capability tags, so a state never reads as a capability. */
.c-card__state{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-2); row-gap:var(--space-2);
  margin-top:var(--space-3);
}

/* --- a row of tags -------------------------------------------------------
   Tags wrap, and no two of them ever touch. */
.c-tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); row-gap:var(--space-2) }

/* --- tag ----------------------------------------------------------------- */
.c-tag{
  /* A tag is sometimes a span and sometimes a button you can press to remove
     it, so it states its own background rather than inheriting the browser's
     default button face. */
  display:inline-flex; align-items:center;
  background:transparent;
  border:.5px solid var(--hairline);
  border-radius:var(--radius-pill);
  padding:var(--space-1) var(--space-3);
  font-family:inherit;
  font-size:var(--size-micro); line-height:var(--line-body); color:var(--text-3);
}
button.c-tag{ cursor:pointer; transition:border-color var(--motion-fast) var(--motion-ease),
                                          color var(--motion-fast) var(--motion-ease) }
button.c-tag:hover{ border-color:var(--danger); color:var(--danger) }
/* The one active state a card can carry. Cyan, because it is the thing on the
   card that is ready to be acted on. */
.c-tag--warn{ border-color:rgba(224,112,122,.3); color:var(--danger) }
.c-tag--on{
  border-color:var(--accent-edge);
  background:var(--accent-wash);
  color:var(--accent-bright);
  font-weight:var(--weight-strong);
}

/* --- choice tile (the entry menu's one component) ------------------------
   A tile stands beside its siblings, so it is a column of its own with a
   fixed foot: icon, name, note, then whatever figure it holds pinned to the
   bottom so three tiles line up across regardless of how long the notes run. */
.c-choicetile{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--space-4);
  min-width:0; text-align:left;
  background:var(--surface-1);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-large);
  padding:var(--space-7) var(--space-6);
  transition:border-color var(--motion-base) var(--motion-ease),
             background var(--motion-base) var(--motion-ease);
}
.c-choicetile:hover{ border-color:var(--accent-edge); background:var(--surface-2) }
.c-choicetile[aria-disabled="true"]{ border-style:dashed; cursor:not-allowed }
.c-choicetile[aria-disabled="true"] .c-choicetile__name{ color:var(--text-2) }
.c-choicetile[aria-disabled="true"] .c-choicetile__icon{ color:var(--text-3) }
.c-choicetile[aria-disabled="true"]:hover{ border-color:var(--hairline); background:var(--surface-1) }

.c-choicetile__icon{
  display:grid; place-items:center; flex:none;
  width:54px; height:54px;
  border-radius:var(--radius-panel);
  background:var(--surface-2);
  color:var(--accent-bright);
}
.c-choicetile__icon svg{ width:26px; height:26px }
.c-choicetile__body{ display:flex; flex-direction:column; min-width:0 }
.c-choicetile__name{
  display:block;
  font-family:var(--font-identity);
  font-size:var(--size-heading);
  font-weight:var(--weight-medium);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.c-choicetile__note{
  display:block; margin-top:var(--space-2);
  font-size:var(--size-small); color:var(--text-2);
}
.c-choicetile__figure{
  margin-top:auto; padding-top:var(--space-3);
  font-family:var(--font-figure);
  font-size:var(--size-heading);
  color:var(--accent-bright);
}
.c-choicetile__figure-label{
  display:block;
  font-family:var(--font-body);
  font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3);
}

/* --- wordmark and the signed in line, the entry menu's own chrome --------- */
.c-wordmark{ display:block; height:72px; width:auto; margin:0 auto }
.c-signedin{
  font-size:var(--size-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-3);
  text-align:center;
}

/* --- button -------------------------------------------------------------- */
.c-btn{
  border:.5px solid var(--hairline);
  background:transparent;
  border-radius:var(--radius-pill);
  padding:var(--space-3) var(--space-5);
  font-size:var(--size-small);
  font-weight:var(--weight-strong);
  color:var(--text-2);
  white-space:nowrap;
  transition:border-color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-btn:hover{ border-color:var(--accent-edge); color:var(--text-1) }
.c-btn--primary{
  background:var(--accent); border-color:var(--accent); color:var(--ink);
}
.c-btn--primary:hover{ background:var(--accent-bright); border-color:var(--accent-bright) }
.c-btn--quiet{ border-color:var(--hairline); color:var(--text-2) }
.c-btn--quiet:hover{ border-color:var(--accent-edge); color:var(--text-1) }
.c-btn--danger{ border-color:rgba(224,112,122,.36); color:var(--danger) }
.c-btn--danger:hover{ background:rgba(224,112,122,.1) }
/* A commit that is not the screen's one primary action.
   A screen carries one cyan fill and no more, but a form still has to say which
   of its two buttons commits it: with both quiet, Save and Cancel are the same
   control with different words on them. This is the accent as an edge rather
   than as a fill, which reads as the action without claiming to be the action. */
.c-btn--action{ border-color:var(--accent-edge); color:var(--accent-bright) }
.c-btn--action:hover{ background:var(--accent-wash); border-color:var(--accent-bright) }
.c-btn--sm{ font-size:var(--size-label); padding:var(--space-2) var(--space-4) }
.c-btn--lg{ font-size:var(--size-heading); padding:var(--space-4) var(--space-7) }
.c-btn[aria-disabled="true"],.c-btn:disabled{ opacity:.45; cursor:not-allowed }
.c-btn--primary[aria-disabled="true"]:hover,.c-btn--primary:disabled:hover{
  background:var(--accent); border-color:var(--accent);
}

/* --- unit picker ---------------------------------------------------------
   One control, on every screen, saying which business unit you are looking
   at. The dot is the state light; the chevron says it opens. */
.c-picker{ position:relative; flex:none }
.c-picker__button{
  display:inline-flex; align-items:center; gap:var(--space-2);
  border:.5px solid var(--hairline);
  background:var(--surface-1);
  border-radius:var(--radius-pill);
  /* A button's padding, because it stands in a row of buttons. At the smaller
     padding it was 38px beside a 46px button, close enough to look like a
     mistake and far enough to see. */
  padding:var(--space-3) var(--space-5);
  font-size:var(--size-small);
  color:var(--text-1);
  white-space:nowrap;
  transition:border-color var(--motion-fast) var(--motion-ease);
}
.c-picker__button:hover{ border-color:var(--accent-edge) }
.c-picker__button[aria-expanded="true"]{ border-color:var(--accent-edge); background:var(--accent-wash) }
.c-picker__dot{
  width:7px; height:7px; flex:none;
  border-radius:var(--radius-pill);
  background:var(--accent-bright);
}
.c-picker__dot--all{ background:var(--text-3) }
.c-picker__chevron{ width:12px; height:12px; flex:none; color:var(--text-3) }
.c-picker__menu{
  position:absolute; right:0; top:calc(100% + var(--space-2)); z-index:20;
  min-width:280px;
  display:flex; flex-direction:column; gap:var(--space-1);
  padding:var(--space-2);
  background:var(--ink);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-lifted);
}
.c-picker__option{
  display:flex; align-items:center; gap:var(--space-3);
  width:100%; text-align:left;
  background:transparent; border:none;
  border-radius:var(--radius-tight);
  padding:var(--space-3) var(--space-3);
  font-size:var(--size-small);
  color:var(--text-2);
  transition:background var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-picker__option:hover{ background:var(--surface-2); color:var(--text-1) }
.c-picker__option[aria-current="true"]{ background:var(--accent-wash); color:var(--accent-bright) }
.c-picker__rule{
  height:.5px; margin:var(--space-1) var(--space-3); background:var(--hairline);
  border-radius:var(--radius-pill);
}

/* --- eyebrow ------------------------------------------------------------- */
.c-eyebrow{
  font-family:var(--font-identity);
  font-size:var(--size-label);
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--text-3);
}

/* --- lede ---------------------------------------------------------------- */
.c-lede{
  margin:0;
  font-size:var(--size-body);
  line-height:var(--line-prose);
  color:var(--text-2);
  max-width:var(--measure-text);
}

/* --- empty and error ----------------------------------------------------- */
.c-empty{
  padding:var(--space-4);
  font-size:var(--size-small);
  color:var(--text-3);
  text-align:center;
}
.c-notice{
  border:.5px solid var(--hairline);
  border-radius:var(--radius-panel);
  padding:var(--space-4) var(--space-5);
  font-size:var(--size-small);
  color:var(--text-2);
}
.c-notice--error{ border-color:rgba(224,112,122,.4); color:var(--danger) }

/* --- utility: the only two a screen may use ------------------------------ */
.is-hidden{ display:none }
/* A row that is not there at all.
   `hidden` is the browser's own word for it and takes the element out of the
   page and out of what a screen reader reads. It carries a weight because a
   component that sets its own display wins against it otherwise, and draws a
   row that was asked to go. */
[hidden]{ display:none !important }
.u-visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ==========================================================================
   RECORD PARTS
   A record is a place you work. The shape of the page is in templates.css;
   what follows is what gets placed inside one.
   ========================================================================== */

/* --- link ----------------------------------------------------------------
   A reference that opens the notice it came from. It takes the colour of what
   it sits in, because a link is not the primary action on any screen. */
.c-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--hairline);
  text-underline-offset:3px;
  transition:color var(--motion-fast) var(--motion-ease),
             text-decoration-color var(--motion-fast) var(--motion-ease);
}
.c-link:hover{ color:var(--accent-bright); text-decoration-color:var(--accent-edge) }

/* --- a stack of fields and the action that commits them ------------------- */
.c-stack{ display:grid; gap:var(--space-4) }

/* --- a button that reads as a link ---------------------------------------- */
.c-linkbtn{
  background:transparent; border:none; padding:var(--space-2) 0;
  font-family:inherit; font-size:var(--size-small); color:var(--text-3);
  cursor:pointer; justify-self:center;
  border-radius:var(--radius-pill);
  transition:color var(--motion-fast) var(--motion-ease);
}
.c-linkbtn:hover{ color:var(--text-1) }

/* --- what signing in has to say ------------------------------------------ */
.c-signin-msg{
  min-height:1.4em; text-align:center;
  font-size:var(--size-small); color:var(--text-2); line-height:var(--line-body);
}
.c-signin-msg.is-bad{ color:var(--danger) }

/* --- back ---------------------------------------------------------------- */
.c-back{
  /* A record's head is a row of controls, and this is one of them. At 40px it
     was the only thing in that row that was not the height of the rest.
     A button carries a padding from the browser whether or not it is asked for,
     and a grid centres its own content, so it is taken away here. */
  width:var(--control-height); height:var(--control-height); flex:none;
  padding:0;
  display:grid; place-items:center;
  border-radius:var(--radius-pill);
  border:.5px solid var(--hairline);
  background:transparent;
  color:var(--text-2);
  font-size:var(--size-heading); line-height:1;
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-back:hover{ border-color:var(--accent-edge); color:var(--text-1) }

/* --- record titles ------------------------------------------------------- */
.c-titles{ flex:1; min-width:0 }
.c-titles h2{
  margin:0; font-size:var(--size-display); font-weight:var(--weight-strong);
  line-height:var(--line-tight); letter-spacing:-.015em; max-width:24ch;
  overflow-wrap:anywhere;
}
.c-titles .sub{ margin-top:var(--space-2); font-size:var(--size-heading); color:var(--text-2) }

/* --- large meter, for a record's facts row ------------------------------- */
.c-meter--lg{ min-width:150px; padding:var(--space-4) var(--space-6) }
.c-meter--lg .c-meter__value{ font-size:var(--size-display) }

/* --- a meter you can change -----------------------------------------------
   A fact that is also a field. It reads as a fact until you click it, then it
   becomes an input in the same box, and saves with everything else. */
.c-meter--editable{ cursor:text }
.c-meter--editable:hover{ border-color:var(--accent-edge) }
.c-meter__input{
  width:100%; min-width:120px;
  background:transparent; border:none; padding:0;
  font-family:var(--font-figure); font-size:var(--size-display); font-weight:var(--weight-strong);
  line-height:var(--line-tight); color:var(--text-1); text-align:center;
}
.c-meter__input:focus{ outline:none }
select.c-meter__input{
  appearance:none; -webkit-appearance:none; text-align:center; cursor:pointer;
  font-family:var(--font-body);
}
.c-meter__input::-webkit-calendar-picker-indicator{ filter:invert(.7) }

/* --- a title you can change ----------------------------------------------- */
.c-titles__input{
  width:100%; max-width:24ch;
  background:transparent; border:none; padding:0;
  font-size:var(--size-display); font-weight:var(--weight-strong);
  line-height:var(--line-tight); letter-spacing:-.015em; color:var(--text-1);
}
.c-titles__input:focus{ outline:none }
.c-titles h2{ cursor:text }

/* --- rail item ------------------------------------------------------------
   The rail names the sections of a settings screen and says what each is for. */
.c-railitem{
  display:block; width:100%; text-align:left;
  padding:var(--space-4) var(--space-5); border:none; background:transparent;
  border-radius:var(--radius-large);
  color:var(--text-3);
  transition:background var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease);
}
.c-railitem:hover{ color:var(--text-2); background:var(--surface-1) }
.c-railitem[aria-current="page"]{ background:var(--surface-2); color:var(--text-1) }
/* A rail item that makes something rather than going somewhere. It read as a
   folder called "Add a folder", greyed out, because it was drawn as one. */
.c-railitem--action{
  border:.5px dashed var(--accent-edge);
  color:var(--accent-bright);
}
.c-railitem--action:hover{ background:var(--accent-wash); color:var(--accent-bright) }
.c-railitem .a{ font-size:var(--size-heading); font-weight:var(--weight-strong) }
.c-railitem .b{ margin-top:var(--space-1); font-size:var(--size-label); color:var(--text-3); line-height:var(--line-body) }

/* --- a setting written as a sentence --------------------------------------
   Some settings are easier to read as something you say than as a labelled
   box. The number sits in the sentence where the number belongs. */
.c-say{
  /* The leading is the height of the control in the line, not a reading
     measure: the sentence has a field in it, and a line shorter than the field
     would have the fields touching. */
  font-size:var(--size-heading); line-height:3; color:var(--text-2); max-width:900px;
}
.c-say b{ color:var(--text-1); font-weight:var(--weight-regular) }
.c-say .n{
  display:inline-block; width:100px; text-align:center;
  /* The same box as every other field in the CRM. It was two sizes bigger and
     60px tall, so the one number you type on a Configuration screen was unlike
     every other thing you type into anywhere. */
  font-family:var(--font-figure); font-size:var(--size-small); line-height:var(--line-body);
  color:var(--text-1);
  background:var(--surface-1); border:.5px solid var(--hairline);
  border-radius:var(--radius-pill); padding:var(--space-3) var(--space-4); margin:0 var(--space-2);
}
.c-say .n:focus{ outline:none; border-color:var(--accent-edge) }
.c-say .n.wide{ width:170px }
.c-say select.n{ appearance:none; -webkit-appearance:none; width:auto; min-width:120px; cursor:pointer }

/* A tag that shares a row with buttons. The plain tag is sized to sit in a
   card's tag strip, where nothing is beside it; put one next to a button and
   the heights do not agree, which reads as a mistake rather than as a
   difference. There are two, because there are two sizes of row: a list row and
   a tile foot carry small buttons, and a record's head carries full sized ones.
   Each is the same box as the button it stands next to. */
.c-tag--row{ padding:var(--space-2) var(--space-4); font-size:var(--size-label) }
.c-tag--head{ padding:var(--space-3) var(--space-5); font-size:var(--size-small) }

/* --- section ------------------------------------------------------------- */
.c-sec{ display:grid; gap:var(--space-4) }
.c-sec > h3{
  margin:0; font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3); font-weight:var(--weight-heavy);
}

/* --- reading ------------------------------------------------------------- */
.c-prose{
  font-size:var(--size-heading); line-height:var(--line-prose); color:var(--text-1); max-width:68ch;
}
.c-prose p{ margin:0 0 1em }
.c-prose p:last-child{ margin:0 }
.c-note{
  font-size:var(--size-body); color:var(--text-2);
  line-height:var(--line-body); max-width:68ch; margin:0;
}
/* An intro that shares its section's measure rather than a reading measure of
   its own. A short line above full width rows looked orphaned at 68ch while the
   rows beside it ran to twice that. Only for a line or two; real prose keeps
   c-note's measure, because a 150 character line is not readable.
   After c-note, not before it: a modifier that loses the cascade does nothing. */
.c-note--full{ max-width:none }

/* A quiet line that is carrying bad news.
   The system had a quiet line (c-note) and a block that shouts (c-notice--error)
   and nothing in between, which is what a dictation control needs to say it has
   heard nothing yet. Same size and place as c-note, the colour of the danger. */
.c-note--bad{ color:var(--danger) }

/* --- a preview of something that is not ours ------------------------------
   An email is not a screen. It has its own width, its own colours and its own
   typography, and drawing it with the CRM's would be showing somebody a picture
   of what the email is not. So it is a frame with the real thing inside it, and
   the frame is the component. */
.c-preview{
  width:100%; height:620px; border:0; display:block;
  border-radius:var(--radius-large); background:var(--surface-1);
}

/* --- a row you press ------------------------------------------------------
   A row that opens something, rather than a row with a button on it that does.
   Contacts and Organisations put a button on the title, which works when the
   title is the only thing worth pressing; an event row is name, place, dates,
   a tag and a count, and all of it means "open this event". The whole row is
   the target, and it says so by lifting under the pointer and taking a focus
   ring like any other control. */
.c-item--pressable{ cursor:pointer; text-align:left }
.c-item--pressable:hover{ background:var(--surface-2) }
.c-item--pressable:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:2px }

/* A count, at the end of a row. Not a tag: a tag says what something is, and
   this is how many of something there are. Tabular, so a column of them lines
   up down the list. */
.c-count{
  flex:none; font-size:var(--size-small); color:var(--text-3);
  font-variant-numeric:tabular-nums;
}

/* The mark at the end of a row that opens. Quiet, because it is a hint and not
   a control: the row is the control. */
.c-chevron{ flex:none; color:var(--text-3); font-size:18px; line-height:1 }

/* --- list of things ------------------------------------------------------ */
.c-list{ display:grid; gap:var(--space-2) }
.c-item{
  background:var(--surface-1); border-radius:var(--radius-large);
  padding:var(--space-4) var(--space-5);
  display:flex; gap:var(--space-4); align-items:flex-start;
}
.c-item .body{ flex:1; min-width:0 }
.c-item .t{
  font-size:var(--size-body); font-weight:var(--weight-strong); line-height:var(--line-tight);
  text-align:left; overflow-wrap:anywhere;
}
/* A row title that opens something is a button, and states its own surface. */
button.t{
  background:transparent; border:none; padding:0; font-family:inherit; color:inherit;
  cursor:pointer; border-radius:var(--radius-tight);
}
button.t:hover{ color:var(--accent-bright) }
.c-item .d{
  margin-top:var(--space-1); font-size:var(--size-small); color:var(--text-3);
  line-height:var(--line-body); overflow-wrap:anywhere;
}

/* --- key and value ------------------------------------------------------- */
.c-kv{ display:grid; max-width:68ch }
.c-kv .r{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--space-7); padding:var(--space-2) 0;
}
.c-kv .r > span{ font-size:var(--size-body); color:var(--text-2); overflow-wrap:anywhere }
.c-kv .r > b{
  font-size:var(--size-body); font-weight:var(--weight-strong); text-align:right;
  overflow-wrap:anywhere; min-width:0;
}
.c-kv .r > b.num{ font-family:var(--font-figure) }

/* --- the draft, set as a document ---------------------------------------
   It is read here in full. It does not scroll inside the page. */
.c-doc{
  background:var(--surface-1); border-radius:var(--radius-large);
  padding:var(--space-7);
  font-size:var(--size-heading); line-height:var(--line-prose); color:var(--text-1); max-width:74ch;
}
.c-doc h4{
  margin:0 0 .5em; font-size:var(--size-body); font-weight:var(--weight-heavy);
  letter-spacing:.02em; color:var(--text-2);
}
.c-doc p{ margin:0 0 1.15em }
.c-doc p:last-child{ margin:0 }
.c-doc .rule{
  height:.5px; background:var(--hairline); margin:var(--space-7) 0;
  /* A hairline has no corners to speak of, but nothing in this system carries
     a square one, and on a half pixel the radius simply clamps. */
  border-radius:var(--radius-pill);
}
/* Bob writes markdown, so the document sets what markdown can carry. */
.c-doc h4:not(:first-child){ margin-top:1.4em }
.c-doc h5{
  margin:1.2em 0 .4em; font-size:var(--size-small); font-weight:var(--weight-heavy);
  letter-spacing:.04em; text-transform:uppercase; color:var(--text-3);
}
.c-doc h5:first-child{ margin-top:0 }
.c-doc strong{ font-weight:var(--weight-heavy); color:var(--text-1) }
.c-doc em{ font-style:italic }
.c-doc code{
  font-family:var(--font-figure); font-size:.88em;
  background:var(--surface-2); border-radius:var(--radius-tight);
  padding:0 var(--space-1);
}
.c-doc ul,.c-doc ol{ margin:0 0 1.15em; padding-left:1.4em }
.c-doc ul:last-child,.c-doc ol:last-child{ margin-bottom:0 }
.c-doc li{ margin-bottom:.5em }
.c-doc li:last-child{ margin-bottom:0 }
.c-doc li::marker{ color:var(--text-3) }

/* --- a labelled field ----------------------------------------------------
   The label sits above what it labels, never beside it. */
.c-field{ display:grid; gap:var(--space-2); max-width:68ch }
.c-field > label{ font-size:var(--size-body); color:var(--text-2) }
.c-field .c-input,.c-field .c-select,.c-field .c-textarea{ width:100% }

/* --- editing text in place ----------------------------------------------- */
.c-textarea{
  width:100%; max-width:74ch; min-height:420px; resize:vertical;
  background:var(--surface-1); border:.5px solid var(--hairline);
  border-radius:var(--radius-large); padding:var(--space-7);
  font-family:inherit; font-size:var(--size-heading); line-height:var(--line-prose);
  color:var(--text-1);
}
.c-textarea:focus{ outline:none; border-color:var(--accent-edge) }
/* A note is not a document, so it takes a note's worth of room. */
.c-textarea--short{
  min-height:180px; padding:var(--space-5);
  border-radius:var(--radius-large);
  font-size:var(--size-body); line-height:var(--line-body);
}

/* --- a row of actions ---------------------------------------------------- */
.c-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-3) }
/* The action the screen exists for, kept on screen.

   A Configuration pane is a long form with one Save at the bottom of it, and on
   a laptop the Save was below the fold: the one control the screen is for was
   the one you had to go looking for. It sticks to the foot of the pane that
   scrolls, on its own ground so the form does not run under it. */
/* The Save bar belongs to the panel it saves.

   It was pulled out of the panel by negative margins on both sides, so it ran
   the full width of the pane with a rule that started left of the form and
   carried on past the right of it, heading for the rail. A bar that saves this
   form should be the width of this form.

   No negative margins, so it sits inside the panel where it belongs, and a
   border on all four sides rather than a rule across the screen: it is a box
   at the foot of a form, not a strip across the window. */
.c-actions--pinned{
  position:sticky; bottom:var(--space-4); z-index:2;
  margin:var(--space-4) 0 0;
  padding:var(--space-4);
  background:var(--ink);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-panel);
}

/* --- drop zone ----------------------------------------------------------
   The approved examples show the missing pack as a note and a way out to the
   notice. The board also has to accept the documents once they are found, so
   the zone is the same surface with a dashed edge. */
/* Cyan at rest, not only once a file is over it: this is an invitation to do
   something, and a hairline grey dashed box reads as a disabled area. It is
   clickable as well as droppable, so it carries the pointer to say so. */
.c-drop{
  border:1px dashed var(--accent-edge); border-radius:var(--radius-large);
  padding:var(--space-6); text-align:center;
  font-size:var(--size-small); color:var(--accent-bright);
  cursor:pointer;
  transition:border-color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
/* Hover and drag-over are the same invitation, so they look the same. */
.c-drop:hover,
.c-drop.is-over{ border-color:var(--accent-bright); background:var(--accent-wash); color:var(--accent-bright) }

/* --- product tile --------------------------------------------------------- */
.c-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-4) }
.c-tile{
  background:var(--surface-1); border-radius:var(--radius-large); padding:var(--space-7);
  display:flex; flex-direction:column; gap:var(--space-4);
  transition:background var(--motion-base) var(--motion-ease);
}
.c-tile:hover{ background:var(--surface-2) }
.c-tile .pname{
  font-family:var(--font-identity); font-size:var(--size-title); font-weight:var(--weight-heavy);
  letter-spacing:.1em; text-transform:uppercase;
}
.c-tile .pdesc{ font-size:var(--size-body); color:var(--text-2); line-height:var(--line-body) }
/* Pinned to the bottom, so a row of tiles has one row of buttons across it
   rather than a ragged one that follows however long each description ran. */
.c-tile .pfoot{
  display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap; row-gap:var(--space-2);
  margin-top:auto; padding-top:var(--space-2);
}
.c-tile .pfoot .spacer{ flex:1 }

/* --- table ---------------------------------------------------------------- */
.c-table{ width:100%; border-collapse:separate; border-spacing:0 var(--space-1) }
.c-table th{
  font-size:var(--size-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); font-weight:var(--weight-heavy); text-align:left;
  padding:0 var(--space-5) var(--space-3);
}
/* Right aligned in both, but the figure face only where there is a figure. A
   column heading is a label. */
.c-table th.num,.c-table td.num{ text-align:right }
.c-table td.num{ font-family:var(--font-figure) }
/* And a cell in a figures column that has no figure in it. "Never" is a word. */
.c-table td.num.words{ font-family:var(--font-body) }
.c-table td{
  font-size:var(--size-body); padding:var(--space-4) var(--space-5); background:var(--surface-1);
  /* A pasted url in a deal title is one unbroken word, and one unbroken word
     is the only thing left that can make a box wider than its container. */
  overflow-wrap:anywhere;
}
.c-table tbody tr td:first-child{ border-radius:var(--radius-large) 0 0 var(--radius-large) }
.c-table tbody tr td:last-child{ border-radius:0 var(--radius-large) var(--radius-large) 0 }
.c-table tbody tr:hover td{ background:var(--surface-2) }
.c-table tr.total td{ background:var(--surface-2); font-weight:var(--weight-heavy) }

/* A quiet bar, so a row's size is seen before it is read. */
.c-bar{
  height:6px; border-radius:var(--radius-pill); background:var(--surface-3);
  overflow:hidden; min-width:90px;
}
.c-bar span{ display:block; height:100%; width:0; background:var(--accent); border-radius:var(--radius-pill) }
/* The width of a bar is its datum, and a screen may not carry CSS, so the
   component owns the scale and the screen picks the nearest step. */
.c-bar span.w0{ width:0% }
.c-bar span.w5{ width:5% }
.c-bar span.w10{ width:10% }
.c-bar span.w15{ width:15% }
.c-bar span.w20{ width:20% }
.c-bar span.w25{ width:25% }
.c-bar span.w30{ width:30% }
.c-bar span.w35{ width:35% }
.c-bar span.w40{ width:40% }
.c-bar span.w45{ width:45% }
.c-bar span.w50{ width:50% }
.c-bar span.w55{ width:55% }
.c-bar span.w60{ width:60% }
.c-bar span.w65{ width:65% }
.c-bar span.w70{ width:70% }
.c-bar span.w75{ width:75% }
.c-bar span.w80{ width:80% }
.c-bar span.w85{ width:85% }
.c-bar span.w90{ width:90% }
.c-bar span.w95{ width:95% }
.c-bar span.w100{ width:100% }

/* --- an active filter ----------------------------------------------------
   What you are looking at, and the way out of it. Cyan because a filter that
   is on is an active state, and nothing else on the screen is. */
.c-filterchip{
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--accent-wash); border:.5px solid var(--accent-edge);
  border-radius:var(--radius-pill); padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  font-size:var(--size-small); color:var(--accent-bright);
}
.c-filterchip__what{ font-weight:var(--weight-strong) }
.c-filterchip__clear{
  display:grid; place-items:center; width:22px; height:22px; flex:none;
  border:none; background:transparent; border-radius:var(--radius-pill);
  color:var(--accent-bright); font-size:15px; line-height:1; cursor:pointer;
}
.c-filterchip__clear:hover{ background:var(--accent-edge); color:var(--ink) }

/* A report row that leads somewhere says so. */
.c-table tbody tr.is-link{ cursor:pointer }
.c-table tbody tr.is-link:focus-visible td{ background:var(--surface-2); outline:none }

/* --- segmented control ---------------------------------------------------- */
.c-seg{ display:flex; gap:var(--space-2); flex-wrap:wrap; row-gap:var(--space-2) }
.c-seg button{
  font-family:inherit; font-size:var(--size-label); padding:var(--space-2) var(--space-5);
  border-radius:var(--radius-pill); border:.5px solid var(--hairline);
  background:transparent; color:var(--text-3); cursor:pointer;
  transition:border-color var(--motion-fast) var(--motion-ease),
             color var(--motion-fast) var(--motion-ease),
             background var(--motion-fast) var(--motion-ease);
}
.c-seg button:hover{ color:var(--text-1) }
.c-seg button[aria-current="true"]{
  background:var(--accent-wash); border-color:var(--accent-edge);
  color:var(--accent-bright); font-weight:var(--weight-strong);
}

/* --- a breadcrumb, set as data -------------------------------------------
   The face and the tracking only. It used to set a size as well, which meant a
   breadcrumb in a row of buttons came out a pixel short of the tags beside it. */
.c-tag--data{ font-family:var(--font-figure); letter-spacing:var(--track-identity) }

/* --- a row of controls above a list -------------------------------------- */
.c-toolrow{ display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; row-gap:var(--space-2) }
.c-toolrow .spacer{ flex:1 }

/* --- the month ------------------------------------------------------------

   Seven columns and the days of one month. It fills what the window gives it
   and never scrolls sideways: the columns are fractions, so a narrow window
   makes them narrower and nothing is ever pushed out of the frame.

   A day that holds more meetings than fit scrolls inside itself. The month
   stays a month. */
.c-month{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:var(--space-2);
  flex:1 1 auto;
  min-height:0;
}
.c-month__names{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--space-2);
  padding-bottom:var(--space-2);
  flex:none;
}
.c-month__name{
  font-size:var(--size-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--text-3);
  padding-left:var(--space-2);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* A day of this month. The ones either side of it are drawn as nothing, so the
   shape of the month reads at a glance. */
.c-month__day{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  gap:var(--space-2);
  padding:var(--space-2);
  border-radius:var(--radius-tight);
  background:var(--surface-1);
  border:.5px solid var(--hairline);
}
.c-month__day--outside{ background:none; border-color:transparent }

/* A day with something on it opens that day.

   Only that one. A day with nothing on it is not pressable, because there is
   nothing to open and a cell that depresses and then shows an empty list is a
   cell that lied about having something. */
.c-month__day--open{ cursor:pointer }
.c-month__day--open:hover{ border-color:var(--accent-edge) }
.c-month__day--open:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:1px }

.c-month__num{
  flex:none;
  align-self:flex-start;
  font-family:var(--font-figure);
  font-size:var(--size-small);
  color:var(--text-2);
  line-height:1;
  padding:var(--space-1) var(--space-2);
}
/* Today. The one circle on the screen. */
.c-month__num--today{
  background:var(--accent);
  color:var(--ink);
  border-radius:var(--radius-pill);
  min-width:24px;
  text-align:center;
  font-weight:var(--weight-strong);
}

/* What is on that day.

   It never scrolls and it never squeezes. A cell too short for everything on
   it shows what fits and counts the rest, which the screen works out from this
   box's own height; a scrollbar inside a day cell would be a second thing to
   scroll on a page that already scrolls, and shrinking the chips cut every one
   of them through the middle. */
.c-month__chips{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}

/* How many more there are. Not a control: the whole cell already opens the
   day, and a button inside a button is two things to press for one outcome. */
.c-month__more{
  flex:none;
  padding:var(--space-1) var(--space-2);
  font-size:var(--size-label);
  line-height:var(--line-tight);
  color:var(--text-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* A meeting. Quiet by default; in the accent when it is with a company, which
   is the only distinction this screen makes. */
.c-month__chip{
  display:block;
  /* Never shrinks. As a flex item it would, and six meetings on one day
     squeezed every chip from twenty two pixels to nine. */
  flex:none;
  width:100%;
  text-align:left;
  min-width:0;
  border:none;
  border-left:2px solid var(--text-3);
  background:var(--surface-2);
  color:var(--text-2);
  border-radius:var(--radius-tight);
  padding:var(--space-1) var(--space-2);
  font-size:var(--size-label);
  line-height:var(--line-tight);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.c-month__chip:hover{ background:var(--surface-3); color:var(--text-1) }
.c-month__chip:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:1px }
.c-month__chip--customer{
  border-left-color:var(--accent);
  background:var(--accent-wash);
  color:var(--accent-bright);
}
.c-month__chip--customer:hover{ background:var(--accent-wash); color:var(--accent-bright) }
.c-month__chip .at{ font-family:var(--font-figure); color:var(--text-3); margin-right:var(--space-2) }
.c-month__chip--customer .at{ color:var(--accent) }

/* Back and forward a month. The same round control as the back arrow on a
   record, because it is the same gesture. */
.c-step{
  flex:none;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:var(--radius-pill);
  border:.5px solid var(--hairline);
  background:var(--surface-1);
  color:var(--text-2);
  font-size:18px; line-height:1;
  transition:border-color var(--motion-fast) var(--motion-ease);
}
.c-step:hover{ border-color:var(--accent-edge); color:var(--text-1) }

/* --- a meeting waiting to be placed ---------------------------------------

   More than a list row holds: what the meeting was, when it was, the raw
   addresses off it, what I make of them, and what you can do about it. So it is
   its own thing rather than a c-item bent into a shape it was not built for.

   The addresses are in the figure face and are never tidied. Somebody is
   deciding who a meeting was with by looking at them, and a shortened or
   prettified address is one they cannot decide on. */
.c-waiting{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-2) var(--space-6);
  align-items:start;
  padding:var(--space-5) var(--space-6);
  background:var(--surface-1);
  border:.5px solid var(--hairline);
  border-radius:var(--radius-panel);
}
.c-waiting__what{
  grid-column:1; min-width:0;
  font-size:var(--size-heading);
  font-weight:var(--weight-strong);
  overflow-wrap:anywhere;
}
.c-waiting__when{
  grid-column:1; min-width:0;
  font-size:var(--size-small); color:var(--text-2);
}
.c-waiting__who{
  grid-column:1; min-width:0;
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  font-family:var(--font-figure);
  font-size:var(--size-small);
  color:var(--text-2);
}
.c-waiting__who span{ overflow-wrap:anywhere }

/* What I make of it. The company name in the accent when there is one, and the
   plain truth when there is not. */
.c-waiting__guess{
  grid-column:1; min-width:0;
  margin-top:var(--space-2);
  font-size:var(--size-heading);
  color:var(--accent-bright);
  overflow-wrap:anywhere;
}
.c-waiting__guess--none{ color:var(--text-1) }
.c-waiting__said{
  grid-column:1; min-width:0;
  font-size:var(--size-small); color:var(--text-3);
}

/* What filing will leave alone. Quieter than the reason above it, because it
   is a consequence rather than the answer, and it is only ever there when
   there is one. */
.c-waiting__kept{
  grid-column:1; min-width:0;
  font-size:var(--size-small); color:var(--text-3);
  overflow-wrap:anywhere;
}

/* The buttons, against the right and top aligned with the title.

   Every row of the card, however many there are. It used to be a fixed five,
   and the sixth row that appears on a meeting somebody turned up to on a
   personal address pushed the buttons half out of the card. */
.c-waiting__do{
  grid-column:2; grid-row:1 / -1;
  display:flex; gap:var(--space-2); flex-wrap:wrap;
  justify-content:flex-end;
}

/* Searching for the company, revealed in the row itself rather than over it.
   What you are choosing a company for is the meeting you are looking at, and a
   dialog in front of it takes that away. */
.c-waiting__find{
  grid-column:1 / -1;
  display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center;
  margin-top:var(--space-3);
}

/* What the search said, next to the button that was pressed.

   It has its own line, so a long company name does not push the buttons
   around, and it is empty until there is something to say. */
.c-waiting__trouble{
  flex:1 0 100%;
  min-width:0;
  font-size:var(--size-small);
  color:var(--danger);
  overflow-wrap:anywhere;
}
.c-waiting__trouble:empty{ display:none }
.c-waiting__find .c-input{ flex:1 1 260px; min-width:0; max-width:420px }

@media (max-width:760px){
  .c-waiting{ grid-template-columns:minmax(0,1fr) }
  .c-waiting__do{ grid-column:1; grid-row:auto; justify-content:flex-start;
                  margin-top:var(--space-3) }
}

/* --- one of these ---------------------------------------------------------

   A radio, for a set where exactly one is chosen: which domain is the main one,
   and anything else that is the same shape.

   The design system had no answer for this, which is why it is being written
   down rather than worked around. A row with a button on it reading a word that
   means "make this one the chosen one" needs the word explained, and a control
   that needs explaining is the wrong control. A radio needs no word at all. */
.c-choice{
  flex:none;
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; margin:0;
  border-radius:var(--radius-pill);
  border:1px solid var(--text-3);
  background:transparent;
  cursor:pointer;
  transition:border-color var(--motion-fast) var(--motion-ease);
}
.c-choice:hover{ border-color:var(--accent-edge) }
.c-choice:checked{
  border-color:var(--accent);
  /* The dot, drawn with the border rather than a pseudo element, so it is one
     box and cannot drift out of the ring at any zoom. */
  border-width:5px;
}
.c-choice:focus-visible{ outline:2px solid var(--accent-edge); outline-offset:2px }

/* --- a table too wide for the page ----------------------------------------

   NO HORIZONTAL SCROLL, ANYWHERE, EVER means the page. It cannot mean that a
   table of eleven columns is forbidden, because the year has eleven things
   worth knowing about a company in it and dropping some of them is answering a
   layout problem by losing data.

   So the table scrolls inside its own box and the page never does. The box is
   the full width of what holds it and nothing sticks out of it, which is what
   the rule is protecting: a page that shifts sideways when you touch it.

   The design system had no answer for this. It has one now, written down, so
   the next wide table does not get solved again differently. */
.c-scroller{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  /* Room for the scrollbar, so the last row is not sitting under it. */
  padding-bottom:var(--space-2);
}
.c-scroller > .c-table{ min-width:max-content }

/* A button whose shape is its word.

   For the one or two controls where a word would have to be invented: the
   microphone beside a box you can speak into, and anything else that every
   phone and every browser already draws as a shape. Square, so the icon sits in
   the middle of it rather than in the middle of a pill built for text, and the
   word lives on the aria-label where a screen reader looks for it. */
.c-btn--icon{
  padding:0;
  width:36px; height:36px;
  display:grid; place-items:center;
  flex:none;
}
.c-btn--icon svg{ width:18px; height:18px }