/* App layout for the process review site.
   Load ds/tokens.css, then ds/components.css, then this file.
   Design contract: icorrect-design-system 14cdfce.
   Scale is the app screen: 8px gaps, one card level, one blue action.
   This file only covers layout those two files do not. */

strong, b { font-weight: var(--weight-semibold); }
/* Author display rules must not beat the hidden attribute. */
[hidden] { display: none !important; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 1em;
  background: var(--surface-quiet);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}

/* Page bar. Content lines up with the 1120 app column. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-card);
  box-shadow: var(--rule-bottom);
}
.topbar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  max-width: var(--page-max-app);
  margin: 0 auto;
  padding: 0 var(--pad-page-app);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  color: var(--text-heading);
  text-decoration: none;
  font-size: var(--app-item-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--app-item-tracking);
}
.brand:hover { text-decoration: none; color: var(--text-heading); }
.brand .product {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--label-color);
}
nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
nav a, .linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
nav a:hover, .linkbtn:hover {
  background: var(--black-alpha-4);
  color: var(--text-heading);
  text-decoration: none;
}
nav a.on { color: var(--text-heading); font-weight: var(--weight-medium); }

main.ic-page {
  padding-top: var(--space-6);
  padding-bottom: var(--space-16);
  outline: none;
}
main.ic-page:focus-visible { outline: none; }

.page-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.section { display: flex; flex-direction: column; gap: var(--gap); }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--gap);
}

/* One list card. Rows, not a grid of cards. */
.qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface-card);
  box-shadow: var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.qlist > * + * { box-shadow: var(--rule-top); }
.qlist .qlist {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
details.group > .qlist { box-shadow: var(--rule-top); }

.qrow, details.group > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  min-height: var(--target-min);
  padding: var(--space-3) var(--pad-card);
  color: var(--text-heading);
  text-decoration: none;
}
.qrow:hover, details.group > summary:hover { background: var(--surface-quiet); text-decoration: none; }
details.group > summary { cursor: pointer; list-style: none; }
details.group > summary::-webkit-details-marker { display: none; }

.qnum {
  flex: 0 0 auto;
  width: var(--space-6);
  padding-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  color: var(--text-secondary);
}
.qt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.qid {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  color: var(--label-color);
}
.qtitle-line {
  display: block;
  color: var(--text-heading);
  font-size: var(--app-item-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--app-item-tracking);
  line-height: var(--app-item-leading);
  overflow-wrap: anywhere;
}
.sub {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--app-secondary-size);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  line-height: var(--app-secondary-leading);
}
.qlist .subhead {
  padding: var(--space-3) var(--pad-card) var(--space-2);
  background: var(--surface-quiet);
}
.qstatus {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin-left: auto;
  max-width: 100%;
}
.count {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  color: var(--text-secondary);
  white-space: nowrap;
}
.twist {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.twist::before { content: "Show"; }
details.group[open] > summary .twist::before { content: "Hide"; }

/* R6-M1: the anchor is the hit area. The painted chip stays 24px. */
a.chip-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--target-min);
  min-height: var(--target-min);
  max-width: 100%;
  text-decoration: none;
}
a.chip-hit:hover { text-decoration: none; }

/* Every prose link is a 44px target. The line box grows with it. */
.ic-label a,
.doc a,
.excerpt a,
.t-app-body a,
.t-app-body-lg a,
.t-secondary a {
  display: inline-block;
  box-sizing: border-box;
  min-width: var(--target-min);
  min-height: var(--target-min);
  max-width: 100%;
  padding-block: var(--space-3);
  padding-inline: var(--space-2);
  overflow-wrap: anywhere;
  vertical-align: middle;
}
.maps figcaption a,
table.log td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--target-min);
  min-height: var(--target-min);
  max-width: 100%;
  padding-inline: var(--space-3);
  overflow-wrap: anywhere;
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}
.crumb-bit::before { content: "· "; }

