/* =========================================
   dancephl — add yours (#panel-submit as its own screen, at /add)
   Restyles the existing form (js/app.js keeps its fields, validation and
   payment); js/add.js drives the chooser, preview and cost.
   ========================================= */

/* ---- the panel becomes a full page ---- */

/* landing on /add: show the page at once instead of the calendar first */
html.route-add #panel-submit.hidden { display: flex !important; }
html.route-add #panel-submit { animation: none; }
html.route-add body > :not(#panel-submit) { visibility: hidden; }

.panel-overlay.addpage {
  background: var(--paper);
  justify-content: stretch;
}

.addpage .panel {
  width: 100%;
  max-width: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
}

.addpage .panel-body { padding: 0; }

.addpage .addbar { position: sticky; top: 0; z-index: 3; }

.addpage .mh-back {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: 400 13px/18px var(--font-mono);
}

/* the chooser drives these; keep them for the code, out of sight */
.addpage .submit-tabs,
.addpage #categoryRow,
.addpage #listingPricing,
.addpage .price-indicator,
.addpage .price-summary,
.addpage .add-form-head,
.addpage #submitTab-listing > .panel-intro,
.addpage #submitTab-directory > .panel-intro,
.addpage #submitTab-directory > .pricing { display: none !important; }

/* ---- head: title, intro, type chooser ---- */

.addhead { padding: 40px var(--side-pad) 0; }

.addhead .h1 {
  font: 700 64px/0.98 var(--font-sans);
  letter-spacing: -0.035em;
  margin: 0;
}

.addhead .intro {
  font: 400 13px/20px var(--font-mono);
  color: var(--ink-muted);
  max-width: 620px;
  margin: 12px 0 0;
}

.types {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 28px;
  border-top: var(--stroke-rule) solid var(--ink);
}

.ty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 48px;
  padding: 14px 14px 16px;
  background: var(--paper);
  border: 0;
  border-right: var(--stroke-hair) solid var(--hairline);
  border-bottom: var(--stroke-hair) solid var(--hairline);
  border-radius: var(--radius-0);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.ty:last-child { border-right: 0; }
.ty b { font: 700 19px/1.1 var(--font-sans); letter-spacing: -0.015em; }
.ty span { font: 400 13px/18px var(--font-mono); color: var(--ink-muted); }
.ty .sq { width: 10px; height: 10px; }
.ty.on { box-shadow: inset 0 -4px 0 var(--ink); }
.ty:hover b { text-decoration: underline; text-underline-offset: 3px; }

.other-kinds {
  font: 400 13px/18px var(--font-mono);
  color: var(--ink-muted);
  margin: 12px 0 0;
}

.other-kinds button {
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.other-kinds button.on { text-decoration-thickness: var(--stroke-rule); }

/* ---- form and side column ---- */

.addpage #submitPanelContent:not(.hidden) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 64px;
  padding: 40px var(--side-pad) 64px;
}

.addpage .addform { min-width: 0; }

.addpage .add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.addpage .add-full, .addpage .add-grid > div { margin: 0 0 22px; }
.addpage .add-grid > div:empty { display: none; }

.addpage .add-label {
  display: block;
  font: 400 13px/18px var(--font-mono);
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.addpage .add-input,
.addpage .add-select,
.addpage .add-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: var(--stroke-hair) solid var(--hairline);
  border-radius: var(--radius-0);
  background: var(--paper);
  font: 400 15px/22px var(--font-mono);
  color: var(--ink);
}

.addpage .add-input.big { font: 700 22px/28px var(--font-sans); letter-spacing: -0.015em; }
.addpage .add-textarea { min-height: 120px; }
.addpage .add-input::placeholder, .addpage .add-textarea::placeholder { color: var(--ink-muted); }

.addpage .add-input:focus, .addpage .add-select:focus, .addpage .add-textarea:focus {
  outline: var(--stroke-rule) solid var(--focus);
  outline-offset: 2px;
  border-color: var(--ink);
}

.addpage .hint { font: 400 13px/18px var(--font-mono); color: var(--ink-muted); margin: 6px 0 0; }

/* "when": a three-part toggle */
.addpage .date-type-row { display: flex; border: var(--stroke-hair) solid var(--ink); border-radius: var(--radius-0); }
.addpage .date-type-btn {
  flex: 1;
  min-height: 48px;
  padding: 12px;
  border: 0;
  border-left: var(--stroke-hair) solid var(--ink);
  background: var(--paper);
  font: 400 13px/18px var(--font-mono);
  color: var(--ink);
  cursor: pointer;
}
.addpage .date-type-btn:first-child { border-left: 0; }
.addpage .date-type-btn.on { background: var(--ink); color: var(--paper); }

.addpage .add-date-btn, .addpage .date-remove {
  min-height: 48px;
  border-radius: var(--radius-0);
  font: 400 13px/18px var(--font-mono);
}

.addpage .checkbox-label { font: 400 13px/18px var(--font-mono); color: var(--ink); min-height: 48px; }

.addpage .image-placeholder {
  border: var(--stroke-hair) dashed var(--hairline);
  border-radius: var(--radius-0);
  font-family: var(--font-mono);
  color: var(--ink-muted);
}
.addpage .image-text { font-size: 13px; }
.addpage .image-hint { font-size: 12px; color: var(--ink-muted); }
.addpage .image-preview { border-radius: var(--radius-0); }

#draftNotice { font: 400 13px/18px var(--font-mono) !important; color: var(--ink-muted) !important; margin-bottom: 16px !important; }

/* ---- side: preview, cost, submit ---- */

.addside {
  position: sticky;
  top: 84px;
  align-self: start;
  border-top: var(--stroke-rule) solid var(--ink);
  padding-top: 16px;
}

.addside .lab { display: block; font: 400 13px/18px var(--font-mono); color: var(--ink-muted); }
.addside > .lab { margin-bottom: 10px; }

/* the row, at the side column's width: two lines like on a phone */
.add-preview .row { grid-template-columns: 1fr auto; gap: 4px 12px; cursor: default; }
.add-preview .row .t { grid-column: 1; grid-row: 1; }
.add-preview .row .tg { grid-column: 2; grid-row: 1; }
.add-preview .row .ti { grid-column: 1 / -1; }
.add-preview .row .who { grid-column: 1 / -1; }
.add-preview .row .price { display: none; }
.add-preview .row .mp { display: inline; }
.add-preview .row:hover .item-title { text-decoration: none; }

.addside .cost {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  margin-top: 20px;
  border-top: var(--stroke-hair) solid var(--hairline);
  border-bottom: var(--stroke-hair) solid var(--hairline);
}
.addside .cost .lab { display: inline; }
.addside .cost b { font: 700 22px/1 var(--font-sans); }

.addside .add-submit {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  padding: 15px;
  border: 0;
  border-radius: var(--radius-0);
  background: var(--ink);
  color: var(--paper);
  font: 400 13px/18px var(--font-mono);
  cursor: pointer;
}
.addside .add-submit:hover { background: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.addside .add-submit:focus-visible { outline: var(--stroke-rule) solid var(--focus); outline-offset: 2px; }

.addside .add-ok { font: 400 13px/18px var(--font-mono); color: var(--ink); margin-top: 10px; }
.addside .small { font: 400 13px/20px var(--font-mono); color: var(--ink-muted); margin: 14px 0 0; }
.addside .feat { color: var(--link); }

.ty:focus-visible, .other-kinds button:focus-visible, .date-type-btn:focus-visible, .addpage .mh-back:focus-visible, .addside .feat:focus-visible {
  outline: var(--stroke-rule) solid var(--focus);
  outline-offset: 2px;
}

/* ---- phone: two-column chooser, one column of fields, preview under ---- */

@media (max-width: 899px) {
  .addhead { padding: 20px var(--side-pad) 0; }
  .addhead .h1 { font-size: 36px; }
  .types { grid-template-columns: 1fr 1fr; }
  .ty:nth-child(2n) { border-right: 0; }
  .ty:last-child { border-right: 0; }
  .ty:nth-child(2n+1) { border-right: var(--stroke-hair) solid var(--hairline); }

  .addpage #submitPanelContent:not(.hidden) {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 28px var(--side-pad) 40px;
  }
  .addpage .add-grid { grid-template-columns: 1fr; gap: 0; }
  .addpage .date-type-row { flex-direction: row; }     /* stays a three-part toggle */
  .addpage .date-type-btn { padding: 10px 4px; border-left: var(--stroke-hair) solid var(--ink); border-top: 0; }
  .addpage .date-type-btn:first-child { border-left: 0; }
  .addside { position: static; }
}