/* Client portal. Layout after DJI's tools hub: a sign-in card, then a grid
   of icon tiles. Colours come only from the theme tokens, so it follows the
   operator's brand and dark mode with no hex values here. */

/* Header link, every page */
.site-header__account { margin-inline-start: var(--s4); }
.portal-link { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.portal-link:hover { color: var(--primary); }
.portal-link__icon { width: 20px; height: 20px; }

/* Page */
.section--portal { padding-block: var(--s7, 3rem) var(--s9); }
.portal { display: grid; gap: var(--s6, 2rem); justify-items: center; }
.portal-notice { width: min(100%, 440px); }

.portal-card { width: min(100%, 440px); padding: var(--s6, 2rem); background: var(--surface); border: var(--border); border-radius: var(--radius-lg); }
.portal-card__title { margin: 0 0 var(--s4); font-size: var(--step-2); }
.portal-signin__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.btn__icon { width: 18px; height: 18px; }
.portal-signin__help { margin-block: var(--s4) 0; }
.portal-signin__reset { margin-block-start: var(--s3); padding: 0; background: none; border: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; font: inherit; }
.portal-code { font-size: var(--step-2); letter-spacing: .3em; text-align: center; }

/* Tiles */
.portal-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 168px)); gap: var(--s4); justify-content: center; width: 100%; }
.portal-tile {
  display: grid; justify-items: center; align-content: center; gap: var(--s3);
  height: 136px; padding: var(--s4);
  background: var(--surface); color: var(--ink); text-align: center; text-decoration: none; font-weight: 600;
  border: var(--border); border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition);
}
.portal-tile:hover, .portal-tile:focus-visible { border-color: var(--primary); color: var(--ink); transform: translateY(-2px); }
.portal-tile__icon { width: 48px; height: 48px; stroke-width: 1.5; color: var(--primary); }

@media (max-width: 720px) {
  .portal-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header__account .portal-link span { display: none; }
}

/* =====================================================================
   Signed-in dashboard (body.portal-app). Page for page after DJ
   Intelligence's client pages: white top bar with the company name and
   an icon nav, a brand-colour strip naming the page, then one centred
   column of hairline-ruled sections.
   ===================================================================== */

.portal-app { background: var(--surface); }
.pmain { padding: var(--s6) var(--s4) var(--s9); }

/* Top bar */
.ptop { background: var(--surface); }
.ptop__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); max-width: 76rem; margin-inline: auto; padding: var(--s3) var(--s5); }
.ptop__brand { font-weight: 700; font-size: var(--step-0); color: var(--ink); text-decoration: none; white-space: nowrap; }

