/* Downtown Ventura — the business portal (/my-business/). Tokens only; dark mode comes
   from [data-mode] in tokens.css. */
.portal-head{padding-bottom:6px}
/* Every portal page's content sits in here, so the gap above the footer and the gap
   under the masthead are set once instead of per page — `.sec` only carries padding-top,
   and a page that forgot `.sec-endcap` ended up flush against the footer. */
.portal-body{padding-bottom:64px}
.portal-body>.sec:first-child{padding-top:clamp(24px,3vw,32px)}
.portal-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.portal-nav .btn-ghost{border-color:var(--line);color:var(--ink)}
.portal-nav .btn-ghost:hover{border-color:var(--gold-400);color:var(--hot)}
.portal-who{margin-left:auto;font:400 10.5px/1.6 var(--font-mono);color:var(--mut)}

/* chips */
.pchip{display:inline-flex;align-items:center;font:700 9px/1 var(--font-mono);letter-spacing:.18em;padding:6px 10px;border-radius:4px;white-space:nowrap}
.pchip--olive{background:var(--olive-100);color:var(--olive-700)}
.pchip--gold{background:var(--gold-100);color:var(--gold-800)}
.pchip--sand{background:var(--sand-200);color:var(--sand-800)}
.pchip--red{background:var(--red-100);color:var(--red-700)}
.pchip--navy{background:var(--navy-100);color:var(--navy-700)}
[data-mode="dark"] .pchip--olive{background:var(--olive-900);color:var(--olive-300)}
[data-mode="dark"] .pchip--gold{background:var(--gold-800);color:var(--gold-200)}
[data-mode="dark"] .pchip--sand{background:var(--sand-800);color:var(--sand-300)}
[data-mode="dark"] .pchip--red{background:var(--red-700);color:var(--red-100)}
[data-mode="dark"] .pchip--navy{background:var(--navy-700);color:var(--navy-200)}

