/* Add a place v2 - one card on the page ground, three numbered steps, visual system H. Follows the Sign up form
   (Content/v2/account.css): the field styles below are copied from it so this page does not depend on account.css.
   Depends on tokens.css + components.css (+ theme-velvet.css). Colours are tokens only; the one value without a token
   (the error red) is defined below as --ap-err. */

.cg-page-addplace { --ap-err: #b3122e; }
[data-theme="velvet"] .cg-page-addplace { --ap-err: #ff8fa3; }

.cg-ap-main { padding-block: 12px 64px; }
.cg-ap-wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; }
.cg-body a.cg-ap-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: var(--w-strong); color: var(--ink-muted); }
.cg-body a.cg-ap-back:hover { color: var(--ink); }

/* ---- Card ------------------------------------------------------------------------------------------ */
.cg-ap-card { width: 100%; background: var(--surface); border-radius: var(--radius-xxl); padding: 32px 34px 26px; display: flex; flex-direction: column; gap: 22px; }
.cg-ap-head { display: flex; flex-direction: column; gap: 6px; }
.cg-ap-card h1 { font: italic var(--w-regular) 52px/1 var(--font-display); letter-spacing: -.01em; }
.cg-ap-lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.cg-ap-fine { margin: -8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-muted); text-align: center; }
[data-theme="velvet"] .cg-ap-card h1 { color: var(--heading); }

/* ---- Steps ----------------------------------------------------------------------------------------- */
.cg-ap-step { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--surface-divider); }
.cg-ap-step__h { display: flex; align-items: center; gap: 12px; margin: 0; font: var(--w-strong) 18px/1.2 var(--font-sans); color: var(--ink); }
.cg-ap-step__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-size: 15px; font-weight: var(--w-strong); }
.cg-ap-sub { padding-top: 6px; font-size: 14px; font-weight: var(--w-strong); color: var(--ink); }
.cg-ap-sub span { font-weight: var(--w-regular); color: var(--ink-muted); }

/* ---- Fields (copied from account.css) -------------------------------------------------------------- */
.cg-form { display: flex; flex-direction: column; gap: 14px; }
.cg-field { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }
.cg-lbl { font-size: 14px; font-weight: var(--w-strong); color: var(--ink); padding: 0; }
.cg-lbl span { font-weight: var(--w-regular); color: var(--ink-muted); }
.cg-inp { width: 100%; height: 48px; border-radius: var(--radius-s); border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); padding: 0 16px; font: var(--w-regular) 16px var(--font-sans); }
.cg-inp::placeholder { color: var(--ink-caption); }
.cg-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cg-inp[aria-invalid="true"] { border-color: var(--ap-err); }
.cg-area { height: auto; min-height: 96px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.cg-sel { appearance: none; -webkit-appearance: none; padding: 0 34px 0 14px; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-caption) 50%), linear-gradient(135deg, var(--ink-caption) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.cg-sel:invalid { color: var(--ink-caption); }
.cg-sel option { color: var(--ink); background: var(--surface); }
.cg-help { font-size: 13px; color: var(--ink-muted); line-height: 1.45; }
.cg-help.is-error { color: var(--ap-err); font-weight: var(--w-strong); }
.cg-err { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ap-err); font-weight: var(--w-strong); line-height: 1.45; }
.cg-err svg { flex: none; margin-top: 2px; }
.cg-err[hidden] { display: none; }
.cg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cg-ap-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface); border: 1.5px solid var(--ap-err); color: var(--ap-err); font-size: 14px; font-weight: var(--w-strong); line-height: 1.45; }
.cg-ap-alert svg { flex: none; margin-top: 1px; }
.cg-ap-alert[hidden] { display: none; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.cg-ap-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Rows, hours, chips ---------------------------------------------------------------------------- */
.cg-ap-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
.cg-ap-set { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-ap-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cg-ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-ap-chip { position: relative; display: inline-flex; }
.cg-ap-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cg-ap-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-s); border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font-size: 15px; white-space: nowrap; }
.cg-ap-chip input:checked + span { border-color: var(--accent); background: var(--accent-tint); font-weight: var(--w-strong); }
.cg-ap-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-tint); border-color: var(--accent); }

.cg-body .cg-ap-card .cg-btn--primary { width: 100%; height: 52px; font-size: 16px; }
.cg-body .cg-ap-card .cg-btn--primary[disabled] { opacity: .65; cursor: progress; }

/* ---- City type-ahead (copied from account.css) ----------------------------------------------------- */
.cg-city { position: relative; }
.cg-listbox { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto;
  border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-map); border: 1px solid var(--border); }
.cg-listbox[hidden] { display: none; }
.cg-listbox li { display: block; min-height: 44px; line-height: 44px; padding: 0 12px; border-radius: var(--radius-s); font-size: 15px; color: var(--ink); cursor: pointer; }
.cg-listbox li[aria-selected="true"] { background: var(--surface-soft); }
.cg-listbox mark { background: none; color: inherit; font-weight: var(--w-strong); }

/* ---- Sent ------------------------------------------------------------------------------------------ */
.cg-ap-done { align-items: flex-start; gap: 14px; }
.cg-ap-done__ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); }
.cg-ap-done__act { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; padding-top: 6px; }
.cg-ap-done__act .cg-btn { flex: 1 1 200px; text-decoration: none; }
.cg-body .cg-ap-done .cg-btn--outline { height: 52px; border-color: var(--ink-caption); font-size: 16px; font-weight: var(--w-strong); }
.cg-body .cg-ap-done .cg-btn--primary { height: 52px; font-size: 16px; }

@media (max-width: 720px) {
  .cg-ap-main { padding-block: 4px 40px; }
  .cg-ap-card { padding: 26px 20px 22px; border-radius: var(--radius-xl); gap: 20px; }
  .cg-ap-card h1 { font-size: 46px; }
  .cg-ap-lead { font-size: 15px; }
  .cg-ap-row { grid-template-columns: minmax(0, 1fr); }
  /* 16px text keeps iOS from zooming the page when a field is focused */
  .cg-inp { font-size: 16px; }
}

/* ---- Map pin (small, secondary: never full width on desktop beyond the card) ------------------------- */
.cg-ap-map { width: 100%; height: 260px; border-radius: var(--radius-m); overflow: hidden; background: var(--surface-soft); border: 1.5px solid var(--border); isolation: isolate; cursor: crosshair; }
.cg-ap-pinbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.cg-ap-linkbtn { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: var(--w-strong) 14px var(--font-sans); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.cg-ap-linkbtn[hidden] { display: none; }
.cg-ap-pinicon { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-primary); cursor: grab; }
.cg-ap-pinicon:active { cursor: grabbing; }

/* ---- More details (collapsible) ----------------------------------------------------------------------- */
.cg-ap-more { border-top: 1px solid var(--surface-divider); padding-top: 8px; }
.cg-ap-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; font: var(--w-strong) 18px/1.2 var(--font-sans); color: var(--ink); }
.cg-ap-more > summary::-webkit-details-marker { display: none; }
.cg-ap-more > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .15s; margin-left: auto; margin-right: 4px; }
.cg-ap-more[open] > summary::after { transform: rotate(-135deg); }
.cg-ap-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-s); }
.cg-ap-more__opt { font-weight: var(--w-regular); font-size: 14px; color: var(--ink-muted); }
.cg-ap-more > .cg-form { padding-top: 10px; }

.cg-ap-duplink { font-size: 14px; font-weight: var(--w-strong); text-decoration: underline; }
.cg-ap-fine--left { text-align: left; margin: 0; }
.cg-ap-set[hidden] { display: none; }