/* The Daily Wave's own styles, scoped under .dw so they don't touch the rest of the website or portal.
   Pages wrap the app in <div class="dw">; dialogs, messages and the print area carry the class too. */
/* ==========================================================================
   THE DAILY WAVE — AJ2028 NSW Contingent Newsletter
   Design System — AJ2028 NSW Contingent Brand Kit
   Brand colours from cuboree.nsw.scouts.com.au/aj2028/
   Primary:   #00B5CC (teal), #28265C (navy), #FF0D40 (waratah-red)
   Secondary: #0CAE4B (scouts-green)
   Neutrals:  #1B1A33 (ink), #FBFDFE (paper), #D8EEF2 (line)
   Fonts:     Baloo 2 (display), Nunito Sans (body)
   ========================================================================== */

/* ---------- Design Tokens ---------- */
.dw {
  /* AJ2028 NSW Contingent Brand Colours (from cuboree.nsw.scouts.com.au/aj2028/) */
  --aj-teal: #00B5CC;
  --aj-teal-deep: #048A9C;
  --aj-navy: #28265C;
  --aj-waratah: #FF0D40;
  --aj-green: #0CAE4B;
  --aj-ink: #1B1A33;
  --aj-paper: #FBFDFE;
  --aj-line: #D8EEF2;
  /* Legacy aliases (mapped to brand equivalents for backward compatibility) */
  --aj-purple: var(--aj-teal);
  --aj-magenta: var(--aj-waratah);
  --aj-yellow: var(--aj-green);
  --aj-cyan: var(--aj-teal);
  --aj-red: var(--aj-waratah);
  --aj-orange: var(--aj-green);
  --aj-light-blue: var(--aj-line);

  /* Semantic */
  --brand: var(--aj-teal);
  --brand-dark: var(--aj-navy);
  --brand-deep: var(--aj-teal-deep);
  --brand-accent: var(--aj-waratah);
  --brand-bright: var(--aj-teal);
  --brand-warm: var(--aj-green);
  --brand-alert: var(--aj-waratah);
  --brand-orange: var(--aj-green);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--aj-navy) 0%, var(--aj-teal) 100%);
  --grad-wave: linear-gradient(135deg, var(--aj-teal) 0%, var(--aj-line) 50%, var(--aj-teal) 100%);
  --grad-sunset: linear-gradient(135deg, var(--aj-green) 0%, var(--aj-waratah) 100%);
  --grad-hero: linear-gradient(135deg, var(--aj-navy) 0%, #1f1d45 40%, var(--aj-teal) 100%);
  --grad-cyan: linear-gradient(135deg, var(--aj-teal) 0%, #0095ab 100%);
  --grad-yellow: linear-gradient(135deg, var(--aj-green) 0%, #099c42 100%);

  /* Neutrals */
  --ink: var(--aj-ink);
  --text: #2d2c4a;
  --muted: #7a7990;
  --line: var(--aj-line);
  --line-strong: #b6e2ea;
  --bg: var(--aj-paper);
  --bg-card: #ffffff;
  --bg-soft: #eef8fa;
  --bg-dark: var(--aj-navy);

  /* Status */
  --ok: var(--aj-green);
  --ok-bg: #dafbe1;
  --warn: #d29922;
  --warn-bg: #fff8c5;
  --err: var(--aj-waratah);
  --err-bg: #ffe6eb;
  --info: var(--aj-teal);
  --info-bg: #e3f6f9;

  /* Accessibility-enhanced colour variants.
     The brand teal #00B5CC and green #0CAE4B are too light for white text
     (contrast ratios of 2.48:1 and 2.93:1 — below even the 3:1 large-text
     threshold).  These darker variants are used for button backgrounds and
     text so that white-on-colour meets WCAG AA (≥4.5:1 for normal text). */
  --aj-teal-a11y: #006B7B;      /* white-on-this ≈ 5.8:1 ✅ AA */
  --aj-teal-deep-a11y: #035867; /* white-on-this ≈ 6.5:1 ✅ AA */
  --aj-green-a11y: #0A7A33;     /* white-on-this ≈ 5.1:1 ✅ AA */
  --aj-warn-fg: #8a6700;        /* on #fff8c5 ≈ 5.2:1 ✅ AA */
  --aj-ok-fg: #0A6B2B;          /* on #dafbe1 ≈ 5.0:1 ✅ AA */
  --aj-err-fg: #C70036;         /* on #ffe6eb ≈ 4.9:1 ✅ AA */
  --aj-muted-a11y: #6b6a82;     /* on white ≈ 5.4:1 ✅ AA (was 4.23:1) */

  /* Spacing & Shape */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 3px rgba(40,38,92,.08);
  --shadow: 0 4px 12px rgba(40,38,92,.12);
  --shadow-lg: 0 10px 36px rgba(40,38,92,.18);
  --shadow-xl: 0 20px 60px rgba(40,38,92,.25);

  /* Typography */
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Baloo 2', 'Arial Black', 'Helvetica', sans-serif;

  /* Layout */
  --sidebar-w: 250px;
  --header-h: 60px;
  --content-max: 1200px;
}

/* ---------- Reset ---------- */
.dw *, .dw *::before, .dw *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Use 100% so the browser's font-size preference (and minimum-font-size
   setting) is respected. A fixed 15px capped scaling for low-vision users. */
.dw { font-size: 100%; -webkit-text-size-adjust: 100%; }
/* Body base font set in rem so it scales with the html root above. */
.dw { font-size: 0.9375rem; }
.dw {
  font-family: var(--font-body);
  color: var(--text);
  /* v2.7: clean white page over the new teal wave band pinned to the
     bottom of the screen (from the supplied "Daily Wave background.png") */
  background: #ffffff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.dw a { color: var(--brand); text-decoration: none; }
.dw a:hover { text-decoration: underline; }
.dw img { max-width: 100%; display: block; }
.dw button { font-family: inherit; cursor: pointer; border: none; background: none; }
.dw input, .dw textarea, .dw select { font-family: inherit; font-size: inherit; }
.dw table { border-collapse: collapse; width: 100%; }

/* ---------- Typography ---------- */
.dw h1, .dw h2, .dw h3, .dw h4 { color: var(--ink); line-height: 1.25; font-weight: 800; }
.dw h1 { font-size: 1.7rem; }
.dw h2 { font-size: 1.35rem; }
.dw h3 { font-size: 1.12rem; }
.dw h4 { font-size: .95rem; }
.dw p { margin-bottom: .6em; }
.dw .text-sm { font-size: .85rem; }
.dw .text-xs { font-size: .75rem; }
.dw .muted { color: var(--muted); }
.dw .center { text-align: center; }
.dw .mb-2 { margin-bottom: .5rem; }
.dw .mb-3 { margin-bottom: .75rem; }
.dw .mb-4 { margin-bottom: 1rem; }
.dw .mb-6 { margin-bottom: 1.5rem; }
.dw .mt-2 { margin-top: .5rem; }
.dw .mt-4 { margin-top: 1rem; }
.dw .mt-6 { margin-top: 1.5rem; }

/* ---------- Wave SVG Decoration (reusable) ---------- */
.dw .wave-divider { width: 100%; height: 40px; display: block; }
.dw .wave-divider svg { width: 100%; height: 100%; display: block; }

/* ---------- Buttons ---------- */
.dw .btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--r-sm);
  font-weight: 700; font-size: .88rem; white-space: nowrap;
  transition: all .2s; border: 1.5px solid transparent;
  position: relative;
}
.dw .btn svg { flex-shrink: 0; }
.dw .btn-primary { background: var(--aj-teal-a11y); color: #fff; box-shadow: 0 2px 8px rgba(0,107,123,.3); }
.dw .btn-primary:hover { background: var(--aj-teal-deep-a11y); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,107,123,.4); }
.dw .btn-dark { background: var(--brand-dark); color: #fff; }
.dw .btn-dark:hover { background: #221a4a; transform: translateY(-1px); }
.dw .btn-accent { background: var(--brand-accent); color: #fff; box-shadow: 0 2px 8px rgba(255,13,64,.3); }
.dw .btn-accent:hover { background: #d10078; transform: translateY(-1px); }
.dw .btn-cyan { background: var(--aj-teal-a11y); color: #fff; font-weight: 800; }
.dw .btn-cyan:hover { background: var(--aj-teal-deep-a11y); transform: translateY(-1px); }
.dw .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.dw .btn-ghost:hover { background: var(--bg-soft); border-color: var(--brand); }
.dw .btn-sm { padding: 8px 14px; font-size: .8rem; }
.dw .btn-lg { padding: 14px 28px; font-size: 1rem; }
.dw .btn-block { width: 100%; justify-content: center; }
.dw .btn-icon { padding: 10px; min-width: 40px; min-height: 40px; }
.dw .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.dw .btn-facebook { background: #1877F2; color: #fff; }
.dw .btn-facebook:hover { background: #166fe5; }
.dw .btn-social { background: var(--brand-dark); color: #fff; }
.dw .btn-social:hover { background: #221a4a; }

/* ---------- Forms ---------- */
.dw .field { margin-bottom: 1.1rem; }
.dw .field-label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .35rem; color: var(--ink); }
.dw .field-label .req { color: var(--brand-alert); }
.dw .field-hint { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.dw .input, .dw .textarea, .dw .select {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm); background: #fff; color: var(--text);
  transition: border .15s, box-shadow .15s;
}
.dw .input:focus, .dw .textarea:focus, .dw .select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,181,204,.25);
}

/* ---------- Global keyboard focus indicator ---------- */
/* WCAG 2.4.7 (Focus Visible) — keyboard users must see where they are.
   Using :focus-visible so the outline only appears for keyboard navigation,
   not mouse clicks.  Using outline (not box-shadow) because box-shadow is
   stripped in forced-colours / High Contrast mode. */
.dw :focus-visible {
  outline: 3px solid var(--aj-teal-deep-a11y);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Ensure the outline is visible even on dark backgrounds (sidebar, header) */
.dw .sidebar :focus-visible,
.dw .header :focus-visible,
.dw .btn-dark:focus-visible,
.dw .btn-primary:focus-visible {
  outline-color: #fff;
  outline-offset: 1px;
}
/* Don't let any element remove the outline for keyboard users */
.dw *:focus-visible { outline-style: solid !important; }
.dw .textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.dw .input.error, .dw .textarea.error { border-color: var(--err); }
.dw .field-error { font-size: .78rem; color: var(--err); margin-top: .25rem; }

/* ---------- Layout Shell ---------- */
.dw .app-shell { display: flex; min-height: 100vh; }

/* v2.7 site footer — turquoise brand band + gray base (matches supplied Footer.png) */
.dw .site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 0; pointer-events: none;
}
.dw .site-footer-band {
  display: flex; align-items: center; justify-content: space-between;
  background: #00B4CD; border-top: 1px solid rgba(255,255,255,.25);
  padding: 10px 24px; min-height: 44px;
}
.dw .site-footer-band .sf-brand {
  font-family: var(--font-display, var(--font-body));
  font-weight: 800; font-size: .95rem; color: #28265C; white-space: nowrap;
}
.dw .site-footer-band .sf-tagline {
  font-weight: 700; font-size: .82rem; color: #28265C; white-space: nowrap;
}
.dw .site-footer-band .sf-email {
  font-size: .78rem; font-weight: 600; color: #28265C; text-decoration: underline;
  text-underline-offset: 2px; pointer-events: auto; word-break: break-all;
}
.dw .site-footer-band .sf-email:hover { color: #fff; }
.dw .site-footer-base { height: 18px; background: #606060; }
/* Teal wave band from the supplied background artwork, pinned above the footer */
.dw .site-wave-footer {
  position: fixed; bottom: 62px; left: 0; right: 0; height: 34vh;
  background: url('../assets/dailywave-waves.jpg') no-repeat center bottom / cover;
  z-index: 0; pointer-events: none; opacity: 0.75;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 100%);
}
/* Ensure main content sits above the footer decoration */
.dw .main { position: relative; z-index: 1; }
/* Editor surfaces keep an opaque backdrop so text stays readable over the waves */
.dw .card, .dw .builder-section, .dw .stat-card, .dw .notice-list .notice-item, .dw .qa-card {
  position: relative;
}
/* Sidebar wave strip removed per user request */
.dw .sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--brand-dark);
  background-image:
    radial-gradient(ellipse at top, rgba(0,181,204,.25), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(0,181,204,.1), transparent 50%);
  color: #c4b8d8; display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 100;
  overflow-y: auto;
}
.dw .sidebar-brand {
  padding: 16px 18px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dw .sidebar-brand .brand-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--aj-cyan), var(--aj-purple));
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; font-size: .65rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,181,204,.3);
}
.dw .sidebar-brand .brand-text { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: .95rem; line-height: 1.1; }
.dw .sidebar-brand .brand-sub { font-size: .65rem; color: var(--aj-teal); font-weight: 600; }
.dw .sidebar-brand img { background: #fff; border-radius: 8px; padding: 2px; }

.dw .sidebar-wave { height: 6px; background: linear-gradient(90deg, var(--aj-cyan), var(--aj-light-blue), var(--aj-cyan)); }

.dw .nav-section { padding: 12px 0; }
.dw .nav-section-title {
  padding: 4px 18px; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: rgba(196,184,216,.5);
}
.dw .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; font-size: .88rem; font-weight: 600; color: #c4b8d8;
  cursor: pointer; transition: all .15s; border-left: 3px solid transparent;
  width: 100%; text-align: left;
}
.dw .nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.dw .nav-item.active { background: rgba(0,181,204,.3); color: #fff; border-left-color: var(--aj-cyan); }
.dw .nav-item .nav-icon { flex-shrink: 0; opacity: .8; }
.dw .nav-item .nav-badge {
  margin-left: auto; background: var(--brand-accent); color: #fff;
  font-size: .7rem; font-weight: 800; padding: 1px 7px; border-radius: 10px;
}
.dw .nav-deadline {
  margin: 16px; padding: 14px; border-radius: var(--r);
  background: linear-gradient(135deg, rgba(0,181,204,.3), rgba(0,181,204,.15));
  border: 1px solid rgba(0,181,204,.3);
}
.dw .nav-deadline .dl-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; color: var(--aj-yellow); letter-spacing: .06em; }
.dw .nav-deadline .dl-time { font-size: 1.5rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.dw .nav-deadline .dl-sub { font-size: .72rem; color: #c4b8d8; }

.dw .main-area { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; padding-bottom: 84px; }
/* v2.7 header — navy "AJ28 NOW" banner (matches supplied Header.png) */
.dw .header {
  height: var(--header-h); background: #262661; border-bottom: none;
  display: flex; align-items: center; padding: 0 20px; gap: 12px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 10px rgba(38,38,97,.35);
}
.dw .header-brand { display: flex; align-items: center; text-decoration: none; margin-left: 2px; }
.dw .header-brand:hover { text-decoration: none; }
.dw .header-brand-img {
  height: 34px; width: auto; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.dw .btn-header-login {
  background: #fff; color: var(--aj-navy); font-weight: 700;
  border: 1px solid rgba(255,255,255,.5);
}
.dw .btn-header-login:hover { background: var(--aj-teal); color: #fff; border-color: transparent; }
.dw .btn-header-login:focus-visible { outline-color: #fff; outline-offset: 1px; }
.dw .header .menu-toggle { display: none; color: #fff; border-color: rgba(255,255,255,.35); }
.dw .header .menu-toggle:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.dw .header-spacer { flex: 1; }
/* Ghost buttons inside the dark navy header need light-on-dark colours */
.dw .header .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.dw .header .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.dw .header .btn-ghost:focus-visible { outline-color: #fff; outline-offset: 1px; }
.dw .header .user-name { color: #fff; }
.dw .header .role-badge { background: rgba(255,255,255,.15); color: #d8f7fa; }
.dw .user-chip { display: flex; align-items: center; gap: 10px; }
.dw .user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-brand); color: #fff; font-weight: 800; font-size: .78rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,181,204,.3);
}
.dw .user-name { font-weight: 700; font-size: .88rem; color: var(--ink); }
.dw .role-badge {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  background: var(--bg-soft); color: var(--brand); padding: 2px 8px; border-radius: 4px;
}
.dw .main { padding: 24px 24px 24px 24px; max-width: var(--content-max); width: 100%; margin: 0 auto; flex: 1; position: relative; z-index: 1; }

.dw .page-head { margin-bottom: 1.5rem; }
.dw .page-title { font-size: 1.6rem; font-weight: 900; }
.dw .page-subtitle { color: var(--muted); font-size: .92rem; margin-top: .2rem; }

/* ---------- Cards ---------- */
.dw .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.dw .card-pad { padding: 18px; }
.dw .card-hover:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-1px); transition: all .2s; }
.dw .card-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.dw .card-head h3 { font-size: 1rem; }

/* ---------- Stats / KPIs ---------- */
.dw .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 1.5rem; }
.dw .stat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.dw .stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.dw .stat-card .stat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
.dw .stat-card .stat-value { font-size: 2rem; font-weight: 900; color: var(--ink); line-height: 1.1; margin-top: 4px; }
.dw .stat-card.accent::before { background: var(--brand); }
.dw .stat-card.accent-cyan::before { background: var(--aj-cyan); }
.dw .stat-card.accent-yellow::before { background: var(--aj-yellow); }
.dw .stat-card.accent-magenta::before { background: var(--brand-accent); }
.dw .stat-card.accent-red::before { background: var(--aj-red); }
.dw .stat-card.accent-orange::before { background: var(--aj-orange); }

/* ---------- Tables ---------- */
.dw .tbl { width: 100%; }
.dw .tbl th { text-align: left; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); }
.dw .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.dw .tbl tr:hover td { background: var(--bg-soft); }

/* ---------- Status Pills ---------- */
.dw .pill { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; }
.dw .pill-new { background: var(--info-bg); color: #0a6e7e; }
.dw .pill-checked { background: #dff0d8; color: #276f31; border: 1px solid #b6ddb6; }
.dw .pill-selected { background: var(--ok-bg); color: #1a7f37; font-weight: 700; }
.dw .pill-rejected { background: var(--err-bg); color: #cf222e; }
.dw .pill-hold { background: var(--warn-bg); color: #9a6700; }
.dw .pill-info { background: #e0f0f3; color: var(--aj-teal-deep-a11y); }
.dw .pill-published { background: var(--aj-navy); color: var(--aj-yellow); }
.dw .pill-archived { background: #e8e8ee; color: #6b6a80; }

/* ---------- Grid ---------- */
.dw .grid { display: grid; gap: 12px; }
.dw .grid-2 { grid-template-columns: repeat(2, 1fr); }
.dw .grid-3 { grid-template-columns: repeat(3, 1fr); }
.dw .grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Deadline Banner ---------- */
.dw .deadline-banner {
  background: var(--grad-brand); color: #fff; border-radius: var(--r);
  padding: 18px 22px; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow);
}
.dw .deadline-banner .dl-icon { font-size: 1.8rem; flex-shrink: 0; }
.dw .deadline-banner .dl-title { font-weight: 800; font-size: 1rem; }
.dw .deadline-banner .dl-text { font-size: .85rem; opacity: .9; }
.dw .deadline-banner.urgent { background: linear-gradient(135deg, var(--brand-alert), #cc0a32); }

/* ---------- Event Mode Banner ---------- */
.dw .mode-banner {
  border-radius: var(--r); padding: 18px 22px; margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow); color: #fff; position: relative; overflow: hidden;
}
.dw .mode-banner::after {
  /* wave removed from inside the box per user request */
  display: none;
}
.dw .mode-banner.mode-pre-jamboree { background: linear-gradient(135deg, var(--aj-green) 0%, #099c42 100%); }
.dw .mode-banner.mode-meet-camp { background: linear-gradient(135deg, var(--aj-teal-deep) 0%, var(--aj-teal) 100%); }
.dw .mode-banner.mode-jamboree { background: var(--grad-brand); }
.dw .mode-banner.mode-post-jamboree { background: linear-gradient(135deg, var(--aj-navy) 0%, var(--aj-teal-deep) 100%); }
.dw .mode-banner .mb-icon { font-size: 1.8rem; flex-shrink: 0; }
.dw .mode-banner .mb-title { font-weight: 800; font-size: 1rem; font-family: var(--font-display); }
.dw .mode-banner .mb-text { font-size: .85rem; opacity: .9; }
.dw .mode-banner .mb-badge {
  margin-left: auto; background: rgba(255,255,255,.2); border-radius: 20px;
  padding: 4px 12px; font-size: .75rem; font-weight: 700; white-space: nowrap;
}

/* ---------- Mode Selector (admin) ---------- */
.dw .mode-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dw .mode-option {
  border: 2px solid var(--line); border-radius: var(--r); padding: 16px;
  cursor: pointer; transition: all .2s; background: #fff;
}
.dw .mode-option:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.dw .mode-option.active { border-color: var(--brand); background: linear-gradient(135deg, rgba(0,181,204,.05), rgba(40,38,92,.05)); }
.dw .mode-option .mo-icon { font-size: 1.5rem; }
.dw .mode-option .mo-title { font-weight: 800; font-size: .95rem; font-family: var(--font-display); color: var(--aj-navy); margin-top: 4px; }
.dw .mode-option .mo-desc { font-size: .8rem; color: var(--muted); margin-top: 4px; }

/* ---------- Photo Dropzone ---------- */
.dw .dropzone {
  border: 2px dashed var(--line-strong); border-radius: var(--r);
  padding: 32px; text-align: center; cursor: pointer; transition: all .15s;
  background: var(--bg-soft);
}
.dw .dropzone:hover, .dw .dropzone.drag { border-color: var(--brand); background: rgba(0,181,204,.06); }
.dw .dropzone .dz-icon { font-size: 2.2rem; margin-bottom: 8px; }
.dw .dropzone .dz-text { font-weight: 700; color: var(--ink); }
.dw .dropzone .dz-hint { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.dw .photo-previews { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.dw .photo-preview { position: relative; width: 100px; height: 100px; border-radius: var(--r-sm); overflow: hidden; border: 2px solid var(--line); }
.dw .photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.dw .photo-preview .photo-remove { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: .7rem; cursor: pointer; }

/* Photo subject identification panels (duty of care) */
.dw .photo-preview-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; background: #fff; }
.dw .photo-preview-top { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.dw .subject-panel { border-top: 1px dashed var(--line); padding-top: 10px; }
.dw .subject-panel-header { margin-bottom: 8px; }
.dw .subject-method-row { display: flex; gap: 6px; margin-bottom: 10px; }
.dw .subject-info-box { padding: 10px; border-radius: var(--r-sm); background: var(--bg-soft); }
.dw .input-sm { padding: 6px 10px; font-size: .8rem; }

/* ---------- Modals ---------- */
.dw .modal-overlay { position: fixed; inset: 0; background: rgba(40,38,92,.6); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; backdrop-filter: blur(4px); }
.dw .modal { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-xl); width: 100%; max-width: 560px; margin: auto; display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.dw .modal.lg { max-width: 800px; }
.dw .modal.xl { max-width: 1100px; }
.dw .modal.wide { max-width: 1000px; }
.dw .modal.wide .modal-body { max-height: 80vh; padding: 16px; }
.dw .modal-head { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.dw .modal-head h3 { font-size: 1.15rem; }
.dw .modal-body { padding: 24px; max-height: 55vh; overflow-y: auto; flex-shrink: 1; }
.dw .modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.dw .modal-close { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.2rem; }
.dw .modal-close:hover { background: var(--bg-soft); color: var(--ink); }

/* ---------- Toasts ---------- */
.dw .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
/* aria-live="polite" is set on the container in JS so screen readers announce toasts */
.dw .toast { padding: 12px 18px; border-radius: var(--r); box-shadow: var(--shadow-lg); font-weight: 700; font-size: .88rem; background: var(--ink); color: #fff; animation: toastIn .25s; max-width: 360px; }
.dw .toast.success { background: var(--aj-green-a11y); }
.dw .toast.error { background: var(--aj-err-fg); }
.dw .toast.info { background: var(--aj-teal-a11y); }
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } }

/* ---------- Tabs ---------- */
.dw .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--line); margin-bottom: 1.5rem; }
.dw .tab { padding: 10px 18px; font-weight: 700; font-size: .88rem; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .12s; }
.dw .tab:hover { color: var(--text); }
.dw .tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------- AI Suggestion Box ---------- */
.dw .ai-box { background: linear-gradient(135deg, rgba(0,181,204,.08), rgba(0,181,204,.08)); border: 1px solid rgba(0,181,204,.3); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; }
.dw .ai-box .ai-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--aj-cyan); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dw .ai-box .ai-content { font-size: .88rem; color: var(--text); line-height: 1.5; }
.dw .ai-box .ai-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- Submission Card ---------- */
.dw .sub-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; transition: box-shadow .15s, border-color .15s; cursor: pointer; }
.dw .sub-card:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.dw .sub-card .sub-title { font-weight: 800; font-size: .95rem; color: var(--ink); }
.dw .sub-card .sub-meta { font-size: .78rem; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dw .sub-card .sub-preview { font-size: .82rem; color: var(--text); margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dw .sub-card .sub-photos { font-size: .72rem; color: var(--muted); }

/* ---------- Empty State ---------- */
.dw .empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.dw .empty-state .es-icon { font-size: 3rem; margin-bottom: 12px; opacity: .4; }
.dw .empty-state h3 { font-size: 1.1rem; margin-bottom: 6px; }
.dw .empty-state p { font-size: .88rem; }

/* ---------- Quick Action Card ---------- */
.dw .qa-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: all .2s; cursor: pointer; }
.dw .qa-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.dw .qa-card .qa-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.dw .qa-card .qa-title { font-weight: 800; font-size: .95rem; }
.dw .qa-card .qa-desc { font-size: .82rem; color: var(--muted); }
.dw .qa-card.purple .qa-icon { background: rgba(0,181,204,.12); color: var(--brand); }
.dw .qa-card.cyan .qa-icon { background: rgba(0,181,204,.12); color: var(--aj-cyan); }
.dw .qa-card.yellow .qa-icon { background: rgba(12,174,75,.2); color: #077d36; }
.dw .qa-card.magenta .qa-icon { background: rgba(255,13,64,.12); color: var(--brand-accent); }
.dw .qa-card.red .qa-icon { background: rgba(255,13,64,.12); color: var(--aj-red); }
.dw .qa-card.orange .qa-icon { background: rgba(12,174,75,.12); color: var(--aj-orange); }

/* ---------- Login Screen ---------- */
.dw .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--brand-dark); position: relative; overflow: hidden; }
.dw .login-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at top left, rgba(0,181,204,.2), transparent 50%), radial-gradient(ellipse at bottom right, rgba(255,13,64,.15), transparent 50%); }
.dw .login-bg::after {
  /* wave removed from inside the login box per user request */
  display: none;
}
.dw .login-card { position: relative; background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-xl); padding: 40px; max-width: 440px; width: 90%; z-index: 1; }
.dw .login-logo { font-family: var(--font-display); font-size: 2.2rem; font-weight: 900; color: var(--brand); text-align: center; margin-bottom: 4px; letter-spacing: -.02em; }
.dw .login-title { font-size: 1.5rem; font-weight: 900; text-align: center; }
.dw .login-title span { color: var(--aj-cyan); }
.dw .login-sub { text-align: center; color: var(--muted); font-size: .88rem; margin-bottom: 8px; }
.dw .login-sub-brand { text-align: center; color: var(--brand); font-size: .82rem; font-weight: 700; margin-bottom: 24px; }
.dw .login-divider { height: 1px; background: var(--line); margin: 20px 0; }
.dw .login-role-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r); margin-bottom: 10px; transition: all .15s; background: #fff; }
.dw .login-role-btn:hover { border-color: var(--brand); background: var(--bg-soft); }
.dw .login-role-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-brand); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,181,204,.3); }
.dw .login-role-text { text-align: left; flex: 1; }
.dw .login-role-text .lr-name { font-weight: 800; font-size: .92rem; }
.dw .login-role-text .lr-desc { font-size: .78rem; color: var(--muted); }
.dw .login-role-arrow { color: var(--brand); font-size: 1.2rem; }
.dw .login-footer { text-align: center; font-size: .75rem; color: var(--muted); margin-top: 20px; }
.dw .login-pwd-field { margin-bottom: 16px; }

/* ---------- Public Home (Hero) ---------- */
.dw .hero-section {
  background: var(--grad-hero); border-radius: var(--r-lg); padding: 40px 32px;
  color: #fff; position: relative; overflow: hidden; margin-bottom: 1.5rem;
  box-shadow: var(--shadow-lg);
}
.dw .hero-section::before {
  content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,181,204,.2), transparent 70%);
  border-radius: 50%;
}
.dw .hero-section::after {
  /* wave removed from inside the box per user request */
  display: none;
}
.dw .hero-section .hero-logo { width: 90px; height: auto; margin-bottom: 16px; position: relative; z-index: 1; border-radius: 12px; background: rgba(255,255,255,.95); padding: 4px; }
.dw .hero-section .hero-title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1.1; position: relative; z-index: 1; }
.dw .hero-section .hero-title .wave-accent { color: var(--aj-teal); }
.dw .hero-section .hero-sub { font-size: 1rem; opacity: .9; margin-top: 8px; position: relative; z-index: 1; }
.dw .hero-section .hero-tagline { font-size: .82rem; color: var(--aj-teal); font-weight: 700; margin-top: 12px; position: relative; z-index: 1; letter-spacing: .05em; text-transform: uppercase; }
.dw .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 24px; position: relative; z-index: 1; }
.dw .hero-stat { background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border-radius: var(--r-sm); padding: 12px 16px; border: 1px solid rgba(255,255,255,.15); }
.dw .hero-stat .hs-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; opacity: .8; }
.dw .hero-stat .hs-value { font-size: 1.6rem; font-weight: 900; margin-top: 2px; }
.dw .hero-cta { display: flex; gap: 12px; margin-top: 24px; position: relative; z-index: 1; flex-wrap: wrap; }

/* ---------- Category Badge Icons ---------- */
.dw .cat-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; }
.dw .cat-unit { background: rgba(0,181,204,.15); color: #00839a; }
.dw .cat-adventure { background: rgba(255,13,64,.12); color: var(--aj-red); }
.dw .cat-achievement { background: rgba(12,174,75,.25); color: #077d36; }
.dw .cat-visitor { background: rgba(0,181,204,.12); color: var(--brand); }
.dw .cat-fun { background: rgba(12,174,75,.15); color: #077d36; }
.dw .cat-contingent { background: rgba(40,38,92,.1); color: var(--brand-dark); }
.dw .cat-other { background: var(--bg-soft); color: var(--muted); }

/* ---------- Newsletter Paper (A4 Print Layout) ---------- */
/* Newsletter paper per LAYOUT_FOR_EACH_PAGE.docx: full-page background — a clean
   white content area with the undulating light-cyan to deep-teal wave lines in the
   bottom quarter of the page, anchored to the bottom edge so the waves flow straight
   down into the turquoise footer band (which exactly covers the short white strip
   beneath the waves). The 2481x3508 artwork matches A4 proportions. Colors print
   exactly. */
.dw .newsletter-paper {
  width: 210mm; min-height: 297mm;
  background: #fff url('../assets/dailywave-bg.jpg') no-repeat center bottom / 100% auto;
  margin: 0 auto;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dw .newsletter-paper.page-break { page-break-after: always; }

/* ---------- A3 Folded Print Layout (4 pages on one A3 sheet) ---------- */
/* A3 landscape = 420mm × 297mm. Each quadrant = 210mm × 148.5mm (half A4 height).
   For a bi-fold booklet printed double-sided:
   Side 1 (outside): [Page 4 | Page 1]  — back cover | front cover
   Side 2 (inside):  [Page 2 | Page 3]  — inside left | inside right
   When folded, this creates a 4-page A4 booklet from a single A3 sheet. */
.dw .a3-folded-sheet {
  width: 420mm; height: 297mm; background: #fff; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr;
  position: relative; overflow: hidden; page-break-after: always;
}
.dw .a3-folded-sheet:last-child { page-break-after: auto; }
.dw .a3-folded-sheet .a3-page {
  width: 210mm; height: 297mm; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transform-origin: top left;
}
/* Scale each A4 page to fit the A3 half-width while maintaining aspect */
.dw .a3-folded-sheet .a3-page-inner {
  width: 210mm; height: 297mm;
  transform: scale(1); /* full A4 pages side by side on A3 */
  transform-origin: top left;
  overflow: hidden;
}
.dw .a3-folded-sheet .a3-page-left { border-right: 1px dashed rgba(0,0,0,.08); }

/* On-screen preview scaling: A3 sheets are 420mm wide, scale down to fit modal.
   In print mode, the scale is removed and the @page A3 landscape rule takes over. */
#print-area .a3-folded-sheet,
.dw #preview-pages .a3-folded-sheet,
.dw #edition-viewer-pages .a3-folded-sheet {
  transform: scale(0.42);
  transform-origin: top left;
  margin-bottom: -172mm;
}
.dw #preview-pages .a3-folded-sheet,
.dw #edition-viewer-pages .a3-folded-sheet {
  margin: 0 auto -172mm auto;
}
/* Fold line indicator (only visible in preview, not in print) */
.dw .a3-fold-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed rgba(255,13,64,.3); z-index: 999;
  pointer-events: none;
}
.dw .a3-fold-label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: rgba(255,13,64,.08); color: var(--aj-waratah);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 99px; z-index: 1000; pointer-events: none;
  white-space: nowrap;
}
/* Print mode for A3 folded */
@media print {
  body.printing-a3-folded .a3-folded-sheet { page-break-after: always; page-break-inside: avoid; break-inside: avoid; transform: none !important; margin: 0 !important; width: 420mm !important; height: 297mm !important; max-height: 297mm !important; overflow: hidden !important; }
  body.printing-a3-folded .a3-folded-sheet:last-child { page-break-after: auto; }
  body.printing-a3-folded .a3-fold-line,
  body.printing-a3-folded .a3-fold-label { display: none !important; }
  body.printing-a3-folded .a3-folded-sheet .a3-page-left { border-right: none !important; }
  body.printing-a3-folded #print-area .a3-folded-sheet .a3-page,
  body.printing-a3-folded #print-area .a3-folded-sheet .a3-page-inner { transform: none !important; overflow: hidden !important; }
  body.printing-a3-folded #print-area .a3-folded-sheet .a3-page-inner .newsletter-paper { height: 297mm !important; max-height: 297mm !important; overflow: hidden !important; }
}

