/* "Bright" theme: loaded on top of style.css. Pick "Simple" in the header (or drop the <link>) for the plain look.
   Rules kept on purpose: text contrast >= 4.5:1, big targets, NO animation or movement.
   Light and dark palettes below define the SAME variable names (the dark block must always cover every one of them). */
html.theme-fun {
  --bg: #fff6e4;
  --link: #0a66b8;
  --link-hover: #07508f;
  --btn: #0a66b8;
  --btn-hover: #07508f;
  --ghost-fg: #0a66b8;
  --chip: #0b7a6e;
  --chip-on: #0b7a6e;
  --soft: #f1d9a6;
  --border: #7a6a4f;
  --accent: #c93a16;
  --accent-dark: #a82e10;
  --accent-text: #c93a16;
  --teal: #0b7a6e;
  --teal-dark: #075b52;
  --dots: #f6e3bd;
  --shadow: #ffe7ac;
  --shadow-blue: #bcd8f1;
  --shadow-red: #f6c7bb;
  --heading: #17324d;
  --h2: #07508f;
  --stripe-gap: #ffffff;
  --paper: #fff3cf;
  --tile1-bg: #dff1ff; --tile1-bd: #a9d3f5;
  --tile2-bg: #ffe4dc; --tile2-bd: #f4b8a6;
  --tile3-bg: #dcf5ec; --tile3-bd: #9fdac6;
  --tile4-bg: #fff0c2; --tile4-bd: #f0d37c;
  --tile-fg: #17324d;
}
html.theme-fun[data-mode="dark"] {
  --bg: #151927;
  --surface: #1f2536;
  --link: #8cc4ff;
  --link-hover: #b9dcff;
  --btn: #1f6fc4;
  --btn-hover: #185ba3;
  --ghost-fg: #8cc4ff;
  --chip: #6fdccb;
  --chip-on: #0b7a6e;
  --soft: #3a4260;
  --border: #8d96b0;
  --accent: #c93a16;
  --accent-dark: #a82e10;
  --accent-text: #ff8a69;
  --teal: #0b7a6e;
  --teal-dark: #075b52;
  --dots: #1b2032;
  --shadow: #0c0f19;
  --shadow-blue: #0c0f19;
  --shadow-red: #0c0f19;
  --heading: #eaf0ff;
  --h2: #9fcdfb;
  --stripe-gap: #1f2536;
  --paper: #3a3010;
  --tile1-bg: #16324b; --tile1-bd: #2f6290;
  --tile2-bg: #472620; --tile2-bd: #8d4c3c;
  --tile3-bg: #153a30; --tile3-bd: #2f7a63;
  --tile4-bg: #473b13; --tile4-bd: #8d7625;
  --tile-fg: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
  html.theme-fun[data-mode="auto"] {
    --bg: #151927;
    --surface: #1f2536;
    --link: #8cc4ff;
    --link-hover: #b9dcff;
    --btn: #1f6fc4;
    --btn-hover: #185ba3;
    --ghost-fg: #8cc4ff;
    --chip: #6fdccb;
    --chip-on: #0b7a6e;
    --soft: #3a4260;
    --border: #8d96b0;
    --accent: #c93a16;
    --accent-dark: #a82e10;
    --accent-text: #ff8a69;
    --teal: #0b7a6e;
    --teal-dark: #075b52;
    --dots: #1b2032;
    --shadow: #0c0f19;
    --shadow-blue: #0c0f19;
    --shadow-red: #0c0f19;
    --heading: #eaf0ff;
    --h2: #9fcdfb;
    --stripe-gap: #1f2536;
    --paper: #3a3010;
    --tile1-bg: #16324b; --tile1-bd: #2f6290;
    --tile2-bg: #472620; --tile2-bd: #8d4c3c;
    --tile3-bg: #153a30; --tile3-bd: #2f7a63;
    --tile4-bg: #473b13; --tile4-bd: #8d7625;
    --tile-fg: #f2f2f2;
  }
}

.theme-fun body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1.3px, transparent 1.4px);
  background-size: 24px 24px;
}

/* airmail stripes: the classic envelope border */
.theme-fun .top {
  border-bottom: 0;
  border-image: repeating-linear-gradient(135deg, var(--accent) 0 16px, var(--stripe-gap) 16px 32px, var(--btn) 32px 48px, var(--stripe-gap) 48px 64px) 1;
  border-bottom: 12px solid;
}
.theme-fun .foot {
  border-top: 0;
  border-image: repeating-linear-gradient(135deg, var(--accent) 0 16px, var(--stripe-gap) 16px 32px, var(--btn) 32px 48px, var(--stripe-gap) 48px 64px) 1;
  border-top: 8px solid;
}
.theme-fun .brand { font-size: 1.5rem; color: var(--link); letter-spacing: .01em; }
.theme-fun .brand:hover { color: var(--link-hover); }
.theme-fun .brand::first-letter { color: var(--accent-text); }

/* headings */
.theme-fun h1 { color: var(--heading); }
.theme-fun h2 { color: var(--h2); }
.theme-fun h2::before { content: "✦ "; color: var(--accent-text); }
.theme-fun .panel h2::before, .theme-fun .rules h2::before, .theme-fun #stats-h::before { content: ""; }

