/* Attendly NED, drawably theme. Load AFTER style.css and drawably.css. */

@font-face {
  font-family: "Drawably Pen";
  src: url("DrawablyPen.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --drawably-stroke: #3d3d42;      /* soft charcoal pen for frames */
  --drawably-fill: #1f7a6f;        /* teal for solid/scribble */
  --drawably-paper: #f2f1ed;
  --drawably-error: #c4452d;
  --drawably-success: #1f7a6f;
  --teal: #1f7a6f;
  --clay: #c2561c;
  --ink: #2b2b2e;
  --ink-2: #5a5a60;
  --pen: "Drawably Pen", "CFCrayons", system-ui, sans-serif;
  --text: Inter, "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Page */
html body { background: #e9e8e4; background-image: none; font-family: var(--text); color: var(--ink); }

/* Top bar: flat paper + hand-drawn rule instead of the wave */
html body .topbar { background: #e9e8e4; padding-bottom: 6px; }
html body .topbar::after { display: none; }
.topbar .dw-rule { position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; margin: 0; border: 0; pointer-events: none; }
html body .topbar-text h1 { color: var(--ink); }
html body .topbar-text span { color: var(--ink-2); }

/* Hero */
html body .hero h2 { font-family: "Big Shoulders", sans-serif; color: var(--ink); letter-spacing: -0.03em; }
html body .hero h2 span { color: var(--ink); --drawably-stroke: var(--clay); }
html body .hero p { font-family: 'CFCrayons', sans-serif; font-size: 22px; color: var(--ink-2); }
.dw-mark { font-family: inherit; padding: 0 2px; --drawably-stroke: #d9a441; }
html body .hero-badge {
  font-family: var(--text); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  text-transform: none; background: transparent; padding: 7px 18px; color: var(--teal); --drawably-stroke: var(--teal);
}
html body .visitor-chip {
  background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  font-family: var(--text); padding: 7px 16px 7px 12px; color: var(--ink-2);
}
html body .visitor-chip #visitorCount { color: var(--ink); }
.und { display: none !important; }

/* Login card */
html body .card { background: transparent; background-image: none; border: 0; border-radius: 0;}
html body .section-label { color: var(--ink-2); font-family: 'Big Shoulders'; text-transform: none; letter-spacing: 0; font-size: 13px; }
html body .section-label::after { display: none; }
html body .field label, html body .captcha-top label { font-family: var(--text); font-size: 13px; color: var(--ink); }
html body .captcha-top button { font-family: var(--text); color: var(--ink-2); }
html body .captcha-box { background: transparent; border: 0; padding: 14px; }
html body .captcha-box:hover { border: 0; }

/* Inputs: the sketch is the border, fields span the full card width */
html body .input-wrap, html body .input-wrap.drawably-inputbox,
html body .dw-field, html body .dw-field.drawably-inputbox, html body .dw-field.drawably-textarea { display: block; width: 100%; }
html body .input-wrap input, html body .dw-field input, html body .dw-field textarea { width: 100%; box-sizing: border-box; }
html body .input-wrap input,
html body .report-field input[type="text"],
html body .report-modal textarea {
  background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important;
  font-family: var(--text); font-weight: 500; color: var(--ink); padding: 13px 18px;
}
html body .input-wrap input { padding-right: 46px; }
html body .input-wrap.no-icon input { padding-right: 18px; }
html body .report-modal textarea { width: 100%; resize: none; margin: 0; }
html body .input-wrap input::placeholder, html body .report-modal textarea::placeholder { color: #a1a1aa; }
html body .eye-btn { z-index: 2; color: var(--ink-2); }

/* Primary button: blue pen, white text */
html body #submitBtn {
  background: none; border: 0; border-radius: 0; color: var(--drawably-paper);
  font-family: var(--pen); font-size: 24px; font-weight: 400; padding: 16px 12px; margin-top: 14px; width: 100%;
}
html body #submitBtn:hover:not(:disabled) { background: none; }
html body #submitBtn:disabled { opacity: .7; }
#submitBtn { --drawably-fill: var(--teal); --drawably-stroke: var(--teal); }
#submitBtn .btn-label { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Status text (the button also carries the state) */
html body .status { background: transparent !important; border: 0 !important; font-family: var(--text); font-weight: 600; padding: 10px 4px 0; }
html body .status.loading { color: var(--ink-2); }
html body .status.error { color: var(--drawably-error); }
html body .status.success { color: var(--drawably-success); }

/* Report chip */
html body .report-chip {
  background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 0; padding: 9px 18px; font-family: var(--text); font-weight: 600; color: var(--ink-2);
}
html body .report-chip:hover { background: none; box-shadow: none; transform: translateY(-1px); }

/* Modals */
html body .report-overlay, html body .cred-overlay { background: rgba(24, 24, 27, .35); backdrop-filter: blur(2px); }
html body .report-modal, html body .cred-modal {
  background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 34px 32px 30px; overflow: visible; max-height: none; margin: auto;
}
html body .report-modal h3, html body .cred-modal h3 { font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
html body .report-sub, html body .cred-sub, html body .cred-fallback, html body .report-field label { font-family: var(--text); color: var(--ink-2); }
html body .cred-checklist li { font-family: var(--text); color: var(--ink); }
html body .cred-fallback a { color: var(--teal); text-decoration: underline wavy; text-underline-offset: 3px; }
html body .report-close, html body .cred-close { background: transparent; color: var(--ink); z-index: 3; }
html body .report-close:hover, html body .cred-close:hover { background: rgba(43, 43, 46, .08); }
html body .cred-icon { background: transparent; color: var(--drawably-error); }
html body .cred-checklist .cred-num { background: transparent; color: var(--ink); width: 26px; height: 26px; border-radius: 0; font-family: var(--text); }
html body .cred-divider { border: 0; height: 12px; margin: 4px 0 14px; }
html body .issue-chip { background: transparent; border: 0; border-radius: 0; padding: 8px 16px; font-family: var(--text); color: var(--ink); box-shadow: none; }
html body .issue-chip:hover { background: transparent; }
html body .issue-chip.active { background: transparent; color: var(--ink); box-shadow: none; }
html body .report-send { --drawably-fill: var(--teal); --drawably-stroke: var(--teal); background: none; border: 0; border-radius: 0; color: var(--drawably-paper); font-family: var(--text); font-weight: 700; padding: 14px; }
html body .report-send:hover:not(:disabled) { opacity: 1; }
html body .cred-btn { background: none; border: 0; border-radius: 0; font-family: var(--text); font-weight: 700; padding: 14px; color: #6e675f; }
html body .cred-btn:hover { background: none; }
html body .report-status { font-family: var(--text); }

/* PDF download pill */
html body .pdf-bar a { color: #fff; background: var(--teal); padding: 7px 16px; border-radius: 100px; }

@media (max-width: 479px) {
  html body .card { padding: 24px 18px 20px; }
  html body #submitBtn { font-size: 21px; }
}

/* ── Focus ring: only the focused field draws it, thin and quiet ──
   (the library's rule is a descendant selector, so focusing one input made
   every sketch inside the card light up at once) */
html body .drawably-host:is(:focus-visible, :has(:focus-visible)) .drawably-focus { visibility: hidden; }
html body .drawably-host:is(:focus-visible, :has(:focus-visible)) > .drawably-svg .drawably-focus {
  visibility: visible; stroke-width: 1.1; opacity: .6;
}
/* buttons: no focus ring sketch at all */
html body .drawably-button .drawably-focus,
html body .drawably-button:focus-visible > .drawably-svg .drawably-focus { visibility: hidden !important; }

/* ── Fonts ── */
/* field labels in the pen font */
html body .field label,
html body .captcha-top label,
html body .report-field label { font-family: var(--pen); font-size: 13px; font-weight: 400; letter-spacing: .02em; }

/* "seconds." keeps the headline's Big Shoulders (the library's host class was forcing Inter on it) */
html body .hero h2 span { font-family: "Big Shoulders", sans-serif; font-weight: inherit; letter-spacing: inherit; }

/* ── Form surfaces: slightly lighter than the page, filled by the sketch itself ── */
:root { --surface: #f4f3ef; }
html body #loginCard > .drawably-svg .drawably-outline,
html body .report-modal > .drawably-svg .drawably-outline,
html body .cred-modal > .drawably-svg .drawably-outline { fill: var(--surface); }

/* ── Popups: the overlay scrolls, so the Send button can never fall outside the card ── */
html body .report-overlay, html body .cred-overlay { overflow-y: auto; align-items: flex-start; }
html body .report-modal, html body .cred-modal { flex-shrink: 0; margin: auto; }
html body .report-modal > .dw-field { margin-bottom: 18px; }
html body .report-send { margin-top: 2px; }
html body .report-modal { padding-bottom: 34px; }

/* ── Navbar: no bottom line ── */
html body .topbar .dw-rule { display: none; }

/* ── Scrollbar ── */
html { scrollbar-color: #2b2b2e transparent; }
html body ::-webkit-scrollbar-thumb { background: #2b2b2e; border-radius: 100px; }
html body ::-webkit-scrollbar-thumb:hover { background: #2b2b2e; }

/* ── Paper photo background: ONE fixed layer behind the whole page ──
   Fixed to the screen, so it never scrolls, tiles, or runs out, however long the page gets.
   100vw includes the scrollbar gutter, so no strip shows beside it. */
html { background: #d9d1c1; }
html body { background: transparent !important; background-image: none !important; }
html body::before {
  content: ""; position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none;
  width: 100vw;
  height: 100vh;
  height: 100lvh;                    /* phones: stays full height when the address bar hides */
  background: #d9d1c1 url("img/pprBf.png") center / cover no-repeat;
}
/* nav shows the paper too */
html body .topbar { background: transparent; position: relative; }

/* login form: transparent, only the sketched frame remains */
html body #loginCard > .drawably-svg .drawably-outline { fill: none; }




/* ── Warm kraft palette, matched to the paper background ── */
:root {
  --drawably-stroke: #4a4037;   /* warm charcoal pen for frames */
  --drawably-fill: #2f6b5e;     /* deep green-teal for solid/scribble */
  --drawably-paper: #f6f1e6;    /* text colour on the solid buttons */
  --drawably-error: #b5412b;
  --drawably-success: #2f6b5e;
  --teal: #2f6b5e;
  --clay: #b5532a;              /* underline under "seconds." */
  --ink: #2d2823;
  --ink-2: #5f574b;
  --surface: #efe9dc;           /* popup fill */
}

/* placeholders and popup backdrop in warm tones */
html body .input-wrap input::placeholder,
html body .report-modal textarea::placeholder { color: #9a8f80; }
html body .report-overlay,
html body .cred-overlay { background: rgba(45, 36, 28, .42); }




/* ── Solid hand-drawn badge + visitor chip (matches #submitBtn) ── */
html body .hero-badge,
html body .visitor-chip {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--drawably-paper);
  font-weight: 700;
  padding: 9px 20px;
}

/* remove the outlined sketch frame */
html body .hero-badge > .drawably-svg,
html body .visitor-chip > .drawably-svg { display: none !important; }

/* the solid rough blob */
html body .hero-badge::before,
html body .visitor-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 14px;
  filter: url(#rough-solid);
  pointer-events: none;
}
html body .hero-badge::before   { background: var(--teal); }   /* same green as the button */
html body .visitor-chip::before { background: var(--ink); }

html body .visitor-chip #visitorCount { color: #fff; font-weight: 800; }
html body .visitor-chip svg:not(.drawably-svg) { opacity: 1; color: var(--drawably-paper); }


/* ── Glassmorphic login card ── */
html body #loginCard {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.18) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-radius: 24px;
  box-shadow:
    0 12px 40px rgba(45, 36, 28, 0.14),      /* soft depth */
    inset 0 1px 0 rgba(255, 255, 255, 0.65), /* top edge highlight */
    inset 0 0 0 1px rgba(255, 255, 255, 0.25); /* thin glass rim */
}

/* keep the sketched frame, but quieter so the glass reads as the surface */
html body #loginCard > .drawably-svg { opacity: 2; }
html body #loginCard > .drawably-svg .drawably-outline { fill: none; }

/* inputs: faint frosted fill so they sit inside the glass */
html body #loginCard .input-wrap { background: rgba(255, 255, 255, 0.22); border-radius: 14px; }

/* fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body #loginCard { background: rgba(239, 233, 220, 0.85); }
}


/* ── Anything the user types is written in the pen font ── */
html body .input-wrap input,
html body .dw-field input,
html body .dw-field textarea,
html body .report-field input[type="text"],
html body .report-modal textarea {
  font-family: var(--pen);
  font-weight: 400;
  letter-spacing: .02em;
}

/* placeholders stay in the current font */
html body .input-wrap input::placeholder,
html body .dw-field input::placeholder,
html body .dw-field textarea::placeholder,
html body .report-modal textarea::placeholder {
  font-family: var(--text);
  letter-spacing: 0;
}


/* ── Browser autofill: keep the field transparent, no blue/yellow fill ── */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink) !important;   /* typed-text colour */
  caret-color: var(--ink);
  background-color: transparent !important;
  background-clip: text;
  /* Chrome paints its fill through this transition, so we push it so far out it never shows */
  transition: background-color 600000s 0s, color 600000s 0s !important;
}

/* Firefox */
html body input:autofill {
  background-color: transparent !important;
  color: var(--ink) !important;
  filter: none;
}


/* ── Status messages (loading / success / error): no padding ── */
html body .status,
html body .status.show,
html body .status.loading,
html body .status.success,
html body .status.error {
  padding: 0 !important;
}


/* ── Download PDF button: teal that deepens on hover ── */
html body .pdf-bar a {
  background: var(--teal);
  color: var(--drawably-paper);
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

html body .pdf-bar a:hover {
  background: color-mix(in srgb, var(--teal) 82%, #000);   /* slightly darker teal */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 36, 28, .22);
}

html body .pdf-bar a:active {
  transform: translateY(0);
  box-shadow: none;
}


/* ── Captcha sits in the same frame as the three fields ── */
html body #loginCard .dw-cap { margin-bottom: 4px; }
html body #loginCard .dw-cap #captchaStrip {
  background: transparent; border: 0; border-radius: 0;
  min-height: 62px; padding: 8px 12px;
}


/* ── Send Report: contrasting colour while pressed / sending ── */
html body .report-send .btn-label { position: relative; z-index: 1; }

html body .report-send:active:not(:disabled) {
  --drawably-ink: var(--ink);          /* dark warm brown fill on press */
  color: var(--drawably-paper);
}

html body .report-send:disabled {
  --drawably-ink: var(--ink);          /* stays solid and visible while "Sending…" */
  opacity: .85;
  cursor: progress;
}





/* ══════════ MOTION (transform/opacity only) ══════════ */

@keyframes dw-rise  { from { opacity: 0; transform: translateY(14px); } }
@keyframes dw-pop   { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes dw-drop  { from { opacity: 0; transform: translateY(-26px); } }
@keyframes dw-fade  { from { opacity: 0; } }
@keyframes dw-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dw-wave  { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(10deg); } }

/* 1. staggered page entrance (backwards fill only, so hover transforms are never blocked) */
html body .hero-badge, html body .hero h2, html body .hero p, html body .visitor-chip,
html body #loginCard, html body #loginForm > *, html body .section-label {
  animation: dw-rise .55s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) backwards;
}
html body .hero-badge   { --d: .05s; }
html body .hero h2      { --d: .12s; }
html body .hero p       { --d: .20s; }
html body .visitor-chip { --d: .28s; }
html body #loginCard    { --d: .10s; }
html body .section-label { --d: .22s; }
html body #loginForm > :nth-child(1) { --d: .28s; }
html body #loginForm > :nth-child(2) { --d: .34s; }
html body #loginForm > :nth-child(3) { --d: .40s; }
html body #loginForm > :nth-child(4) { --d: .46s; }
html body #loginForm > :nth-child(5) { --d: .52s; }

/* 2. pen underline and marker are "drawn" left to right */
html body .hero h2 span .drawably-svg path { animation: dw-wipe .6s cubic-bezier(.4, 0, .2, 1) .7s backwards; }
html body .dw-mark .drawably-svg path      { animation: dw-wipe .7s cubic-bezier(.4, 0, .2, 1) 1s backwards; }

/* 3. button arrow nudge, report flag wave */
html body #submitBtn .ri-arrow-right-line { display: inline-block; transition: transform .2s ease; }
html body #submitBtn:hover:not(:disabled) .ri-arrow-right-line { transform: translateX(5px); }
html body .report-chip .ri-flag-line { display: inline-block; transform-origin: 20% 90%; }
html body .report-chip:hover .ri-flag-line { animation: dw-wave .6s ease; }

/* 4. new captcha image slides in */
html body #captchaStrip img { animation: dw-pop .35s ease backwards; }

/* 5. PDF viewer slides up when it appears (it toggles display, which restarts this) */
html body #pdfViewer { animation: dw-rise .5s cubic-bezier(.2, .7, .2, 1) backwards; }

/* 7. popups settle in like a sheet of paper; chips pop in one by one */
html body .report-overlay.show, html body .cred-overlay.show { animation: dw-fade .25s ease backwards; }
html body .report-overlay.show .report-modal,
html body .cred-overlay.show .cred-modal { animation: dw-drop .5s cubic-bezier(.34, 1.35, .64, 1) backwards; }
html body .report-overlay.show .issue-chip { animation: dw-pop .35s cubic-bezier(.34, 1.56, .64, 1) calc(.18s + var(--i, 0) * 55ms) backwards; }
html body .issue-chip:nth-child(1) { --i: 0; } html body .issue-chip:nth-child(2) { --i: 1; }
html body .issue-chip:nth-child(3) { --i: 2; } html body .issue-chip:nth-child(4) { --i: 3; }
html body .issue-chip:nth-child(5) { --i: 4; }

/* reduced motion: no entrance or reveal animations at all */
@media (prefers-reduced-motion: reduce) {
  html body .hero-badge, html body .hero h2, html body .hero p, html body .visitor-chip,
  html body #loginCard, html body #loginForm > *, html body .section-label,
  html body .hero h2 span .drawably-svg path, html body .dw-mark .drawably-svg path,
  html body #captchaStrip img, html body #pdfViewer,
  html body .report-overlay.show, html body .cred-overlay.show,
  html body .report-overlay.show .report-modal, html body .cred-overlay.show .cred-modal,
  html body .report-overlay.show .issue-chip, html body .report-chip:hover .ri-flag-line { animation: none !important; }
}


/* ── Loading spinner on the submit button ── */
html body #submitBtn .spin-btn {
  position: absolute; left: 24px; top: 50%;
  width: 16px; height: 16px; margin: -8px 0 0; vertical-align: baseline;
  border: 2px solid rgba(246, 241, 230, .28);
  border-top-color: var(--drawably-paper);
  border-radius: 50%;
  animation: spin .8s linear infinite;      /* constant speed, no easing */
}





/* ══════════ SNAKE (loading game) ══════════ */
.dw-stage { position: relative; }
.dw-game {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  touch-action: none; user-select: none; -webkit-user-select: none; outline: none; font-family: var(--text);
}
.dw-game[hidden] { display: none; }
.dw-game-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.dw-time { display: inline-flex; align-items: center; gap: 7px; font-family: var(--pen); font-size: 17px; color: var(--ink); }
.dw-x {
  width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; transition: transform .25s ease, background .2s ease;
}
.dw-x:hover { background: rgba(45, 40, 35, .09); transform: rotate(90deg); }
.dw-x:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }
.dw-game-hint { display: flex; justify-content: space-between; gap: 8px; width: 100%; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.dw-game-hint b { font-weight: 600; color: var(--ink); white-space: nowrap; }
html body .dw-board { position: relative; display: block; padding: 5px; margin: auto 0; }
.dw-board canvas { display: block; }
.dw-msg {
  position: absolute; inset: 5px; display: grid; place-items: center; text-align: center; padding: 14px;
  font-family: var(--pen); font-size: 17px; line-height: 1.3; color: var(--ink); background: rgba(246, 241, 230, .6);
}
.dw-msg:empty { display: none; }





/* ══════════ INSTALL APP BUTTON ══════════ */
/* PC: sits on the LEFT of the navbar, Report an issue stays on the right */
html body #installChip {
  order: -1; margin: 0 auto 0 0;
  --drawably-fill: var(--teal); --drawably-stroke: var(--teal);
  color: var(--drawably-paper); background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0;
  font-family: var(--text); font-weight: 600; padding: 9px 18px;
}
html body #installChip i { opacity: 1; }
html.dw-installed body #installChip { display: none; }   /* already installed: hide it */

/* Mobile: Install replaces Report an issue, on the right */
@media (max-width: 640px) {
  html body #installChip { order: 1; margin: 0; padding: 7px 14px; font-size: 12.5px; }
  html body #reportChip { display: none; }
  html.dw-installed body #reportChip { display: inline-flex; }   /* installed: Report comes back */
}

/* install popup */
.dw-install .cred-modal { max-width: 380px; }
.dw-app-icon { display: block; width: 56px; height: 56px; border-radius: 14px; margin: 0 0 12px; }
.dw-steps { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.dw-steps[hidden] { display: none; }
.dw-help { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-2); text-align: center; }
.dw-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--teal); text-decoration: underline wavy; text-underline-offset: 3px; cursor: pointer; }
.dw-install .cred-btn-primary { --drawably-fill: var(--teal); --drawably-stroke: var(--teal); color: var(--drawably-paper); }
.dw-toast {
  /* Centered with left/right + auto margins (NOT left:50% + translateX): left:50% leaves only half the
     screen as available width, which squeezed the text into 4 lines on phones. */
  position: fixed; left: 0; right: 0; margin-inline: auto; z-index: 300;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: min(92vw, 640px); box-sizing: border-box;
  padding: 12px 20px; border-radius: 14px; background: var(--ink); color: var(--drawably-paper);
  font-size: 13.5px; font-weight: 600; line-height: 1.45; text-align: center;
  text-wrap: balance; overflow-wrap: anywhere; animation: dw-rise .4s ease backwards;
}
@media (max-width: 520px) {
  .dw-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); padding: 10px 16px; font-size: 13px; border-radius: 12px; }
}



/* ── Popups keep a solid background no matter what ── */
html body .report-modal,
html body .cred-modal {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(45, 36, 28, .25);
}

/* ── Install popup: the Install button stays solid while the browser's own prompt is open ── */
html body .dw-install .cred-btn-primary:disabled { opacity: 1; cursor: progress; }


/* ══════════ STATS TAB ══════════ */
html body .pdf-bar { background: var(--ink); }
#pdfViewer.is-stats { background: transparent; }
#pdfViewer.is-stats #pdfLoadingMsg { display: none !important; }
.st-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.12); }
.st-tabs button { border: 0; background: none; color: #fff; opacity: .65; font: 600 13px var(--text); padding: 6px 16px; border-radius: 999px; cursor: pointer; }
.st-tabs button[aria-selected="true"] { background: var(--teal); opacity: 1; }
#statsView { max-width: 980px; margin: 0 auto; padding: 24px 16px 40px; font-family: var(--text); color: var(--ink); }
#statsView[hidden] { display: none; }
.st-summary, .st-card { --drawably-stroke: var(--ink-2); padding: 22px; text-align: left; }
.st-summary { text-align: center; margin-bottom: 18px; padding: 28px 22px; }
.st-summary > .drawably-svg .drawably-outline, .st-card > .drawably-svg .drawably-outline { fill: var(--surface); }
.st-safe  { --drawably-stroke: var(--teal); --tone: var(--teal); }
.st-warn  { --drawably-stroke: #b9822a;     --tone: #b9822a; }
.st-short { --drawably-stroke: var(--drawably-error); --tone: var(--drawably-error); }
.st-idle  { --drawably-stroke: var(--ink-2); --tone: var(--ink-2); }
.st-big { font: 400 64px/1 var(--pen); color: var(--tone); }
.st-cap { margin-top: 6px; font-weight: 700; }
.st-sub, .st-card header p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); }
.st-line { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--tone); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.st-card { animation: dw-rise .5s cubic-bezier(.2,.7,.2,1) var(--d, 0s) backwards; }
.st-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.st-card h3 { margin: 0; font: 400 20px var(--pen); }
.st-badge { font: 700 10.5px var(--text); letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); white-space: nowrap; }
.st-pct { margin: 10px 0 8px; font: 400 30px/1 var(--pen); color: var(--tone); }
.st-bar { position: relative; height: 8px; border-radius: 99px; background: rgba(45,36,28,.12); }
.st-bar i { display: block; height: 100%; border-radius: 99px; background: var(--tone); }
.st-bar b { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); opacity: .55; }
.st-rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; }
.st-rows li { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: baseline; }
.st-rows li > span:first-child { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; color: var(--ink-2); }
.st-rows em { font-style: normal; font-weight: 700; color: var(--tone); }
.st-foot { margin: 22px 4px 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); text-align: center; }
@media (max-width: 520px) { .st-big { font-size: 52px; } .st-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .st-card { animation: none !important; } }