/* Masthead per Header.png: solid navy #262661 bar; AJ28 NOW logo (its background
   matches the navy, so it blends seamlessly); white title + subtitle; Edition/date
   right-aligned. Colors print exactly (print-color-adjust). */
.dw .nl-masthead {
  background: #262661; color: #fff; padding: 12px 22px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dw .nl-masthead .nl-masthead-inner { display: flex; align-items: center; gap: 14px; }
.dw .nl-masthead .nl-wave-title { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; position: relative; z-index: 1; }
.dw .nl-masthead .nl-wave-title .wave-accent { color: var(--aj-teal); }
.dw .nl-masthead .nl-subtitle { font-size: .75rem; font-weight: 600; opacity: .85; margin-top: 2px; position: relative; z-index: 1; }
.dw .nl-masthead .nl-date { text-align: right; font-size: .82rem; position: relative; z-index: 1; }
.dw .nl-masthead .nl-date .nl-edition { font-weight: 800; font-size: 1rem; }
.dw .nl-masthead .nl-logo { width: 62px; height: auto; flex-shrink: 0; position: relative; z-index: 1; }
/* Legacy masthead wave strip: retired (div kept in DOM for compatibility, hidden). */
.dw .nl-masthead-wave { display: none; }
/* Legacy wave band: retired — the waves now come from the full-page paper
   background (see .newsletter-paper). Div kept in the DOM for compatibility, hidden. */
.dw .nl-wave-bottom { display: none; }

.dw .nl-body { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }

/* Page 1 layout: 3 columns — col1 = Around the Units (full height), col2+3 = main story + minor stories */
.dw .nl-page1 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; flex: 1; }
.dw .nl-around-units {
  background: var(--bg-soft); border-radius: var(--r-sm); padding: 14px;
  border-top: 4px solid var(--aj-cyan);
  grid-row: 1 / -1; /* span full height of the grid */
}
.dw .nl-around-units h3 { font-size: .82rem; text-transform: uppercase; color: var(--aj-cyan); margin-bottom: 10px; letter-spacing: .04em; }
.dw .nl-around-units .au-item { font-size: .75rem; padding: 6px 0; border-bottom: 1px dotted var(--line); line-height: 1.35; }
.dw .nl-around-units .au-item:last-child { border-bottom: none; }
.dw .nl-around-units .au-unit { font-weight: 800; color: var(--brand); }

