/* Screen-specific layout that does not generalise into a component. */

/* ---- Login ------------------------------------------------------------- */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s-6);
  background: var(--surface-2);
}
.login-card {
  width: min(400px, 100%);
  padding: var(--s-8);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-3);
  animation: rise var(--d-slow) var(--ease);
}
.login-card .brand { justify-content: center; padding-bottom: var(--s-6); }

/* ---- Dashboard: one instrument strip, not four cards ------------------- */
/* The doors sit directly above this and the two were touching. A strip that abuts the
   block above it reads as part of it, and these are separate answers to separate
   questions. */
.stat-strip {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.stat {
  padding: var(--s-4) var(--s-5);
  border-left: 1px solid var(--hairline);
  min-width: 0;
}
.stat:first-child { border-left: 0; }
.stat-label { font-size: var(--t-12); color: var(--ink-3); }
.stat-value {
  font-size: var(--t-28);
  font-weight: var(--w-semibold);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-top: var(--s-1);
}
.stat-meta { font-size: var(--t-11); color: var(--ink-3); margin-top: 2px; }
@media (max-width: 860px) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 460px) {
  .stat-strip { grid-template-columns: minmax(0, 1fr); }
  .stat { border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--hairline); }
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-5);
  align-items: start;
}
.dash-wide { grid-column: 1 / -1; }

.account-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--hairline);
}
.account-row:last-child { border-bottom: 0; }
.account-row .bar { grid-column: 1 / -1; margin-top: var(--s-1); }

.activity { display: flex; flex-direction: column; }
/* These rows are anchors. Without colour and decoration of their own they took
   the global link styling: accent-coloured text, and a hover that underlined the
   whole row including the badge and the timestamp. They are rows, so they get a
   row's hover instead, and an inset ring because they run to the panel edge. */
.activity-item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-13);
  color: inherit;
  transition: background var(--d-fast) var(--ease);
}
.activity-item:hover { background: var(--surface-hover); text-decoration: none; }
.activity-item:focus-visible { outline-offset: -2px; }
.activity-item:last-child { border-bottom: 0; }
.activity-time { margin-left: auto; color: var(--ink-3); font-size: var(--t-11); white-space: nowrap; }

/* ---- Contacts / lists ---------------------------------------------------- */
.contacts-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 900px) { .contacts-layout { grid-template-columns: minmax(0, 1fr); } }
.list-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 7px var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-13);
  color: var(--ink-2);
  text-align: left;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
/* The row a list shares with its delete button. .list-item is width:100% because it
   is normally the only thing on its row; beside a sibling that overflows the panel,
   so it flexes instead and truncation gets a min-width:0 to work against. */
.list-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.list-row .list-item { width: auto; flex: 1 1 auto; min-width: 0; }
.list-item:hover { background: var(--surface-hover); color: var(--ink); }
.list-item[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: var(--w-semibold); }
.attrs { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.attr {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-2);
}

.dropzone {
  display: grid;
  place-items: center;
  gap: var(--s-2);
  padding: var(--s-10) var(--s-5);
  border: 1.5px dashed var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.dropzone[data-over="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* ---- Send: the account and the message, side by side --------------------- */
/* Two things have to be true before the button: who it comes from, and what it
   says. Stacked, the settings were the whole first screen and the message — the
   thing this panel exists for — began below the fold, inside a 1180px column
   with a third of the window empty either side of it. Side by side they are one
   screen, and the width that was going to the gutters pays for it.
   The wider cap is scoped to this screen; the shell's 1180 still governs the
   rest. auto-fit rather than a breakpoint because the sidebar can be railed
   away, and a viewport query cannot see that: 520px is two field columns plus
   the panel's own padding, so the split appears exactly when a column can hold
   the form it carries. */
.view-inner.send-page { max-width: 1480px; }
.send-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: var(--s-5);
  align-items: start;
}
/* The preview stays on screen for the whole scroll: you write at the bottom of a
   long column and the thing you are judging is still beside you. align-self:start
   is what makes it travel — the sticky containing block is the grid AREA, which is
   the full row height, while the item itself stays its own height. Stretched, it
   would fill the area and have nowhere to move. */
.send-preview {
  position: sticky;
  top: var(--s-4);
  align-self: start;
}
/* One column: it is directly above the editor now, so pinning it would park a
   640px frame over the thing being typed into. */
@media (max-width: 1060px) {
  .send-preview { position: static; }
}

/* ---- Templates ----------------------------------------------------------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--s-4); }
.tpl-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.tpl-card:hover { box-shadow: var(--shadow-2); border-color: var(--hairline-strong); }
/* No .tpl-thumb: the card carried a live iframe per template that rendered a
   placeholder and cost half a megabyte. See the comment in screens/templates.js. */
.tpl-meta { padding: var(--s-4); }