/* Stats summary: balanced, tidy line breaks */
.st-summary .st-line,
.st-sub { text-wrap: balance; }
.st-summary .st-line { margin: 6px auto 0; max-width: 34ch; }
.st-card .st-line { text-wrap: pretty; }


#statsView, #backlogView { max-width: 980px; margin: 0 auto; padding: 24px 16px 40px; font-family: var(--text); color: var(--ink); }
#backlogView[hidden] { display: none; }



.st-tabs button:disabled { opacity: .3; cursor: not-allowed; }
#statsView, #backlogView { max-width: 980px; margin: 0 auto; padding: 24px 16px 40px; font-family: var(--text); color: var(--ink); }
#backlogView[hidden] { display: none; }



/* ══════════ ADD THIS AT THE VERY END OF drawably-theme.css (do not replace the file) ══════════ */

/* Stats / Backlog / PDF tabs: a tab with no data is greyed out, not removed */
.st-tabs button:disabled { opacity: .3; cursor: not-allowed; }

/* The Backlog view needs the same container styling the Stats view already has */
#statsView, #backlogView { max-width: 980px; margin: 0 auto; padding: 24px 16px 40px; font-family: var(--text); color: var(--ink); }
#backlogView[hidden] { display: none; }

/* Google Sans for the small texts on the cards (big numbers and headings keep the pen font).
   If Google Sans is not loaded, it falls back to your normal font. */
