/* Sign-ins: three figures, the browsers signed in now, and the history of sign-ins.
   Planes, the key-value list, buttons and the outcome chip are shared: see components.css. */

.signins {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--rail-wide) + var(--float));
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--s4);
  height: 100%;
  padding: var(--s5) var(--gutter);
}
.si-figures-plane {
  grid-column: 1 / -1;
}
.si-history {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  align-self: start;
  max-height: 100%;
}
.si-now-lift {
  align-self: start;
}

/* ---------------------------------------------------------------- figures */
.si-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* The number, then what it counts over a line of plain words. */
.si-figure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num label" "num note";
  align-content: center;
  column-gap: var(--s4);
  row-gap: var(--s1);
  padding: var(--s1) var(--s4) var(--s1) var(--s5);
  border-left: var(--hair) solid var(--line);
}
.si-figure:first-child {
  padding-left: 0;
  border-left: 0;
}
.si-figure-num {
  grid-area: num;
  align-self: center;
  min-width: 1ch;
  font: 300 var(--t-hero) / 1 var(--f-mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.si-figure-label {
  grid-area: label;
  align-self: end;
  font: 500 var(--t-ui) / 1.2 var(--f-display);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.si-figure-note {
  grid-area: note;
  align-self: start;
  font: 400 var(--t-mini) / 1.3 var(--f-mono);
  color: var(--ink-3);
}
/* Refused in the last day: gold, because it wants looking at. */
.si-figure.is-warm .si-figure-num,
.si-figure.is-warm .si-figure-note {
  color: var(--gold);
}
.si-stale {
  color: var(--gold);
}

/* ---------------------------------------------------------------- signed in now */
.si-sessions {
  display: grid;
}
.si-session {
  padding: var(--s3) 0 var(--s2);
  border-top: var(--hair) solid var(--line);
}
.si-session:first-child {
  padding-top: 0;
  border-top: 0;
}
.si-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 40px;
}
.si-session-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  min-width: 0;
}
.si-device {
  min-width: 0;
  overflow-wrap: anywhere;
  font: 500 var(--t-ui) / 1.3 var(--f-display);
  letter-spacing: 0.02em;
  color: var(--ink);
}
/* Which of them is the one in hand. Cool, not gold: it is a fact, not something to attend to. */
.si-this {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 6px;
  border: var(--hair) solid var(--line-2);
  background: var(--cyan-fill);
  color: var(--cyan);
  font: 500 var(--t-micro) / 1 var(--f-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.si-session-head .btn {
  flex: none;
}
.si-facts {
  margin-top: var(--s2);
}
.si-facts .kv-row:first-child {
  border-top: 0;
}
.si-facts .kv-row {
  min-height: 28px;
}
.si-facts .kv-row dd {
  font-size: var(--t-mini);
}
/* The rule above it runs the plane's width; the sentence itself keeps to a readable measure. */
.si-note {
  padding-top: var(--s3);
  padding-right: max(0px, calc(100% - 52ch));
  border-top: var(--hair) solid var(--line);
}
.si-none {
  padding: var(--s3) 0;
}

/* ---------------------------------------------------------------- history */
.si-scroll:focus-visible {
  outline-offset: -2px;
}
.si-event {
  position: relative;
  display: grid;
  grid-template-columns: 124px 84px minmax(0, 1.5fr) minmax(0, 1fr) 76px;
  align-items: center;
  column-gap: var(--s3);
  min-height: 38px;
  border-bottom: var(--hair) solid var(--line);
  font-size: var(--t-small);
}
.si-when,
.si-addr {
  font: 400 var(--t-mini) / 1 var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}
.si-where {
  /* Room for the descenders ("Lock page"), which a tight line would clip. */
  font: 500 var(--t-small) / 1.3 var(--f-display);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: nowrap;
}
.si-who {
  color: var(--ink);
}
.si-who,
.si-addr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-out {
  display: flex;
  justify-content: flex-end;
}
/* A refused attempt carries the same gold mark as a refused call in the activity feed. */
.si-event.is-refused::before {
  content: "";
  position: absolute;
  left: calc(var(--s4) * -1);
  top: 9px;
  bottom: 9px;
  width: var(--bold);
  background: var(--gold);
}
/* A long history costs nothing off screen: its rows are only laid out and painted when they are near it. */
.si-events.is-long .si-event {
  content-visibility: auto;
  contain-intrinsic-size: auto 38px;
}
.si-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) 0 0;
}
.si-more-text {
  font: 400 var(--t-mini) / 1.3 var(--f-mono);
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- medium */
@media (max-width: 1240px) and (min-width: 1041px) {
  .signins {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .si-event {
    grid-template-columns: 116px 78px minmax(0, 1.4fr) minmax(0, 1fr) 72px;
    column-gap: var(--s2);
  }
}

/* ---------------------------------------------------------------- stacked: figures, who is signed in, then the history */
@media (max-width: 1040px) {
  .signins {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: var(--s4) var(--gutter) var(--s5);
  }
  .si-now-lift {
    order: 2;
    align-self: stretch;
  }
  .si-history {
    order: 3;
    align-self: stretch;
    max-height: none;
  }
  /* Two browsers abreast where there is room for them. Each then keeps its rule, the first ones too. */
  .si-sessions {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    column-gap: var(--s5);
  }
  .si-session,
  .si-session:first-child {
    padding: var(--s3) 0 var(--s2);
    border-top: var(--hair) solid var(--line);
  }
  /* The number over its words: three abreast leaves no room for them side by side. */
  .si-figure {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "num" "label" "note";
    padding-left: var(--s4);
  }
  .si-figure-num {
    margin-bottom: var(--s1);
  }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 760px) {
  /* One figure to a line: a count of any length fits, and its words sit beside it. */
  .si-figures {
    grid-template-columns: minmax(0, 1fr);
  }
  .si-figure,
  .si-figure:first-child {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "num label" "num note";
    min-height: 56px;
    padding: var(--s2) 0;
    border-left: 0;
    border-top: var(--hair) solid var(--line);
  }
  .si-figure:first-child {
    border-top: 0;
  }
  /* Wide enough for three digits, so the words beside the three figures start on one line. */
  .si-figure-num {
    min-width: 3ch;
    margin-bottom: 0;
    font-size: var(--t-num);
  }
  .si-session:first-child {
    padding-top: 0;
    border-top: 0;
  }
  /* A row is two lines: who it was and whether it was refused, then when, where and from what address. */
  .si-event {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "who who who out" "when where addr addr";
    align-content: center;
    row-gap: var(--s1);
    min-height: 54px;
    padding: var(--s2) 0;
  }
  .si-who {
    grid-area: who;
    font-size: var(--t-ui);
  }
  .si-out {
    grid-area: out;
  }
  .si-when {
    grid-area: when;
  }
  .si-where {
    grid-area: where;
    font: 400 var(--t-mini) / 1 var(--f-mono);
    letter-spacing: 0;
    color: var(--ink-3);
  }
  .si-addr {
    grid-area: addr;
  }
  .si-event.is-refused::before {
    top: 12px;
    bottom: 12px;
  }
  .si-events.is-long .si-event {
    contain-intrinsic-size: auto 54px;
  }
  .si-more {
    flex-wrap: wrap;
  }
}