/* =========================================================================
   Dynamic Forms — Custom Theme (DRAFT for tweaking with Willie)

   Two kinds of selector in here:

   1. Broad element selectors (input, textarea, select, table) — these ride
      along on every field automatically since this stylesheet is scoped to
      the whole form. Used for things that should apply everywhere: page
      layout, default input size/font.

   2. Custom classes (.df-longanswer-editor, .df-callout-table,
      .df-signature-trigger, .df-firstname-target) — assign these yourself
      per field/table via Advanced Settings → Custom CSS Classes in the DF
      designer. Used for anything that should apply to SOME fields, not all.

   Bootstrap-style guesses (.form-control etc.) have been dropped in favor
   of #2 since you can attach a class directly to the field that needs it —
   no guessing at DF's rendered markup required.
   ========================================================================= */

/* Geist — confirmed 2026-08-13 as the real font loaded on Slate/apply.uu.edu
   (`family=Geist:wght@400;500;600;700;800` in that page's Google Fonts link),
   not just a name to fall back from. @import MUST stay the first rule in
   this file (comments are fine before it) — browsers silently ignore an
   @import that isn't first. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap');

/* ---- 1. Page surround: taupe on either side, white form centered ---- */

:root {
  --df-taupe: #C9BFAE;       /* swap this one value to change the surround color */
  --df-panel-bg: #FFFFFF;
  --df-teal: rgba(74, 119, 145, 1); /* matches existing DF snippet/email accent */
  --df-form-max-width: 780px;
  --df-input-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* matches Slate's main UI font */
}

html {
  background-color: var(--df-taupe);
}

/* Confirmed live 2026-08-13: DF's body carries id="formBody". A bare
   `body` element selector loses to any of DF's native rules that target
   #formBody by id (same specificity problem that hid the label styling
   earlier) — hence the white-on-white card. #formBody wins that fight;
   !important is belt-and-suspenders since this is someone else's page. */
body,
body#formBody {
  margin: 0;
  min-height: 100vh;
  background-color: var(--df-taupe) !important;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif; /* body/label font stays sans-serif */
  color: rgba(31, 41, 55, 1);
}

/* ---- FormStyle: DF's real outermost form container ----
   Confirmed against a live page inspect on 2026-08-13 — `FormStyle` is
   DF's own native class, not a guess, so the old .dfPageBody/#formContainer
   fallback list has been dropped. Reads like the PDF on desktop: a
   fixed-width white page floating on the taupe surround. Height is
   intentionally `auto`, not a forced min-height — a fixed min-height on
   this element blew up DF's native submission-status panel
   (Coordinator/Student/Dean/etc.) into a huge empty block on an earlier
   live test, almost certainly because that panel uses a percentage-based
   height internally and inherited against this container's forced height.
   Desktop-only fixed width — collapses to fluid/full-width below 900px so
   it doesn't break on phones. */
.FormStyle {
  width: 11in;
  max-width: 100%;
  margin: 40px auto;
  background-color: var(--df-panel-bg);
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.10);
  padding: 32px 40px 48px;
  border-radius: 12px; /* softened to match the 10px input corners — 2026-08-27 */
  box-sizing: border-box;
  position: relative; /* anchors the sidebar items below */
}

@media (max-width: 900px) {
  .FormStyle {
    width: 100%;
    margin: 0 auto;
    box-shadow: none;
  }
}

/* ---- Sidebar items: session timer + "* = required field" legend ----
   Both live inside the outer .FormStyle in DF's real markup:
   .timer-form-container and <div class="textAlignR"><span id="Required">.
   Confirmed live 2026-08-13. Lifted out of the content column and pinned
   in the taupe gutter to the right of the white card — these read as
   page chrome, not part of the form itself, so they shouldn't compete
   with field content for space inside the card.

   Gated behind a min-width: the card is 11in (~1056px) wide, so there's
   only real taupe space to pin into once the viewport is wide enough to
   show it. Below that, both stay in their normal in-flow spot inside the
   card rather than overlapping content or running off-screen. */
