/* Snovasys brand theme for the fresher hiring challenge.
   Palette sampled from snovasys.com:
     ink #111117   surface #1F1F28   raised #25252D
     text #E7E8EF  muted #A2A7B9
     primary #3C83F6  accent #24DBC9
   Loaded globally from layout.html so it also applies to the home page,
   which dribdat excludes from per-event custom CSS. */

:root {
  --sn-ink: #111117;
  --sn-surface: #1F1F28;
  --sn-raised: #25252D;
  --sn-line: #32323E;
  --sn-text: #E7E8EF;
  --sn-muted: #A2A7B9;
  --sn-primary: #3C83F6;
  --sn-primary-dark: #2C6ED6;
  --sn-accent: #24DBC9;
}

/* ---------- ground ---------- */
html, body { background: var(--sn-ink) !important; color: var(--sn-text) !important; }
main, .container, .container-fluid, .with-event { color: var(--sn-text); }
h1, h2, h3, h4, h5, h6 { color: var(--sn-text) !important; letter-spacing: -.01em; }
p, li, dd, dt, label, .control-label { color: var(--sn-text); }
.help-inline, .help-block, .text-muted, small, .subtitle { color: var(--sn-muted) !important; }
hr { border-color: var(--sn-line) !important; }

/* ---------- top bar ---------- */
.navbar, nav.navbar { background: #0B0B10 !important; border-bottom: 1px solid var(--sn-line); }
.navbar a, .navbar .nav-link, .navbar .navbar-brand {
  color: var(--sn-text) !important; opacity: 1 !important; font-weight: 500;
}
.navbar a:hover, .navbar .nav-link:hover { color: var(--sn-primary) !important; }
.navbar .nav-register, a.nav-register { color: var(--sn-accent) !important; }
.navbar-toggler { border-color: var(--sn-line) !important; }
.navbar input, .navbar .form-control { background: var(--sn-raised) !important; }

/* ---------- home / event hero ---------- */
.event-hero, .jumbotron, .hero, .event-header,
.home-header, header.masthead, .honeycomb {
  background: radial-gradient(1200px 400px at 50% -10%, #1A2740 0%, #111117 70%) !important;
  border-bottom: 1px solid var(--sn-line);
}
/* dribdat paints a striped placeholder when no gallery image is set */
[style*="repeating-linear-gradient"], .event-gallery, .gallery-bg {
  background: radial-gradient(1200px 400px at 50% -10%, #1A2740 0%, #111117 70%) !important;
}

/* ---------- cards / panels ---------- */
.card, .panel, .panel-default, .panel-body, .list-group-item,
.timeline-content, .profile-projects, .modal-content, .project-card,
.event-card, .card-body {
  background: var(--sn-surface) !important;
  border-color: var(--sn-line) !important;
  color: var(--sn-text) !important;
  border-radius: 10px;
}
.card h1, .card h2, .card h3, .card a { color: var(--sn-text) !important; }
.card a:hover { color: var(--sn-primary) !important; }

/* ---------- links ---------- */
a { color: var(--sn-primary); }
a:hover { color: var(--sn-accent); }

/* ---------- buttons ---------- */
.btn-primary, .btn-success, .btn-info,
input[type="submit"], button[type="submit"] {
  background: var(--sn-primary) !important;
  border-color: var(--sn-primary) !important;
  color: #fff !important; font-weight: 600; border-radius: 8px;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--sn-primary-dark) !important; border-color: var(--sn-primary-dark) !important;
}
.btn-light, .btn-outline-light, .btn-secondary, .btn-default {
  background: var(--sn-raised) !important; border: 1px solid var(--sn-line) !important;
  color: var(--sn-text) !important; border-radius: 8px;
}
.btn-warning {
  background: var(--sn-accent) !important; border-color: var(--sn-accent) !important;
  color: #0B0B10 !important; font-weight: 600;
}
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; }

/* ---------- forms ---------- */
input, textarea, select, .form-control,
.CodeMirror, .EasyMDEContainer .CodeMirror {
  background: var(--sn-raised) !important; border: 1px solid var(--sn-line) !important;
  color: var(--sn-text) !important; border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: var(--sn-muted) !important; }
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--sn-primary) !important;
  box-shadow: 0 0 0 3px rgba(60,131,246,.25) !important;
}
.editor-toolbar { background: var(--sn-raised) !important; border-color: var(--sn-line) !important; }
.editor-toolbar button, .editor-toolbar a { color: var(--sn-text) !important; }
.editor-statusbar { color: var(--sn-muted) !important; }