/* buttons: chunky, with a "stamped" bottom edge (static, no motion) */
.theme-fun .btn { border-radius: 16px; box-shadow: 0 4px 0 var(--btn-hover); }
.theme-fun .btn.ghost { box-shadow: 0 4px 0 var(--ghost-edge); }
.theme-fun .btn.danger { box-shadow: 0 4px 0 var(--danger-hover); }
.theme-fun .actions-grid .panel:first-child .btn.big,
.theme-fun .hero .btn:first-child { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-dark); }
.theme-fun .actions-grid .panel:first-child .btn.big:hover,
.theme-fun .hero .btn:first-child:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.theme-fun .actions-grid .panel:last-child .btn.big { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 4px 0 var(--teal-dark); }
.theme-fun .actions-grid .panel:last-child .btn.big:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

/* panels look like postcards with a stamp corner */
.theme-fun .panel { border: 3px solid var(--soft); border-radius: 18px; box-shadow: 6px 6px 0 var(--shadow); position: relative; }
.theme-fun .actions-grid .panel::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 34px; height: 40px;
  border: 3px dotted var(--soft); border-radius: 4px; background: var(--paper);
}
.theme-fun .actions-grid .panel h2 { padding-right: 3rem; }
.theme-fun .panel.danger { border-color: var(--accent); box-shadow: 6px 6px 0 var(--shadow-red); }
.theme-fun .steps-panel { border-color: var(--btn); box-shadow: 6px 6px 0 var(--shadow-blue); }

/* hero */
.theme-fun .hero { display: block; background: var(--surface); border: 3px solid var(--soft); border-radius: 22px; padding: 1.2rem; margin-top: 1rem; box-shadow: 6px 6px 0 var(--shadow); }
.theme-fun .hero-art { display: block; width: 100%; max-width: 20rem; height: auto; margin: 0 auto .5rem; }
.theme-fun .hero h1 { margin-top: .4rem; }

/* stats tiles in different colours */
.theme-fun .stats > div { border: 3px solid var(--soft); border-radius: 16px; color: var(--tile-fg); }
.theme-fun .stats > div:nth-child(1) { background: var(--tile1-bg); border-color: var(--tile1-bd); }
.theme-fun .stats > div:nth-child(2) { background: var(--tile2-bg); border-color: var(--tile2-bd); }
.theme-fun .stats > div:nth-child(3) { background: var(--tile3-bg); border-color: var(--tile3-bd); }
.theme-fun .stats > div:nth-child(4) { background: var(--tile4-bg); border-color: var(--tile4-bd); }
.theme-fun .stats dt, .theme-fun .stats dd { color: var(--tile-fg); }

/* lists */
.theme-fun .rowlink { border: 3px solid var(--soft); border-radius: 16px; }
.theme-fun .rowlink:hover { border-color: var(--btn); }
.theme-fun .thumb { border-radius: 10px; }
.theme-fun .steps { counter-reset: s; list-style: none; padding-left: 0; }
.theme-fun .steps li {
  counter-increment: s; position: relative; padding: .7rem .9rem .7rem 3.4rem; background: var(--surface);
  border: 3px solid var(--soft); border-radius: 16px;
}
.theme-fun .steps li::before {
  content: counter(s); position: absolute; left: .7rem; top: .6rem; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; text-align: center; line-height: 2.1rem;
}
.theme-fun .steps li:nth-child(even)::before { background: var(--teal); }
.theme-fun .rules { padding-left: 1.2rem; }
.theme-fun .rules li::marker { color: var(--accent-text); font-weight: 800; }

/* the number to write on the card: a stamp-like label */
.theme-fun .bigcode { background: var(--paper); border: 4px dashed var(--accent); color: var(--fg); }
.theme-fun .address { background: var(--surface); border: 3px solid var(--btn); border-radius: 14px; }

.theme-fun .flash { border-radius: 16px; }
.theme-fun details.report { border-radius: 16px; }
.theme-fun input[type=text], .theme-fun input[type=email], .theme-fun input[type=password],
.theme-fun input[type=file], .theme-fun select, .theme-fun textarea { border-radius: 12px; }

@media (min-width: 40rem) {
  .theme-fun .hero { display: grid; grid-template-columns: 1fr 15rem; gap: 1rem; align-items: center; }
  .theme-fun .hero-art { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}

/* ---- v2 components in the bright theme ---- */
.theme-fun .tile { border: 3px solid var(--soft); border-radius: 16px; box-shadow: 4px 4px 0 var(--shadow); }
.theme-fun .tile:hover { border-color: var(--btn); }
.theme-fun .nextstep { border-radius: 18px; box-shadow: 6px 6px 0 var(--shadow-blue); }
.theme-fun .nextstep h2::before { content: ""; }
.theme-fun .openrow, .theme-fun .slot, .theme-fun .notifs li, .theme-fun .queue li { border-width: 3px; border-radius: 16px; }
.theme-fun .bell { border-width: 3px; }
.theme-fun .heart { border-width: 3px; }
.theme-fun .offer { box-shadow: 6px 6px 0 var(--shadow); }

/* ---- profile in the bright theme ---- */
.theme-fun .pcard { border-width: 3px; border-radius: 18px; box-shadow: 6px 6px 0 var(--shadow); }
.theme-fun .tabs a:hover { border-radius: 10px 10px 0 0; }

/* ---- header v3 in the bright theme ---- */
.theme-fun .menu a, .theme-fun .menubtn { border-width: 3px; box-shadow: 0 3px 0 var(--soft); }
.theme-fun .menu a.on, .theme-fun .menu a.cta { box-shadow: 0 3px 0 var(--btn-hover); }
.theme-fun .toolbox .tools { border-width: 3px; border-radius: 18px; }