@media (min-width: 1400px) {
  /* 2026-08-27: widened + pushed further right, width forced with
     !important. Live render on the Counseling Appointment form showed the
     timer box spilling left into the white card despite the 240px width
     set here — best working theory is DF's own CSS for this widget has a
     width of its own that was winning the specificity fight, so the box
     rendered wider than 240px and bled over the card edge. Not fully
     confirmed against a live DOM inspect (unlike the rest of this block,
     which was on 2026-08-13) — if it still overlaps after this, the next
     step is inspecting the widget's own computed width live rather than
     guessing at another number. */
  .timer-form-container {
    position: absolute !important;
    top: 0;
    right: -300px;
    width: 260px !important;
  }

  #Required {
    position: absolute;
    top: 90px;
    right: -300px;
    width: 260px;
    display: block;
  }
}

/* DF nests a SECOND element carrying the same `FormStyle` class
   (#DynamicFormPanel, wrapping the actual field table) inside the outer
   one above. Without this, the rule above applies twice — doubled
   padding/shadow/background, and the inner 11in width fighting the outer's
   already-padded content box. Neutralize the inner one so only the
   outermost .FormStyle establishes the page card. */
#DynamicFormPanel.FormStyle {
  width: auto;
  max-width: none;
  margin: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

/* ---- 2. Input typography: bigger, and visually distinct from body text ----
   Broad element selectors — applies to every field automatically, no class
   needed, since this is the "all fields" ask.

   2026-08-27 fix: excluded type=radio/checkbox from this rule. They were
   getting swept in by the bare input selector and picking up text-field
   padding/border/font-size — Chrome treats that padding as a real hit-box
   enlargement on a radio/checkbox even though the drawn circle/square
   stays native size, which broke the inline flow next to the option label
   and dropped the label text onto its own line below the button (seen
   live on the Counseling Appointment form's Location field). Radio/
   checkbox sizing is handled separately, opt-in, by .df-radio-group
   below — unclassed radio/checkbox fields now stay at native browser
   size and inline correctly next to their label. */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  font-family: var(--df-input-font);
  font-size: 1.15rem;
  line-height: 1.4;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px; /* softened from 4px — 2026-08-27 */
}

input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus {
  border-color: var(--df-teal);
  box-shadow: 0 0 0 3px rgba(74, 119, 145, 0.18);
  outline: none;
}

/* ---- Select arrow: swap the native OS chrome for one that matches the
   now-rounded box ---- 2026-08-27
   The default browser dropdown arrow sits at odds with a 10px-rounded
   input, so drop it in favor of a custom SVG chevron and reclaim the
   right-padding it used to occupy. Broad element selector — every select
   on the form, no class needed, same as the rest of section 2. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%234A7791' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* ---- df-underline-input: bottom-border-only field style ----
   Assign to an individual field's Advanced Settings → Custom CSS Classes
   when it should read as a blank line (like the paper form's "Student
   Signature ___") instead of a boxed input. Strips the box border/radius
   from section 2 above, keeping only a bottom rule. Class selector beats
   the plain input/select/textarea rule above on the shared properties. */
.df-underline-input {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 0;
  background: transparent;
  padding: 4px 2px;
}

.df-underline-input:focus {
  border-bottom-color: var(--df-teal);
  box-shadow: none;
}

/* ---- df-radio-group: bigger, better-spaced radio/checkbox options ----
   REWRITTEN 2026-08-27 after a live DOM inspect on the Location field
   (Counseling Appointment form) showed what DF actually does: a Custom
   CSS Class assigned to a Radio Button/Checkbox field lands directly on
   EACH rendered input, not on a wrapper around the options:

     <div>
       <input class="df-radio-group" type="radio" ...>
       <label for="...">located on the Jackson campus</label>
     </div>

   The original version of this class assumed the opposite — a wrapper
   carrying the class, containing plain labels/inputs — and its
   .df-radio-group { display:flex; flex-direction:column } rule ended up
   matching the input itself (since the class IS the input), forcing a
   native radio button from its normal inline shape into a block-level
   flex box. That's what dropped every option's label onto its own line
   below the button. Rewritten to match the confirmed structure: size/
   accent the input directly, reach its label with the adjacent-sibling
   combinator (label always immediately follows input in this markup),
   and space the option rows with :has() scoped to only the wrapper divs
   that contain a classed input — so fields without this class are
   untouched. :has() needs a modern Chromium/Safari-based browser; no
   fallback written for older ones. */
input.df-radio-group[type="radio"],
input.df-radio-group[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--df-teal);
  vertical-align: middle;
  margin-right: 10px;
}