.pnav { position: relative; }
.pnav__list { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0; margin: 0; padding: 0; list-style: none; }
.pnav__list form { margin: 0; }
.pnav__link {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border: 0; border-radius: 8px; background: none;
  color: var(--ink-2); font: inherit; font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pnav__link:hover { color: var(--ink); background: var(--surface-2); }
.pnav__link[aria-current="page"] { color: var(--ink); background: var(--primary-veil); }
.pnav__icon { width: 18px; height: 18px; flex: none; }
.pnav__toggle { display: none; }

/* Strip */
.pstrip { background: var(--primary); color: var(--primary-ink); }
.pstrip__inner { display: flex; align-items: center; gap: var(--s2); max-width: 76rem; margin-inline: auto; padding: var(--s1) var(--s5); font-size: 0.78rem; font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.pstrip__icon { width: 14px; height: 14px; }

.pbody p, .pbody h1, .pbody h2 { max-width: none; }
.pbody { display: grid; gap: var(--s4); justify-items: center; }
.pbody > .portal-notice { width: min(100%, 56rem); }
.pcol { width: min(100%, 56rem); }
.pcol--form { width: min(100%, 43rem); }
.pcol--wide { width: min(100%, 60rem); }

/* Event head */
.phead { margin-block-end: var(--s6); }
.ptitle { margin: 0; font-size: var(--step-3); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.pwhen { margin: var(--s2) 0 0; color: var(--ink-2); }
.pwhen__dot { margin-inline: var(--s2); color: var(--ink-3); }
.pcount-down { margin: var(--s3) 0 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pswitch { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s3); font-size: var(--step--1); }
.pswitch [aria-current] { font-weight: 700; text-decoration: none; }

/* Section heading with a hairline */
.psec { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) 0 var(--s2); font-size: var(--step-1); }
.psec__icon { width: 22px; height: 22px; flex: none; }
.psec__title { white-space: nowrap; }
.psec__rule { flex: 1; height: 1px; background: var(--rule); }
.psec__right { font-size: 0.78rem; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.psub { margin: 0 0 var(--s3); font-size: var(--step--1); font-style: italic; color: var(--ink-2); }
.pnote { margin: var(--s4) 0 0; }
.pfoot { margin-block-start: var(--s7); }
.plabel { display: block; margin-block-end: var(--s2); font-size: var(--step--1); font-weight: 700; color: var(--ink); }
.plink { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); text-decoration: none; }
.plink:hover { text-decoration: underline; }
.plink__icon { width: 16px; height: 16px; }
.pactions { display: flex; justify-content: flex-end; margin-block-start: var(--s5); }
.pbtn { gap: var(--s2); }

/* Rows: checklist, forms, files, activities */
.prows { margin: 0; padding: 0; list-style: none; }
.prow {
  position: relative; display: flex; align-items: center; gap: var(--s4);
  min-height: 3.5rem; padding: var(--s2) var(--s3);
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 30%, var(--rule));
}
.prow.is-done { color: var(--ink-2); }
.prow__label { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.prow__label--strong { font-weight: 700; }
.prow__label--light { font-weight: 400; }
a.prow__label:hover { text-decoration: underline; }
.prow__edit { display: inline-flex; align-items: center; gap: var(--s3); color: var(--ink-2); font-size: var(--step--1); font-weight: 600; text-decoration: none; }
.prow__edit span { font-size: 1.25rem; line-height: 1; color: var(--ink-3); }
.prow__edit:hover { color: var(--ink); }
.prow__status { font-size: 0.78rem; color: var(--ink-2); white-space: nowrap; }
.prow__icon { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.prow__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.pdone::before { content: "\2713\00a0"; color: var(--primary); }

/* Tick boxes */
.pcheck { margin: 0; display: contents; }
.pcheck__box { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; list-style: none; }
.pcheck__box::-webkit-details-marker { display: none; }
.pcheck__box svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.pcheck__box path { opacity: 0; stroke-width: 2; }
.pcheck__box:hover { color: var(--primary); }
.pcheck__box.is-on { color: var(--primary); }
.pcheck__box.is-on path { opacity: 1; }
.pdonebox { position: relative; }
.pdonebox__pop { position: absolute; z-index: 30; top: calc(100% + var(--s1)); left: 0; min-width: 18rem; padding: var(--s3) var(--s4); background: var(--surface); border: var(--border); border-radius: 8px; box-shadow: var(--shadow); color: var(--ink-2); font-size: var(--step--1); }
.pdonebox__pop p { margin: 0; }
.pdonebox__pop p::before { content: "\2713\00a0"; }
.pdonebox__pop form { margin: var(--s2) 0 0; }
.pdonebox__undo { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline; cursor: pointer; }

/* ⋮ menus */
.pmenu { position: relative; flex: none; }
.pmenu__dots { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--ink-2); cursor: pointer; list-style: none; }
.pmenu__dots::-webkit-details-marker { display: none; }
.pmenu__dots:hover, .pmenu[open] > .pmenu__dots { background: var(--surface-2); color: var(--ink); }
.pmenu__dots svg { width: 20px; height: 20px; fill: currentColor; }
.pmenu__pop { position: absolute; z-index: 30; top: calc(100% + var(--s1)); right: 0; min-width: 13rem; padding: var(--s1) 0; background: var(--surface); border: var(--border); border-radius: 8px; box-shadow: var(--shadow); }
.pmenu__form { margin: 0; }
.pmenu__item { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; list-style: none; }
.pmenu__item::-webkit-details-marker { display: none; }
.pmenu__item:hover { background: var(--surface-2); color: var(--ink); }
.pmenu__icon { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
.pmenu__foot { margin: var(--s1) 0 0; padding: var(--s3) var(--s4) var(--s2); border-top: var(--border); color: var(--ink-3); font-size: var(--step--1); }
.pmenu__inline { display: flex; gap: var(--s2); padding: 0 var(--s4) var(--s3); margin: 0; }
.pmenu__inline .input { min-width: 0; flex: 1; }
.pmenu__sub[open] > summary { background: var(--surface-2); }
.pfile { position: absolute; width: 1px; height: 1px; opacity: 0; }
.btn--small { --btn-py: var(--s2); --btn-px: var(--s3); --btn-h: 0px; font-size: var(--step--1); }

/* Percent ring */
.pring { --pct: 0; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--rule) 0); }
.pring span { display: grid; place-items: center; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 0.6rem; font-weight: 700; }

/* Review stars */
.pstars { display: flex; gap: var(--s1); margin: var(--s3) 0 0 var(--s2); }
.pstars__star { padding: 0; border: 0; background: none; color: var(--rule); cursor: pointer; }
.pstars__star svg { width: 2rem; height: 2rem; fill: currentColor; }
.pstars__star.is-on { color: var(--primary); }
.pstars:hover .pstars__star { color: var(--primary); }
.pstars__star:hover ~ .pstars__star { color: var(--rule); }
.pstars__star:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.preview-note { margin-block-start: var(--s3); }
.preview-note .input { width: 100%; }

/* Details: contact cards */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: var(--s4); margin: var(--s4) 0 0 var(--s4); }
.pcard { display: grid; align-content: start; gap: var(--s3); padding: var(--s5); border: var(--border); border-radius: 12px; }
.pcard__who { display: flex; align-items: center; gap: var(--s3); }
.pcard__avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-weight: 700; }
.pcard__name { display: block; font-size: var(--step-0); }
.pcard__role { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
.pcard__line { display: inline-flex; align-items: center; gap: var(--s2); color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.pcard__icon { width: 16px; height: 16px; color: var(--ink-2); }

/* Docs */
.pempty { display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 10rem; padding: var(--s6); background: var(--surface-2); border: var(--border); border-radius: 8px; color: var(--ink-2); font-weight: 600; text-align: center; }
.pempty p { margin: 0; }
.pempty__icon { width: 26px; height: 26px; flex: none; }
.pdrop { display: grid; justify-items: center; gap: var(--s1); padding: var(--s6) var(--s4); background: var(--surface-2); border: 2px dashed var(--rule); border-radius: 8px; color: var(--ink-2); text-align: center; transition: border-color var(--transition), background var(--transition); }
.pdrop p { margin: 0; }
.pdrop.is-over { border-color: var(--primary); background: var(--primary-veil); }
.pdrop__icon { width: 2.5rem; height: 2.5rem; color: var(--primary); }
.pdrop__or { font-size: var(--step--1); }
.pdrop__browse { color: var(--primary-dark); text-decoration: underline; cursor: pointer; }
.pdrop.is-sending { opacity: 0.6; pointer-events: none; }

/* Payment */
.psum { margin: 0 0 var(--s3); color: var(--ink-2); }
.ppay { display: grid; justify-items: start; gap: var(--s3); }
.pradio { display: inline-flex; align-items: center; gap: var(--s3); font-weight: 700; cursor: pointer; }
.pradio input { width: 1.4rem; height: 1.4rem; accent-color: var(--primary); }
.ppay__other { display: none; position: relative; margin: 0; }
.ppay:has([value="other"]:checked) .ppay__other { display: block; }
.ppay__other .input { width: 10rem; padding-inline-start: 1.75rem; }
.ppay__cur { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.ptable { width: 100%; border-collapse: collapse; margin-block-end: var(--s3); }
.ptable th, .ptable td { padding: var(--s2) var(--s3); text-align: left; border-bottom: var(--border); }
.ptable th { font-size: var(--step--1); color: var(--ink-2); }
.ptable .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Message */
.pmsg { width: 100%; resize: vertical; }
.pcount { margin: var(--s2) 0 0; text-align: right; font-size: 0.78rem; color: var(--ink-2); }
.pmsgs { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.pmsgs__item { padding: var(--s3) var(--s4); border: var(--border); border-radius: 8px; }
.pmsgs__item[data-dir="out"] { background: var(--primary-veil); }
.pmsgs__item p { margin: var(--s1) 0 0; }
.pmsgs__meta { font-size: 0.78rem; color: var(--ink-3); }
.pacct { margin: var(--s3) 0 var(--s4) var(--s4); color: var(--ink-2); }
.pacct strong { color: var(--ink); }
.pacct__form { margin-inline-start: var(--s4); }
.pacct__form .input { max-width: 20rem; }

/* Planning form */
.pform__all { margin: 0; padding: 0; border: 0; min-width: 0; }
.pform__sec { margin-block-end: var(--s6); }
.pform__sec > .psec { position: sticky; top: 0; z-index: 5; margin: 0 0 var(--s3); padding-block: var(--s3); background: var(--surface); }
.pform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s8); }
.pfield { min-width: 0; }
.pfield--wide { grid-column: 1 / -1; }
.pfield .input { width: 100%; }
.pfield textarea.input { resize: vertical; }
.pfield__desc { margin: 0; color: var(--ink-2); }
.pyn { display: flex; gap: var(--s2); }
.pyn__opt { position: relative; }
.pyn__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pyn__opt span { display: grid; place-items: center; min-width: 4rem; height: 2.75rem; padding: 0 var(--s4); border: var(--border); border-radius: 6px; background: var(--surface); font-weight: 500; }
.pyn__opt input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); font-weight: 700; }
.pyn__opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.pyn__opt:hover span { border-color: var(--ink-3); }
.prange { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s3); }
.psong { position: relative; }
.psong .input { padding-inline-end: 3rem; }
.psong__pick { position: absolute; right: var(--s1); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.psong__icon { width: 22px; height: 22px; }
.psong__pick:hover { color: var(--primary); }
.pform__status { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 40; margin: 0; padding: var(--s2) var(--s4); border-radius: 999px; background: var(--surface-inverse); color: var(--surface); font-size: var(--step--1); opacity: 0; transition: opacity var(--transition); pointer-events: none; }
.pform__status.is-on { opacity: 1; }
.pform__status.is-err { background: var(--err); color: #fff; }

/* Song Search pop-up */
.picker { position: fixed; inset: 0; margin: auto; width: min(52rem, calc(100vw - 2rem)); height: min(90vh, 60rem); max-height: none; padding: 0; border: 0; border-radius: 8px; box-shadow: var(--shadow); background: var(--surface); color: var(--ink); }
.picker[open] { display: flex; flex-direction: column; }
.picker::backdrop { background: var(--scrim); }
.picker__bar { position: relative; flex: none; padding: var(--s2) var(--s7); background: var(--primary); color: var(--primary-ink); text-align: center; letter-spacing: 0.15em; text-transform: uppercase; }
.picker__close { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); padding: 0 var(--s2); border: 0; background: none; color: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.picker__for { flex: none; margin: var(--s3) 0 0; text-align: center; font-weight: 700; font-size: var(--step-1); }
.picker__body { flex: 1; overflow-y: auto; padding: var(--s4) var(--s5) var(--s6); }
.picker__body.is-loading { opacity: 0.5; }

/* + menus (playlist lists / Add to Form) */
.padd-menu { position: absolute; z-index: 50; min-width: 13rem; padding: var(--s1) 0; background: var(--surface); border: var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.padd-menu__item { display: block; width: 100%; padding: var(--s2) var(--s4); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.padd-menu__item span { color: var(--ink-3); }
.padd-menu__item:hover, .padd-menu__item:focus-visible { background: var(--primary); color: var(--primary-ink); outline: 0; }
.padd-menu__item:hover span, .padd-menu__item:focus-visible span { color: inherit; }
.song.is-added { background: var(--primary-veil); }

/* Playlist page */
.pmine { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s4) var(--s6); }
.pmine__title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--s2); padding-bottom: var(--s1); border-bottom: 2px solid var(--primary); font-size: var(--step-0); }
.pmine__list--warn .pmine__title { border-color: var(--err); }
.pmine__title span { font-size: 0.78rem; font-weight: 400; color: var(--ink-2); }
.pmine__songs { margin: 0; padding: 0; list-style: none; }
.pmine__song { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s1) 0; border-bottom: var(--border); font-size: var(--step--1); }
.pmine__song form { margin: 0; }
.pmine__artist { color: var(--ink-2); font-style: italic; }
.pmine__x { padding: 0 var(--s2); border: 0; background: none; color: var(--ink-3); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.pmine__x:hover { color: var(--err); }
.pspot { display: grid; justify-items: center; margin-block: var(--s2) var(--s4); }
.pspot__btn { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border: 2px solid var(--ink); border-radius: 6px; font-weight: 700; cursor: pointer; list-style: none; }
.pspot__btn::-webkit-details-marker { display: none; }
.pspot__btn span { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; }
.pspot__logo { width: 20px; height: 20px; }
.pspot__form { width: min(100%, 30rem); margin-block-start: var(--s4); }
.pspot__form .input { width: 100%; margin-block-end: var(--s3); }
/* Spotify link per part of the day (plugin: spotify_links()). */
.pmine__link { margin: 0 0 var(--s2); }
.pmine__link a { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 600; }
.pmine__spotify { width: 18px; height: 18px; }
@media (max-width: 40em) {
  }

.pjump { margin: 0 0 var(--s3); text-align: right; font-size: var(--step--1); }
#your-playlist { scroll-margin-top: var(--s4); }

/* Timeline */
.padd { display: grid; grid-template-columns: 12rem 1fr; gap: var(--s3); margin-block-end: var(--s6); }
.padd__note, .padd .pactions { grid-column: 1 / -1; }
.padd .pactions { margin: 0; }
.ptl__row { align-items: flex-start; min-height: 0; padding-block: var(--s3); }
.ptl__row .prow__icon { margin-block-start: 2px; }
.ptl__main { flex: 1; min-width: 0; }
.ptl__time { margin-inline-end: var(--s2); }
.ptl__note { display: flex; align-items: center; gap: var(--s2); margin-block-start: var(--s1); color: var(--ink-2); font-size: var(--step--1); font-style: italic; }
.ptl__note-icon { width: 14px; height: 14px; flex: none; }

/* Footer */
.pfooter { display: block; width: 100%; padding: var(--s5) var(--s4); text-align: center; font-size: 0.78rem; color: var(--ink-2); }
.pfooter p { margin: 0 auto; max-width: none; }

@media (max-width: 1080px) {
  .ptop__inner { padding-inline: var(--s4); }
  .pnav__toggle { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: var(--border); border-radius: 8px; background: none; font: inherit; font-weight: 600; cursor: pointer; }
  .pnav__list { display: none; position: absolute; z-index: 60; top: calc(100% + var(--s2)); right: 0; flex-direction: column; min-width: 14rem; padding: var(--s2); background: var(--surface); border: var(--border); border-radius: 8px; box-shadow: var(--shadow); }
  .pnav.is-open .pnav__list { display: flex; }
  .pnav__link { width: 100%; }
  .pstrip__inner { padding-inline: var(--s4); }
}

@media (max-width: 640px) {
  .pform__grid { grid-template-columns: 1fr; }
  .padd { grid-template-columns: 1fr; }
  .pcards { margin-inline-start: 0; }
  .prow { gap: var(--s3); padding-inline: var(--s1); }
}

/* .field sets display:grid, which beats the hidden attribute. */
.field[hidden] { display: none; }