/* Headings/buttons and body/labels are loaded from Google Fonts (see the
   <link> tags in each entry HTML) to match Lasso's MUI Design System
   product typography (Figma file sdB98u3UdQwVBF4VEZdVs3) -- PP Agrandir
   and Aeonik Fono are the document/deck brand fonts, not this one. */

:root {
  /* text/primary (Figma "MUI Design System") — darkest navy */
  --prussian: #071B2C;
  /* text/secondary */
  --denim: #275C8B;
  /* primary/main, primary/dark */
  --teal: #40B5AE;
  --teal-dark: #087D77;
  /* secondary/main, secondary/dark */
  --salmon: #F2795E;
  --salmon-dark: #D54120;
  /* background/paper-elevation-2, background/default */
  --white: #FFFFFF;
  --offwhite: #F7F9FB;
  /* divider / action/selected — light informational tint */
  --tint: #CEE5F9;
  --lightteal: var(--tint);
  /* success/main, success/dark */
  --success: #2E7D32;
  --success-dark: #1B5E20;
  /* error/main, error/dark */
  --error: #D32F2F;
  --error-dark: #C62828;
  /* warning/main, warning/dark */
  --warning: #EF6C00;
  --warning-dark: #E65100;
  --grey: #6D7E8F;
  --border: #CEE5F9;

  --font-heading: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* borderRadius 1 -- MUI's actual theme.shape.borderRadius, for controls
     (buttons, inputs, chips) */
  --radius-sm: 4px;
  /* borderRadius 2 -- the design system's larger-surface tier (cards,
     tables, panels); kept as --radius for every existing call site */
  --radius: 8px;
  /* elevation/1 */
  --elevation-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  /* elevation/2 -- MUI's default contained-button resting shadow */
  --elevation-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  /* elevation/4 -- contained-button hover shadow */
  --elevation-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--offwhite); color: var(--prussian); line-height: 1.5; min-height: 100vh; }

/* App bar -- replaces the old full-bleed gradient hero. Slim, fixed
   height, same role as admin/index.html's existing <header>: brand +
   page title only, no marketing-style hero copy. */
.topbar { background: var(--prussian); color: var(--white); box-shadow: var(--elevation-4); }
.topbar-inner { max-width: 760px; margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.topbar-logo { height: 20px; display: block; flex-shrink: 0; }
.topbar-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.topbar h1 { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; }
.topbar-nav { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.topbar-nav a { color: rgba(255,255,255,0.85); font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; text-decoration: none; }
.topbar-nav a:hover { color: var(--white); text-decoration: underline; }

/* Page intro -- the subtitle + "how to use this portal" link that used
   to live inside the hero now sits in the page body, above the card. */
.page-intro { max-width: 760px; margin: 1.75rem auto 0; padding: 0 1.5rem; }
.page-intro p { color: var(--grey); font-size: 0.95rem; }
.page-intro .banner-link { margin-top: 0.5rem; font-size: 0.85rem; }
.page-intro .banner-link a { color: var(--denim); font-weight: 600; text-decoration: underline; text-decoration-color: var(--tint); }
.page-intro .banner-link a:hover { text-decoration-color: var(--denim); }

.card { max-width: 760px; margin: 1.5rem auto 3rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--elevation-1); padding: 2rem 2rem 2.25rem; }

/* Form sections -- groups related fields under a small heading instead
   of one undifferentiated scroll of fields. */
.section-heading { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--prussian); margin-bottom: 1.1rem; }
.form-section + .form-section { margin-top: 1.75rem; }
.section-divider { border: none; border-top: 1px solid var(--border); margin: 1.75rem 0; }
.field { margin-bottom: 1.35rem; }
label { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; margin-bottom: 0.4rem; color: var(--prussian); }
.req { color: var(--salmon); }
input, select, textarea { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-family: var(--font-body); color: var(--prussian); background: var(--white); transition: border-color 0.15s, box-shadow 0.15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(64,181,174,0.18); }
textarea { resize: vertical; min-height: 110px; }
.hint { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; color: var(--grey); margin-top: 0.3rem; }
.attach-chosen { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; padding: 0.45rem 0.7rem; background: var(--tint); border-radius: var(--radius-sm); }
.attach-chosen span { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; color: var(--prussian); word-break: break-all; flex: 1; }
.attach-chosen button { background: none; border: 1px solid var(--salmon); color: var(--salmon); border-radius: var(--radius-sm); padding: 0.2rem 0.6rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.72rem; cursor: pointer; flex-shrink: 0; }
.attach-chosen button:hover { background: var(--salmon); color: var(--white); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
button { background: var(--teal); color: var(--white); border: none; border-radius: var(--radius-sm); padding: 0.5rem 1rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em; cursor: pointer; box-shadow: var(--elevation-2); transition: background 0.15s, box-shadow 0.15s, transform 0.05s; }
button:hover { background: var(--teal-dark); box-shadow: var(--elevation-4); }
button:active { transform: translateY(1px); box-shadow: var(--elevation-1); }
button:disabled { background: var(--grey); box-shadow: none; cursor: not-allowed; }
.msg { padding: 0.9rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; font-family: var(--font-body); font-size: 0.9rem; display: none; }
.msg.ok { background: rgba(46,125,50,0.1); color: var(--success-dark); display: block; }
.msg.err { background: rgba(211,47,47,0.1); color: var(--error-dark); display: block; }
.footer { text-align: center; font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; color: var(--grey); padding-bottom: 2rem; }
.footer a { color: var(--denim); }

/* Guide pages (user guide, staff guide) -- prose/reference content inside
   the shared .card shell, not a form. */
.guide-content h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--prussian); margin: 1.75rem 0 0.75rem; }
.guide-content h2:first-child { margin-top: 0; }
.guide-content h3 { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; color: var(--denim); margin: 1.1rem 0 0.5rem; }
.guide-content p { margin: 0 0 0.85rem; font-size: 0.92rem; }
.guide-content ol, .guide-content ul { margin: 0 0 0.85rem; padding-left: 1.2rem; font-size: 0.92rem; }
.guide-content li { margin-bottom: 0.35rem; }
.guide-content table { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin: 0.5rem 0 1.1rem; }
.guide-content th { background: var(--teal); color: var(--white); font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; text-align: left; padding: 0.55rem 0.8rem; border-radius: var(--radius-sm); }
.guide-content td { background: var(--tint); color: var(--prussian); font-size: 0.85rem; padding: 0.6rem 0.8rem; vertical-align: top; border-radius: var(--radius-sm); }
.guide-content td.field-name { white-space: nowrap; font-weight: 600; }
.guide-content section + section { margin-top: 1.75rem; }