input.df-radio-group + label {
  font-family: var(--df-input-font);
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(31, 41, 55, 1);
  vertical-align: middle;
}

div:has(> input.df-radio-group) {
  margin-bottom: 14px;
}

div:has(> input.df-radio-group):last-child {
  margin-bottom: 0;
}

/* ---- inputcontainer: checkbox-variant wrapper, confirmed on
   "Marked as Processed" — 2026-08-28
   Some Checkbox fields (unlike the flat Radio Button markup confirmed
   above) wrap the input in DF's own <div class="inputcontainer">, with
   the <label> sitting AFTER that wrapper div rather than immediately
   after the input:

     <div class="inputcontainer mandatory">
       <input class="df-radio-group" type="checkbox" ...>
       <span class="field-validation-valid" ...></span>
     </div>
     <label class="inlinelabel" for="...">Marked as Processed</label>

   input.df-radio-group + label above never matches this shape (the span
   sits between input and the end of the div, and the label isn't even
   inside the div), so the label falls back to plain flow — and since
   .inputcontainer is block-level by default, the block box forces a line
   break before the label regardless of the label's own `display: inline`.
   Scoped to :has(a df-radio-group input) so ordinary text-field uses of
   .inputcontainer (which DO want to stack) are untouched. */
.inputcontainer:has(> input.df-radio-group) {
  display: inline-block;
  vertical-align: middle;
}

.inputcontainer:has(> input.df-radio-group) + label.inlinelabel {
  vertical-align: middle;
}

/* Second, separate cause of the same "Marked as Processed" wrap — confirmed
   live 2026-08-28 via DOM inspect AFTER the .inputcontainer fix above was
   already live and the label was still dropping to its own line. DF wraps
   this checkbox's label TEXT in its own child <div>:

     <label class="inlinelabel" for="..."><div>Marked as Processed</div></label>

   Text-only labels elsewhere (e.g. First Name) have no such div — this
   nested-div wrapping is specific to at least this Checkbox field's markup.
   A <div> is block-level, and a block box nested inside an inline element
   still forces a line break around itself even though the label element
   is display:inline — so the .inputcontainer fix alone couldn't have
   worked; this second rule was always required alongside it. */
label.inlinelabel > div {
  display: inline;
}

/* Field labels stay in the sans-serif body font, unaffected by the above */
label {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 600;
  color: rgba(55, 65, 81, 1);
}

/* ---- inlinelabel: DF's real, native label class ----
   Confirmed against a live page inspect on 2026-08-13 — DF stamps
   `class="inlinelabel"` (no hyphen, all one word) on every simple field
   label automatically: <label class="inlinelabel">First Name:</label>.
   Nothing to assign per field in Advanced Settings — this rule alone
   covers every label on the form site-wide. (Earlier draft used
   `.inline-label` with a hyphen, which is why nothing was affected.)

   2026-08-27: sized down from the original 1.1rem/700/near-black (which
   read as loud as the input text itself) toward the snippet convention's
   tiny 0.65rem gray caption — landed in between the two rather than at
   either extreme: still Geist/input font so it doesn't feel like a totally
   different voice from the answer, but smaller, lighter weight, a step
   more muted, and a little letter-spacing so it reads as a caption over
   the field instead of competing with it. ---- */
.inlinelabel {
  font-family: var(--df-input-font);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: rgba(75, 85, 99, 1);
  display: inline;
}

/* ---- 3. Long-answer / paragraph fields: a "format editor" feel ----
   Assign the class `df-longanswer-editor` (Advanced Settings → Custom CSS
   Classes) to any Long Answer field that should get this treatment — it's
   opt-in per field, not automatic on every textarea. script.js looks for
   this same class name to attach the Bold/Italic/List toolbar; this CSS
   alone just makes the box itself read like a text editor. */
.df-longanswer-wrap {
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  overflow: hidden;
}