/* ---------- tables ---------- */
table, .table { color: var(--sn-text) !important; }
.table th {
  background: var(--sn-raised) !important; color: var(--sn-muted) !important;
  text-transform: uppercase; font-size: .74rem; letter-spacing: .08em;
}
.table td, .table th, table td, table th { border-color: var(--sn-line) !important; }

/* ---------- countdown ---------- */
.flipdown .rotor, .flipdown .rotor-leaf-front, .flipdown .rotor-leaf-rear,
.flipdown .rotor-top, .flipdown .rotor-bottom {
  background: var(--sn-surface) !important; color: var(--sn-text) !important;
}
.flipdown .rotor-group-heading:before { color: var(--sn-muted) !important; }

/* ---------- footer ---------- */
footer, .footer { background: #0B0B10 !important; border-top: 1px solid var(--sn-line); }
footer a, .footer a { color: var(--sn-muted) !important; }
footer a:hover, .footer a:hover { color: var(--sn-primary) !important; }

/* ---------- code ---------- */
code, pre, kbd {
  background: #0B0B10 !important; color: var(--sn-accent) !important;
  border: 1px solid var(--sn-line); border-radius: 6px;
}
pre code { border: 0; }

/* ---------- hiring-event housekeeping ---------- */
a[href="/user/ranking"], a[href="/dribs"] { display: none !important; }
a[href^="/project/import/"] { display: none !important; }
.team-invite-button a[data-bs-target="#addUser"] { display: none !important; }

/* fields a fresher does not need */
.form-group:has(.fld-autotext_url),
.form-group:has(.fld-terms_reuse),
.form-group:has(.fld-hashtag),
.form-group:has(.fld-logo_color),
.form-group:has(.fld-logo_icon),
.form-group:has(.fld-image_url),
.form-group:has(.fld-is_webembed) { display: none !important; }

/* the two compulsory links stand out */
.form-group:has(.fld-source_url) label,
.form-group:has(.fld-download_url) label {
  color: var(--sn-accent) !important; font-weight: 700;
}

/* solo event: this is the author, not a team */
#team-md::before { content: "Submitted by" !important; }

/* ---------- hero card over the banner ---------- */
.section-header-content,
.carousel-caption, .carousel .card, .event-header .card,
.carousel-item .card, .home-event-card {
  background: rgba(17,17,23,.88) !important;
  border: 1px solid var(--sn-line) !important;
  color: var(--sn-text) !important;
  backdrop-filter: blur(6px);
}
.carousel-caption h1, .carousel-caption h2, .carousel-caption p,
.carousel .card h1, .carousel .card h2, .carousel .card p { color: var(--sn-text) !important; }

/* dribdat's placeholder stripe pattern, shown when no banner is set */
.carousel-item svg rect { fill: #111117 !important; }

.section-header-content, .section-header-content * { color: var(--sn-text) !important; }
.section-header-content a { color: var(--sn-primary) !important; }

/* ---------- navbar brand ---------- */
.navbar-brand { display: inline-flex !important; align-items: center; gap: .5rem; }
.sn-brand-mark { height: 30px; width: auto; }
.sn-brand-word {
  font-weight: 700; letter-spacing: .04em; color: var(--sn-text) !important;
  text-transform: uppercase; font-size: .98rem;
}

/* ---------- event header ---------- */
.event-header { padding: 1.75rem 1rem 1.25rem !important; }
.section-header { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.section-header-logo { flex: 0 0 auto; }
#event-logo { max-height: 54px !important; width: auto !important; opacity: 1; }
.event-header h1, .event-name {
  font-size: clamp(1.5rem, 3vw, 2.3rem) !important;
  line-height: 1.15; margin: 0; text-wrap: balance;
}

/* ---------- avatars ---------- */
.user-avatar, .team img, .profile-projects img, img[alt="Avatar"],
.user-thumb, .avatar {
  background: var(--sn-raised) !important;
  border: 1px solid var(--sn-line) !important;
  border-radius: 8px;
}

/* ---------- section dividers (CSS-generated labels) ---------- */
#project-md::before { content: "Project details" !important; }
#dribs-md::before   { content: "Updates" !important; }
#readme-md::before  { content: "From your repository" !important; }
#suggest-md::before { content: "Resources" !important; }
#team-md::before, #project-md::before, #dribs-md::before,
#readme-md::before, #suggest-md::before { color: var(--sn-muted) !important; }

/* ---------- participant avatar tile ---------- */
.team-gravatar, .team-gravatar.bg-light {
  background: var(--sn-raised) !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-line) !important;
  border-radius: 10px;
}
.team-gravatar.text-dark, .team-gravatar .text-dark { color: var(--sn-text) !important; }

/* ---------- readable inline links on dark ---------- */
main a, .card a, .panel a, .panel-body a, article a, .markdown a {
  color: #6FA8F0 !important;
  text-decoration-color: rgba(111,168,240,.45);
}
main a:hover, .card a:hover, .panel a:hover, .panel-body a:hover { color: var(--sn-accent) !important; }

/* ---------- current-stage banner ---------- */
.sn-stage-banner {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: .5rem 0 1rem; padding: .5rem .9rem;
  background: rgba(60,131,246,.12);
  border: 1px solid var(--sn-primary);
  border-radius: 999px;
}
.sn-stage-label {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sn-muted) !important; font-weight: 600;
}
.sn-stage-value { font-weight: 700; color: var(--sn-text) !important; font-size: 1.02rem; }
.sn-stage-help { font-size: .82rem; color: var(--sn-accent) !important; text-decoration: underline; }

/* ---------- strip platform chrome the candidates do not need ---------- */
a[href="/about/"],
a[href^="/feeds/"],
a[title="Search this dribdat site"],
a[title="RSS: Latest dribs"],
a[title="Past Results"],
a[title="Results"],
a[href="/participants"],
a[href^="/event/"][href$="/participants"] { display: none !important; }

/* Hide dribdat's "//NNN bytes" length counters - developer noise for students */
.form-group .help-inline em, .form-group small em, span.pull-right.text-muted,
.help-inline .text-muted { display: none !important; }

/* "Fork" copies someone else's project - meaningless in a solo hiring event */
a[href*="/fork"][title^="Create another project"] { display: none !important; }

/* "Leave" removes a candidate from their own submission - hide it in a solo event */
a[href*="/unstar"] { display: none !important; }

/* ---------- stage-board hexagons ----------
   dribdat colours these hsl(220,75%,75%), a pale blue that reads as a white
   blob on the dark theme. Re-tint them and make the labels legible. */
.hexagon, .honeycomb .hexagon { background-color: var(--sn-surface) !important; }
.hexagon::before, .hexagon::after { background-color: inherit !important; }

/* the organisers' problem statement */
.hexagon.challenge, .honeycomb .hexagon.challenge {
  background-color: #1D3A5F !important;
}
/* a candidate submission */
.hexagon.project, .honeycomb .hexagon.project {
  background-color: #24303F !important;
}
.hexagon:hover, .honeycomb .hexagon:hover {
  background-color: var(--sn-primary) !important;
}
.hexagontent, .hexagontent a, .hexagon a, .hexagon .hexagontent * {
  color: var(--sn-text) !important;
}
.hexagon .team-counter { color: var(--sn-muted) !important; }

/* per-stage accent along the bottom edge, so the board reads at a glance */
.hexagon.stage-0  { border-bottom: 3px solid #8A8FA3 !important; }
.hexagon.stage-10 { border-bottom: 3px solid #3C83F6 !important; }
.hexagon.stage-20 { border-bottom: 3px solid #24DBC9 !important; }
.hexagon.stage-30 { border-bottom: 3px solid #A78BFA !important; }
.hexagon.stage-40 { border-bottom: 3px solid #34D399 !important; }

/* ---------- fixes from visual audit ----------
   The header title was drawn as a bordered card inside the header (box-in-box),
   and the hexagon row sat inside a tall empty gradient slab. */
.event-header .section-header-content {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none;
  padding: 0 !important;
}
.honeycomb, .step .honeycomb {
  background: transparent !important;
  border: 0 !important;
  min-height: 0 !important;
  padding: .25rem 0 !important;
  margin: 0 !important;
}
.step .row, .step .col { min-height: 0 !important; }

/* ---- audit fixes ---- */

/* M1/M2 - /event/N/stages. common.css positions .number, .title and .emoji
   absolutely (with .title at width:100%), so they size against the viewport
   and push scrollWidth past it; the emoji's margin-left:-2em also falls off
   the left edge on phones. Flow them inline inside the flex .row instead. */
body.stages-page { overflow-x: hidden; }               /* belt and braces only */
.stages-page .list-stages .step > .number,
.stages-page .list-stages .step > .title,
.stages-page .list-stages .step > .emoji {
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  flex: 0 0 auto;
  align-self: center;
  opacity: 1 !important;
}
.stages-page .list-stages .step > .number {
  font-size: 2rem !important; line-height: 1; color: var(--sn-muted) !important;
}
.stages-page .list-stages .step > .title { font-size: 1.5rem !important; }
.stages-page .list-stages .step > .emoji { font-size: 1.6rem !important; opacity: .85 !important; }
/* upstream gives these margin:0 6em on top of width:100%, which is the last
   12em of the desktop overflow; indent them under the title instead */
.stages-page .list-stages .step > .subtitle,
.stages-page .list-stages .step > .agree-list {
  flex: 0 0 auto; margin: .25rem 0 .75rem 2.5rem !important;
  width: calc(100% - 2.5rem) !important; max-width: calc(100% - 2.5rem);
}
/* upstream: margin-left:5em + width:100% + margin-right:-5em paints past the edge */
.stages-page .profile-projects { width: auto !important; margin-right: 0 !important; max-width: 100%; }
@media (max-width: 600px) {
  .stages-page .list-stages { padding-left: 1rem !important; }
  .stages-page .profile-projects { margin-left: 0 !important; }
  .stages-page .list-stages .step > .subtitle,
  .stages-page .list-stages .step > .agree-list {
    margin: .25rem 0 .75rem !important; width: 100% !important; max-width: 100%;
  }
}

/* M9 - technology tags were mint-on-blue (1.85:1) */
main a.skill, a.skill, .skill, .profile-wishes .wish {
  background: var(--sn-raised) !important;
  border: 1px solid var(--sn-line);
  color: var(--sn-text) !important;
  border-radius: 999px; padding: .15em .7em; font-size: .85em;
}

/* M10 - drop the grey drop-shadow on every field; keep the :focus glow above */
main form .form-group .form-control:not(:focus),
main form .form-group .checkbox label,
main form .form-group .checkbox label[for="is_autoupdate"] { box-shadow: none !important; }
main form .form-group .checkbox label:hover {
  background: var(--sn-raised) !important; color: var(--sn-text) !important;
}

/* M11 - Demo/Source/Contact tiles and event-card actions had pure white borders */
main .border-white, main a.btn.border-white, main .text-bg-light {
  border: 1px solid var(--sn-line) !important;
  background: var(--sn-surface) !important;
  color: var(--sn-text) !important;
}
main .border-white:hover, main a.btn.border-white:hover, main .text-bg-light:hover {
  border-color: var(--sn-primary) !important; color: var(--sn-text) !important;
}

/* M12 - dribdat hides .rotor-group-heading (0x0), so the Days/Hours/Minutes/
   Seconds ::before labels never paint. */
.flipdown .rotor-group-heading, .event-countdown .rotor-group-heading {
  display: block !important; height: 1.4rem; line-height: 1.4rem;
  text-align: center; margin-bottom: .15rem;
}
.flipdown .rotor-group-heading::before {
  display: block; height: auto; line-height: inherit;
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; color: var(--sn-muted) !important;
}

/* N3 - markdown tables carry no class, so cells got 1px padding */
main table { width: 100%; border-collapse: collapse; margin: .75rem 0; }
main table th, main table td { padding: .5rem .75rem; border-bottom: 1px solid var(--sn-line); }

/* N4 - remaining light elements */
.timeline-img, .timeline .timeline-img {
  background: var(--sn-raised) !important; color: var(--sn-text) !important;
  border: 1px solid var(--sn-line); box-sizing: border-box; line-height: calc(2em - 2px);
}
.timeline::before { background: var(--sn-line) !important; }
.jumbotron { box-shadow: none !important; }
.jumbotron.project-page, .jumbotron.event-page, .jumbotron.home-page { border-color: var(--sn-line) !important; }
.card .an-event-meta, .an-event-meta {
  background: var(--sn-raised) !important; color: var(--sn-text) !important;
  border: 1px solid var(--sn-line); text-shadow: none !important;
}
.an-event-meta span { background: transparent !important; color: inherit !important; }

/* N5 - contrast */
.project-ident, .project-home .project-ident,
.hexagon .hexagontent span.project-ident,
.event-home .hexagon .hexagontent span.project-ident {
  color: var(--sn-muted) !important; text-shadow: none !important; opacity: 1 !important;
}
.project-home .project-ident {
  border: 1px solid var(--sn-line); border-radius: 8px;
  padding: .1em .4em; line-height: 1.15 !important; font-size: 180% !important;
}
.huge { opacity: 1 !important; color: var(--sn-text) !important; }
/* white on #3C83F6 is 3.6:1; #2C6ED6 gives 4.9:1 */
.btn-primary, .btn-success, .btn-info,
input[type="submit"], button[type="submit"] {
  background: var(--sn-primary-dark) !important; border-color: var(--sn-primary-dark) !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background: #2259B4 !important; border-color: #2259B4 !important;
}

/* N7d - home hero. The banner is an SVG <image preserveAspectRatio="xMinYMin
   slice"> (cover) that CSS cannot retarget, so size the SVG box to the
   banner's own 16:5 ratio and centre it: the image then fits without cropping,
   the same as background-size:contain. Proper fix belongs in
   templates/macros/_event.html (preserveAspectRatio="xMidYMid meet"). */
.home-page .carousel-item, .carousel-item {
  background-color: var(--sn-ink) !important;
  background-size: contain !important; background-position: center !important;
  background-repeat: no-repeat !important; overflow: hidden;
}
.carousel-item > div[style*="background"], .event-gallery, .carousel [style*="background-image"] {
  background-size: contain !important; background-position: center !important;
  background-repeat: no-repeat !important; background-color: var(--sn-ink) !important;
}
.home-page .carousel-item > svg.bd-placeholder-img {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 5;
}

/* duplicate floating prev/next project arrows, clipped at the viewport edge */
.nav-projects-abs-prev, .nav-projects-abs-next { display: none !important; }

/* ---------- brand: wordmark in the top bar ---------- */
.sn-brand-logo { height: 24px; width: auto; display: block; }
.navbar-brand { padding: .35rem 0 !important; }
@media (max-width: 480px) { .sn-brand-logo { height: 20px; } }

/* ---------- login page ---------- */
body.login main, body.login .container { min-height: 0; }
.sn-login {
  min-height: calc(100vh - 140px);
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1rem;
  background: radial-gradient(900px 420px at 50% -10%, #1A2740 0%, transparent 70%);
}
.sn-login-card {
  width: 100%; max-width: 420px;
  background: var(--sn-surface); border: 1px solid var(--sn-line);
  border-radius: 14px; padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  text-align: center;
}
.sn-login-logo img { height: 34px; width: auto; margin: 0 auto .9rem; display: block; }
.sn-login-title {
  font-size: 1.35rem !important; font-weight: 600; margin: 0 0 .25rem !important;
  color: var(--sn-text) !important; opacity: 1 !important; letter-spacing: 0;
}
.sn-login-sub { color: var(--sn-muted) !important; font-size: .93rem; margin: 0 0 1.5rem; }
.sn-login-form { text-align: left; display: flex; flex-direction: column; gap: .35rem; }
.sn-login-label {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sn-muted) !important; font-weight: 600; margin-top: .6rem;
}
.sn-login-form .form-control { padding: .7rem .85rem; font-size: 1rem; }
.sn-login-btn { margin-top: 1.1rem; padding: .75rem; font-size: 1rem; }
.sn-login-help { color: var(--sn-muted) !important; font-size: .86rem; margin: 1.25rem 0 0; line-height: 1.5; }
.sn-login-help a { color: var(--sn-accent) !important; }
.login .huge { display: none; }

/* nav-search-hide: no site search for candidates - one problem statement, nothing to find */
.navbar a[href='#navSearch'], .navbar .fa-search, .navbar [data-bs-target='#navSearch'], #navSearch, #search, .navbar .form-inline { display: none !important; }

/* ---------- home hero: banner first, card below it (no overlay) ----------
   Bootstrap's .carousel-caption is absolutely positioned over the slide, so the
   event card covered the middle of the banner and only a sliver of the wordmark
   showed above it. Put both in normal flow instead. */
.home-page .carousel, .home-page .carousel-inner, .home-page .carousel-item {
  border: 0 !important; box-shadow: none !important; background: var(--sn-ink) !important;
  position: relative;
}
.home-page .carousel-item > svg.bd-placeholder-img {
  position: static !important; display: block;
  width: 100% !important; height: auto !important;
  aspect-ratio: 16 / 5; max-height: 360px; margin: 0 auto;
  top: auto !important; left: auto !important; transform: none !important;
}
.home-page .carousel-item > .container { position: static; }
.home-page .carousel-caption {
  position: static !important; transform: none !important;
  padding: 1rem 0 0 !important; margin: 0; text-align: left;
  right: auto !important; left: auto !important; bottom: auto !important;
}
.home-page .carousel-caption .section-header-content { margin: 0 auto; }

/* ---------- typography: no web-font dependency ----------
   The Bootswatch theme imported Lato from Google Fonts; that import is stripped
   from the vendored copy so nothing loads from the internet at request time. */
html, body, .navbar, .btn, input, textarea, select, .form-control {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* ===================================================================
   One-page submission form
   Replaces the four-page wizard. Everything a candidate hands in is
   on /project/<id>/submit, asked as a plain labelled question.
   =================================================================== */

.sn-submit {
  max-width: 820px;
  margin: 0 auto 4rem;
  padding: 0 1rem;
}

.sn-submit-head h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 1.5rem 0 .5rem;
  color: var(--sn-text, #E7E8EF);
}

.sn-submit-head p {
  color: var(--sn-muted, #A2A7B9);
  margin-bottom: .5rem;
}

.sn-submit-status {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.sn-chip {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sn-chip-draft {
  background: #3A3A46;
  color: #D8DBE6;
}

.sn-chip-done {
  background: var(--sn-accent, #24DBC9);
  color: #0B1E1C;
}

.sn-submit-section {
  background: var(--sn-surface, #1F1F28);
  border: 1px solid var(--sn-line, #32323E);
  border-radius: 12px;
  padding: 1.5rem 1.5rem .5rem;
  margin-bottom: 1.5rem;
}

.sn-submit-section > h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--sn-text, #E7E8EF);
}

.sn-section-help {
  color: var(--sn-muted, #A2A7B9);
  font-size: .92rem;
  margin: 0 0 1.25rem;
}

.sn-field {
  margin-bottom: 1.5rem;
}

.sn-field label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: .2rem;
  color: var(--sn-text, #E7E8EF);
}

.sn-field-help {
  color: var(--sn-muted, #A2A7B9);
  font-size: .87rem;
  line-height: 1.45;
  margin: 0 0 .5rem;
}

.sn-submit .form-control {
  background: var(--sn-raised, #25252D);
  border: 1px solid var(--sn-line, #32323E);
  color: var(--sn-text, #E7E8EF);
  border-radius: 8px;
  padding: .6rem .8rem;
  box-shadow: none;
}

.sn-submit .form-control:focus {
  border-color: var(--sn-primary, #3C83F6);
  box-shadow: 0 0 0 3px rgba(60, 131, 246, .25);
  background: var(--sn-raised, #25252D);
  color: var(--sn-text, #E7E8EF);
}

.sn-submit textarea.form-control {
  line-height: 1.5;
  resize: vertical;
  min-height: 4.5rem;
}

.sn-field-error .form-control {
  border-color: #E5484D;
}

.sn-field-error-text {
  color: #FF8A8E;
  font-size: .87rem;
  margin: .35rem 0 0;
}

.sn-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.sn-check input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  flex: 0 0 auto;
  accent-color: var(--sn-accent, #24DBC9);
}

.sn-check label {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0;
  color: var(--sn-text, #E7E8EF);
}

.sn-submit-final {
  border-color: var(--sn-accent, #24DBC9);
}

.sn-submit-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 1.5rem;
}

.sn-submit-actions .btn-primary {
  padding: .6rem 1.6rem;
  font-weight: 600;
}

@media (max-width: 575px) {
  .sn-submit-section { padding: 1.1rem 1rem .25rem; }
  .sn-submit-head h1 { font-size: 1.6rem; }
}

/* Status line on a submission page: two states, no ladder. */
.sn-stage-note {
  color: var(--sn-muted, #A2A7B9);
  font-size: .92rem;
}

/* A long title must wrap as a paragraph, not one word per line.
   Candidates paste sentences into the title box, and dribdat renders the
   name again inside narrow flex and grid cells (the project footer bar,
   the card decks). Without a sane minimum those cells collapse to the
   width of the longest word. */
.project-name,
.project-title,
.jumbotron .project-headline h2,
.project-footer-controls,
.sn-stage-banner {
  overflow-wrap: anywhere;
  word-break: normal;
}

.card .project-title,
.project-list .project-title,
.honeycomb .project-title {
  min-width: 8rem;
}