/* forms */
.pform{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pform .pill[disabled]{opacity:.6;cursor:progress}
.pform-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.pfield{display:flex;flex-direction:column;gap:6px;width:100%}
.pfield label{font:700 10px/1.4 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.pfield input,.pfield textarea,.pfield select{width:100%;font:400 12.5px/1.6 var(--font-mono);color:var(--ink);background:var(--pg-alt);border:1px solid var(--line);border-radius:10px;padding:11px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.pfield textarea{min-height:120px;resize:vertical}
.pfield input:focus,.pfield textarea:focus,.pfield select:focus{border-color:var(--navy-600);box-shadow:0 0 0 2px var(--gold-400)}
[data-mode="dark"] .pfield input:focus,[data-mode="dark"] .pfield textarea:focus,[data-mode="dark"] .pfield select:focus{border-color:var(--gold-300)}
.pfield--err input,.pfield--err textarea,.pfield--err select{border-color:var(--red-500)}
.pfield-hint{font:400 10px/1.6 var(--font-mono);color:var(--mut)}
.pfield-err{font:600 10px/1.6 var(--font-mono);color:var(--red-700)}
[data-mode="dark"] .pfield-err{color:var(--red-300)}
.pfield-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* The Where picker wraps two fields; .pform aligns to flex-start, so without a width
   of its own the wrapper shrinks to the select and the row stops matching the others.
   Picking "somewhere else" puts the box for it alongside, like the other paired rows,
   rather than pushing the rest of the form down. */
.pvenue{display:grid;gap:16px;width:100%}
.pvenue[data-other]{grid-template-columns:1fr 1fr}
.pform-msg{margin:0;font:500 11px/1.7 var(--font-mono);padding:10px 14px;border-radius:8px;width:100%}
.pform-msg--error{background:var(--red-100);color:var(--red-700)}
.pform-msg--ok{background:var(--olive-100);color:var(--olive-700)}
[data-mode="dark"] .pform-msg--error{background:var(--red-700);color:var(--red-100)}
[data-mode="dark"] .pform-msg--ok{background:var(--olive-900);color:var(--olive-300)}

/* auth card */
/* The card is the whole page on these routes — no masthead above it — so it carries its
   own top margin rather than sitting right under the header. */
.pauth{max-width:440px;margin:clamp(16px,4vw,40px) auto 0;background:var(--card);border:1px solid var(--card-line);padding:clamp(24px,4vw,40px)}
.pauth-title{margin-top:10px;font-size:clamp(30px,4.6vw,44px)}
.pauth-lede{margin:12px 0 22px;font:400 11.5px/1.8 var(--font-mono);color:var(--body)}
.pauth .pform .pill{align-self:stretch}
.pauth-foot{margin-top:20px;padding-top:16px;border-top:1px dashed var(--hair);font:400 10.5px/1.8 var(--font-mono);color:var(--mut);display:flex;flex-direction:column;gap:4px}

/* dashboard cards */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-line);color:var(--body)}
.pcard .pci{position:relative;height:170px;overflow:hidden;background:var(--pg-alt)}
.pcard .pci img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .pcb{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.pcard .pcb .k{font:600 9.5px/1.4 var(--font-mono);letter-spacing:.2em;color:var(--kick)}
.pcard .pcb b{font:800 21px/1.05 var(--font-display);text-transform:uppercase;color:var(--ink)}
.pcard .pcb .pca{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.pempty{background:var(--pg-alt);border:1px dashed var(--line);padding:22px 24px;font:400 11px/1.8 var(--font-mono);color:var(--mut)}
.plist{border-bottom:2px solid var(--ink)}
.plist-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--hair)}
.plist-row:first-child{border-top:2px solid var(--ink)}
.plist-row b{font:800 17px/1.1 var(--font-display);text-transform:uppercase;color:var(--ink)}
.plist-row span{font:400 10.5px/1.6 var(--font-mono);color:var(--mut)}
.pnote{margin:6px 0 0;font:400 10.5px/1.7 var(--font-mono);color:var(--body);padding:10px 14px;background:var(--pg-alt);border-left:3px solid var(--gold-400)}

/* editor bands */
.pband{border:1px solid var(--card-line);background:var(--card);padding:clamp(20px,3vw,32px);margin-bottom:28px}
/* The gap above the footer is .portal-body's; the last band must not add to it. */
.pband:last-child{margin-bottom:0}
.pband-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--card-line)}
.pband-head h2{font:900 clamp(22px,3vw,30px)/1 var(--font-display);text-transform:uppercase;letter-spacing:-.02em}
.pband-head .sec-note{max-width:60ch}
.pband--live .kicker{color:var(--olive-600)}
.pband--review .kicker{color:var(--gold-500)}
[data-mode="dark"] .pband--live .kicker{color:var(--olive-300)}
[data-mode="dark"] .pband--review .kicker{color:var(--gold-300)}
.pband--review{border-color:var(--gold-300)}
.ptools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pbtn{font:600 10px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--link);border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:none}
.pbtn:hover{color:var(--hot);border-color:var(--gold-400)}
.pbtn--x{padding:7px 9px}