.df-longanswer-toolbar {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background-color: rgba(251, 245, 232, 1); /* DF cream/taupe convention, not solid teal */
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.df-longanswer-toolbar button {
  font-family: var(--df-input-font);
  font-size: 0.95rem;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: rgba(31, 41, 55, 1);
}

.df-longanswer-toolbar button:hover {
  background-color: rgba(74, 119, 145, 0.12);
  border-color: rgba(74, 119, 145, 0.35);
}

.df-longanswer-toolbar button.active {
  background-color: var(--df-teal);
  color: #fff;
}

textarea.df-longanswer-editor,
.df-longanswer-editable {
  font-family: var(--df-input-font);
  font-size: 1.1rem;
  line-height: 1.6;
  min-height: 180px;
  padding: 14px 16px;
  border: none; /* wrapper supplies the border */
  width: 100%;
  box-sizing: border-box;
}

.df-longanswer-editable {
  outline: none;
  overflow-y: auto;
}

.df-longanswer-editable:empty::before {
  content: attr(data-placeholder);
  color: rgba(107, 114, 128, 0.7);
}

/* ---- 4. Callout table: distinct look for a Table item collecting input ----
   Assign the class `df-callout-table` to a Table item's Advanced Settings →
   Custom CSS Classes to mark it as "this table is gathering data," visually
   set apart from a plain layout table used only to align labels/fields. */

table.df-callout-table {
  border: 2px solid var(--df-teal);
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(74, 119, 145, 0.15);
  background-color: #fff;
}

/* Header row, if "Has header row?" is set to Yes on the table */
table.df-callout-table th {
  background-color: var(--df-teal);
  color: #fff;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  padding: 10px 14px;
}

table.df-callout-table td {
  padding: 12px 14px;
  border-top: 1px solid rgba(74, 119, 145, 0.15);
}

/* Alternating row tint makes it easier to track which row you're filling in */
table.df-callout-table tr:nth-child(even) td {
  background-color: rgba(74, 119, 145, 0.05);
}

/* Inputs inside a callout table keep the same larger input-font treatment
   as everywhere else — no extra rule needed, just noting it's covered by
   section 2 above since those selectors aren't scoped away from tables. */

/* ---- 5. Print / PDF export: drop the screen-only taupe chrome ----
   Confirmed 2026-08-13: DF's "Preview PDF" export renders the same
   stylesheet, so the taupe surround and floating white card were showing
   up behind the form in the exported PDF too. Screen and print are
   different rendering contexts on purpose — the taupe/centered-card
   treatment is a browser affordance, not something that belongs on a
   printed/exported page. Reset to a plain white document for print, and
   drop the timer/required-field sidebar positioning (screen-only chrome,
   not part of the form's printed content). Placed last so it overrides
   everything above only inside @media print. */
@media print {
  html,
  body,
  body#formBody {
    background-color: #fff !important;
  }

  .FormStyle {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background-color: #fff !important;
  }

  .timer-form-container {
    display: none;
  }

  #Required {
    position: static !important;
    width: auto !important;
  }
}

/* =========================================================================
   DRAFT ADDITIONS — Test Proctoring Form (Regular Semester) build, 2026-09-08
   NOT YET LIVE. Ready to load — all opt-in classes, nothing here changes an
   unclassed field elsewhere. See the change log above the CSS box for what
   each does; .df-file-upload is the one item still unconfirmed against
   live DF markup (checked on first live test, not a load blocker).
   ========================================================================= */

/* ---- 6. File upload: match the rounded input theme ----
   UNCONFIRMED — assumes DF renders a bare <input type="file">, not a
   custom drag-drop JS widget. Confirm against a live render before
   relying on it. */
.df-file-upload {
  font-family: var(--df-input-font);
  font-size: 1rem;
}

.df-file-upload::file-selector-button {
  font-family: var(--df-input-font);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 16px;
  margin-right: 12px;
  border: 1px solid var(--df-teal);
  border-radius: 8px;
  background-color: rgba(74, 119, 145, 0.08);
  color: var(--df-teal);
  cursor: pointer;
}

.df-file-upload::file-selector-button:hover {
  background-color: rgba(74, 119, 145, 0.18);
}

/* ---- 7. Sub-option field: visually nests a field under a checkbox/radio
   choice (e.g. "Other ___" free-text tied to a Materials Permitted
   checkbox) ----
   CSS-only indent/visual-grouping. Does NOT show/hide the field — actual
   conditional show/hide has to be built in DF's own workflow/conditional-
   logic settings, not CSS. */
.df-suboption {
  margin-left: 32px;
  margin-top: -6px;
  padding-left: 12px;
  border-left: 2px solid rgba(74, 119, 145, 0.3);
}