/* Question page: short title, then one quiet meta line. */
.q-page { min-width: 0; }
.q-header, .q-top { min-width: 0; }
.q-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
.q-meta a { flex: 0 0 auto; }
.q-meta .crumb-bit { flex: 0 0 auto; white-space: nowrap; }
.q-meta .q-meta-group {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-note { min-width: 0; }
.default-box { min-width: 0; }
.q-follow {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
/* The answer follows the default in the page flow. Do not stick it over the question. */
form.answer { position: static; top: auto; }

.backup-banner {
  background: var(--attention-tint);
  color: var(--attention-text);
  box-shadow: var(--rule-bottom);
}
.backup-banner-in {
  max-width: var(--page-max-app);
  margin: 0 auto;
  padding: var(--space-3) var(--pad-page-app);
  font-size: var(--app-body-size);
  font-weight: var(--weight-medium);
  line-height: var(--app-body-leading);
  overflow-wrap: anywhere;
}
.backup-line { margin: 0; }

/* R8-L1: chips stay under the title. A row steals width, and
   overflow-wrap: anywhere then splits a status word. The emergency
   wrap on .q-top h1 stays for a string with no break points. */
.title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap);
}
.title-row h1 { min-width: 0; overflow-wrap: anywhere; }
.status-cluster { flex: 0 0 auto; }

.qtext { overflow-wrap: anywhere; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-areas: "top answer" "rest answer";
  column-gap: var(--gap);
  row-gap: var(--space-6);
  align-items: start;
}
.q-top { grid-area: top; min-width: 0; }
.q-rest { grid-area: rest; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.answer {
  grid-area: answer;
  min-width: 0;
  position: sticky;
  top: var(--space-16);
}

.choices { display: flex; flex-direction: column; gap: var(--gap); }
.choice { position: relative; min-width: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice input:focus-visible { outline: none; }
.choice input:focus-visible + .ic-choice {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}
.ic-textarea[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--danger-ink); }

kbd {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--text-secondary);
}

.block { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.history { display: flex; flex-direction: column; gap: var(--space-2); }
.history .h { padding-top: var(--space-2); box-shadow: var(--rule-top); }
.pager { display: flex; flex-wrap: wrap; gap: var(--gap); }
.pager .ic-btn { flex: 1 1 auto; }

/* R5-H1: a long title, saved note, or log cell wraps inside the viewport. */
.q-top h1,
.history .h,
table.log td { overflow-wrap: anywhere; }

.sources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }
.excerpt {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding: var(--pad-card);
  border-radius: var(--radius-lg);
  background: var(--surface-quiet);
}
.excerpt h1 {
  font-size: var(--app-section-size);
  line-height: var(--app-section-leading);
  letter-spacing: var(--app-section-tracking);
}
.excerpt p + p { margin-top: var(--gap); }

.maps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.maps figure {
  margin: 0;
  min-width: 0;
  background: var(--surface-card);
  box-shadow: var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.maps img {
  width: 100%;
  height: auto;
  cursor: zoom-in;
  background: var(--surface-quiet);
}
.maps figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--space-2) var(--space-3);
  color: var(--text-heading);
  font-size: var(--app-item-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--app-item-tracking);
  line-height: var(--app-item-leading);
}

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap); }
.toolbar .ic-field { flex: 1 1 auto; min-width: 0; }
.toolbar .ic-input { width: 100%; }
.table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  background: var(--surface-card);
  box-shadow: var(--edge);
  border-radius: var(--radius-lg);
}
table.log { border-collapse: collapse; width: 100%; font-size: var(--app-body-size); }
table.log th, table.log td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--pad-card);
}
table.log th {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--label-color);
  background: var(--surface-quiet);
}
table.log tbody tr + tr td { box-shadow: var(--rule-top); }
td.ts {
  font-family: var(--font-mono);
  font-size: var(--label-size-lg);
  font-weight: var(--label-weight);
  color: var(--text-secondary);
}
td .qtitle {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-body);
  font-size: var(--app-body-size);
  font-weight: var(--weight-regular);
}