/* hours grid */
.hgrid{display:flex;flex-direction:column;gap:0;width:100%;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.hday{display:grid;grid-template-columns:64px 88px 1fr;gap:14px;align-items:start;padding:10px 0;border-top:1px dashed var(--hair)}
.hday:first-child{border-top:0}
.hday .hd{font:700 11px/2.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hday .hclosed{display:flex;align-items:center;gap:8px;font:600 9.5px/2.4 var(--font-mono);letter-spacing:.12em;color:var(--mut);cursor:pointer}
.hspans{display:flex;flex-direction:column;gap:8px}
.hspan{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hspan input[type="time"]{font:400 12px/1.4 var(--font-mono);color:var(--ink);background:var(--pg-alt);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.hspan .hto{font:400 10px/1 var(--font-mono);color:var(--mut)}
.hspan .hnext{font:600 9px/1.4 var(--font-mono);letter-spacing:.1em;color:var(--gold-500)}
.hwarn{font:500 10.5px/1.7 var(--font-mono);color:var(--gold-800);background:var(--gold-100);padding:10px 14px;border-radius:8px}
[data-mode="dark"] .hwarn{color:var(--gold-200);background:var(--gold-800)}

/* image field */
/* Sits on its own under the pickers now that .pdrop is gone; one credit covers both. */
.pcredit{margin-top:8px;width:100%;font:400 11px/1.4 var(--font-mono);color:var(--ink);background:var(--pg-alt);border:1px solid var(--line);border-radius:8px;padding:8px 10px}

/* location */

/* social rows */
.psoc{display:flex;flex-direction:column;gap:8px;width:100%}
.psoc-row{display:grid;grid-template-columns:140px 1fr auto;gap:8px;align-items:center}
.psoc-row input{font:400 12px/1.4 var(--font-mono);color:var(--ink);background:var(--pg-alt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
.pdates{display:flex;flex-direction:column;gap:8px;width:100%}
.pdate-head,.pdate-row{display:grid;grid-template-columns:150px 110px 110px 1fr 34px;gap:8px;align-items:center}
.pdate-head{font:600 9.5px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pdate-row input{font:400 12px/1.4 var(--font-mono);color:var(--ink);background:var(--pg-alt);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;min-width:0}

/* members */
.prow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 0;border-top:1px solid var(--hair)}
.prow:first-of-type{border-top:2px solid var(--ink)}
.prow b{font:800 15px/1.2 var(--font-display);text-transform:uppercase;color:var(--ink)}
.pdim{font:400 10.5px/1.6 var(--font-mono);color:var(--mut)}
.proles{display:flex;flex-direction:column;gap:10px;width:100%;border:0;padding:0;margin:0}
.proles label{display:flex;align-items:flex-start;gap:8px;font:400 11px/1.6 var(--font-mono);color:var(--ink);cursor:pointer}

/* read-only moderated fields, shown to staff instead of the review form */
.pcard--quiet{background:var(--pg-alt);border:1px dashed var(--line);padding:clamp(18px,3vw,26px)}
.pmeta{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:0 0 14px}
.pmeta dt{font:700 10px/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pmeta dd{margin:0;font:400 12px/1.6 var(--font-mono);color:var(--ink)}

@media (max-width:1000px){.pcards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .pcards{grid-template-columns:1fr}
  .pform-row{grid-template-columns:1fr}
  .pvenue[data-other]{grid-template-columns:1fr}
  .hday{grid-template-columns:1fr;gap:6px}
  .plist-row{grid-template-columns:1fr auto}
  .psoc-row{grid-template-columns:1fr}
  .pdate-head{display:none}
  /* dense: the × takes the cell beside the end time rather than a row of its own. */
  .pdate-row{grid-template-columns:1fr 1fr;grid-auto-flow:row dense;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .pdate-row input[type="text"]{grid-column:1/-1}
  .pdate-row .pbtn--x{justify-self:end}
  /* 16px or iOS zooms the page on focus. */
  .pdate-row input{font-size:16px}
  .portal-who{margin-left:0;width:100%}
  .prow{flex-direction:column;align-items:flex-start;gap:8px}
  .pmeta{grid-template-columns:1fr}
}

/* verify bar — sits above the masthead until the address is confirmed */
.pverify{background:var(--gold-100);border-bottom:1px solid var(--gold-400)}
[data-mode="dark"] .pverify{background:var(--gold-800);border-bottom-color:var(--gold-500)}
.pverify-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-top:14px;padding-bottom:14px}
.pverify-msg{margin:0;max-width:70ch;font:500 11px/1.7 var(--font-mono);color:var(--gold-800)}
[data-mode="dark"] .pverify-msg{color:var(--gold-100)}
.pverify-act{flex:none}

/* Crop modal ---------------------------------------------------------------- */
.pcrop{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(17,17,17,.62)}
.pcrop-card{width:min(560px,100%);background:var(--pg);color:var(--body);padding:clamp(16px,2.4vw,24px);display:grid;gap:14px}
.pcrop-head{margin:0;display:grid;gap:4px;font:700 15px/1.2 var(--font-display,inherit)}
.pcrop-head span{font:400 12px/1.5 var(--font-mono,monospace);opacity:.7}
.pcrop-frame{position:relative;overflow:hidden;background:#efece6;touch-action:none;cursor:grab}
.pcrop-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center;user-select:none}
.pcrop-frame--logo{background:repeating-conic-gradient(#e8e4dc 0% 25%,#f6f4ef 0% 50%) 50%/16px 16px}
.pcrop-frame--logo img{object-fit:contain}
.pcrop-zoom{display:grid;gap:6px;font:500 12px/1.4 var(--font-mono,monospace)}
.pcrop-act{display:flex;gap:10px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){.pcrop-frame{cursor:default}}

/* Image picker -------------------------------------------------------------- */
/* The preview takes its size from the column, never from a fixed height: with both set,
   aspect-ratio computes the width from the height and the wide frame grew past its grid
   track and over the controls beside it. */
.ppick-body{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start;width:100%}
/* After the base rule, not in the 640px block above it: same specificity, so order decides. */
@media (max-width:640px){.ppick-body{grid-template-columns:1fr}.ppick-art{max-width:200px}}
.ppick-art{position:relative;width:100%;background:var(--pg-alt);border:1px dashed var(--line);overflow:hidden;display:grid;place-items:center}
.ppick-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ppick-art span{font:600 10px/1.4 var(--font-mono);letter-spacing:.12em;color:var(--mut)}
.ppick-art--logo{aspect-ratio:1}
.ppick-art--featured{aspect-ratio:1200/630}
.ppick-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.ppick-act{display:flex;flex-wrap:wrap;gap:8px}
.ppick-choose,.ppick-adjust{padding:9px 16px;font-size:10px;background:transparent;color:var(--ink);border:1px solid var(--line)}
.ppick-choose:hover,.ppick-adjust:hover{border-color:var(--red-500);color:var(--red-500)}
/* Offscreen, not display:none — the control still has to be focusable and postable. */
/* Two classes: `.pfield input` (width:100%, padding) outranks one, and at viewport width
 * this unpositioned input made every picker page scroll sideways. */
.ppick .ppick-input{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
.ppick-input:focus-visible + .ppick-act .ppick-choose{border-color:var(--red-500);box-shadow:0 0 0 2px var(--gold-400)}
/* The one thing that used to push the row wide: a 40-character generated filename. */
.ppick-name{font:400 10px/1.6 var(--font-mono);color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* Add-a-business wizard ----------------------------------------------------- */
.pwiz-steps{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 clamp(16px,2vw,22px);padding:0;list-style:none;font:500 12px/1.4 var(--font-mono,monospace)}
.pwiz-steps li{display:flex;align-items:center;gap:8px;opacity:.45}
.pwiz-steps li[data-state="now"]{opacity:1}
.pwiz-steps li[data-state="done"]{opacity:.75}
.pwiz-steps li span{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:11px}
/* Not `background:currentColor` with a `color` beside it: currentColor resolves against
 * this element's own color, so the fill and the digit came out the same value and the
 * number vanished into a blank circle. --ink/--pg are a real pair and invert in dark
 * mode; --paper was never a token in this sheet either. */
.pwiz-steps li[data-state="now"] span{background:var(--ink);border-color:var(--ink);color:var(--pg)}
/* Back on the left, the forward action on the right — the convention, and it puts the
 * button you reach for next under the thumb on a phone. The last child is always Next or
 * the submit, so the auto margin holds on step 1 where there is no Back. Dropped once the
 * pair would wrap, where a pushed-right button reads as a stray. */
.pwiz-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:clamp(16px,2vw,22px)}
.pwiz-act > :last-child{margin-left:auto}
@media (max-width:520px){.pwiz-act > :last-child{margin-left:0}}

/* .pform lines its children up flex-start, so unsized the wizard grew to every panel's
 * min-content side by side — 601px on a 390px phone. */
.pwiz{width:100%}
/* Without data-on the panels are stacked and the track is a plain column — the no-JS
   form. With it, the track is a row that slides one panel at a time. */
.pwiz[data-on] .pwiz-track{display:flex;align-items:flex-start;transition:transform .32s ease}
.pwiz[data-on]{overflow:hidden}
.pwiz[data-on] .pwiz-panel{flex:0 0 100%;min-width:100%}
/* A flex row is as tall as its tallest item, so every step reserved the height of the
 * hours grid — 721px of dead space under step 1 before the Next button. The inactive
 * panels are already inert; collapsing them leaves the track the height of the one on
 * screen. */
.pwiz[data-on] .pwiz-panel[inert]{max-height:0;overflow:hidden}
.pwiz:not([data-on]) .pwiz-panel{margin-bottom:clamp(20px,2.6vw,28px)}
@media (prefers-reduced-motion:reduce){.pwiz[data-on] .pwiz-track{transition:none}}

/* Places typeahead ---------------------------------------------------------- */
.psearch{position:relative;display:grid;gap:6px;margin-bottom:clamp(16px,2vw,22px)}
.psearch > label{font:600 11px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.psearch > input{width:100%;padding:10px 12px;border:1px solid var(--sand-300);background:var(--sand-50);font:400 14px/1.4 var(--font-mono)}
.psearch-list{position:absolute;top:100%;left:0;right:0;z-index:20;margin:4px 0 0;padding:0;list-style:none;background:var(--pg);border:1px solid var(--sand-300);max-height:320px;overflow:auto}
.psearch-list button{display:grid;gap:2px;width:100%;padding:10px 12px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.psearch-list button:hover,.psearch-list button:focus-visible{background:var(--sand-100)}
.psearch-list b{font:600 14px/1.3 var(--font-display)}
.psearch-list span{font:400 12px/1.4 var(--font-mono);color:var(--mut)}
.psearch-list em{font:600 10px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red-600);font-style:normal}

/* Confirm gate -------------------------------------------------------------- */
.pconfirm{display:grid;gap:8px;padding:clamp(12px,1.8vw,18px);border:1px solid var(--sand-300);background:var(--sand-100)}
.pconfirm p{margin:0}
.pconfirm-head{font:700 14px/1.3 var(--font-display)}
.pconfirm-note{font:400 12px/1.6 var(--font-mono);color:var(--red-700)}
.pconfirm-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
[data-mode="dark"] .pconfirm{background:var(--navy-800);border-color:var(--navy-600)}
[data-mode="dark"] .psearch > input{background:var(--navy-800);border-color:var(--navy-600)}

/* Sign-in, with a panel beside it -------------------------------------------- */
.pauth-split{display:grid;gap:clamp(16px,2.4vw,28px);justify-content:center;align-items:start;grid-template-columns:minmax(0,440px)}
.pauth-split .pauth{margin-left:0;margin-right:0}
.pside{background:var(--card);border:1px solid var(--card-line);padding:clamp(20px,3vw,32px);margin:clamp(16px,4vw,40px) 0 0;max-width:440px}
.pside-title{margin:0;font:600 19px/1.25 var(--font-display);color:var(--ink)}
.pside-body{margin-top:10px;font:400 11.5px/1.8 var(--font-mono);color:var(--body)}
.pside-body p{margin:0}
.pside-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* Outlined, not borrowed: .btn-line lives in pages/notices.css, which this page does
 * not load, so using it here renders a button with no button. */
.pside-act .pside-alt{background:transparent;color:var(--ink);border:1px solid var(--line)}
.pside-act .pside-alt:hover{border-color:var(--red-500);color:var(--red-500)}
@media (min-width:880px){
  .pauth-split{grid-template-columns:440px minmax(0,360px)}
  .pside{margin-top:clamp(16px,4vw,40px)}
}