/* ============================================================================
   BB84 v2 — TEMPLATES
   Four page shapes. A template decides where regions sit and how wide they
   run. It never styles what is inside them: that is a component's job.

     t-board     full width, columns that scroll sideways   (pipelines)
     t-list      a centred column of repeated items         (menus, indexes)
     t-settings  a rail beside a pane                       (configuration)
     t-record    one subject, detail beside supporting      (a single thing)

   The measure applies to text and forms. It never applies to a board.
   ========================================================================= */

/* --- shared page frame --------------------------------------------------- */
.t-page{ display:flex; flex-direction:column; min-height:100vh }
.t-page__header{ flex:none }
/* A screen with no rail centres its content, so its heading is held to the
   same column. Otherwise the title and the thing it names read as two
   unrelated pieces of furniture. */
.t-page__header--measured .c-heading{ max-width:var(--measure-wide); margin:0 auto; width:100% }
.t-page__main{ flex:1 1 auto; min-height:0 }
/* A region that holds its content in the middle of what is left of the window
   rather than at the top of it. */
.t-page__main--centre{ display:flex; flex-direction:column }
.t-page__main--centre > *{ flex:1 1 auto }

/* --- board --------------------------------------------------------------- */
.t-board__columns{
  display:grid;
  grid-auto-flow:column;
  /* The columns share whatever width there is, and there is no floor.

     A floor of 300px meant seven columns needed 2220px and overflowed every
     window in the building, 1920 included. A board that runs off the side of
     the screen is a defect, not a trade, so the fix is upstream of this: both
     boards draw the five stages they already count, which at 1280 is a 237px
     column and a 211px card. minmax(0,1fr) means a sixth stage would make the
     columns narrower rather than make the board scroll. */
  grid-auto-columns:minmax(0,1fr);
  /* And it cannot, whatever anybody does to the stage list later. */
  overflow-x:hidden;
  gap:var(--space-3);
  padding:var(--space-5) var(--space-6) var(--space-8);
  align-items:start;
}

/* A board that is held to the window instead of growing the page. The region
   takes the height that is left, the columns fill it, and each column body
   scrolls on its own so one long column never drags the others past the fold. */
.t-page--fixed{ height:100vh; overflow:hidden }
.t-page__main--fill{ display:flex; flex-direction:column }
.t-board__columns--contained{
  flex:1 1 auto; min-height:0;
  align-items:stretch;
  padding-bottom:var(--space-5);
}
.t-board__columns--contained > *{ min-height:0 }
.t-board__columns--contained .c-column__body{
  overflow-y:auto; flex:1 1 auto; min-height:0;
  /* The gutter is reserved on every column, scrolling or not, so a scrollbar
     appearing never narrows the cards or shifts the column beside it. */
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--surface-3) transparent;
}

/* --- list ----------------------------------------------------------------
   A centred column of repeated items. The menu variant is the same shape
   held in the middle of the window with its items laid out across rather
   than down: still a list, still one region, not a fifth page shape. */
.t-list{
  max-width:var(--measure-form);
  margin:0 auto;
  padding:var(--space-9) var(--space-6) var(--space-10);
}
.t-list__intro{ margin-bottom:var(--space-8) }
.t-list__items{ display:flex; flex-direction:column; gap:var(--space-3) }

.t-list--menu{
  display:flex; flex-direction:column; justify-content:center;
  gap:var(--space-8);
  width:100%;
  max-width:var(--measure-page);
  padding:var(--space-8) var(--space-6);
}
.t-list--menu .t-list__intro{ margin-bottom:0 }
/* As many columns as there are tiles, up to four.

   Fixed at three, the Review tile dropped onto a second row and sat there on
   its own beside two tile widths of nothing. The tiles are the areas of the
   CRM and there are three or four of them depending on whether anything is
   waiting, so the row is as wide as what is in it. */
.t-list--menu .t-list__items{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-4);
  align-items:stretch;
}

@media (max-width:820px){
  .t-list--menu .t-list__items{ grid-template-columns:minmax(0,1fr) }
}

/* A list of sections rather than of rows: wider, further apart, and the one
   scrolling surface when the page is held to the window. */