.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--gap);
  align-items: start;
}
.doclist {
  position: sticky;
  top: var(--space-16);
  max-height: calc(100vh - var(--space-24));
  overflow: auto;
  min-width: 0;
}
.doclist .folder { display: block; margin: var(--space-4) 0 var(--space-1); }
.doclist .folder:first-child { margin-top: 0; }
.doclist a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--text-heading);
  text-decoration: none;
  font-size: var(--app-body-size);
  overflow-wrap: anywhere;
}
.doclist a.on {
  background: var(--surface-quiet);
  box-shadow: var(--edge-selected);
  font-weight: var(--weight-semibold);
}
.doclist a:hover { background: var(--surface-quiet); text-decoration: none; }
.doc { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.doc > * + * { margin-top: var(--gap); }
.doc th, .doc td { overflow-wrap: normal; }
.doc th {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-leading);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--label-color);
  text-align: left;
}
.doc th, .doc td {
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
}
.doc tbody tr + tr td { box-shadow: var(--rule-top); }
/* A table inside the article is not a second card. */
.doc .table-wrap {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.doc pre {
  max-width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-quiet);
  overflow: auto;
  overflow-wrap: normal;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: var(--app-body-size);
  line-height: var(--app-body-leading);
  color: var(--text-body);
}
.doc pre code { background: none; padding: 0; font-size: 1em; }
.doc blockquote {
  margin: 0;
  padding: var(--space-3) var(--pad-card);
  border-radius: var(--radius-lg);
  background: var(--surface-quiet);
  color: var(--text-body);
}
.doc .table-wrap { margin-top: var(--gap); }

#toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%) translateY(150%);
  max-width: calc(100% - var(--space-8));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-dark);
  color: var(--text-on-action);
  font-size: var(--app-body-size);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.bad { background: var(--danger-ink); }

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: var(--space-12) var(--pad-page-app);
  background: var(--surface-dark);
}
#lightbox[hidden] { display: none; }
#lightbox img {
  width: auto;
  max-width: 100%;
  height: auto;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
}
.lb-close {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-heading);
  font-size: var(--app-section-size);
  line-height: 1;
  cursor: pointer;
}

.login-body {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  min-height: 100vh;
  padding: var(--space-8) var(--pad-page-app);
}
.login-body .backup-banner {
  grid-row: 1;
  align-self: start;
  margin: calc(-1 * var(--space-8)) calc(-1 * var(--pad-page-app)) var(--space-4);
}
.login {
  grid-row: 2;
  width: min(100%, var(--email-width));
  margin-inline: auto;
  align-self: center;
  justify-self: center;
}

@media (max-width: 640px) {
  .action-row .ic-btn,
  .home-go { width: 100%; }
  .toolbar .ic-field { flex-basis: 100%; }
  .toolbar .ic-btn { flex: 1 1 auto; }
}
@media (min-width: 880px) {
  /* R8-M1: one figure fills the column. Two or more share it. */
  .maps:has(> figure + figure) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "answer" "rest"; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .answer, .doclist { position: static; max-height: none; }
  .doc { order: 1; }
  .doclist { order: 2; }
  table.log thead { display: none; }
  table.log, table.log tbody { display: block; width: 100%; }
  table.log tr { display: block; padding: var(--space-3) var(--pad-card); }
  table.log tr + tr { box-shadow: var(--rule-top); }
  table.log td { display: block; padding: var(--space-2) 0; box-shadow: none; }
  table.log td.lab-saved::before { content: "Saved"; }
  table.log td.lab-question::before { content: "Question"; }
  table.log td.lab-choice::before { content: "Choice"; }
  table.log td.lab-answer::before { content: "Answer"; }
  table.log td.lab-note::before { content: "Note"; }
  table.log td[class*="lab-"]::before {
    display: block;
    margin-bottom: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    line-height: var(--label-leading);
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--label-color);
  }
}
@media (min-width: 821px) {
  .topbar-in,
  main.ic-page,
  .backup-banner-in {
    padding-left: var(--pad-page-app-wide);
    padding-right: var(--pad-page-app-wide);
  }
}