/* ACBA Scribe screens: phone first. scribekami owns this file from here on.

   R-SIS-301 (phone first, D16): body text at least 16px, every button and control at least 44px tall, nothing scrolls
   sideways, tables become one card per row below 600px, the page's main action held at the bottom.
   R-SIS-302 (WCAG 2.2 AA): reflow at 320px, a visible focus on everything, nothing shown by color alone.
   Local styles only: no outside fonts, scripts or stylesheets (#606). */
:root {
  --scribe-ink: #1d1d1b;
  --scribe-muted: #5f5f5a;
  --scribe-green: #42541e;
  --scribe-paper: #ffffff;
  --scribe-line: #d9d9d4;
  --scribe-wash: #f4f4f1;
  --scribe-switch: #8a5a00;
  --scribe-focus: #1a4d8f;
  --scribe-tap: 44px;
}
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: 96px; /* a field reached by Tab never hides under the action bar (WCAG 2.4.11; technique C43) */
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--scribe-ink);
  background: var(--scribe-paper);
  line-height: 1.5;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* the footer's marking stays above a phone browser's toolbar */
}
img, svg, video, table, pre { max-width: 100%; }
img, video { height: auto; }
pre { overflow-x: auto; white-space: pre-wrap; }

/* Focus is always visible (R-SIS-302; WCAG 2.4.7, 1.4.11: 3 to 1 against white). */
:focus-visible { outline: 3px solid var(--scribe-focus); outline-offset: 2px; }

/* Controls: at least 44 pixels to tap, and 16-pixel text so a phone does not zoom into a field (R-SIS-301 items 1, 2). */
button, input, select, textarea { font: inherit; color: inherit; }
button, .scribe-button {
  min-height: 44px;
  min-width: var(--scribe-tap);
  padding: 8px 16px;
  border: 1px solid var(--scribe-green);
  border-radius: 6px;
  background: var(--scribe-green);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.scribe-button-quiet { background: var(--scribe-paper); color: var(--scribe-green); }
input, select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--scribe-muted);
  border-radius: 6px;
  max-width: 100%;
}
input[type="checkbox"], input[type="radio"] { min-height: 24px; min-width: 24px; }
textarea {
  min-height: 88px;
  padding: 8px 12px;
  border: 1px solid var(--scribe-muted);
  border-radius: 6px;
  width: 100%;
}
label { display: block; font-weight: 600; margin: 12px 0 4px; }
.scribe-field-error { color: #8f1d1d; margin: 4px 0 0; }
.scribe-field-error::before { content: "Error: "; font-weight: 700; } /* said in words, not only in red (R-SIS-302) */

/* The skip link: hidden until a keyboard reaches it (R-SIS-302; WCAG 2.4.1). */
.scribe-skip { position: absolute; left: -10000px; top: auto; }
.scribe-skip:focus {
  position: static;
  display: block;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--scribe-paper);
}

/* The switch-to banner (the architect's, #534) wraps on a phone rather than scrolling. */
.scribe-switch-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 16px;
  background: var(--scribe-switch);
  color: #fff;
}
.scribe-switch-banner p { margin: 0; }
.scribe-switch-banner button { background: var(--scribe-paper); color: var(--scribe-ink); border-color: var(--scribe-paper); }
.scribe-switch-banner :focus-visible { outline-color: #fff; } /* 5.9 to 1 on the banner's brown, where the blue is 1.4 */

/* The header: the College's name, the menu and the person; it wraps, it never hides the menu. */
.scribe-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--scribe-line);
}
.scribe-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  color: var(--scribe-green);
  text-decoration: none;
}
.scribe-brand-name { font-weight: 700; }
.scribe-college { color: var(--scribe-muted); }
.scribe-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.scribe-nav:empty { display: none; }
.scribe-nav a, .scribe-account a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--scribe-green);
}
.scribe-account { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }

/* The main area: one column, 16-pixel gutters, so 320 pixels leaves 288 for text (R-SIS-302, reflow). */
.scribe-main { padding: 16px; max-width: 960px; width: 100%; margin: 0 auto; flex: 1 0 auto; }

/* The page's one main action, held at the bottom of the screen on a long page (R-SIS-301 item 4). */
.scribe-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px -16px -16px;
  padding: 12px 16px;
  background: var(--scribe-paper);
  border-top: 1px solid var(--scribe-line);
}
.scribe-actions:empty { display: none; }

.scribe-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--scribe-line);
  color: var(--scribe-muted);
}
.scribe-footer p { margin: 4px 0; }
.scribe-footer-marking { font-weight: 700; color: var(--scribe-ink); }

/* Lists. */
.scribe-list { list-style: none; padding: 0; }
.scribe-list li { padding: 8px 0; border-bottom: 1px solid var(--scribe-line); }
.scribe-list button { margin-right: 8px; }
.scribe-muted { color: var(--scribe-muted); }

/* Tables: rows on a desk, one card per row on a phone (R-SIS-301 item 5). Each cell carries data-label="<column>". */
.scribe-table { width: 100%; border-collapse: collapse; }
.scribe-table th, .scribe-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--scribe-line); vertical-align: top; }
.scribe-table th { background: var(--scribe-wash); }
.scribe-table a { display: inline-flex; align-items: center; min-height: 44px; }

@media (width < 600px) {
  .scribe-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .scribe-table, .scribe-table tbody { display: block; }
  .scribe-table tr {
    display: block;
    margin: 0 0 12px;
    border: 1px solid var(--scribe-line);
    border-radius: 6px;
    padding: 4px 12px;
  }
  .scribe-table td, .scribe-table tbody th {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--scribe-line);
  }
  .scribe-table tbody th { background: none; }
  .scribe-table td:last-child { border-bottom: 0; }
  .scribe-table td::before, .scribe-table tbody th::before {
    content: attr(data-label);
    font-weight: 600;
    min-width: 8em;
  }
}