.t-list--wide{ max-width:var(--measure-wide) }
.t-list--sections .t-list__items{ gap:var(--space-9) }
.t-list--scroll{ width:100%; flex:1 1 auto; min-height:0; overflow-y:auto }

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

   One month, filling the window. The page does not scroll: a month you have to
   scroll to see is not a month, it is a list. The weekday names are fixed above
   the grid and the grid takes what is left.

   The width is the wide measure and no more, so on a large screen the month
   sits with the same margins every other screen has rather than stretching to
   the glass. */
.t-month{
  display:flex; flex-direction:column;
  width:100%; max-width:var(--measure-wide);
  margin:0 auto;
  padding:0 var(--space-5) var(--space-5);
  flex:1 1 auto; min-height:0;
}

/* Signing in is the narrowest case of the list shape: one centred column with
   the mark above it and nothing else on the page. */
.t-signin{
  display:grid; gap:var(--space-6); align-content:center; justify-items:stretch;
  width:100%; max-width:360px; margin:0 auto; padding:var(--space-8) var(--space-6);
}

/* --- settings ------------------------------------------------------------ */
.t-settings{ display:flex; gap:var(--space-4); padding:0 var(--space-5) var(--space-5); flex:1 1 auto; min-height:0 }
/* The group name is the heading, and it is read as one.

   It was the small caps a section label uses everywhere else: eleven points,
   heaviest weight, thirty eight per cent. The items under it were sixteen
   points and strong. So the three words that organise the whole list were the
   faintest thing on it and fifteen items shouted over them. The list read
   upside down.

   A heading is at least as large as what it organises. This is the same size
   as the items were, in full colour, in the words it is written in rather than
   shouted, and the items have come down to meet it. */
.t-settings__group{
  padding:var(--space-8) var(--space-5) var(--space-3);
  font-size:var(--size-heading);
  font-weight:var(--weight-heavy);
  color:var(--text-1);
  line-height:var(--line-tight);
}
/* Clear space above each group, so the eye sees three blocks rather than one
   list of fifteen. The first needs none: the screen's own heading is above it. */
.t-settings__group:first-child{ padding-top:var(--space-2) }

.t-settings__rail{
  flex:none; width:280px; padding:0 var(--space-2) var(--space-6) 0;
  overflow-y:auto; display:grid; gap:0; align-content:start;
}

/* --- the settings rail does not scroll on its own -------------------------

   Fifteen fixed items inside a page that scrolls does not need a scrollbar of
   its own, and having one put a bar down the side of the rail next to the bar
   down the side of the pane. Two scrollbars, neither of them the page's.

   Only on Settings. The Files screen uses this same rail for its folders,
   there can be any number of those, and a folder list is a thing that really
   does scroll. */
.t-settings--panels{ min-height:0 }
.t-settings--panels .t-settings__rail{ overflow-y:visible }
.t-settings--panels .t-settings__pane{ overflow-y:visible }

/* The items, quieter than the heading above them. Smaller, lighter and a step
   back in colour, which is the whole of what was the wrong way round. */
.t-settings--panels .c-railitem{ padding:var(--space-3) var(--space-5); color:var(--text-2) }
.t-settings--panels .c-railitem .a{
  font-size:var(--size-body); font-weight:var(--weight-regular);
}
/* The one you are on, and nothing else on the rail, is highlighted. */
.t-settings--panels .c-railitem[aria-current="page"]{
  background:var(--surface-2); color:var(--text-1);
}
.t-settings--panels .c-railitem[aria-current="page"] .a{ font-weight:var(--weight-medium) }
/* The pane is the one scrolling surface on a settings screen. */
.t-settings__pane{
  flex:1 1 auto; min-width:0; min-height:0; overflow-y:auto;
  padding:0 var(--space-7) var(--space-10);
}
.t-settings__pane > .inner{ max-width:900px; display:grid; gap:var(--space-9) }
/* A Settings panel is one element holding its sections, so the gap above has
   nothing to act on. It is set again inside, or every section sits flush
   against the next and the pinned Save crowds the last row.

   Only on Settings. Files uses this same rail and pane for its folders, and a
   grid with a gap is not what a folder full of documents wants. */
.t-settings--panels .t-settings__pane > .inner > div{
  display:grid; gap:var(--space-9); align-content:start;
}

/* --- record ---------------------------------------------------------------
   A record is a place you work, not a dialog. It takes the whole window, has
   one scrolling surface, and is laid out for reading. */
