/* Persona pages (theme/layouts/persona.html). Loaded after site.css by a page's css: list; every class here starts
   with p- so nothing in site.css changes meaning. A persona page wears the app theme that persona gets
   (vionote web/src/app/PersonaScreen.tsx PERSONA_LOOK): students → Doodle (web/src/themes/doodle.css, light — "Study
   is white + Doodle"). The site's header, footer, gold buttons and type stay the brand's. */

/* ── Doodle: lavender graph paper, navy ink (doodle.css --bg, --pattern, --ink, --muted, --accent, --line-2) ── */
.p-doodle {
  --d-bg: #F3F0FC; --d-grid: #E4DEF6; --d-ink: #2A285E; --d-muted: #5A578A; --d-acc: #5646C9;
  --d-soft: #E9E3FD; --d-line: #CEC6EC; --d-hi: #FFE48C;
  --p-ink: var(--d-ink); --p-muted: var(--d-muted); --p-line: var(--d-line); --p-acc: var(--d-acc); --p-soft: var(--d-soft);
  background-color: var(--d-bg);
  background-image: linear-gradient(var(--d-grid) 1px, transparent 1px), linear-gradient(90deg, var(--d-grid) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--d-ink);
}

/* ── the hero: the board becomes a study note ── */
.p-hero .wrap { display: grid; gap: 44px; padding-top: 52px; padding-bottom: 64px; }
.p-hero h1 { margin-top: 16px; font-size: clamp(40px, 4.6vw, 62px); font-weight: 850; letter-spacing: -0.04em; line-height: 1.02; max-width: 16ch; }
.p-line { margin-top: 18px; max-width: 46ch; font-size: 19px; color: var(--p-muted); }
.p-go { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.p-ghost { border: 1.5px solid var(--p-ink); color: var(--p-ink); background: #fff; }
.p-small { margin-top: 16px; font-size: 15px; color: var(--p-muted); max-width: 46ch; }
.p-small b { color: var(--p-ink); }

.p-shift { display: grid; gap: 12px; align-content: start; }
.p-board { margin: 0; border-radius: 14px; background: #fff; border: 6px solid #B9BEC7; box-shadow: 0 16px 34px -22px rgba(42,40,94,.55); overflow: hidden; }
.p-board svg { display: block; width: 100%; height: auto; }
.p-board figcaption { padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--d-muted); background: #F6F6F8; border-top: 1px solid #E3E5EA; }
.p-tap { justify-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--d-acc); color: #fff; font-weight: 800; font-size: 15px; font-family: "Nunito Variable", var(--sans); }
.p-tap::before { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff; }
.p-note { border-radius: 18px; background: #fff; border: 1.5px solid var(--d-line); box-shadow: 5px 5px 0 var(--d-soft); padding: 18px 20px;
  font-family: "Nunito Variable", var(--sans); }
.p-note h3 { font-size: 21px; font-weight: 850; letter-spacing: -0.01em; }
.p-note .p-meta { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--d-muted); }
.p-note .p-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.p-note .p-tags span { padding: 2px 9px; border-radius: 999px; background: var(--d-soft); color: var(--d-acc); font-size: 13px; font-weight: 800; }
.p-note ul { margin: 12px 0 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.45; }
.p-hi { background: linear-gradient(100deg, transparent 2%, var(--d-hi) 6%, var(--d-hi) 93%, transparent 99%); padding: 0 3px; font-weight: 800; }
.p-note .p-foot { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.p-note .p-foot span { padding: 4px 11px; border-radius: 999px; background: #FFF4D6; color: #6B4A00; font-size: 13px; font-weight: 800; }

/* ── what you tap, and what you get: the app's own button names ── */
.p-taps { margin-top: 34px; border-top: 1px solid var(--line); }
.p-taps > div { display: grid; gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.p-btn { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid #CEC6EC; background: #fff; color: #5646C9; font-weight: 800; font-size: 15px; font-family: "Nunito Variable", var(--sans); }
.p-taps p { color: #33425E; max-width: 60ch; }
.p-taps p b { color: var(--ink); }
.p-note-line { margin-top: 18px; font-size: 15px; color: var(--muted); max-width: 70ch; }

/* ── the app pictures, in Doodle (the home page's .app.doodle, plus what these pages add) ── */
.doodle .chip { background: #E9E3FD; color: #5646C9; }
.p-swipe { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: #5A578A; }
.p-math .p-row { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; min-height: 52px; padding: 8px 12px;
  border-radius: 12px; background: #fff; border: 1px solid #E4DFF5; margin-top: 8px; }
.p-math .p-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: #E9E3FD; color: #5646C9; font-weight: 850; font-size: 14px; }
.p-math .p-eq { font-style: italic; font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.p-math .p-say { grid-column: 1 / -1; font-size: 15px; color: #5A578A; }
.p-math .p-keys { margin-top: 12px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.p-math .p-keys span { display: flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 9px; background: #fff;
  border: 1px solid #CEC6EC; font-weight: 700; font-size: 15px; }
.p-ask { display: grid; gap: 10px; }
.p-ask .p-in { justify-self: start; padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid #CEC6EC; font-size: 13px; font-weight: 800; color: #5A578A; }
.p-ask .p-q { justify-self: end; max-width: 88%; background: #5646C9; color: #fff; font-weight: 700; font-size: 15px; padding: 9px 14px; border-radius: 16px 16px 4px 16px; }
.p-ask .p-a { display: flex; gap: 9px; align-items: flex-start; }
.p-ask .p-a img { width: 28px; height: 28px; border-radius: 30%; background: #fff; border: 1px solid #E4DFF5; flex: none; }
.p-ask .p-a > div { background: #fff; border: 1px solid #E4DFF5; border-radius: 16px 16px 16px 4px; padding: 10px 13px; font-size: 15px; line-height: 1.45; }
.p-ask .chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.p-ask .p-cost { font-size: 13px; color: #5A578A; font-weight: 700; }

/* ── everything else a term needs: an index, not cards ── */
.p-more { margin-top: 34px; display: grid; gap: 0 40px; border-top: 1px solid var(--line); }
.p-more > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.p-more h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.p-more p { margin-top: 6px; color: var(--muted); }

/* ── the Doodle band: the theme itself is the picture ── */
.p-paper .wrap { padding-top: 72px; padding-bottom: 72px; }
.p-paper h2 { font-size: clamp(30px, 3.8vw, 42px); font-weight: 820; letter-spacing: -0.035em; max-width: 22ch; }
.p-paper p { margin-top: 12px; max-width: 58ch; font-size: 18px; color: var(--p-muted); }
.p-paper .p-pick { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.p-doodle .p-pick { font-family: "Nunito Variable", var(--sans); }
.p-paper .p-pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; background: #fff;
  border: 1.5px solid var(--p-line); font-weight: 800; color: var(--p-muted); }
.p-paper .p-pick span.on { border-color: var(--p-acc); color: var(--p-ink); box-shadow: 3px 3px 0 var(--p-soft); }

/* ── a short word on price ── */
.p-price { display: grid; gap: 10px; }
.p-price p { color: #33425E; max-width: 66ch; }

@media (min-width: 1024px) {
  .p-hero .wrap { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 64px; padding-top: 72px; padding-bottom: 88px; }
  .p-shift { grid-template-columns: 1fr; }
  .p-board { width: 86%; transform: rotate(-1.5deg); }
  .p-tap { justify-self: start; margin-inline-start: 40%; position: relative; z-index: 2; margin-top: -26px; margin-bottom: -22px; }
  .p-note { width: 84%; justify-self: end; position: relative; }
  .p-taps > div { grid-template-columns: 240px 1fr; }
  .p-more { grid-template-columns: repeat(2, 1fr); }
}

/* ── Professors: the Notebook theme (web/src/themes/notebook.css, light: ruled paper with a margin line, ballpoint blue,
   a highlighter; dark: a chalkboard) ── */
.p-notebook {
  --n-bg: #F1F3F9; --n-rule: #D6E2F3; --n-margin: #F8D7DF; --n-ink: #1F2A5A; --n-muted: #556089; --n-acc: #2F54EB;
  --n-hi: #FFF07A; --n-soft: #FFF8C4; --n-line: #E1E6F0; --n-line2: #C8D1E3;
  --p-ink: var(--n-ink); --p-muted: var(--n-muted);
  background-color: var(--n-bg);
  background-image: linear-gradient(to right, transparent 40px, var(--n-margin) 40px, var(--n-margin) 42px, transparent 42px),
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--n-rule) 27px 28px);
  color: var(--n-ink);
}
.p-chalk { --c-bg: #17231E; --c-board: linear-gradient(170deg, #24473A, #183329); --c-ink: #EEF3EC; --c-muted: #A9BBAF; --c-acc: #F4D35E;
  background: var(--c-board); color: var(--c-ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(255,255,255,.06) 27px 28px), linear-gradient(170deg, #24473A, #183329); }

/* the hero: one notebook, shared out to each student */
.p-fan { position: relative; display: grid; gap: 14px; }
.p-desk { border-radius: 18px; background: #fff; border: 1px solid #C8D1E3; box-shadow: 0 18px 36px -24px rgba(31,42,90,.55); padding: 18px; color: #1F2A5A; }
.p-desk .p-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p-desk .p-hd b { font-size: 19px; font-weight: 850; letter-spacing: -0.02em; }
.p-desk .p-chip { padding: 3px 10px; border-radius: 999px; background: #E6ECFF; color: #2F54EB; font-size: 13px; font-weight: 800; }
.p-secs { margin-top: 10px; display: grid; gap: 6px; }
.p-secs span { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid #E1E6F0; font-weight: 700; font-size: 15px; }
.p-secs span small { color: #556089; font-weight: 600; font-size: 13px; }
.p-secs span.on { border-color: #2F54EB; box-shadow: inset 4px 0 0 #2F54EB; }
.p-share { margin-top: 12px; border-radius: 14px; background: #F7F9FD; border: 1px solid #E1E6F0; padding: 12px; display: grid; gap: 8px; }
.p-share .p-st { font-weight: 800; font-size: 14.5px; }
.p-share .p-field { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; background: #fff; border: 1px solid #C8D1E3; font-size: 14.5px; color: #1F2A5A; }
.p-share .p-seg { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid #C8D1E3; border-radius: 10px; overflow: hidden; justify-self: start; }
.p-share .p-seg span { padding: 7px 14px; font-size: 13.5px; font-weight: 800; color: #556089; background: #fff; }
.p-share .p-seg span.on { background: #2F54EB; color: #fff; }
.p-share .p-go2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.p-share .p-btn2 { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 10px; background: #1F2A5A; color: #fff; font-weight: 800; font-size: 14px; }
.p-share .p-toast { font-size: 13px; font-weight: 700; color: #1C7C4A; }
.p-phones { display: grid; gap: 10px; }
.p-phone { border-radius: 18px; background: #fff; border: 1px solid #C8D1E3; padding: 12px 14px; box-shadow: 0 12px 26px -20px rgba(31,42,90,.6); color: #1F2A5A; }
.p-phone small { display: block; font-size: 12px; font-weight: 700; color: #556089; }
.p-phone b { display: block; margin-top: 2px; font-size: 16px; font-weight: 850; }
.p-phone .p-by { margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; color: #556089; }
.p-phone .p-by i { white-space: nowrap; font-style: normal; padding: 2px 9px; border-radius: 8px; background: #FFF8C4; color: #1F2A5A; font-weight: 800; font-size: 12.5px; }
.p-mail { border-radius: 14px; background: #fff; border: 1px dashed #C8D1E3; padding: 10px 12px; font-size: 13.5px; color: #33425E; }
.p-mail b { color: #1F2A5A; }

/* how sharing works: a real sequence, so numbered */
.p-steps { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 0; counter-reset: step; border-top: 1px solid var(--line); }
.p-steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.p-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: #E6ECFF; color: #2F54EB; font-weight: 850; font-size: 18px; }
.p-steps b { color: var(--ink); }
.p-steps p { color: #33425E; max-width: 62ch; }

/* Can view and Can edit, side by side */
.p-roles { margin-top: 34px; display: grid; gap: 16px; }
.p-roles > div { border-radius: 20px; border: 1px solid var(--line); background: #fff; padding: 24px; }
.p-roles .p-role { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 9px; font-weight: 850; font-size: 15px; }
.p-roles .view { background: #FFF8C4; color: #1F2A5A; }
.p-roles .edit { background: #E6ECFF; color: #2F54EB; }
.p-roles p.p-who { margin-top: 10px; color: var(--muted); }
.p-roles ul { margin: 14px 0 0; padding-inline-start: 20px; display: grid; gap: 8px; color: #33425E; }

/* a notebook as one PDF: its front page */
.p-pdf { border-radius: 6px; background: #fff; border: 1px solid #C8D1E3; box-shadow: 0 22px 40px -26px rgba(31,42,90,.55); padding: 26px 28px 30px;
  max-width: 420px; justify-self: center; width: 100%; color: #1F2A5A; display: flex; flex-direction: column; }
.p-pdf .p-mast { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid #1F2A5A; font-size: 12.5px; font-weight: 800; color: #556089; }
.p-pdf .p-mast img { width: 26px; height: 26px; border-radius: 30%; }
.p-pdf .p-kind { margin-top: 18px; font-size: 13px; font-weight: 800; color: #556089; }
.p-pdf h3 { font-size: 26px; font-weight: 850; letter-spacing: -0.02em; }
.p-pdf .p-count { margin-top: 4px; font-size: 13px; color: #556089; }
.p-pdf .p-toc { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 7px; font-size: 14px; }
.p-pdf .p-toc li { counter-increment: toc; display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline;
  border-bottom: 1px dotted #C8D1E3; padding-bottom: 6px; }
.p-pdf .p-toc li::before { content: counter(toc) "."; color: #556089; font-weight: 700; }
.p-pdf .p-toc li span { color: #2F54EB; font-weight: 700; }
.p-pdf .p-toc li small { color: #556089; font-size: 12px; }

/* the theme band: ruled paper by day, a chalkboard at night */
.p-split { display: grid; }
.p-split > div { padding: 64px 24px; }
.p-split .p-in { max-width: 520px; margin: 0 auto; }
.p-split h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 820; letter-spacing: -0.03em; }
.p-split p { margin-top: 10px; font-size: 17.5px; }
.p-split .p-notebook p { color: var(--n-muted); }
.p-split .p-chalk p { color: var(--c-muted); }
.p-split .p-chalk h2 { color: var(--c-ink); }
.p-split .p-chalk h2 em { font-style: normal; color: var(--c-acc); }
.p-split .p-notebook h2 em { font-style: normal; background: linear-gradient(100deg, transparent 2%, var(--n-hi) 6%, var(--n-hi) 93%, transparent 99%); padding: 0 4px; }

@media (min-width: 1024px) {
  .p-fan { grid-template-columns: 1fr; }
  .p-desk { width: 58%; }
  .p-phones { position: absolute; inset-inline-end: 0; top: 34px; width: 39%; }
  .p-phones .p-phone:nth-child(2) { margin-inline-start: 10px; }
  .p-phones .p-phone:nth-child(3) { margin-inline-start: 20px; }
  .p-roles { grid-template-columns: 1fr 1fr; }
  .p-split { grid-template-columns: 1fr 1fr; }
  .p-split > div { padding: 80px 48px; }
}

/* ── Field staff: the Field theme (web/src/themes/field.css, light: plain and high-contrast for sunlight, safety orange
   and hi-vis yellow, a thick bar on the chosen row; dark: night shift) ── */
.p-field { --f-bg: #F1F2F4; --f-line: #D5D8DE; --f-line2: #B9BEC7; --f-ink: #0F1115; --f-muted: #3F4652; --f-acc: #C2410C;
  --f-vis: #FACC15; --f-soft: #FFF1E6; --p-ink: var(--f-ink); --p-muted: var(--f-muted);
  --p-line: var(--f-line2); --p-acc: var(--f-acc); --p-soft: var(--f-soft);
  background: var(--f-bg); color: var(--f-ink); }
.p-tape { height: 16px; background: repeating-linear-gradient(-45deg, #FACC15 0 18px, #0F1115 18px 36px); }
.p-night { --n2-bg: #0E1012; --n2-surface: #1A1D21; --n2-line: #30343A; --n2-ink: #F5F5F5; --n2-muted: #C3C8D0; --n2-acc: #FACC15;
  background: var(--n2-bg); color: var(--n2-ink); }

/* the hero: a phone filling in a Site visit report */
.p-device { justify-self: center; width: min(100%, 340px); border-radius: 38px; background: #0F1115; padding: 12px; box-shadow: 0 30px 50px -30px rgba(15,17,21,.7); }
.p-screen { border-radius: 28px; background: #F1F2F4; overflow: hidden; color: #0F1115; }
.p-sbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; background: #fff; border-bottom: 1px solid #D5D8DE; }
.p-sbar b { font-size: 16px; font-weight: 850; }
.p-sbar span { padding: 3px 9px; border-radius: 8px; background: #FFF1E6; color: #C2410C; font-weight: 800; font-size: 12.5px; }
.p-rows { padding: 10px 12px 4px; display: grid; gap: 7px; }
.p-r { background: #fff; border: 1px solid #D5D8DE; border-radius: 12px; padding: 8px 11px; }
.p-r small { display: block; font-size: 11.5px; font-weight: 800; color: #3F4652; }
.p-r small i { font-style: normal; color: #C2410C; }
.p-r p { margin-top: 1px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.p-r.on { box-shadow: inset 4px 0 0 #F97316; }
.p-thumb { margin-top: 5px; display: flex; gap: 6px; align-items: center; }
.p-thumb svg { width: 96px; height: 50px; border-radius: 6px; border: 1px solid #B9BEC7; display: block; }
.p-thumb span { padding: 3px 9px; border-radius: 8px; border: 1.5px solid #0F1115; font-size: 12px; font-weight: 800; }
.p-ticks { margin-top: 3px; display: grid; gap: 2px; font-size: 13px; font-weight: 700; }
.p-sig { display: block; margin-top: 2px; width: 140px; height: 34px; }
.p-sfoot { display: flex; gap: 8px; padding: 10px 12px 14px; }
.p-sfoot span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; font-weight: 850; font-size: 15px; }
.p-sfoot .p-fin { background: #C2410C; color: #fff; }
.p-sfoot .p-pdf2 { background: #fff; border: 2px solid #0F1115; }

/* three starter templates */
.p-tpls { margin-top: 34px; display: grid; gap: 16px; }
.p-tpls > div { border-radius: 18px; background: #fff; border: 1px solid var(--line); padding: 22px; box-shadow: inset 0 5px 0 #C2410C; }
.p-tpls h3 { font-size: 21px; font-weight: 850; letter-spacing: -0.02em; }
.p-tpls ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.p-tpls li { padding: 3px 10px; border-radius: 8px; background: #F1F2F4; border: 1px solid #D5D8DE; font-size: 13.5px; font-weight: 650; color: #3F4652; }
.p-kinds { margin-top: 22px; color: #33425E; max-width: 72ch; }

/* photo markup: the tools with their names */
.p-mark { border-radius: 20px; background: #F1F2F4; border: 1px solid #D5D8DE; padding: 16px; }
.p-mark svg { width: 100%; height: auto; display: block; border-radius: 12px; border: 2px solid #B9BEC7; }
.p-tools { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.p-tools span { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 10px; background: #fff; border: 1px solid #B9BEC7;
  font-weight: 800; font-size: 13.5px; color: #0F1115; }
.p-tools span.on { box-shadow: inset 0 -4px 0 #C2410C; border-color: #0F1115; }

/* the report's PDF */
.p-rpdf { border-radius: 6px; background: #fff; border: 1px solid #D5D8DE; box-shadow: 0 22px 40px -26px rgba(15,17,21,.5); padding: 22px 24px;
  max-width: 440px; justify-self: center; width: 100%; color: #0F1115; }
.p-rpdf .p-mast { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid #0F1115; font-size: 12px; font-weight: 800; color: #3F4652; }
.p-rpdf .p-mast img { width: 22px; height: 22px; border-radius: 30%; }
.p-rpdf h3 { margin-top: 12px; font-size: 21px; font-weight: 850; }
.p-rpdf table { margin-top: 10px; width: 100%; border-collapse: collapse; font-size: 13px; }
.p-rpdf td { padding: 6px 4px; border-bottom: 1px solid #E3E5EA; vertical-align: top; }
.p-rpdf td:first-child { width: 36%; color: #3F4652; font-weight: 700; }
.p-rpdf svg { margin-top: 10px; width: 100%; height: auto; border-radius: 6px; display: block; }

/* expenses */
.p-exp { border-radius: 20px; background: #F1F2F4; border: 1px solid #D5D8DE; padding: 18px; color: #0F1115; }
.p-exp .p-ehd { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-exp .p-ehd b { font-size: 17px; font-weight: 850; }
.p-exp .p-ehd span { padding: 3px 10px; border-radius: 8px; background: #0F1115; color: #FACC15; font-weight: 800; font-size: 12.5px; }
.p-exp .p-erow { margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; background: #fff; border: 1px solid #D5D8DE; border-radius: 12px; padding: 9px 12px; }
.p-exp .p-erow b { font-size: 14.5px; }
.p-exp .p-erow small { color: #3F4652; font-size: 12.5px; font-weight: 650; }
.p-exp .p-erow .p-amt { font-weight: 850; text-align: end; }
.p-exp .p-dup { grid-column: 1 / -1; margin-top: 4px; justify-self: start; padding: 2px 9px; border-radius: 8px; background: #FFF1E6; color: #9A3412; font-size: 12px; font-weight: 800; }
.p-exp .p-etot { margin-top: 10px; display: flex; justify-content: space-between; font-weight: 850; font-size: 16px; padding: 0 4px; }
.p-exp .p-ebtn { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.p-exp .p-ebtn span { padding: 7px 12px; border-radius: 10px; background: #fff; border: 1.5px solid #0F1115; font-weight: 800; font-size: 13px; }

/* no signal: the night shift */
.p-night .wrap { padding-top: 80px; padding-bottom: 80px; display: grid; gap: 34px; }
.p-night h2 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 820; letter-spacing: -0.035em; max-width: 20ch; }
.p-night .p-nl { margin-top: 12px; font-size: 18px; color: var(--n2-muted); max-width: 54ch; }
.p-night ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: n; }
.p-night ol li { counter-increment: n; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; background: var(--n2-surface);
  border: 1px solid var(--n2-line); border-radius: 14px; padding: 14px 16px; color: var(--n2-muted); }
.p-night ol li::before { content: counter(n); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px;
  background: var(--n2-acc); color: #0F1115; font-weight: 850; }
.p-night ol li b { color: var(--n2-ink); }
.p-night .p-nnote { font-size: 15px; color: var(--n2-muted); }

@media (min-width: 1024px) {
  .p-tpls { grid-template-columns: repeat(3, 1fr); }
  .p-night .wrap { grid-template-columns: 1fr 1.1fr; align-items: center; }
}

/* ── Busy days: the Studio theme (web/src/themes/studio.css — the default, "Something else": a dotted page, indigo and
   violet; its sticky colours) ── */
.p-studio { --s-bg: #F3F4F9; --s-dot: #DCDFEC; --s-ink: #17182B; --s-muted: #565A73; --s-acc: #4757E6; --s-acc2: #A04CF0;
  --s-soft: #ECEEFF; --s-line: #E1E4EF; --s-line2: #C9CEDF;
  --p-ink: var(--s-ink); --p-muted: var(--s-muted); --p-line: var(--s-line2); --p-acc: var(--s-acc); --p-soft: var(--s-soft);
  background-color: var(--s-bg); background-image: radial-gradient(var(--s-dot) 1.1px, transparent 1.4px); background-size: 16px 16px;
  color: var(--s-ink); }

/* the hero: one day, in order */
.p-day { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; position: relative; }
.p-day::before { content: ""; position: absolute; inset-inline-start: 58px; top: 10px; bottom: 10px; width: 2px; background: #C9CEDF; }
.p-day > li { display: grid; grid-template-columns: 50px 18px 1fr; gap: 0 10px; align-items: start; }
.p-day .p-t { padding-top: 12px; text-align: end; font-size: 13px; font-weight: 800; color: #565A73; }
.p-day .p-dot { margin-top: 15px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #4757E6; position: relative; z-index: 1; }
.p-day .p-c { background: #fff; border: 1px solid #E1E4EF; border-radius: 16px; padding: 12px 14px; box-shadow: 0 10px 24px -20px rgba(23,24,43,.5); color: #17182B; }
.p-day .p-c small { display: block; font-size: 12px; font-weight: 800; color: #565A73; }
.p-day .p-c p { margin-top: 4px; font-size: 14.5px; line-height: 1.45; }
.p-vrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.p-vrow .p-play { width: 36px; height: 36px; border-radius: 50%; background: #4757E6; flex: none; position: relative; }
.p-vrow .p-play::after { content: ""; position: absolute; left: 14px; top: 11px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.p-vrow .p-wv { flex: 1; height: 24px; background: repeating-linear-gradient(90deg, #C9CEDF 0 3px, transparent 3px 7px);
  clip-path: polygon(0 40%, 8% 15%, 16% 55%, 24% 10%, 32% 45%, 40% 20%, 48% 60%, 56% 15%, 64% 50%, 72% 30%, 80% 60%, 88% 25%, 100% 45%, 100% 100%, 0 100%); }
.p-vrow b { font-size: 12.5px; color: #565A73; }
.p-set { margin-top: 6px; display: inline-flex; padding: 3px 10px; border-radius: 999px; background: #ECEEFF; color: #4757E6; font-size: 13px; font-weight: 800; }
.p-push { background: #17182B !important; color: #fff !important; border-color: #17182B !important; }
.p-push small { color: #B9BCE0 !important; }
.p-push .p-acts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.p-push .p-acts span { padding: 5px 10px; border-radius: 9px; background: rgba(255,255,255,.12); font-size: 12.5px; font-weight: 800; }
.p-push .p-acts span:first-child { background: #4757E6; }
.p-day .chip { margin-top: 6px; background: #ECEEFF; color: #4757E6; }

/* the app's own button names, in Studio */
.p-btn.s { font-family: inherit; color: #4757E6; border-color: #C9CEDF; }

/* voice in two scripts */
.p-script { display: grid; gap: 10px; }
.p-script .p-card { background: #fff; border: 1px solid #E1E4EF; border-radius: 16px; padding: 14px 16px; color: #17182B; }
.p-script .p-card small { display: block; font-size: 12.5px; font-weight: 800; color: #565A73; }
.p-script .p-card p { margin-top: 6px; font-size: 16px; }
.p-script .p-seg2 { display: inline-grid; grid-template-columns: auto auto; border: 1px solid #C9CEDF; border-radius: 12px; overflow: hidden; justify-self: start; }
.p-script .p-seg2 span { padding: 9px 14px; font-weight: 800; font-size: 14px; background: #fff; color: #565A73; }
.p-script .p-seg2 span.on { background: #4757E6; color: #fff; }

/* reminders */
.p-rems { display: grid; gap: 8px; }
.p-rems .p-h { font-size: 12.5px; font-weight: 800; color: #565A73; margin-top: 6px; }
.p-rems .p-rm { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid #E1E4EF; border-radius: 12px; padding: 10px 12px; }
.p-rems .p-rm b { font-size: 14.5px; }
.p-rems .p-rm small { color: #565A73; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.p-rems .p-rm.due { border-color: #4757E6; box-shadow: inset 4px 0 0 #4757E6; }

/* stickies: a small wall */
.p-wall { position: relative; min-height: 300px; border-radius: 20px; border: 1px solid #E1E4EF; background-color: #F3F4F9;
  background-image: radial-gradient(#DCDFEC 1.1px, transparent 1.4px); background-size: 16px 16px; overflow: hidden; }
.p-wall .p-st2 { position: absolute; width: 150px; min-height: 110px; padding: 12px; border-radius: 6px; color: #0b1220; font-size: 14px; font-weight: 650; line-height: 1.35;
  box-shadow: 0 10px 18px -12px rgba(11,18,32,.45); }
.p-wall .y { background: #ffe891; left: 6%; top: 10%; transform: rotate(-2deg); }
.p-wall .p { background: #ffc8da; left: 36%; top: 6%; transform: rotate(1.5deg); }
.p-wall .b { background: #b0e3ff; left: 66%; top: 14%; transform: rotate(-1deg); }
.p-wall .g { background: #bdf0cd; left: 18%; top: 54%; transform: rotate(1deg); }
.p-wall .v { background: #dac5fd; left: 52%; top: 56%; transform: rotate(-1.5deg); }

@media (max-width: 520px) {
  .p-wall { min-height: 420px; }
  .p-wall .p-st2 { width: 46%; }
  .p-wall .y { left: 3%; top: 4%; } .p-wall .p { left: 51%; top: 4%; } .p-wall .b { left: 3%; top: 36%; }
  .p-wall .g { left: 51%; top: 36%; } .p-wall .v { left: 27%; top: 68%; }
}

/* ── Teams on Slack: the brand's own ink (the home page's Slack block), no app theme ── */
.p-slack { --p-ink: #FFFFFF; --p-muted: #C9D4EA; background: #0B1A36; color: #fff; }
.p-slack .who { background: rgba(244,168,1,.16); color: #FFD27A; }
.p-slack .p-ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.p-slackbtn { background: #fff; color: #0B1A36; border: 1.5px solid #fff; }
.p-slack .p-slackbtn { box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.p-chat { display: grid; gap: 14px; }
.p-dm { border-radius: 18px; background: #fff; color: #0B1A36; padding: 14px 16px; display: grid; gap: 12px; }
.p-dm .p-dmh { display: flex; align-items: center; gap: 8px; font-weight: 850; font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid #E3E8F2; }
.p-dm .p-dmh img { width: 24px; height: 24px; border-radius: 30%; }
.p-dm .p-m { display: grid; grid-template-columns: 32px 1fr; gap: 10px; }
.p-dm .p-av { width: 32px; height: 32px; border-radius: 8px; background: #CFE3D8; }
.p-dm .p-av.bot { background: #fff; border: 1px solid #E3E8F2; display: flex; align-items: center; justify-content: center; }
.p-dm .p-av.bot img { width: 22px; height: 22px; border-radius: 30%; }
.p-dm .p-m b { font-size: 14px; } .p-dm .p-m b small { color: #4F607C; font-weight: 600; margin-inline-start: 6px; }
.p-dm .p-m p { margin-top: 2px; font-size: 14.5px; line-height: 1.45; }
.p-dm .p-reacts { margin-top: 6px; display: flex; gap: 6px; }
.p-dm .p-reacts span { padding: 2px 8px; border-radius: 999px; background: #EEF3FC; border: 1px solid #C9D7F2; font-size: 12.5px; font-weight: 700; }
.p-dm .chip { margin-top: 6px; }
.p-days { border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); padding: 16px; }
.p-days .p-track { position: relative; height: 10px; border-radius: 999px; margin: 26px 4px 30px;
  background: linear-gradient(90deg, #F4A801 0 25%, rgba(255,255,255,.18) 25% 100%); }
.p-days .p-track i { position: absolute; top: -6px; width: 2px; height: 22px; background: #fff; }
.p-days .p-track i:nth-child(1) { left: 0; } .p-days .p-track i:nth-child(2) { left: 25%; } .p-days .p-track i:nth-child(3) { left: 100%; }
.p-days .p-track em { position: absolute; top: -26px; font-style: normal; font-size: 12px; font-weight: 800; color: #C9D4EA; white-space: nowrap; transform: translateX(-50%); }
.p-days .p-track em:nth-of-type(1) { left: 0; transform: none; } .p-days .p-track em:nth-of-type(2) { left: 25%; transform: translateX(6px); } .p-days .p-track em:nth-of-type(3) { left: 100%; transform: translateX(-100%); }
.p-days .p-keep { height: 10px; border-radius: 999px; background: #F4A801; margin: 0 4px; }
.p-days .p-legend { margin-top: 10px; display: grid; gap: 6px; font-size: 13.5px; color: #C9D4EA; }
.p-days .p-legend b { color: #FFD27A; }

/* the emoji commands */
.p-emoji { margin-top: 34px; display: grid; gap: 14px; }
.p-emoji > div { border-radius: 18px; border: 1px solid var(--line); background: #fff; padding: 22px; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.p-emoji .p-e { font-size: 34px; line-height: 1; text-align: center; }
.p-emoji h3 { font-size: 19px; font-weight: 850; } .p-emoji p { margin-top: 2px; color: var(--muted); }
@media (min-width: 1024px) { .p-emoji { grid-template-columns: repeat(3, 1fr); } }