html body :is(#statsView, #backlogView) :is(.st-cap, .st-sub, .st-line, .st-badge, .st-foot,
                                             .st-card header p, .st-rows, .st-rows *) {
  font-family: "Google Sans", "Google Sans Flex", var(--text);
}



/* ══════════ ADD THIS BELOW THE EARLIER BLOCK AT THE END OF drawably-theme.css ══════════ */

/* PDF bar: the Download button gets its own spot, away from the tabs.
   Desktop: title on the left, tabs in the middle, Download on the right.
   Phone: title and Download on the top row, the tabs on their own full-width row underneath. */
html body .pdf-bar { row-gap: 10px; }
html body .pdf-bar > span { order: 1; }
html body .pdf-bar .st-tabs { order: 2; }
html body .pdf-bar #pdfDownload {
  order: 3; margin-left: auto;
  background: transparent; color: var(--drawably-paper);
  border: 1.5px solid rgba(246, 241, 230, .45);
  padding: 6px 14px; font-size: 13px;
}
html body .pdf-bar #pdfDownload:hover { background: var(--teal); border-color: var(--teal); }

@media (max-width: 640px) {
  html body .pdf-bar #pdfDownload { order: 2; }
  html body .pdf-bar .st-tabs { order: 3; flex: 1 1 100%; }
  html body .pdf-bar .st-tabs button { flex: 1; min-height: 40px; }   /* bigger, evenly sized tap targets */
}


