/* screens.css
   Layout for the slice 1a screens: not found, sign in, code, account, knowledge review and activity.
   Parts shared between screens live in components.css. */

/* ---------- Page heads and the brand panel ---------- */

.page-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s-5); }
.page-head p { color: var(--muted); max-width: 40em; }

/* The website's hero, at application size: a rounded brand panel on the plain page with one tonal circle. */
.brand-panel {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--brand); color: var(--on-brand);
  border-radius: var(--r-panel-lg); padding: clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; gap: 14px;
}
.brand-panel::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 460px; height: 460px; right: -170px; bottom: -260px; border-radius: 50%; background: var(--brand-shape);
}
.brand-panel p { color: var(--on-brand-muted); max-width: 30em; }
.brand-panel a { color: var(--on-brand); }
.brand-panel--compact { border-radius: var(--r-panel); padding: 22px 24px; gap: 8px; }
.brand-panel--compact::before { width: 260px; height: 260px; right: -110px; bottom: -170px; }
.brand-panel .h1 { color: var(--on-brand); }

/* ---------- Not found: unbranded ---------- */

.not-found { min-height: 100dvh; display: grid; place-content: center; gap: 20px; padding: 48px 24px; max-width: 34em; margin-inline: auto; }

/* ---------- Sign in and code ---------- */

.signin { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-5); align-items: stretch; padding-top: 8px; }
.signin__panel { justify-content: flex-end; min-height: 320px; }
.signin__form { display: flex; flex-direction: column; gap: var(--s-4); align-self: start; }
.signin__form .btn { align-self: flex-start; }
.signin__lines { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 899px) {
  .signin { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .signin__panel { min-height: 0; border-radius: var(--r-panel); }
}
@media (max-width: 639px) {
  .signin__form .btn { align-self: stretch; }
}

/* ---------- Account ---------- */

.account { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.account__card { background: var(--surface); border-radius: var(--r-panel); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: var(--s-4); }
@media (max-width: 899px) { .account { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Knowledge review: queue on the left, reader on the right ---------- */

.review { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.review__queue, .review__reader { min-width: 0; }
@media (min-width: 1000px) {
  .review { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
  .review__queue {
    position: sticky; top: calc(var(--banner-h) + 12px);
    max-height: calc(100dvh - var(--banner-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px; margin: -4px; scroll-padding-block: 12px; scrollbar-width: thin;
  }
}
/* Under 1000px the queue and the reader are separate routes: only the pane for this route is shown. */
@media (max-width: 999px) {
  .review[data-pane="reader"] > .review__queue { display: none; }
  .review[data-pane="queue"] > .review__reader { display: none; }
}

.queue-head { margin-bottom: var(--s-4); }
.queue-head .h1, .queue-head .h2 { color: var(--on-brand); }
.queue-head__progress { font-weight: 500; color: var(--on-brand); }
.meter { height: 8px; border-radius: var(--r-pill); background: rgb(255 255 255 / .28); overflow: hidden; }
.meter__fill { display: block; height: 100%; width: calc(var(--meter, 0) * 100%); border-radius: var(--r-pill); background: var(--accent); }

.filters { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-3); }
.filters__more > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; cursor: pointer;
  list-style: none; font-weight: 500; border: 1px solid var(--field-border); border-radius: var(--r-pill);
  user-select: none; -webkit-user-select: none;
}
.filters__more > summary::-webkit-details-marker { display: none; }
.filters__more[open] > summary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); padding-top: var(--s-3); }
.filters__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.filters__row > .field { flex: 1 1 160px; }

.queue { display: flex; flex-direction: column; }
.queue > li { border-top: 1px solid var(--line); }
.queue > li:first-child { border-top: 0; }
.queue-row {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; margin-inline: -2px;
  color: var(--ink); text-decoration: none; border-radius: var(--r-card);
  transition: background-color 150ms ease;
}
.queue-row[aria-current="true"] { background: var(--surface); }
.queue-row__title { font-family: var(--font-head); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.queue-row__meta { font-size: var(--t-label); color: var(--muted); overflow-wrap: anywhere; }
.queue-row__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.queue-row__unread { font-weight: 600; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .queue-row:hover { background: var(--surface); }
  .queue-row[aria-current="true"]:hover { background: var(--surface-hover); }
}
.queue-more { padding-block: var(--s-4); }

/* ---------- Reader ---------- */

.reader { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.reader__nav { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.reader__nav .row { gap: 8px; }
.reader__head { display: flex; flex-direction: column; gap: 12px; }
.reader__tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.reader__terms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--t-label); color: var(--muted); }
.term { font-family: var(--font-body); font-size: var(--t-small); font-weight: 500; color: var(--ink); background: var(--surface); border-radius: 8px; padding: 2px 8px; overflow-wrap: anywhere; }
.reader__section { display: flex; flex-direction: column; gap: 12px; }
.reader__body {
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 42em;
  font-size: var(--t-body); line-height: 1.7;
  border-top: 2px solid var(--ink); padding-top: var(--s-4);
}
.reader__end { height: 1px; }
.removed-list { display: flex; flex-direction: column; }
.removed-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.removed-list a { font-weight: 500; }
.removed-list q { quotes: none; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- Decision bar: navy, with the one yellow action ---------- */

.decision { display: flex; flex-direction: column; gap: var(--s-4); }
.decision-bar {
  position: sticky; bottom: calc(var(--bottombar-h) + 12px); z-index: 20;
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between;
  background: var(--inverse); color: var(--on-inverse);
  border: 1px solid var(--inverse-line); border-radius: var(--r-panel); padding: 12px 12px 12px 24px;
}
.decision-bar__who { font-size: var(--t-label); color: var(--on-inverse-muted); flex: 1 1 180px; min-width: 0; }
.decision-bar__who strong { display: block; color: var(--on-inverse); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.decision-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.decision-form { display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-top: calc(var(--banner-h) + 16px); }
.decision-form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.reasons .btn { font-weight: 500; font-size: 16px; padding: 10px 16px; }
/* Phones: the bar docks to the bottom edge as a sheet, above the navigation bar. */
@media (max-width: 639px) {
  .decision-bar {
    position: fixed; left: 0; right: 0; bottom: var(--bottombar-h);
    border-radius: var(--r-card) var(--r-card) 0 0; border-width: 1px 0 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .has-bottombar .decision-bar { padding-bottom: 12px; }
  .decision-bar__who { display: none; }
  .decision-bar__actions { width: 100%; flex-wrap: nowrap; }
  .decision-bar__actions .btn { flex: 1 1 0; padding-inline: 8px; }
  .decision--bar { padding-bottom: 84px; }
}

/* ---------- Activity ---------- */

.activity__filters { background: var(--surface); border-radius: var(--r-panel); padding: clamp(16px, 2.4vw, 24px); margin-bottom: var(--s-5); }
.activity__filters .filters__grid { padding-top: 0; }
.outcome { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.outcome--allowed { color: var(--success); }
.outcome--refused, .outcome--error { color: var(--danger); }
.outcome--attempted { color: var(--muted); }

/* ---------- List to detail: a short cross-fade. Never on j and k, never under reduced motion. ---------- */

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--ease-out); }
}