/*
 * Competition POC pages (hub, registration, team registration, team submission)
 * and the reviewer dashboard shell. Tokens, components, GF and GravityView theming
 * come from the platform sheet (swft-platform/assets/swft-theme.css, handle
 * `swft-theme`, declared as this sheet's dependency). Only NSD-specific layout
 * lives here; everything is scoped to .nsd-hub / .nsd-review.
 */
.nsd-hub { max-width: 1100px; margin: 0 auto; padding: var(--swft-space-2) 0 var(--swft-space-6); }
.nsd-hub header { padding-bottom: var(--swft-space-5); }
.nsd-hub header h1 { margin: 0 0 var(--swft-space-2); }
.nsd-hub header p { max-width: 720px; margin: 0; }
.nsd-hub .nsd-account { font-size: .9rem; color: var(--swft-text-muted); margin: 0 0 var(--swft-space-4); }
.nsd-returning { background: var(--swft-surface-strong); border: 1px solid var(--swft-primary); border-radius: var(--swft-radius-card); padding: var(--swft-space-3) var(--swft-space-4); margin: 0 0 var(--swft-space-5); }
/* Registration page, signed-in state: the short message is centered both ways.
   Vertical centering comes from the page-app template (main is a flex column,
   justify-content: center); the shell's and header's bottom padding would sit
   it above center, so the shell gets equal top/bottom padding here. */
.nsd-hub:has(> .nsd-signed-in) { padding-bottom: var(--swft-space-2); }
.nsd-hub header.nsd-signed-in { padding-bottom: 0; text-align: center; }
.nsd-hub header.nsd-signed-in p { margin-left: auto; margin-right: auto; }
.nsd-hub header.nsd-signed-in p:last-child { margin-top: var(--swft-space-4); }

/* Competition Resources (SPA-277): two shapes for two kinds of content. Guides
   are cover tiles (.nsd-tiles, no group heading); lesson plans are a table with
   the lesson on the left and its files as chips on the right (.nsd-lesson-table,
   on the platform .swft-table). The plain row layouts below stay for filters that
   add groups with the 'list' / 'lessons' styles. */
.nsd-hub .nsd-resource-group + .nsd-resource-group { margin-top: var(--swft-space-5); }
.nsd-hub .nsd-resource-group h3 { margin: 0 0 var(--swft-space-3); font-size: 1.1rem; }
.nsd-hub .nsd-resource-group > p { margin: 0 0 var(--swft-space-3); color: var(--swft-text-muted); }
.nsd-hub .nsd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--swft-space-4); margin: var(--swft-space-3) 0 0; }
.nsd-hub .nsd-tile { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--swft-border); background: var(--swft-card); color: inherit; text-decoration: none; transition: border-color var(--swft-transition); }
.nsd-hub .nsd-tile:hover, .nsd-hub .nsd-tile:focus-visible { border-color: var(--swft-border-strong); text-decoration: none; }
.nsd-hub .nsd-tile__cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 927; object-fit: cover; object-position: top; border-bottom: 1px solid var(--swft-border); background: var(--swft-surface-alt); }
.nsd-hub .nsd-tile__cover--pending { display: grid; place-items: center; color: var(--swft-text-muted); font-weight: 600; letter-spacing: .04em; }
.nsd-hub .nsd-tile__body { display: flex; flex-direction: column; gap: var(--swft-space-1); flex: 1 1 auto; padding: var(--swft-space-3) var(--swft-space-4); }
.nsd-hub .nsd-tile__title { font-weight: 600; color: var(--swft-ink); }
.nsd-hub .nsd-tile__desc { color: var(--swft-text-muted); font-size: .9rem; }
.nsd-hub .nsd-tile__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--swft-space-2); margin-top: auto; padding-top: var(--swft-space-2); }
.nsd-hub .nsd-tile__cta { color: var(--swft-link); font-size: .95rem; }
.nsd-hub .nsd-lesson-table-wrap { overflow-x: auto; }
.nsd-hub .nsd-lesson-table td.nsd-lesson__about { width: 34%; }
.nsd-hub .nsd-lesson-table h4 { margin: 0 0 var(--swft-space-1); font-size: 1rem; }
.nsd-hub .nsd-lesson-table p { margin: 0; color: var(--swft-text-muted); font-size: .9rem; }
.nsd-hub .nsd-files { display: flex; flex-wrap: wrap; gap: var(--swft-space-2); margin: 0; padding: 0; list-style: none; }
.nsd-hub .nsd-files li { margin: 0; }
.nsd-hub .nsd-files a { display: inline-flex; align-items: center; gap: var(--swft-space-2); border: 1px solid var(--swft-border); background: var(--swft-card); padding: .35rem .7rem; color: var(--swft-ink); text-decoration: none; }
.nsd-hub .nsd-files a:hover, .nsd-hub .nsd-files a:focus-visible { border-color: var(--swft-border-strong); }
.nsd-hub .nsd-files .swft-resources__badge { font-size: .7rem; padding: .15em .5em; }
.nsd-hub .nsd-lesson { margin: 0 0 var(--swft-space-4); padding-left: var(--swft-space-3); border-left: 2px solid var(--swft-border); }
.nsd-hub .nsd-lesson:last-child { margin-bottom: 0; }
.nsd-hub .nsd-lesson h4 { margin: 0 0 var(--swft-space-1); font-size: 1rem; }
.nsd-hub .nsd-lesson > p { margin: 0 0 var(--swft-space-2); font-size: .95rem; color: var(--swft-text-muted); }
.nsd-hub .nsd-lesson .swft-resources li:last-child { margin-bottom: 0; }