.t-record{
  position:fixed; inset:0; z-index:30;
  background:var(--ink);
  display:none; flex-direction:column;
}
.t-record.is-open{ display:flex }

.t-record > .head{
  flex:none;
  display:flex; align-items:flex-start; gap:var(--space-6);
  padding:var(--space-6) var(--space-8) var(--space-4);
  border-bottom:.5px solid var(--hairline);
}
.t-record > .head > .actions{
  display:flex; align-items:center; gap:var(--space-3); flex:none;
  flex-wrap:wrap; row-gap:var(--space-2);
}

.t-record > .facts{
  flex:none;
  display:flex; gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-3);
  padding:var(--space-6) var(--space-8) 0;
}

/* The next action, on its own line under the facts. A label, what has to happen,
   and when: a sentence, not a figure, so it gets a line rather than a meter. */
.t-nextaction{
  flex:none; display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) var(--space-8) 0;
}
.t-nextaction__label{
  flex:none; font-size:var(--size-micro); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-3); font-weight:var(--weight-heavy);
}
/* The word between the action and the date it is due by. The date field had
   nothing on it, and a browser's own dd/mm/yyyy is not a label. */
.t-nextaction__by{ flex:none; font-size:var(--size-small); color:var(--text-2) }
.t-nextaction input[type="text"]{ flex:1 1 auto; min-width:0 }
.t-nextaction input[type="date"]{ flex:none; width:190px }
.t-nextaction.is-late .t-nextaction__label{ color:var(--danger) }
.t-nextaction.is-late input[type="date"]{ border-color:rgba(224,112,122,.5) }

@media (max-width:900px){
  .t-nextaction{ flex-wrap:wrap }
  .t-nextaction input[type="date"]{ width:100% }
}

/* --- what a screen says back to you ---------------------------------------
 *
 * Every record is built head, then the scrolling area, then a message box, and
 * the message box is where "Saving", "Could not save that" and every other
 * word a screen says back to you ends up. Being last in a flex column that
 * fills the window put it at the very bottom edge, measured at y 848 in a 900
 * pixel window, 160 pixels below the last field and nowhere near the button
 * that caused it. On a shorter window it was off the screen altogether. So a
 * form could refuse to save and look, from where anybody was actually looking,
 * as though the button did nothing.
 *
 * One line moves all of them. The scrolling area is put after the message in
 * the flex order, so the message lands directly under the head, in the same
 * place on every record, in the eyeline of the button that caused it. Nothing
 * in any screen's code changes.
 */
/* With nothing to say it takes no room at all, so a record with no message
   looks exactly as it did. */
.t-record > .c-empty:empty{ display:none }

.t-record > .c-empty{
  flex:none;
  text-align:left;
  padding:var(--space-3) var(--space-8);
  font-size:var(--size-body);
  color:var(--text-1);
  background:var(--surface-1);
  border-bottom:.5px solid var(--hairline);
}

/* On a page the message sits at the end of the content rather than after it,
   so it scrolls with everything else and can be scrolled past. Pinned to the
   top of what is scrolling, it stays in front of whoever is reading. */
.t-page .c-empty:empty{ display:none }
.t-page .t-list__items > .c-empty{
  position:sticky; top:0; z-index:2;
  text-align:left;
  padding:var(--space-3) var(--space-5);
  font-size:var(--size-body);
  color:var(--text-1);
  background:var(--surface-1);
  border-radius:var(--radius-large);
}

/* The one scrolling surface on the screen. Ordered after the message box, for
   the reason given above. */
.t-record > .scroll{
  order:1;
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:var(--space-8) var(--space-8) var(--space-10);
}
.t-record .grid{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:var(--space-10);
  max-width:1680px; margin:0 auto; align-items:start;
}
.t-record .grid > .col{ display:grid; gap:var(--space-9); align-content:start; min-width:0 }

/* The scrolling surface can hold more than the two columns. Anything below them
   stands off by the same distance the columns stand apart, so a full width
   section does not run into the bottom of the column above it. */
.t-record > .scroll > * + *{ margin-top:var(--space-10) }

@media (max-width:1180px){
  .t-record .grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-8) }
  .t-record .titles h2{ font-size:24px }
}

@media (max-width:900px){
  .t-settings{ flex-direction:column }
  .t-settings__rail{ width:auto }
}