/* ---- 8. Content blocks: promote the snippet-library inline styles to
   real classes ----
   Replaces the fully-inlined style="..." blocks the form-build skill has
   been pasting fresh into every form's snippets.txt. Same visual spec as
   the skill's existing content-block types (header / section badge /
   directions / important-note / field instruction / signature
   acknowledgement) — just moved here so a build assigns a class instead
   of carrying a style block. Section-badge/rule color is a modifier class
   since color is tied to signer role (teal/brown/slate), not the badge
   itself. */

.df-header {
  background-color: rgba(251, 245, 232, 1);
  padding: 20px 24px;
  border-radius: 6px 6px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.df-header .df-header-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--df-teal);
  margin-bottom: 4px;
}

.df-header .df-header-title {
  font-size: 22px;
  font-weight: 700;
  color: rgba(31, 41, 55, 1);
}

.df-header img {
  height: 50px;
  width: auto;
  flex-shrink: 0;
  margin-left: 20px;
}

/* margin-top added 2026-09-08 -- without it, a section badge sat flush
   against whatever field came before it, with no visual break signaling
   "new section starts here." */
.df-section-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin-top: 28px;
  margin-bottom: 4px;
}

.df-section-badge.role-student { background-color: rgba(74, 119, 145, 1); }
.df-section-badge.role-faculty { background-color: rgba(160, 100, 50, 1); }
.df-section-badge.role-admin   { background-color: rgba(70, 80, 95, 1); }

.df-section-rule {
  border-bottom: 2px solid currentColor;
  margin-bottom: 4px;
}
.df-section-rule.role-student { color: rgba(74, 119, 145, 1); }
.df-section-rule.role-faculty { color: rgba(160, 100, 50, 1); }
.df-section-rule.role-admin   { color: rgba(70, 80, 95, 1); }