/* ══════════ ADD THIS AT THE VERY END OF drawably-theme.css (below the earlier blocks) ══════════ */

/* Desktop: the tabs sit in the exact middle of the bar, whatever the width of the title or Download button.
   (Phones keep the layout from the earlier block.) */
@media (min-width: 641px) {
  html body .pdf-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  html body .pdf-bar > span { grid-column: 1; justify-self: start; }
  html body .pdf-bar .st-tabs { grid-column: 2; justify-self: center; }
  html body .pdf-bar #pdfDownload { grid-column: 3; justify-self: end; margin-left: 0; }
}


/* ══════════ STATS CARDS: tidy footer ══════════
   Before: every footer line was its own .st-line with an 8px top margin (uneven gaps) and "pretty" wrapping
   left one-word orphans. Now the footer is ONE block right under the numbers: a dashed divider, lines close
   together (4px), and even line wrapping. */
.st-card .st-notes {
  margin-top: 12px; padding-top: 11px;
  border-top: 1.5px dashed color-mix(in srgb, var(--tone) 32%, transparent);
  display: flex; flex-direction: column; gap: 4px;
}
.st-card .st-notes .st-line {
  margin: 0; font-size: 12.5px; line-height: 1.4;
  text-wrap: balance; overflow-wrap: anywhere;
}
.st-card .st-notes .st-line + .st-line { font-weight: 500; }   /* first line is the headline, the rest support it */