/* Main story spans columns 2 and 3 */
.dw .nl-main-story { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 8px; }
.dw .nl-main-story .nl-story-headline { font-size: 1.4rem; font-weight: 900; color: var(--ink); line-height: 1.15; }
.dw .nl-main-story .nl-story-photo { width: 100%; height: 160px; object-fit: cover; border-radius: var(--r-sm); }
.dw .nl-main-story .nl-story-photo-none { width: 100%; height: 100px; background: var(--bg-soft); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .8rem; }
.dw .nl-main-story .nl-story-body { font-size: .82rem; line-height: 1.5; color: var(--text); }
.dw .nl-main-story .nl-story-byline { font-size: .72rem; color: var(--muted); font-weight: 600; }

/* Minor stories: 2x2 grid filling columns 2 and 3 */
.dw .nl-minor-stories { grid-column: 2 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; align-content: start; }
.dw .nl-minor-story { border-top: 3px solid var(--aj-yellow); padding-top: 8px; }
.dw .nl-minor-story .nl-ms-headline { font-size: .88rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.dw .nl-minor-story .nl-ms-photo { width: 100%; height: 65px; object-fit: cover; border-radius: 4px; margin-bottom: 6px; }
.dw .nl-minor-story .nl-ms-body { font-size: .74rem; line-height: 1.4; color: var(--text); }
.dw .nl-minor-story .nl-ms-byline { font-size: .68rem; color: var(--muted); margin-top: 4px; }

/* Page 2 layout: notices column + stories + birthdays + weather */
/* Page 2 layout: 3 columns — col1 = notices+birthdays+weather (full height), col2 = 3 stories, col3 = 3 stories */
.dw .nl-page2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; flex: 1; }
.dw .nl-p2-leftcol {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dw .nl-notices {
  background: var(--bg-soft); border-radius: var(--r-sm); padding: 14px;
  border-top: 4px solid var(--aj-cyan);
}
.dw .nl-notices h3 { font-size: .82rem; text-transform: uppercase; color: var(--aj-cyan); margin-bottom: 10px; letter-spacing: .04em; }
.dw .nl-notice-item { font-size: .76rem; padding: 8px 0; border-bottom: 1px dotted var(--line); line-height: 1.35; }
.dw .nl-notice-item:last-child { border-bottom: none; }
.dw .nl-notice-item .nt-type { font-weight: 800; font-size: .68rem; text-transform: uppercase; }
.dw .nl-notice-item .nt-type.urgent { color: var(--aj-red); }
.dw .nl-notice-item .nt-type.info { color: var(--aj-cyan); }
.dw .nl-notice-item .nt-type.event { color: var(--aj-purple); }
.dw .nl-notice-item .nt-type.general { color: var(--muted); }
.dw .nl-notice-item .nt-title { font-weight: 700; color: var(--ink); }
.dw .nl-notice-item .nt-body { color: var(--text); margin-top: 2px; }

/* Birthdays column on page 2 */
.dw .nl-birthdays {
  background: rgba(12,174,75,.1); border-radius: var(--r-sm); padding: 12px 14px;
  border-top: 4px solid var(--aj-orange); margin-top: 14px;
}
.dw .nl-birthdays h3 { font-size: .78rem; text-transform: uppercase; color: #077d36; margin-bottom: 8px; letter-spacing: .04em; display: flex; align-items: center; gap: 4px; }
.dw .nl-birthday-item { font-size: .74rem; padding: 4px 0; border-bottom: 1px dotted var(--line); display: flex; align-items: center; gap: 6px; }
.dw .nl-birthday-item:last-child { border-bottom: none; }
.dw .nl-birthday-item .bd-name { font-weight: 700; color: var(--ink); }
.dw .nl-birthday-item .bd-unit { font-size: .68rem; color: var(--muted); font-weight: 600; }
.dw .nl-birthday-item .bd-cake { font-size: .85rem; }

/* Weather forecast on page 2 */
.dw .nl-weather {
  background: linear-gradient(135deg, rgba(0,181,204,.12), rgba(216,238,242,.18));
  border-radius: var(--r-sm); padding: 12px 14px;
  border-top: 4px solid var(--aj-cyan); margin-top: 12px;
}
.dw .nl-weather h3 { font-size: .78rem; text-transform: uppercase; color: #00839a; margin-bottom: 8px; letter-spacing: .04em; display: flex; align-items: center; gap: 4px; }
.dw .nl-weather-location { font-size: .68rem; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.dw .nl-weather-days { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw .nl-weather-day { background: rgba(255,255,255,.6); border-radius: 6px; padding: 8px; text-align: center; }
.dw .nl-weather-day .wd-day { font-size: .68rem; font-weight: 800; color: var(--ink); text-transform: uppercase; }
.dw .nl-weather-day .wd-icon { font-size: 1.8rem; line-height: 1; margin: 4px 0; }
.dw .nl-weather-day .wd-temp { font-size: .8rem; font-weight: 800; color: var(--ink); }
.dw .nl-weather-day .wd-range { font-size: .65rem; color: var(--muted); }
.dw .nl-weather-day .wd-cond { font-size: .62rem; color: var(--text); margin-top: 2px; }

.dw .nl-p2-stories { display: flex; flex-direction: column; gap: 12px; }
.dw .nl-p2-story { border-top: 2px solid var(--aj-cyan); padding-top: 8px; }
.dw .nl-p2-story .nl-p2-headline { font-size: .88rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.dw .nl-p2-story .nl-p2-photo { width: 100%; height: 60px; object-fit: cover; border-radius: 4px; margin-bottom: 5px; }
.dw .nl-p2-story .nl-p2-body { font-size: .74rem; line-height: 1.4; color: var(--text); }
.dw .nl-p2-story .nl-p2-byline { font-size: .66rem; color: var(--muted); margin-top: 3px; }

/* Page 3: 4–8 stories in a 2-column grid */
.dw .nl-page3 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; align-content: start; }
.dw .nl-p3-story { display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--aj-magenta); padding-top: 8px; }
.dw .nl-p3-story .nl-p3-photo { width: 100%; height: 90px; object-fit: cover; border-radius: var(--r-sm); }
.dw .nl-p3-story .nl-p3-photo-none { width: 100%; height: 90px; background: var(--bg-soft); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.dw .nl-p3-story .nl-p3-headline { font-size: .92rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 2px; }
.dw .nl-p3-story .nl-p3-body { font-size: .76rem; line-height: 1.4; color: var(--text); }
.dw .nl-p3-story .nl-p3-byline { font-size: .7rem; color: var(--muted); margin-top: 4px; }

/* Page 3: 3-column layout with left column (Program Highlights + H&W Tips) + right 2 columns (stories) */
.dw .nl-page3-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; flex: 1; }
.dw .nl-p3-leftcol {
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dw .nl-p3-stories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; grid-column: 2 / -1; }

/* Program Highlights box on Page 3 */
.dw .nl-program-highlights {
  background: rgba(0,181,204,.08); border-radius: var(--r-sm); padding: 14px;
  border-top: 4px solid var(--aj-purple);
}
.dw .nl-program-highlights-title { font-size: .82rem; text-transform: uppercase; color: var(--aj-purple); margin-bottom: 10px; letter-spacing: .04em; font-weight: 800; }
.dw .nl-ph-item { padding: 8px 0; border-bottom: 1px dotted var(--line); display: flex; gap: 8px; align-items: flex-start; }
.dw .nl-ph-item:last-child { border-bottom: none; }
.dw .nl-ph-time { font-size: .72rem; font-weight: 800; color: var(--aj-navy); min-width: 52px; white-space: nowrap; }
.dw .nl-ph-text { flex: 1; }
.dw .nl-ph-title { font-size: .78rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.dw .nl-ph-body { font-size: .7rem; color: var(--text); margin-top: 2px; line-height: 1.35; }

/* Page 4: Photo collage */
.dw .nl-page4 { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.dw .nl-collage-header h3 { font-size: 1.2rem; font-weight: 900; text-align: center; color: var(--ink); }
.dw .nl-collage-header p { text-align: center; font-size: .82rem; color: var(--muted); }
.dw .nl-collage { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 130px; gap: 8px; flex: 1; }
.dw .nl-collage .col-item { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--bg-soft); }
.dw .nl-collage .col-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-sm); }
/* Legacy direct img class */
.dw .nl-collage .col-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); display: block; }
.dw .nl-collage .col-item.span-2 { grid-column: span 2; }
.dw .nl-collage .col-item.span-row-2 { grid-row: span 2; }
.dw .nl-collage .col-item.span-both { grid-column: span 2; grid-row: span 2; }
.dw .nl-collage .col-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.55); color: #fff; font-size: .62rem; padding: 3px 6px; border-radius: 0 0 var(--r-sm) var(--r-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw .nl-collage .col-empty { display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border-radius: var(--r-sm); font-size: 1.5rem; color: var(--muted); }

