/* /new and /organizer (SPEC V3.5). Loaded after app.css; the dashboard keeps organizer.css. Every value comes from tokens.css. */

/* Standard header (V3.2): 52px, small lockup left, page label right. */
.org-page .site-header { min-height: calc(var(--space-7) + var(--space-1)); padding: 0 var(--space-4); position: sticky; top: 0; z-index: 4; }
.org-page .site-header img { width: auto; height: calc(var(--space-5) + var(--space-1)); }
.org-page main { padding-top: var(--space-4); }

.org-stack > * + * { margin-top: var(--space-3); }
form.org-stack > * + * { margin-top: var(--space-4); }
form.org-stack > .filled + *, form.org-stack > .row-2 + .hint { margin-top: var(--space-2); }
.page-head h1 { font-size: var(--display-md-size); line-height: var(--display-md-line); letter-spacing: var(--display-md-tracking); }
.page-head .eyebrow { margin-bottom: var(--space-1); }
.page-head p { margin-top: var(--space-1); }
/* Grids space their own fields; app.css's .field + .field margin would double it. */
.more-body .field + .field, .org-block .field + .field, .org-form .field + .field { margin-top: 0; }
form.org-stack > * + .field, form.org-stack > * + .row-2 { margin-top: var(--space-4); }
.org-page .hint { margin-top: var(--space-1); }

/* From Luma / Manually: a two-way segmented control (tabs underneath). */
.seg-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); background: var(--surface-muted); border-radius: var(--radius-pill); }
.seg-tabs [role="tab"] { min-height: calc(var(--space-6) + var(--space-2)); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); cursor: pointer;
  font: inherit; font-size: var(--label-size); line-height: var(--label-line); font-weight: var(--label-weight); transition: background-color 150ms, color 150ms; }
.seg-tabs [role="tab"][aria-selected="true"] { background: var(--surface-brand); color: var(--on-brand); }
.seg-tabs [role="tab"]:hover:not([aria-selected="true"]) { color: var(--ink); }
.seg-tabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#panel-luma:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--space-1); border-radius: var(--radius-sm); }


/* Luma event picker */
.luma-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.luma-pick { display: flex; gap: var(--space-3); align-items: center; width: 100%; padding: var(--space-3) var(--space-4); text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface-card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); transition: border-color 150ms, background-color 150ms; }
.luma-pick:hover { border-color: var(--surface-brand); background: var(--surface-lilac-soft); }
.luma-pick .icon { color: var(--ink-muted); margin-left: auto; }

/* The picked Luma event stays on screen with Change. */
.picked-card { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface-card); border: 2px solid var(--surface-brand); border-radius: var(--radius-lg); }
.picked-card .btn { flex: none; border-color: transparent; color: var(--surface-brand); }
.filled { margin: var(--space-1) 0 0; }

/* More options: collapsed by default. */
.more { background: var(--surface-muted); border-radius: var(--radius-lg); }
.more summary { display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.more summary::-webkit-details-marker { display: none; }
.more summary b { display: block; font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: var(--label-weight); }
.more summary small { display: block; margin-top: var(--space-1); color: var(--ink-muted); font-size: var(--caption-size); line-height: var(--caption-line); }
.more summary .icon { margin-top: var(--space-1); transition: transform 150ms; }
.more[open] summary .icon { transform: rotate(180deg); }
.more[open] summary small { display: none; }
.more-body { display: grid; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); }
.more input { background: var(--surface-card); }

/* First-time organizer block and the returning line. */
.org-block { display: grid; gap: var(--space-3); }
.org-block legend { float: left; width: 100%; padding: 0; margin: 0; }
.org-block legend + * { clear: both; }
.org-legend { font-size: var(--label-size); line-height: var(--label-line); font-weight: var(--label-weight); }
.returning { display: flex; gap: var(--space-2); align-items: center; color: var(--ink-muted); }
.returning .icon { color: var(--status-confirmed); }
.returning b { color: var(--ink); font-weight: var(--label-weight); }
.returning .link-btn { padding: 0 var(--space-1); min-height: 0; }

/* You'll get */
.get-card .eyebrow { margin-bottom: var(--space-2); }
.get-list { display: grid; gap: var(--space-2); font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.get-list li { display: flex; gap: var(--space-2); align-items: flex-start; overflow-wrap: anywhere; }
.get-list .icon { color: var(--surface-brand); margin-top: var(--space-1); flex: none; }
.get-list b { font-weight: var(--label-weight); }

/* /organizer */
.org-form { display: grid; gap: var(--space-4); }
.form-foot { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.org-events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.org-event { display: grid; gap: var(--space-3); }
.org-event-top { display: flex; gap: var(--space-3); align-items: flex-start; }
.org-event-top > .status { flex: none; }
.org-event .what strong { font-size: var(--body-size); line-height: var(--body-line); }
.org-event .what small { font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.org-event-past { background: var(--surface-muted); box-shadow: none; }
.org-event .btn-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.past-head { font-size: var(--display-sm-size); line-height: var(--display-sm-line); letter-spacing: var(--display-sm-tracking); margin-top: var(--space-5); }
.sign-out { text-align: center; margin-top: var(--space-5); }
.org-stack > .org-events { margin-top: var(--space-4); }
.org-stack > .org-events:empty { margin-top: 0; }