/* ============================================================================
   BB84 VAULT / TEMPLATES
   The page shapes, taken from the CRM. 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-list      a centred column of repeated items        (Search, Audit)
     t-settings  a rail beside a pane                      (Admin)
     t-record    one subject, detail beside supporting     (a secret)

   The measure applies to text and forms.
   ========================================================================= */

/* --- shared page frame --------------------------------------------------- */
.t-page{ display:flex; flex-direction:column; min-height:100vh; min-width:0 }
.t-page__header{ flex:none; min-width:0 }
.t-page__header--measured .c-heading{ max-width:var(--measure-wide); margin:0 auto; width:100% }
/* A screen whose list runs at the form measure holds its heading to the same
   column, so the title and the list share a left edge. */
.t-page__header--form .c-heading{ max-width:var(--measure-form) }
.t-page__main{ flex:1 1 auto; min-height:0; min-width:0 }

/* --- list ---------------------------------------------------------------- */
.t-list{
  width:100%;
  max-width:var(--measure-form);
  margin:0 auto;
  padding:var(--space-3) var(--space-6) var(--space-10);
  min-width:0;
}
.t-list--wide{ max-width:var(--measure-wide) }
.t-list__tools{ display:grid; gap:var(--space-4); margin-bottom:var(--space-5); min-width:0 }
.t-list__items{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0 }
.t-list__foot{ display:flex; justify-content:center; padding-top:var(--space-6) }

/* The search screen keeps its field in reach while the list scrolls under it.
   Not on a phone, where the field and its groups would cover half the list. */
@media (min-width:721px){ .t-list--search .t-list__tools{
  position:sticky; top:0; z-index:5;
  background:var(--ink);
  padding:var(--space-4) 0 var(--space-3);
  margin-bottom:var(--space-3);
} }

@media (max-width:600px){
  .t-list{ padding:var(--space-2) var(--space-4) var(--space-9) }
}

/* --- settings ------------------------------------------------------------ */
.t-settings{
  display:flex; gap:var(--space-4);
  width:100%; max-width:var(--measure-wide); margin:0 auto;
  padding:var(--space-3) var(--space-6) var(--space-9);
  min-width:0;
}
.t-settings__rail{
  flex:none; width:240px; padding:0 var(--space-2) 0 0;
  display:grid; gap:var(--space-1); align-content:start;
  position:sticky; top:var(--space-4); align-self:flex-start;
}
.t-settings__pane{ flex:1 1 auto; min-width:0; padding:0 var(--space-4) }
.t-settings__pane > .inner{ max-width:900px; display:grid; gap:var(--space-8); min-width:0 }

@media (max-width:900px){
  .t-settings{ flex-direction:column; padding:var(--space-2) var(--space-4) var(--space-9) }
  .t-settings__rail{
    width:auto; position:static; padding:0;
    grid-template-columns:repeat(auto-fit,minmax(0,1fr));
    grid-auto-flow:column;
  }
  /* Across the top on a narrow screen, so the names alone: what each one is
     for is already the heading of the panel it opens. */
  .t-settings__rail .c-railitem{ text-align:center; padding:var(--space-3) var(--space-2) }
  .t-settings__rail .c-railitem .b{ display:none }
  .t-settings__pane{ padding:0 }
}

/* --- record ---------------------------------------------------------------
   A secret has a page of its own rather than a window over the list, so it
   has an address and the back button works. Otherwise it is the CRM's record:
   a head, the facts, and two columns, detail beside supporting. */
.t-record{ display:flex; flex-direction:column; min-width:0 }
.t-record > .head{
  display:flex; align-items:flex-start; gap:var(--space-5);
  flex-wrap:wrap; row-gap:var(--space-4);
  width:100%; max-width:var(--measure-wide); margin:0 auto;
  padding:var(--space-5) var(--space-6) var(--space-4);
  min-width:0;
}
.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{
  display:flex; gap:var(--space-3); flex-wrap:wrap; row-gap:var(--space-3);
  width:100%; max-width:var(--measure-wide); margin:0 auto;
  padding:0 var(--space-6);
  min-width:0;
}
.t-record > .say{ width:100%; max-width:var(--measure-wide); margin:0 auto; padding:var(--space-4) var(--space-6) 0 }
.t-record > .say:empty{ display:none }
.t-record > .scroll{
  width:100%; max-width:var(--measure-wide); margin:0 auto;
  padding:var(--space-8) var(--space-6) var(--space-10);
  min-width:0;
}
.t-record .grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:var(--space-9);
  align-items:start;
}
.t-record .grid > .col{ display:grid; gap:var(--space-8); align-content:start; min-width:0 }

@media (max-width:1000px){
  .t-record .grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-8) }
}
@media (max-width:600px){
  .t-record > .head{ padding:var(--space-4) var(--space-4) var(--space-3); gap:var(--space-3) }
  .t-record > .head > .actions{ width:100% }
  .t-record > .facts,.t-record > .say{ padding-left:var(--space-4); padding-right:var(--space-4) }
  .t-record > .scroll{ padding:var(--space-7) var(--space-4) var(--space-9) }
}