/* Document rows with a first-page preview (generated by WordPress on upload): the
   image sits at the left edge of the platform row, the name takes the remaining
   width, the badge keeps its place at the right. Rows without a preview are untouched. */
.nsd-hub .swft-resources__item--thumb a { align-items: center; }
.nsd-hub .swft-resources__thumb { flex: 0 0 auto; width: 64px; height: auto; max-height: 84px; object-fit: cover; object-position: top; border: 1px solid var(--swft-border); border-radius: var(--swft-radius); background: var(--swft-card); }
.nsd-hub .swft-resources__item--thumb .swft-resources__name { flex: 1 1 auto; }

/* Reviewer dashboard: the rubric form row in the single-entry view has no label
   (replaces the page script that removed the <th> and colspanned the cell). */
/* The row id carries the team form's id (gv-field-{form}-gravity_forms), which differs
   per environment, so match the suffix. The single-entry table is laid out as flex rows
   (see "Scoring view" below), so this row can drop its label cell and span the full width. */
.nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content tr[id$="-gravity_forms"] { display: block; }
.nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content tr[id$="-gravity_forms"] th { display: none; }
.nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content tr[id$="-gravity_forms"] td { display: block; width: auto; padding: var(--swft-space-5) 0 0; }

/* Scoring view (SPA-413): form 9 inside the reviewer view's single-entry layout.
   Markup from includes/class-scoring-view.php; tokens from the platform sheet. */
/* Submission block (GV single-entry table: .gv-table-single-container > table.gv-table-view-content,
   one <tr><th>label<td>value per field). Rows are flex boxes rather than table rows: the label
   column keeps a fixed width, the value column takes the rest, a wide embed can never widen the
   table, and the form row above can span both. GV's theme addresses these with
   .gv-table-single-container.gv-themed table.gv-table-view-content … (0,3,x); same prefix here.
   WordPress sets inline widths on video embeds; max-width wins over them. */
.nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content,
.nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content tbody { display: block; width: 100%; }
.nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content tr { display: flex; align-items: flex-start; }
.nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content th { flex: 0 0 11rem; width: 11rem; color: var(--swft-text-muted); font-weight: 600; font-size: .85rem; }
.nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content td { flex: 1 1 auto; min-width: 0; width: auto; }
.nsd-review .gv-table-single-container img,
.nsd-review .gv-table-single-container video,
.nsd-review .gv-table-single-container .wp-video,
.nsd-review .gv-table-single-container .mejs-container { max-width: 100%; height: auto; }
/* Instructions open the form. */
.nsd-review .nsd-scoring { margin: 0 0 var(--swft-space-5); padding: var(--swft-space-4) var(--swft-space-5); border: 1px solid var(--swft-border); border-radius: var(--swft-radius-card); background: var(--swft-surface-alt); }
.nsd-review .nsd-scoring__title { margin: 0 0 var(--swft-space-2); font-size: 1.25rem; }
.nsd-review .nsd-scoring__state { margin: 0 0 var(--swft-space-3); }
.nsd-review .nsd-scoring__state--update strong { color: var(--swft-primary-dark); }
.nsd-review .nsd-scoring__steps { margin: 0; padding-left: 1.25em; }
.nsd-review .nsd-scoring__steps li { margin: 0 0 var(--swft-space-1); }
/* Each criterion: heading + intro from the authored HTML, then the band list. */
.nsd-review .gfield.nsd-rubric { margin-top: var(--swft-space-4); }
.nsd-review .gfield.nsd-rubric h3 { margin: 0 0 var(--swft-space-1); font-size: 1.1rem; color: var(--swft-primary-dark); }
.nsd-review .gfield.nsd-rubric h3 + p { margin: 0 0 var(--swft-space-3); color: var(--swft-text-muted); }
.nsd-review .nsd-bands { display: flex; flex-direction: column; gap: var(--swft-space-2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.nsd-review .nsd-band { --band: var(--swft-primary); --band-ink: var(--sf-white); display: flex; align-items: center; gap: var(--swft-space-3); padding: var(--swft-space-2) var(--swft-space-3); border: 1px solid var(--swft-border); border-radius: var(--swft-radius); background: color-mix(in srgb, var(--band) 6%, var(--swft-card)); }
.nsd-review .nsd-band__points { flex: 0 0 6.5rem; padding: .2em .5em; border-radius: var(--swft-radius); background: var(--band); color: var(--band-ink); font-weight: 600; font-size: .85rem; letter-spacing: .03em; text-align: center; white-space: nowrap; }
.nsd-review .nsd-band__unit { font-weight: 500; opacity: .85; }
.nsd-review .nsd-band__body { flex: 1 1 auto; font-size: .9rem; line-height: 1.5; }
.nsd-review .nsd-band__name { display: block; color: var(--swft-primary-dark); }
.nsd-review .nsd-band__text { color: var(--swft-text-muted); }
.nsd-review .nsd-band--1 { --band: var(--swft-success); }
.nsd-review .nsd-band--2 { --band: var(--swft-primary); }
.nsd-review .nsd-band--3 { --band: var(--swft-warning); --band-ink: var(--swft-on-warning); }
.nsd-review .nsd-band--4 { --band: var(--swft-primary-dark); }
.nsd-review .nsd-band--5 { --band: var(--swft-danger); }
/* The score box under its bands: a visible label, a short wide input, the GF range hint kept. */
.nsd-review .gfield.nsd-score { margin-top: var(--swft-space-3); padding: var(--swft-space-3) var(--swft-space-4); border: 1px solid var(--swft-border); border-radius: var(--swft-radius); background: var(--swft-card); }
.nsd-review .nsd-score__label { display: flex; align-items: baseline; gap: var(--swft-space-2); margin: 0 0 var(--swft-space-2); font-weight: 600; color: var(--swft-ink); }
.nsd-review .nsd-score__range { font-weight: 500; font-size: .85rem; color: var(--swft-text-muted); }
.nsd-review .gfield.nsd-score .ginput_container_number input { width: 7rem; font-size: 1.25rem; font-weight: 600; text-align: center; }
.nsd-review .gfield.nsd-score .gfield_description { margin-top: var(--swft-space-1); font-size: .8rem; color: var(--swft-text-muted); }
/* Sections between criteria are dividers only. */
.nsd-review .gfield.gsection { margin: var(--swft-space-5) 0 0; padding: 0; border-bottom: 1px solid var(--swft-border); }
/* Total: read-only calculated field shown as a figure. */
.nsd-review .gfield.nsd-score-total { margin-top: var(--swft-space-5); padding: var(--swft-space-3) var(--swft-space-4); border-radius: var(--swft-radius); background: var(--swft-surface-strong); }
.nsd-review .gfield.nsd-score-total .gfield_label { font-size: 1rem; font-weight: 600; color: var(--swft-primary-dark); }
.nsd-review .gfield.nsd-score-total .ginput_container_number input { width: 7rem; font-size: 1.5rem; font-weight: 600; text-align: center; border-color: transparent; background: var(--swft-card); color: var(--swft-ink); }
.nsd-review .nsd-score-total__hint { margin: var(--swft-space-1) 0 0; font-size: .85rem; color: var(--swft-text-muted); }
.nsd-review .gfield.nsd-feedback { margin-top: var(--swft-space-4); }
.nsd-review .gfield.nsd-feedback textarea { min-height: 9rem; }
/* "Review saved" notice above the assignments list. */
.nsd-review .nsd-review-saved { margin: 0 0 var(--swft-space-4); }
.nsd-review .nsd-review-saved p { margin: 0; }
@media (max-width: 640px) {
  /* The whole table goes block so a wide embed can no longer set the column width. */
  /* Rows stack (label over value); GV's container and cell side padding go. */
  .nsd-review .gv-table-single-container.gv-themed { padding-left: 0; padding-right: 0; }
  .nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content tr { flex-direction: column; }
  .nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content th,
  .nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content td { flex: 0 0 auto; width: auto; max-width: 100%; padding-left: 0; padding-right: 0; }
  .nsd-review .gv-table-single-container.gv-themed table.gv-table-view-content th { padding-bottom: 0; border-bottom: 0; }
  .nsd-review .gv-table-single-container .mejs-container { height: auto; aspect-ratio: 16 / 9; }
  .nsd-review .nsd-band { flex-direction: column; gap: var(--swft-space-1); }
  .nsd-review .nsd-band__points { flex-basis: auto; align-self: flex-start; }
  .nsd-review .nsd-scoring { padding: var(--swft-space-3) var(--swft-space-4); }
}
/* Overall rating scale under the total (data/judging-rubric.json). */
.nsd-review .nsd-overall { display: flex; flex-wrap: wrap; gap: var(--swft-space-1) var(--swft-space-4); margin: var(--swft-space-2) 0 0; font-size: .85rem; }
.nsd-review .nsd-overall__row { display: flex; gap: .4em; }
.nsd-review .nsd-overall dt { margin: 0; font-weight: 600; color: var(--swft-primary-dark); white-space: nowrap; }
.nsd-review .nsd-overall dd { margin: 0; color: var(--swft-text-muted); }