/* The approval console's base stylesheet - mobile-first, phone-legible (P6-4).
 *
 * Served same-origin + UNAUTHENTICATED from `/app.css` (an external stylesheet, NOT an
 * inline <style> - the strict CSP `style-src 'self'` at security.py forbids inline style),
 * and linked from base.html (landing / queue / card). It carries NO @import and NO url()
 * fetch, so nothing here reaches a cross-origin asset the CSP would break. ZERO client JS.
 *
 * Mobile-first: the base rules target a phone viewport (the `<meta name=viewport>` in
 * base.html scales to device width); the one min-width media query widens the reading
 * column on a larger screen. Tap targets (links + buttons) stay >=44px tall for a thumb.
 */

:root {
  color-scheme: light dark;
  --gap: 1rem;
  --tap: 2.75rem; /* 44px minimum comfortable tap target */
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%; /* keep phone text at the author-set size */
}

body {
  margin: 0;
  padding: var(--gap);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem; /* readable on a phone without zoom */
  line-height: 1.5;
  max-width: 44rem;
  margin-inline: auto;
}

header h1 {
  font-size: 1.375rem;
  margin: 0 0 var(--gap);
}

main {
  display: block;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1.05rem;
}

/* Lists + rows: full-width, generously spaced for a thumb. */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

section {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

code {
  overflow-wrap: anywhere; /* a digest never forces a horizontal scroll on a phone */
  font-size: 0.9375rem;
}

/* Forms: stacked, full-width fields + tall tap targets (sign-in, approve, reject). */
form {
  margin: var(--gap) 0;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input[type="email"],
input[type="text"] {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 0.25rem;
  padding: 0 0.75rem;
  font-size: 1.0625rem;
}

button {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 0.75rem;
  padding: 0 1rem;
  font-size: 1.0625rem;
  cursor: pointer;
}

/* A DISABLED button must LOOK disabled (7H-6 post-run fix). The card script sets `disabled`
   on submit so a second tap cannot double-post, and until this rule existed the button kept
   its normal appearance - so on a real phone the tap simply stopped working with no visible
   reason, which is the worst of both worlds and is exactly what the architect hit on the live
   box. The native disabled rendering was not distinguishable enough here; state it explicitly.
   Matched on BOTH forms because a UA may reflect the property or the attribute. */
button:disabled,
button[disabled] {
  background: rgba(128, 128, 128, 0.25);
  color: rgba(60, 60, 60, 0.65);
  cursor: not-allowed;
}

a {
  display: inline-block;
  min-height: var(--tap);
  line-height: var(--tap);
  overflow-wrap: anywhere;
}

[role="alert"] {
  padding: 0.75rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
}

[role="status"] {
  padding: 0.75rem;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 0.25rem;
}

/* On a wider screen the buttons need not span the full column. */
@media (min-width: 40rem) {
  button {
    width: auto;
    min-width: 12rem;
  }
}

/* 7H-6 ob. 5-6: the card/queue SHAPE - the fold + the hierarchy (label lighter than value). */

/* The row's leading word ("Field:" / "Value:") reads lighter than the value that follows it -
   the hierarchy a reader's eye should skip past on the way to what matters. */
.row-label {
  color: rgba(128, 128, 128, 0.85);
  font-weight: normal;
}

/* The bundle's aggregate shape line ("N entities - M facts") and the per-entity group header -
   a quiet visual break, not a loud banner (the card is legible, not decorated). */
.shape-line {
  font-weight: 600;
  opacity: 0.85;
}

.entity-group {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.entity-group h4 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

/* The staged id + digest fold: closed by default, one tap to open - off the main reading path
   (ob. 6) without deleting either (display-what-you-sign, F2). */
details {
  margin: var(--gap) 0;
}

details summary {
  cursor: pointer;
  min-height: var(--tap);
  line-height: var(--tap);
  color: rgba(128, 128, 128, 0.85);
}

/* The settled fold (ob. 7): decided / expired / withdrawn / failed writes sit here, one tap
   away and visually recessed, so a dead write stops competing with the work awaiting a
   decision. Folded, never deleted (Y2). */
.settled-fold {
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  opacity: 0.8;
}

.settled-cause {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: rgba(128, 128, 128, 0.95);
}

/* The one-tap working line (ob. 8): hidden until the external same-origin card script reveals
   it on submit, so the approver sees the decision is in flight instead of tapping again. The
   `hidden` attribute does the hiding; this rule only styles it once shown. */
.working-line {
  margin: var(--gap) 0;
  min-height: var(--tap);
  line-height: var(--tap);
  color: rgba(128, 128, 128, 0.95);
}

.working-line[hidden] {
  display: none;
}