/* ══════════ STATS CARDS: line the sections up across a row ══════════
   A card with theory + practical has one more number row than a theory-only card, which pushed its divider
   lower than its neighbours. With subgrid every card in a grid row shares the same row heights (heading, %, bar,
   numbers, footer), so the dividers line up. Cards in 1 column are unaffected.
   Gaps come from the card's bottom margin (not the grid gap) so the tracks inside a card stay tight. */
.st-grid { row-gap: 0; margin-bottom: -16px; }
.st-grid > .st-card { margin-bottom: 16px; }
@supports (grid-template-rows: subgrid) {
  .st-grid > .st-card {
    display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  }
}

/* Mobile: gentle attention cue on "Install app" (shine sweep + soft ripple every ~3s, stops once installed) */
@media (max-width: 640px) {
  html:not(.dw-installed) body #installChip::before,
  html:not(.dw-installed) body #installChip::after {
    content: ""; position: absolute; inset: 3px; border-radius: 9px; pointer-events: none;
  }
  /* light sweep across the button */
  html:not(.dw-installed) body #installChip::after {
    z-index: 2;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%) no-repeat;
    background-size: 260% 100%;
    background-position: 160% 0;
    animation: dw-install-shine 3s ease-in-out 3s infinite;
  }
  /* soft teal ripple ring behind it */
  html:not(.dw-installed) body #installChip::before {
    z-index: -1;
    box-shadow: 0 0 0 0 rgba(31,122,111,.45);
    animation: dw-install-ripple 3s ease-out 3s infinite;
  }
}
@keyframes dw-install-shine {
  0%   { background-position: 160% 0; }
  42%  { background-position: -60% 0; }
  100% { background-position: -60% 0; }
}
@keyframes dw-install-ripple {
  0%   { box-shadow: 0 0 0 0 rgba(31,122,111,.45); }
  51%  { box-shadow: 0 0 0 10px rgba(31,122,111,0); }
  100% { box-shadow: 0 0 0 10px rgba(31,122,111,0); }
}
@media (prefers-reduced-motion: reduce) {
  html body #installChip::before, html body #installChip::after { animation: none !important; }
}