/* ===========================================================================
   core.css — palette, fonts, reset, shared P5 elements (buttons, textures)
   =========================================================================== */

:root {
  --p5-black: #0a0a0a;
  --p5-ink:   #141414;
  --p5-red:   #e3121b;
  --p5-red-d: #a50d13;
  --p5-white: #f5f5f0;
  --p5-cream: #efe9dc;
  --p5-gray:  #2b2b2b;
  --p5-cyan:  #23e0e0;
  --p5-gold:  #ffd23f;
  /* Plan My Day stat-group colors (js/planday.js STAT_THEME) */
  --p5-pink:   #ff4fa3;
  --p5-blue:   #3b8ef5;
  --p5-orange: #ff8c1a;
  --p5-yellow: #ffee58;
  --p5-purple: #b46eff;

  /* Character accent — defaults to red; the character picker (js/characters.js)
     overrides these two on :root at runtime. Only the reds meant to follow the
     active character point at these; decorative reds keep var(--p5-red). */
  --p5-accent:  var(--p5-red);
  --p5-accent2: var(--p5-red);

  --font-header: 'Anton', 'Archivo Black', sans-serif;
  --font-black:  'Archivo Black', 'Anton', sans-serif;
  --font-body:   'Space Grotesk', system-ui, sans-serif;
  --font-stamp:  'Permanent Marker', cursive;

  --ease-snap: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  --ease-in-hard: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--p5-black);
  color: var(--p5-white);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button { font-family: inherit; }

/* ---- textures --------------------------------------------------------- */

/* halftone dot overlay on red panels */
.halftone {
  background-color: var(--p5-red);
  background-image: radial-gradient(rgba(0,0,0,.55) 1.6px, transparent 1.7px);
  background-size: 9px 9px;
}

/* flat red backdrop — matches the Joker artwork's background */
.starburst {
  background-color: var(--p5-red);
}

/* diagonal red/black warning-stripe divider */
.stripe-band {
  background: repeating-linear-gradient(-45deg,
    var(--p5-red) 0 18px, var(--p5-black) 18px 36px);
  height: 26px; width: 120%;
  transform: rotate(-2.5deg) translateX(-8%);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}

/* ---- P5 diagonal button ---------------------------------------------- */
.p5-btn {
  --skew: -8deg;
  position: relative;
  display: inline-block;
  background: var(--p5-white);
  color: var(--p5-black);
  font-family: var(--font-header);
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-style: italic;
  padding: 8px 34px 8px 26px;
  border: none;
  cursor: pointer;
  text-align: left;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  transition: transform .14s var(--ease-snap), background .12s, color .12s, padding .14s var(--ease-snap);
}
.p5-btn:hover,
.p5-btn:focus-visible,
.p5-btn.is-selected {
  background: var(--p5-accent);
  color: var(--p5-white);
  transform: translateX(10px) skewX(-4deg) scale(1.04);
  padding-left: 40px;
  outline: none;
}
.p5-btn:active { transform: translateX(6px) scale(.99); }

.p5-btn--red { background: var(--p5-accent); color: var(--p5-white); }
.p5-btn--red:hover, .p5-btn--red.is-selected { background: var(--p5-white); color: var(--p5-accent); }

.p5-btn--sm { font-size: clamp(.9rem, 2.4vw, 1.15rem); padding: 6px 22px; }

/* small jagged "chip" (Confirm/Close footer, YES/NO, tags) */
.chip {
  display: inline-block;
  background: var(--p5-black);
  color: var(--p5-white);
  font-family: var(--font-black);
  font-size: .8rem; letter-spacing: .5px;
  padding: 5px 14px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
.chip--red { background: var(--p5-accent); }
.chip--cyan { background: var(--p5-cyan); color: var(--p5-black); }

/* speech-bubble tag like "MeNu: MAIN" */
.tag {
  display: inline-block;
  background: var(--p5-white);
  color: var(--p5-black);
  font-family: var(--font-black);
  padding: 6px 16px;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--p5-black);
  clip-path: polygon(3% 6%, 97% 0, 100% 92%, 2% 100%);
}

/* ---- app shell / view manager ---------------------------------------- */
#viewport { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

.view {
  position: absolute; inset: 0;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  z-index: 1;
}
.view.active { opacity: 1; visibility: visible; z-index: 2; }

/* thin scrollbar in P5 colours */
.view::-webkit-scrollbar { width: 10px; }
.view::-webkit-scrollbar-thumb { background: var(--p5-red); }
.view::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }

.screen-pad { padding: clamp(20px, 4vw, 52px); min-height: 100%; }

/* section heading used on sub-screens */
.screen-title {
  font-family: var(--font-header);
  font-size: clamp(2.2rem, 7vw, 4rem);
  font-style: italic;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: 1px;
}
.screen-title .accent { color: var(--p5-red); }

.back-btn { margin-bottom: 18px; }

/* utility */
.hidden { display: none !important; }
.row { display: flex; gap: 12px; align-items: center; }
.push { margin-left: auto; }

/* Angular P5 "card" with a FULL outline on every edge.
   NEVER pair `border` with `clip-path` on an angled shape — the clip cuts the
   border stroke off along the slanted edge, so the outline "fades" on that side.
   Instead the element ITSELF is the outline colour, and a ::before inset by the
   border width — sharing the SAME clip-path — paints the interior fill. The clip
   trims both layers identically, leaving a clean band of outline on every edge.
   (Original hand-rolled versions of this trick: .conf-card, .paywall-card.)

   Per-card knobs (all optional, sensible defaults):
     --card-outline : the border colour            (default: --p5-accent)
     --card-fill    : the interior colour — MUST be opaque, or the outline
                      colour bleeds through          (default: --p5-black)
     --card-shape   : the clip-path polygon         (default: slight right slant)
     --card-border  : the outline thickness         (default: 3px)                */
.p5-clip-card {
  position: relative;
  background: var(--card-outline, var(--p5-accent));
  clip-path: var(--card-shape, polygon(0 0, 100% 0, 99% 100%, 0 100%));
}
.p5-clip-card::before {
  content: ''; position: absolute; inset: var(--card-border, 3px); z-index: 0;
  background: var(--card-fill, var(--p5-black));
  clip-path: var(--card-shape, polygon(0 0, 100% 0, 99% 100%, 0 100%));
}
.p5-clip-card > * { position: relative; z-index: 1; }  /* content above the fill */