.df-directions {
  border-left: 4px solid var(--df-teal);
  background-color: rgba(251, 245, 232, 1);
  color: rgba(31, 41, 55, 1);
  padding: 12px 16px;
  font-family: var(--df-input-font); /* 2026-09-08: matches .inlinelabel's Geist voice instead of the plain body sans-serif */
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ---- df-important-note: full card, sage ----
   2026-09-08: rewritten from a left-border-only strip into a full card,
   matching the family treatment .df-field-instruction just got. Pairs
   with .df-important-note-title for a heading.
   Went through three color passes: crimson (too alarming even tinted
   down) -> slate (calm, but too dark/cool against the theme's lighter
   palette) -> sage, landed here. Sage also isn't a new color introduced
   just for this class — it's already part of the cream/taupe/sage
   stakeholder palette used elsewhere, so this keeps the DF theme in the
   same family rather than adding a fourth accent color to track.
   Stacking usage, confirmed 2026-09-08 against a live Test Proctoring
   submission: a title-only .df-important-note card sitting directly above
   a body-only .df-important-note card is a LIKED pattern, not a bug —
   .margin-bottom below gives natural spacing between the stacked cards.
   The thing that actually needed fixing (and was fixed) was a literal
   empty spacer div sitting between title and body in an earlier draft —
   avoid that specifically, but a clean two-card split like this is fine. */
.df-important-note {
  font-family: var(--df-input-font);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(31, 41, 55, 1);
  background-color: rgba(122, 150, 110, 0.1);
  border: 1px solid rgba(122, 150, 110, 0.4);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 10px;
}

.df-important-note-title {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(90, 115, 80, 1);
  margin-bottom: 6px;
}

.df-important-note p {
  margin: 6px 0;
}

/* ---- df-field-instruction: callout card, not a plain caption ----
   2026-09-08: rewritten from a bare unstyled-background caption into a
   full card, matching the visual family of .df-directions/.df-important-
   note but kept distinct from both: dashed (not solid) teal border on ALL
   sides (not just left), so it reads as "supplementary detail attached to
   a specific field" rather than "top-level page guidance" (.df-directions)
   or "warning" (.df-important-note). Heading text inside should use
   .df-field-instruction-title — see the snippets library for the
   Available Times example. */
.df-field-instruction {
  font-family: var(--df-input-font);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(75, 85, 99, 1);
  background-color: rgba(251, 245, 232, 1);
  border: 1px dashed rgba(74, 119, 145, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.df-field-instruction-title {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--df-teal);
  margin-bottom: 4px;
}

.df-field-instruction ul {
  margin: 4px 0 6px;
  padding-left: 18px;
}

.df-field-instruction p {
  margin: 4px 0;
}

.df-signature-ack {
  background-color: rgba(251, 245, 232, 1);
  border-radius: 6px;
  padding: 14px 16px;
  color: rgba(31, 41, 55, 1);
  font-size: 0.95rem;
}

/* Section 9 (time-entry styling) removed 2026-09-08 — confirmed via a live
   devtools inspect that input[type="time"] was never excluded from the
   section 2 selector (input:not([type="radio"]):not([type="checkbox"])),
   so it was already picking up the teal/rounded/Geist treatment for free.
   A dedicated rule here was dead weight. Whether DF can even capture a
   submitted value from an embedded raw <input type="time"> is a separate,
   still-open question — unrelated to this stylesheet, since the Test
   Proctoring build ended up using three plain Hour/Minute/AM-PM fields
   instead either way. */

/* ---- 10. Searchable select lists: match the native select above ----
   2026-09-29. When DF makes a Dropdown searchable it hides the real
   <select> (which carries data-searchablechoicelist="y") and renders a
   select2 4.1.0 widget in the <span class="select2-container"> right
   after it. Section 2's select rules only reach the hidden element, so
   these boxes kept select2's default 28px square look. The attribute plus
   the + combinator scopes the box rules to searchable lists only.

   The open panel (search box + options) is NOT a sibling; select2 appends
   it at the end of <body>, so those rules can't be scoped the same way and
   stay generic to any select2 panel on the form. */
select[data-searchablechoicelist="y"] + .select2-container .select2-selection--single {
  height: auto;
  padding: 10px 38px 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%234A7791' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

select[data-searchablechoicelist="y"] + .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  font-family: var(--df-input-font);
  font-size: 1.15rem;
  line-height: 1.4;
  color: rgba(31, 41, 55, 1);
}

select[data-searchablechoicelist="y"] + .select2-container .select2-selection--single .select2-selection__placeholder {
  color: rgba(107, 114, 128, 1);
}

/* The chevron above replaces select2's own arrow */
select[data-searchablechoicelist="y"] + .select2-container .select2-selection--single .select2-selection__arrow {
  display: none;
}

/* Focus and open: same teal ring as select:focus. select2 squares off the
   corners next to the open panel; keep them rounded like a native select. */
select[data-searchablechoicelist="y"] + .select2-container.select2-container--focus .select2-selection--single,
select[data-searchablechoicelist="y"] + .select2-container.select2-container--open .select2-selection--single {
  border-color: var(--df-teal);
  box-shadow: 0 0 0 3px rgba(74, 119, 145, 0.18);
  outline: none;
  border-radius: 10px;
}

/* Open panel: generic, see note above */
.select2-container--default .select2-dropdown {
  font-family: var(--df-input-font);
  border: 1px solid var(--df-teal);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
}

.select2-container--default .select2-dropdown--above {
  margin-top: -4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--df-teal);
  box-shadow: 0 0 0 3px rgba(74, 119, 145, 0.18);
  outline: none;
}

.select2-container--default .select2-results__option {
  font-size: 1rem;
  padding: 8px 12px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--df-teal);
  color: #fff;
}

.select2-container--default .select2-results__option--selected {
  background-color: rgba(74, 119, 145, 0.12);
}

/* ---- 11. Summary card: read-only values filled in from Colleague ----
   2026-11-05, Degree Audit Appointment Application. Assign df-summary-card
   to a Table item (Advanced Settings > Custom CSS Classes) that shows
   values a DataSet prefill fills in, such as program, majors and
   catalogue year. DF renders each prefilled value as bare text inside a
   td, and DF's own style.css sets body, th, td to 12px, so nothing set on
   the table itself reaches the values. The td rule below is what makes
   them readable. Opt-in: only tables carrying this class change. Caption
   text inside the card keeps its own inline size. */
table.df-summary-card {
  border-left: 4px solid var(--df-teal);
  background-color: rgba(251, 245, 232, 1);
  border-radius: 0 10px 10px 0;
  border-collapse: separate;
  padding: 12px 16px;
  margin-bottom: 10px;
}

table.df-summary-card td {
  font-family: var(--df-input-font);
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(31, 41, 55, 1);
  padding: 2px 16px 2px 0;
}