/* Newsletter footer per LAYOUT_FOR_EACH_PAGE.docx: a pure turquoise #00B4CD band
   that exactly covers the short white strip beneath the waves at the bottom of the
   page background (153px of 3508px ≈ 12.95mm of 297mm). The three design text items
   (The Daily Wave / Know It. Live It. Log it. / contact email) in navy #28265C,
   space-between, vertically centered. Colors print exactly. */
.dw .nl-footer { background: #00B4CD; min-height: 12.95mm; display: flex; align-items: center; flex-shrink: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.dw .nl-footer .nl-footer-band { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 24px; min-height: 12.95mm; width: 100%; box-sizing: border-box; }
.dw .nl-footer .nl-footer-band span { color: #28265C; font-size: .72rem; font-weight: 700; }
.dw .nl-footer .nl-footer-brand { font-weight: 800; letter-spacing: .01em; }
.dw .nl-footer .nl-footer-email a { color: #28265C; text-decoration: none; }
.dw .nl-footer .nl-footer-email a:hover { text-decoration: underline; }
/* ---------- Web Version (Online Newsletter) ---------- */
.dw .web-newsletter { max-width: 800px; margin: 0 auto; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.dw .web-newsletter .wn-masthead { background: var(--grad-brand); color: #fff; padding: 20px 28px; }
.dw .web-newsletter .wn-masthead h1 { font-family: var(--font-display); font-size: 2rem; color: #fff; }
.dw .web-newsletter .wn-masthead .wn-sub { font-size: .9rem; opacity: .85; }
.dw .web-newsletter .wn-content { padding: 24px 28px; }
.dw .web-newsletter .wn-story { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.dw .web-newsletter .wn-story:last-child { border-bottom: none; }
.dw .web-newsletter .wn-story h2 { font-size: 1.3rem; margin-bottom: 8px; }
.dw .web-newsletter .wn-story .wn-byline { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.dw .web-newsletter .wn-story img { width: 100%; border-radius: var(--r); margin-bottom: 12px; }
.dw .web-newsletter .wn-story .wn-body { font-size: .95rem; line-height: 1.6; }
.dw .web-newsletter .wn-story .wn-video { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: var(--r); overflow: hidden; margin-bottom: 12px; background: var(--ink); }
.dw .web-newsletter .wn-story .wn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.dw .web-newsletter .wn-around-units { background: var(--bg-soft); border-radius: var(--r); padding: 16px; margin-bottom: 24px; border-left: 4px solid var(--aj-cyan); }
.dw .web-newsletter .wn-around-units h3 { font-size: .9rem; text-transform: uppercase; color: var(--aj-cyan); margin-bottom: 10px; }
.dw .web-newsletter .wn-around-units .wn-au-item { font-size: .85rem; padding: 5px 0; border-bottom: 1px dotted var(--line); }
.dw .web-newsletter .wn-around-units .wn-au-unit { font-weight: 800; color: var(--brand); }
.dw .web-newsletter .wn-notices { background: rgba(12,174,75,.1); border-radius: var(--r); padding: 16px; margin-bottom: 24px; border-left: 4px solid var(--aj-yellow); }
.dw .web-newsletter .wn-notices h3 { font-size: .9rem; text-transform: uppercase; color: #077d36; margin-bottom: 10px; }
.dw .web-newsletter .wn-notice { padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: .88rem; }
.dw .web-newsletter .wn-footer { padding: 16px 28px; background: var(--aj-navy); color: rgba(255,255,255,.7); font-size: .8rem; }

/* ---------- Page 5: Behind the Scenes ---------- */
.dw .nl-page5 { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.dw .nl-bts-header { text-align: center; padding: 12px 0 8px; border-bottom: 3px solid var(--aj-purple); }
.dw .nl-bts-header .nl-bts-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; color: var(--aj-purple); }
.dw .nl-bts-header .nl-bts-subtitle { font-size: .82rem; color: var(--muted); margin-top: 4px; }

/* Two-column grid: feature (2/3) + stats (1/3) */
.dw .nl-bts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; flex: 1; }
.dw .nl-bts-feature-col { display: flex; flex-direction: column; gap: 8px; }
.dw .nl-bts-stats-col { display: flex; flex-direction: column; gap: 12px; }

/* Feature story */
.dw .nl-bts-badge { display: inline-block; background: var(--aj-purple); color: #fff; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 99px; align-self: flex-start; }
.dw .nl-bts-feature-headline { font-family: var(--font-display); font-size: 1.2rem; font-weight: 900; color: var(--ink); line-height: 1.2; }
.dw .nl-bts-feature-photos { display: grid; gap: 8px; }
.dw .nl-bts-feature-photos.single { grid-template-columns: 1fr; }
.dw .nl-bts-feature-photos.two { grid-template-columns: 1fr 1fr; }
.dw .nl-bts-feature-photos.three { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.dw .nl-bts-feature-photos.three .nl-bts-feature-photo:first-child { grid-column: span 2; }
.dw .nl-bts-feature-photo { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r-sm); background: var(--bg-soft); }
.dw .nl-bts-feature-photos.three .nl-bts-feature-photo:first-child { height: 120px; }
.dw .nl-bts-feature-body { font-size: .8rem; line-height: 1.5; color: var(--text); flex: 1; }
.dw .nl-bts-feature-byline { font-size: .72rem; font-weight: 600; color: var(--muted); border-top: 1px dotted var(--line); padding-top: 6px; }
.dw .nl-bts-empty { text-align: center; padding: 24px 16px; background: var(--bg-soft); border-radius: var(--r-sm); color: var(--muted); }

/* Stats column */
.dw .nl-bts-stats-title { font-size: .85rem; font-weight: 900; color: var(--aj-magenta); text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--aj-magenta); padding-bottom: 6px; margin-bottom: 8px; }
.dw .nl-bts-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw .nl-bts-stat-item { background: linear-gradient(135deg, rgba(0,181,204,.1), rgba(0,181,204,.12)); border-radius: var(--r-sm); padding: 10px 8px; text-align: center; border-top: 3px solid var(--aj-magenta); }
.dw .nl-bts-stat-item .nl-bts-stat-num { font-size: 1.5rem; font-weight: 900; color: var(--aj-purple); line-height: 1; }
.dw .nl-bts-stat-item .nl-bts-stat-label { font-size: .62rem; font-weight: 600; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
.dw .nl-bts-stats-empty { font-size: .75rem; padding: 12px 8px; text-align: center; }

/* Mini process timeline in stats column */
.dw .nl-bts-mini-process { background: var(--bg-soft); border-radius: var(--r-sm); padding: 12px; border-left: 3px solid var(--aj-navy); }
.dw .nl-bts-mini-process-title { font-size: .75rem; font-weight: 800; color: var(--aj-navy); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.dw .nl-bts-mini-step { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; border-bottom: 1px dotted var(--line); }
.dw .nl-bts-mini-step:last-child { border-bottom: none; }
.dw .nl-bts-mini-icon { font-size: .9rem; flex-shrink: 0; }
.dw .nl-bts-mini-text { font-size: .7rem; line-height: 1.4; color: var(--text); }

/* Responsive: stack on narrow */
@media (max-width: 600px) {
  .dw .nl-bts-grid { grid-template-columns: 1fr; }
  .dw .nl-bts-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Health & Wellbeing Tips ---------- */
.dw .nl-hwtips { background: linear-gradient(135deg, rgba(0,181,204,.1), rgba(0,181,204,.08)); border-radius: var(--r-sm); padding: 12px 14px; border-left: 4px solid var(--aj-cyan); margin-top: 8px; }
.dw .nl-hwtips-header { font-size: .82rem; font-weight: 900; color: var(--aj-cyan); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.dw .nl-hwtips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.dw .nl-hwtip { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.dw .nl-hwtip-title { font-size: .75rem; font-weight: 800; color: var(--aj-navy); margin-bottom: 4px; }
.dw .nl-hwtip-body { font-size: .7rem; line-height: 1.4; color: var(--text); }

/* ---------- Page 6: Photos & One-liners ---------- */
.dw .nl-page6 { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.dw .nl-p6-header { text-align: center; padding: 8px 0; border-bottom: 3px solid var(--aj-magenta); }
.dw .nl-p6-header h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 900; color: var(--aj-magenta); }
.dw .nl-p6-header p { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.dw .nl-p6-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; flex: 1; }
.dw .nl-p6-item { display: flex; flex-direction: column; gap: 4px; }
.dw .nl-p6-photo { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r-sm); }
.dw .nl-p6-photo-none { width: 100%; height: 140px; background: var(--bg-soft); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--muted); }
.dw .nl-p6-caption { font-size: .76rem; font-weight: 600; color: var(--ink); line-height: 1.3; padding: 4px 8px; background: rgba(0,181,204,.08); border-radius: 4px; border-left: 3px solid var(--aj-cyan); }
.dw .nl-p6-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; color: var(--muted); }

/* ---------- Page Selection UI (Builder) ---------- */
.dw .page-select-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dw .page-select-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: 2px solid var(--line); border-radius: var(--r-sm); cursor: pointer; text-align: center; transition: all .2s; background: var(--bg-soft); }
.dw .page-select-item:hover { border-color: var(--aj-cyan); }
.dw .page-select-item.on { border-color: var(--aj-purple); background: rgba(0,181,204,.08); }
.dw .page-select-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--aj-purple); }
.dw .page-select-item .page-select-num { font-size: .78rem; font-weight: 800; color: var(--ink); }
.dw .page-select-item .page-select-type { font-size: .62rem; color: var(--muted); line-height: 1.2; }
.dw .page-select-item.on .page-select-type { color: var(--aj-purple); font-weight: 600; }

/* ---------- Editions Gallery (Public) ---------- */
.dw .editions-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dw .edition-thumb { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .2s, box-shadow .2s; border: 2px solid transparent; }
.dw .edition-thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--aj-cyan); }
.dw .edition-thumb-preview { height: 240px; overflow: hidden; background: #f5f5f5; position: relative; border-bottom: 1px solid var(--line); }
.dw .edition-thumb-preview .newsletter-paper { transform-origin: top left; }
.dw .edition-thumb-info { padding: 14px 16px; }
.dw .edition-thumb-date { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.dw .edition-thumb-meta { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.dw .edition-thumb-headline { font-size: .85rem; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
.dw .edition-thumb-actions { display: flex; gap: 8px; align-items: center; }
.dw .edition-thumb-cta { font-size: .72rem; font-weight: 700; color: var(--aj-cyan); text-transform: uppercase; letter-spacing: .03em; }


/* ============================================================
   STORY READABILITY PANELS + EXACT-A4 FIT (v2.9)
   Very light navy-tinted rounded panels behind story text so
   copy stays readable where it runs over the wave background.
   Distinct from the cyan-tinted Around-the-Units box (#eef8fa).
   ============================================================ */
.dw { --panel-story: #F0F1F7; }

/* --- story cards get the panel (rounded, very light navy) ---
     v2.10: panel is PER STORY (each minor story on page 1 is its own box) --- */
.dw .nl-main-story, .dw .nl-minor-story, .dw .nl-p2-story, .dw .nl-p3-story,
.dw .nl-p6-item, .dw .nl-bts-header, .dw .nl-collage-header, .dw .nl-p6-header,
.dw .nl-bts-feature-col, .dw .nl-bts-stats-col {
  background: var(--panel-story);
  border-radius: var(--r-sm);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.dw .nl-main-story { padding: 12px 14px; }
.dw .nl-minor-story { padding: 8px 10px 10px; }
.dw .nl-p2-story { padding: 8px 10px 10px; }
.dw .nl-p3-story { padding: 8px 10px 10px; }
.dw .nl-p6-item { padding: 8px; }
.dw .nl-bts-header { padding: 10px 14px; }
.dw .nl-collage-header { padding: 10px 14px; }
.dw .nl-p6-header { padding: 10px 14px; }
.dw .nl-bts-feature-col { padding: 12px 14px; }
.dw .nl-bts-stats-col { padding: 12px 14px; }

/* --- make existing translucent boxes opaque (no wave bleed-through) ---
     v2.11: Contingent Notices = same colours as Around-the-Units
            (bg #eef8fa, cyan top stripe, cyan heading, dark text);
            Weather = solid navy w/ white text (white day-tiles keep dark text);
            Birthdays unchanged (pale green, dark text) --- */
.dw .nl-notices { background: var(--bg-soft); border-top: 4px solid var(--aj-cyan); }
.dw .nl-notices h3 { color: var(--aj-cyan); }
.dw .nl-birthdays { background: #E7F7EB; }
.dw .nl-weather { background: var(--aj-navy); }
.dw .nl-weather h3 { color: #ffffff; }
.dw .nl-weather-location { color: #D3E3E9; }
.dw .nl-program-highlights { background: #EBF7F9; }
.dw .nl-hwtips { background: #EAF5F8; }
.dw .nl-bts-stat-item { background: #E7F4F7; }
.dw .nl-weather-day { background: #ffffff; }
.dw .nl-weather .wd-day, .dw .nl-weather .wd-temp { color: var(--ink); }
.dw .nl-weather .wd-range { color: var(--muted); }
.dw .nl-weather .wd-cond { color: var(--text); }
.dw .nl-p6-caption { background: #EBF7F9; }
.dw .nl-notices, .dw .nl-birthdays, .dw .nl-weather, .dw .nl-program-highlights,
.dw .nl-hwtips, .dw .nl-bts-stat-item, .dw .nl-p6-caption {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* --- exact A4 on screen: lock paper height, body flexes/clips --- */
.dw .newsletter-paper.a4-fit { height: 297mm; max-height: 297mm; }
.dw .newsletter-paper.a4-fit > .nl-body { flex: 1 1 0; min-height: 0; overflow: hidden; }

/* ---------- Print ---------- */
@media print {
  .dw { background: #fff; }
  .dw .sidebar, .dw .header, .dw .modal-overlay, .dw .toast-container, .dw .no-print, .dw .site-wave-footer, .dw .site-footer, .dw .sidebar-wave-bottom { display: none !important; }
  body.printing-active > *:not(#print-area) { display: none !important; }
  body.printing-active #print-area { display: block !important; }
  .dw .main-area { margin: 0; }
  .dw .main { padding: 0; max-width: none; }
  /* Fixed height + overflow hidden prevents content from bleeding into next page */
  .dw .newsletter-paper { box-shadow: none !important; margin: 0 !important; width: 210mm !important; height: 297mm !important; min-height: 297mm !important; max-height: 297mm !important; overflow: hidden !important; page-break-after: always; page-break-inside: avoid; break-inside: avoid; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .dw .newsletter-paper .nl-masthead, .dw .newsletter-paper .nl-wave-bottom, .dw .newsletter-paper .nl-footer { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .dw .newsletter-paper:last-child { page-break-after: auto; }
  #print-area .newsletter-paper { transform: none !important; }
  /* Prevent flex children from overflowing the fixed-height page in print */
  #print-area .newsletter-paper .nl-body { overflow: hidden !important; min-height: 0 !important; flex: 1 1 0 !important; }
  #print-area .newsletter-paper .nl-masthead,
  #print-area .newsletter-paper .nl-wave-bottom,
  #print-area .newsletter-paper .nl-footer { flex: 0 0 auto !important; }
  .dw .edition-thumb-preview { height: auto; }
  .dw .edition-thumb-preview .newsletter-paper { transform: none !important; }

  /* ---- Print-specific grid overrides ---- */
  /* The @media (max-width: 900px) responsive rules below change grids to
     2-column or 1-column layouts for small screens.  In print context the
     A4 page is ~794px wide (210mm @96dpi), which is < 900px, so those
     responsive rules erroneously apply and break the print layout.
     These overrides restore the full-width desktop grid layouts for print. */
  .dw .nl-page1, .dw .nl-page2 { grid-template-columns: 1fr 1fr 1fr !important; }
  .dw .nl-page3 { grid-template-columns: 1fr 1fr !important; }
  .dw .nl-page3-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .dw .nl-around-units { grid-row: 1 / -1 !important; grid-column: auto !important; }
  .dw .nl-main-story { grid-column: 2 / 4 !important; }
  .dw .nl-minor-stories { grid-column: 2 / 4 !important; grid-template-columns: 1fr 1fr !important; }
  .dw .nl-p2-leftcol { grid-row: 1 / -1 !important; grid-column: auto !important; }
  .dw .nl-p3-leftcol { grid-row: 1 / -1 !important; grid-column: auto !important; }
  .dw .nl-p3-stories-grid { grid-column: 2 / -1 !important; grid-template-columns: 1fr 1fr !important; }
  .dw .nl-collage { grid-template-columns: repeat(3, 1fr) !important; }
  .dw .nl-bts-grid { grid-template-columns: 2fr 1fr !important; }
  .dw .nl-bts-stats { grid-template-columns: 1fr 1fr 1fr 1fr !important; }
  .dw .nl-bts-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .dw .nl-bts-credit-list { grid-template-columns: 1fr 1fr !important; }
  .dw .nl-bts-step { grid-template-columns: 36px 70px 1fr !important; }
  .dw .nl-p6-grid { grid-template-columns: 1fr 1fr !important; }

  /* Ensure photos keep their fixed heights and object-fit in print.
     NOTE: We do NOT use !important on height/aspect-ratio here because
     user-applied image transforms (from the image editor) set inline styles
     for height:auto and custom aspect-ratio. !important would override those
     inline styles and lose the user's sizing. object-fit:cover is safe to
     force since it doesn't conflict with transforms. */
  .dw .nl-main-story .nl-story-photo { object-fit: cover !important; }
  .dw .nl-minor-story .nl-ms-photo { object-fit: cover !important; }
  .dw .nl-p2-story .nl-p2-photo { object-fit: cover !important; }
  .dw .nl-p3-story .nl-p3-photo { object-fit: cover !important; }
  .dw .nl-bts-feature-photo { object-fit: cover !important; }
  .dw .nl-p6-photo { object-fit: cover !important; }
  /* Default heights only apply when no inline transform height is set.
     Inline styles (from applyImageTransform) will override these naturally. */
  .dw .nl-main-story .nl-story-photo:not([style*="height"]) { height: 160px; }
  .dw .nl-minor-story .nl-ms-photo:not([style*="height"]) { height: 65px; }
  .dw .nl-p2-story .nl-p2-photo:not([style*="height"]) { height: 60px; }
  .dw .nl-p3-story .nl-p3-photo:not([style*="height"]) { height: 90px; }
  .dw .nl-bts-feature-photo:not([style*="height"]) { height: 140px; }
  .dw .nl-p6-photo:not([style*="height"]) { height: 140px; }

  /* Collage photos: fill grid cells in print, but DON'T override user
     transforms with !important. Use :not([style]) selectors so images
     that have inline transform styles (scale, aspect-ratio) keep them. */
  .dw .nl-collage .col-item img:not([style*="transform"]),
  .dw .nl-collage .col-fill:not([style*="transform"]) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .dw .nl-collage .col-item img,
  .dw .nl-collage .col-fill {
    object-fit: cover !important;
  }
  /* For collage images WITH user transforms, still ensure they fill width */
  .dw .nl-collage .col-item img[style*="transform"],
  .dw .nl-collage .col-fill[style*="transform"] {
    width: 100% !important;
    object-fit: cover !important;
  }

  @page { size: A4; margin: 0; }
  @page a3-folded { size: A3 landscape; margin: 0; }
  body.printing-a3-folded #print-area .a3-folded-sheet { page: a3-folded; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .dw .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .dw .sidebar.open { transform: translateX(0); }
  .dw .main-area { margin-left: 0; }
  .dw .header .menu-toggle { display: flex; }
  .dw .grid-3, .dw .grid-4 { grid-template-columns: 1fr 1fr; }
  .dw .nl-page1, .dw .nl-page2 { grid-template-columns: 1fr 1fr; }
  .dw .nl-around-units { grid-row: auto; grid-column: 1 / -1; }
  .dw .nl-main-story { grid-column: 1 / -1; }
  .dw .nl-minor-stories { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .dw .nl-p2-leftcol { grid-row: auto; grid-column: 1 / -1; }
  .dw .nl-page3 { grid-template-columns: 1fr 1fr; }
  .dw .nl-page3-grid { grid-template-columns: 1fr 1fr; }
  .dw .nl-p3-leftcol { grid-row: auto; grid-column: 1 / -1; }
  .dw .nl-p3-stories-grid { grid-column: 1 / -1; }
  .dw .nl-collage { grid-template-columns: 1fr 1fr; }
  .dw .nl-bts-stats { grid-template-columns: 1fr 1fr; }
  .dw .nl-bts-credit-list { grid-template-columns: 1fr; }
  .dw .nl-bts-step { grid-template-columns: 36px 70px 1fr; }
  .dw .nl-p6-grid { grid-template-columns: 1fr 1fr; }
  .dw .page-select-grid { grid-template-columns: repeat(3, 1fr); }
  .dw .editions-gallery { grid-template-columns: 1fr 1fr; }
  .dw .hero-section { padding: 28px 20px; }
  .dw .hero-section .hero-title { font-size: 1.8rem; }
}
@media (max-width: 600px) {
  .dw .site-footer-band { flex-direction: column; gap: 2px; padding: 8px 16px; }
  .dw .site-footer-band .sf-brand { font-size: .85rem; }
  .dw .site-footer-band .sf-tagline { font-size: .74rem; }
  .dw .site-footer-band .sf-email { font-size: .7rem; }
  .dw .site-wave-footer { bottom: 96px; height: 30vh; }
  .dw .grid-2, .dw .grid-3, .dw .grid-4 { grid-template-columns: 1fr; }
  .dw .stat-grid { grid-template-columns: 1fr 1fr; }
  .dw .main { padding: 16px; }
  .dw .nl-page1, .dw .nl-page2, .dw .nl-page3 { grid-template-columns: 1fr; }
  .dw .nl-page3-grid { grid-template-columns: 1fr; }
  .dw .nl-around-units, .dw .nl-main-story, .dw .nl-minor-stories, .dw .nl-p2-leftcol, .dw .nl-p3-leftcol, .dw .nl-p3-stories-grid { grid-column: 1; grid-row: auto; }
  .dw .nl-minor-stories { grid-template-columns: 1fr; }
  .dw .nl-collage { grid-template-columns: 1fr; }
  .dw .nl-bts-stats { grid-template-columns: 1fr 1fr; }
  .dw .nl-p6-grid { grid-template-columns: 1fr; }
  .dw .page-select-grid { grid-template-columns: 1fr 1fr; }
  .dw .editions-gallery { grid-template-columns: 1fr; }
  .dw .hero-section .hero-title { font-size: 1.5rem; }
}

/* ---------- Builder specific ---------- */
.dw .builder-tabs { margin-bottom: 20px; }
.dw .page-selector { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.dw .page-selector .ps-label { font-weight: 800; font-size: .88rem; }
.dw .story-slot { border: 2px dashed var(--line-strong); border-radius: var(--r); padding: 16px; margin-bottom: 12px; background: var(--bg-soft); }
.dw .story-slot.filled { border-style: solid; border-color: var(--brand); background: #fff; }
.dw .story-slot .slot-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.dw .story-slot .slot-content { font-weight: 700; color: var(--ink); }
.dw .story-slot .slot-actions { display: flex; gap: 8px; margin-top: 10px; }

.dw .progress-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.dw .progress-bar .pb-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--aj-cyan)); transition: width .3s; }

/* ---------- Misc ---------- */
.dw .divider { height: 1px; background: var(--line); margin: 16px 0; }
.dw .flex { display: flex; }
.dw .flex-between { display: flex; justify-content: space-between; align-items: center; }
.dw .gap-2 { gap: 8px; }
.dw .gap-3 { gap: 12px; }
.dw .items-center { align-items: center; }
.dw .flex-wrap { flex-wrap: wrap; }
.dw .hidden { display: none !important; }
.dw .cursor-pointer { cursor: pointer; }
.dw .semibold { font-weight: 600; }
.dw .border-top { border-top: 1px solid var(--line); padding-top: 12px; }
.dw .space-y > * + * { margin-top: 12px; }
.dw .space-y-2 > * + * { margin-top: 8px; }
.dw .space-y-4 > * + * { margin-top: 16px; }
.dw .input-sm { padding: 6px 10px; font-size: .8rem; }
.dw .badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; background: var(--bg-soft); color: var(--text); }
.dw .badge-sm { font-size: .65rem; padding: 2px 7px; }

/* Photo collage builder grid */
.dw .collage-builder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; background: var(--bg-soft); border-radius: var(--r); }
.dw .collage-builder .cb-slot { aspect-ratio: 1; border: 2px dashed var(--line-strong); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; }
.dw .collage-builder .cb-slot img { width: 100%; height: 100%; object-fit: cover; }
.dw .collage-builder .cb-slot .cb-add { font-size: 1.5rem; color: var(--muted); }

/* Builder section card */
.dw .builder-section { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.dw .builder-section h3 { font-size: 1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.dw .builder-section .bs-desc { font-size: .82rem; color: var(--muted); margin-bottom: 14px; }

/* Inline preview panel */
.dw .preview-panel { background: var(--bg-soft); border-radius: var(--r); padding: 16px; overflow: auto; }
.dw .preview-panel-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

/* Hide on small screens */
@media (max-width: 600px) {
  .dw .hide-sm { display: none !important; }
}


/* ========================================================
   IMAGE EDITOR MODAL — zoom, pan, reshape photos
   ======================================================== */
.dw .img-editor-body { display: flex; flex-direction: column; gap: 14px; }
.dw .img-editor-hint { font-size: .82rem; color: var(--muted); background: var(--bg-soft); padding: 8px 12px; border-radius: var(--r-sm); }
.dw .img-editor-preview-box {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: var(--r);
  background: #1a1a2e;
  position: relative;
  cursor: grab;
  border: 2px solid var(--line);
  user-select: none;
}
.dw .img-editor-preview-box:active { cursor: grabbing; }
.dw .img-editor-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.dw .img-editor-controls { display: flex; flex-direction: column; gap: 10px; }
.dw .img-editor-control-row {
  display: grid;
  grid-template-columns: 140px 1fr 50px;
  align-items: center;
  gap: 10px;
}
.dw .img-editor-label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.dw .img-editor-slider { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: var(--bg-soft); border-radius: 3px; outline: none; cursor: pointer; }
.dw .img-editor-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--aj-cyan); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.dw .img-editor-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--aj-cyan); cursor: pointer; border: 2px solid #fff; }
.dw .img-editor-value-label { font-size: .8rem; font-weight: 700; color: var(--aj-cyan); text-align: right; }
.dw .img-editor-aspect-section { display: flex; flex-direction: column; gap: 8px; }
.dw .img-editor-aspect-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.dw .img-editor-aspect-btn { font-size: .78rem; }
/* v2.13 rotate row */
.dw .img-editor-rotate-row { grid-template-columns: 140px auto 50px; }
.dw .img-editor-rotate-btns { display: flex; gap: 6px; }
.dw .img-editor-rotate-btn { min-width: 64px; }

/* Photo adjust button in builder editors */
.dw .photo-adjust-wrap { display: flex; align-items: center; gap: 12px; padding: 10px; background: var(--bg-soft); border-radius: var(--r-sm); margin-top: 8px; }
.dw .photo-adjust-thumb { width: 80px; height: 60px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--surface-3); }
.dw .photo-adjust-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dw .photo-adjust-btncol { display: flex; flex-direction: column; gap: 4px; }

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS — v122
   ========================================================================== */

/* ---------- Skip Link ---------- */
/* WCAG 2.4.1 (Bypass Blocks) — allows keyboard users to jump to main content.
   The inline styles in index.html handle the boot-loader state; these styles
   take over once the app shell renders. */
.dw .skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  background: var(--aj-navy);
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transition: top 0.15s;
}
.dw .skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- Reduced Motion ---------- */
/* WCAG 2.2.2 (Pause, Stop, Hide) & 2.3.3 (Animation from Interactions) —
   respect the user's OS/browser "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  .dw *, .dw *::before, .dw *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Forced Colours / High Contrast Mode ---------- */
/* WCAG 1.4.1 (Use of Colour) — ensure the site works in Windows High Contrast
   mode and browser "use system colours" settings.  box-shadow focus indicators
   are stripped in forced-colours mode, so we rely on outline (preserved). */
@media (forced-colors: active) {
  /* Ensure borders are visible on cards and inputs */
  .dw .card, .dw .input, .dw .textarea, .dw .select, .dw .btn, .dw .modal {
    border: 1px solid CanvasText;
  }
  /* Ensure focus outline uses the system highlight colour */
  .dw :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  /* Don't let backgrounds hide text in High Contrast */
  .dw .toast, .dw .btn-primary, .dw .btn-dark, .dw .btn-accent, .dw .btn-cyan {
    forced-color-adjust: none;
  }
}

/* ---------- Increased Minimum Font Sizes ---------- */
/* WCAG 1.4.4 (Resize Text) — bump the smallest labels from ~10px to ≥12px */
.dw .pill { font-size: .75rem; }      /* was .72rem (~10.8px → ~11.25px, now 12px at 100% root) */
.dw .tbl th { font-size: .75rem; }    /* was .72rem */

/* --- v2.9: photo-slot height caps (paper context) ---
   The image editor's custom aspect-ratio transforms set inline height:auto +
   aspect-ratio on photos, which at paper width blows far past the designed slot
   heights (feature photo 1102px vs 140px design) and forces a deep zoom-fit
   shrink of the whole page (text becomes too small to read). These caps keep
   photos generous but bounded; editor pan/zoom (scale/objectPosition)
   transforms still apply — only runaway aspect boxes are tamed.
   --- v2.13 fix: pages 6/7/8 resize was invisible ---
   The old blanket caps (p2 90px / p3 120px / p6 160px) also clamped photos
   the editor had deliberately reshaped on pages 6, 7, 8 (extra pages reuse
   the p2/p3 classes), so the resize control appeared to do nothing there.
   Photos WITHOUT an editor aspect-ratio keep the small anti-spiral caps;
   photos WITH an inline aspect-ratio (editor-reshaped) get generous caps so
   the resize is visible and the A4-fit zoom still bounds runaway heights. */
.dw .newsletter-paper .nl-story-photo:not([style*="aspect-ratio"]) { max-height: 420px; }
.dw .newsletter-paper .nl-ms-photo:not([style*="aspect-ratio"]) { max-height: 90px; }
.dw .newsletter-paper .nl-p2-photo:not([style*="aspect-ratio"]) { max-height: 90px; }
.dw .newsletter-paper .nl-p3-photo:not([style*="aspect-ratio"]) { max-height: 120px; }
.dw .newsletter-paper .nl-bts-feature-photo:not([style*="aspect-ratio"]) { max-height: 540px; }
.dw .newsletter-paper .nl-p6-photo:not([style*="aspect-ratio"]) { max-height: 160px; }
/* Editor-reshaped photos: generous caps so resizes show on every page
   (v2.9's deep-shrink protection is still handled by the A4-fit zoom). */
.dw .newsletter-paper .nl-ms-photo[style*="aspect-ratio"] { max-height: 200px; }
.dw .newsletter-paper .nl-p2-photo[style*="aspect-ratio"] { max-height: 200px; }
.dw .newsletter-paper .nl-p3-photo[style*="aspect-ratio"] { max-height: 240px; }
.dw .newsletter-paper .nl-p6-photo[style*="aspect-ratio"] { max-height: 300px; }
.dw .newsletter-paper .nl-collage .col-fill { max-height: none; }

/* --- v2.13: rotated photo frames ---
   renderPhotoEl wraps rotated photos in .nl-rot-wrap (carries the slot class
   for sizing) with the img at 100%×100% object-fit:cover. fixRotatedPhotoCovers
   then composes rotate(deg) scale(cover) so the rotated content still fills
   the frame; the wrapper crops the corners (print-style crop). */
.dw .nl-rot-wrap { overflow: hidden; }
.dw .nl-rot-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
/* Small-square slots (ms/p2) get extra headroom when rotated so a 90° turn
   of a landscape photo isn't crushed into a sliver. */
.dw .newsletter-paper .nl-rot-wrap.nl-ms-photo { height: 110px; }
.dw .newsletter-paper .nl-rot-wrap.nl-p2-photo { height: 110px; }
.dw .newsletter-paper .nl-rot-wrap.nl-p6-photo[style*="aspect-ratio"] { max-height: 300px; }

/* --- v2.10 refinements (notices reverted to light box in v2.11) --- */
.dw .nl-weather .muted, .dw .nl-weather .nl-birthday-item.muted { color: #C9D7DD; }