/* IW302_adhoc.css
 *
 * Purpose: all styling for out-of-sequence ("ad-hoc") release boxes in the
 * Overall Project Progress bar. Loaded alongside rn.css, never merged into
 * it — per the file-isolation rule locked for this Epic (IW-302 Tech Spec
 * Section 4 / ADR-001): a defect here can never regress the existing,
 * validated .stage.completed/.active/.upcoming rendering.
 *
 * rn.css is not edited by this file's existence — the only change anywhere
 * in the existing template is the single <link> tag that loads this file.
 *
 * Design: color signals what actually happened (completed/active/upcoming),
 * a small folded-corner flag signals it happened out of sequence — two
 * independent signals, matching the BRD's locked decision.
 *
 * Verified against the live rn.css before writing this file — desktop uses
 * a solid background-color on .stage, but mobile (<= 600px) switches
 * .stage to background: transparent and signals status via a colored
 * ::before dot instead. Both paths are covered below to match exactly.
 *
 * Date coded: 10 August 2026 (IW-302, Story 7)
 *
 * UPDATED 11 August 2026 (Story 8 polish, IW-310):
 *   - Removed the three .stage.prioritised.completed/.active/.upcoming
 *     background-color overrides. Locked design change: prioritised boxes
 *     now keep their ORIGINAL completed/active/upcoming color (gold/teal/
 *     grey) — the color's meaning never changed, so it shouldn't look
 *     different. Only the corner flag below signals "out of sequence".
 *   - Removed the .stage.prioritised opacity:1 override for the same
 *     reason — a prioritised box should be visually identical to a normal
 *     one apart from the flag, not stand out on its own.
 *   - Removed the old text-pill badge rule (previously commented out,
 *     superseded by the corner flag) and its mobile repositioning rule —
 *     dead code, deleted rather than left commented.
 *   - Shrunk the corner flag itself (8px -> 6px) so it reads as a quiet
 *     "out of sequence" marker instead of dominating the box.
 *   - 6px turned out to be too quiet in practice (barely visible against
 *     the box colors) — resized again to 11px and darkened slightly
 *     (#556F72 -> #3E5457) for legibility while staying a small corner
 *     mark, not a competing badge.
 *   - Added a 4th legend entry ("Prioritised") so the flag's meaning is
 *     explained now that there's no text on the badge itself. Reuses
 *     rn.css's own .progress-legend-item / .progress-legend-swatch
 *     pattern for visual consistency, but the new .is-prioritised swatch
 *     variant is a small triangle (not the circle the other 3 use) so it
 *     visually matches the actual corner flag it's explaining. This rule
 *     lives here, not in rn.css — the file-isolation rule is about not
 *     touching the existing CSS file; the legend ITEM markup itself still
 *     has to be added to the shared legend container in the HTML template
 *     (there's only one legend row) — see the note where .progress-legend
 *     is rendered for the one-line markup addition needed there.
 */

/* Prioritised (out-of-sequence) marker: a small folded-corner flag in the
 * box's top-right corner. No color or opacity change vs. a normal box —
 * see 11-08-2026 note above. position:relative + overflow:hidden let the
 * ::after triangle clip cleanly to the box's corner. */
.stage.prioritised {
  position: relative;
  overflow: hidden;
}

.stage.prioritised::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  /* Flag size = these two border widths (equal = a clean 45° corner).
   * 11-08-2026: bumped 6px -> 11px — 6px was reading as basically
   * invisible against the box colors in practice. Adjust both values
   * together to resize; keep them equal to keep the 45° angle. */
  border-top: 11px solid #3E5457;
  border-left: 11px solid transparent;
}

/* Mobile (<= 600px, matches rn.css's own breakpoint exactly): .stage
 * becomes background: transparent and status is signalled by a colored
 * ::before dot, not a background rectangle. The corner flag above still
 * applies unchanged here (no background/color override needed — same
 * 11-08-2026 decision as desktop). */
@media (max-width: 600px) {
  .stage.prioritised {
    font-weight: 600;
  }
}

/* Legend entry for the corner flag — added 11-08-2026 (Story 8 polish).
 * Base .progress-legend-item / .progress-legend-swatch rules come from
 * rn.css; this only adds the new "is-prioritised" swatch variant, a small
 * triangle instead of the circle the other 3 statuses use, so the legend
 * mark matches the real flag shape on the box. Insert the matching HTML
 * item into the existing .progress-legend container in the template —
 * see markup below the rule. */
.progress-legend-swatch.is-prioritised {
  width: 10px;
  height: 10px;
  border-radius: 0;
  border: none;
  background: transparent;
  position: relative;
}

.progress-legend-swatch.is-prioritised::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid #3E5457;
  border-left: 10px solid transparent;
}

/*
 * HTML to add inside the existing .progress-legend container, after the
 * "Upcoming" item, wherever that legend markup is rendered in the page
 * template (not in this CSS file — CSS can't add DOM elements):
 *
 *   <span class="progress-legend-item">
 *     <span class="progress-legend-swatch is-prioritised"></span>Prioritised
 *   </span>
 */