/* The guided connect journey: the admin's platform checklist and app
   pages, the Accounts tiles, the connect page and the finish panel.
   Tokens only (docs/UI.md). */

/* A platform that is switched off: a hollow ring, beside the word. */
.lamp--off::before { background: transparent; border: var(--border) solid var(--ink-faint); }

/* ---------- Accounts: the tiles ---------- */
.connect-grid > li { display: grid; min-width: 0; }
.connect-grid > li > .connect-tile { height: 100%; align-content: start; }
.tile-go { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); }
.tile-go::after { content: "\2192"; font-size: var(--text-sm); }
.connect-tile--off { border-style: dashed; background: transparent; }
div.connect-tile:hover { border-color: var(--rule); box-shadow: none; }
div.connect-tile--off:hover { border-style: dashed; }

/* ---------- Accounts: the finish panel ---------- */
.finish { background: var(--ok-tint); border-left: 4px solid var(--teal); border-radius: var(--radius-card); padding: clamp(1.1rem, 3vw, 1.6rem); margin-bottom: var(--space-6); }
.finish > * + * { margin-top: var(--space-3); }
.finish h2 { font-size: var(--h2); }
.finish .row { margin-top: var(--space-4); }
/* The rows the finish panel is about. */
.tag--new { padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); background: var(--ok-tint); color: var(--ok); vertical-align: 0.1em; }
/* Whom to ask, for someone who cannot connect accounts. */
.who-connects { margin-bottom: var(--space-5); }

/* ---------- the three parts of connecting ---------- */
.journey-bar { display: flex; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); }
.journey { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); counter-reset: journey; }
.journey__step { counter-increment: journey; display: inline-flex; align-items: center; gap: 0.5rem; max-width: none; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.journey__step::before { content: counter(journey); width: 1.6rem; height: 1.6rem; border-radius: 50%; border: var(--border) solid var(--rule-strong); display: grid; place-items: center; background: var(--paper); color: var(--ink-soft); }
.journey__step--current { color: var(--ink); }
.journey__step--current::before { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.journey__step--done::before { content: "\2713"; background: var(--ink); border-color: var(--ink); color: var(--mint); }

.connect-parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); max-width: 52rem; }
.connect-parts > * { min-width: 0; }
.connect-part { background: var(--paper-dim); border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); border-radius: var(--radius-card); padding: clamp(1.1rem, 3vw, 1.8rem); }
.connect-part > * + * { margin-top: var(--space-4); }
.connect-part .eyebrow { margin-bottom: var(--space-2); }
.connect-part h2 { font-size: var(--h2); }
.connect-part .steps { margin-top: var(--space-5); }
/* The part with the button: a firmer edge, so the eye lands on it. */
.connect-part--go { border: var(--border) solid var(--ink); background: var(--paper); }
.wait, .connect-cost, .journey-bar { max-width: 52rem; }
.wait { margin-bottom: var(--space-5); border-left: 4px solid var(--warn-line); }
.wait > * + * { margin-top: var(--space-3); }
.wait h2 { font-size: var(--h2); }
.wait h3 { margin-top: var(--space-5); }
.wait .row[role="list"] { margin-top: var(--space-3); }
.wait .btn .pbadge { margin-right: 0.15rem; }
.connect-cost { margin-bottom: var(--space-5); }
textarea.ask { min-height: 0; field-sizing: content; font-size: var(--text-sm); background: var(--paper-dim); }
@media (max-width: 600px) { textarea.ask { min-height: 9.5rem; } }
/* Links inside a step can be long ("How to switch, in Instagram's help"):
   they wrap rather than run out of the card on a phone. */
.assistant .step .btn, .wait .btn { white-space: normal; max-width: 100%; text-align: left; }

/* "I have done this": the owners' own tick, saved for the profile. It
   marks the step done on the page, as a passed check does. */
.tick-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.tick { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.25rem; padding: 0.35rem 0.95rem 0.35rem 0.75rem; border: var(--border) solid var(--rule-strong); border-radius: var(--radius-pill); background: var(--paper); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; cursor: pointer; }
.tick input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.tick:has(input:checked) { border-color: var(--ink); background: var(--paper-deep); }
.tick:has(input:focus-visible) { outline: var(--focus); outline-offset: 3px; }
.tick input:focus-visible { outline: none; } /* the whole pill has the ring */
.step:has(.tick input:checked)::before,
.step:has([id^="check-"] .lamp--ok)::before { content: "\2713"; background: var(--ink); border-color: var(--ink); color: var(--mint); }

/* Closed until opened: the long version of the connect step, and the notes.
   (Not .more: that is the top bar's Menu, and every stylesheet loads on
   every page.) */
.disclosure { border-top: 1px solid var(--rule); padding-top: var(--space-3); }
.disclosure > summary, .note > summary { cursor: pointer; font-weight: 600; padding: 0.45rem 0; }
.disclosure > summary { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; font-weight: 400; color: var(--teal-ink); }
.disclosure > summary::marker, .note > summary::marker { color: var(--teal-ink); }
.disclosure[open] > summary { margin-bottom: var(--space-3); }
.connect-notes > h2 { font-size: var(--h3); margin-bottom: var(--space-3); }
.notes { border-top: 1px solid var(--rule); }
.note { border-bottom: 1px solid var(--rule); padding: 0.35rem 0; }
.note[open] { padding-bottom: var(--space-4); }
.note > .stack { padding: var(--space-2) 0 0 1.1rem; }

/* ---------- Admin, Platforms: the checklist ---------- */
.checklist-head { display: grid; gap: var(--space-2); }
.checklist-count { font-size: var(--text-lg); }
.checklist-count strong { font-family: var(--display); font-size: var(--h2); letter-spacing: -0.02em; margin-right: 0.2rem; }
.checklist-title { font-size: var(--h2); }
.meter { appearance: none; -webkit-appearance: none; width: 100%; max-width: 28rem; height: 0.5rem; border: 0; border-radius: var(--radius-pill); background: var(--paper-deep); overflow: hidden; }
.meter::-webkit-progress-bar { background: var(--paper-deep); border-radius: var(--radius-pill); }
.meter::-webkit-progress-value { background: var(--ink); border-radius: var(--radius-pill); }
.meter::-moz-progress-bar { background: var(--ink); border-radius: var(--radius-pill); }
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
/* Name and state on the left; what it needs, then what to do, on the right. */
.pl-row { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-items: start; max-width: none; padding: var(--space-4) var(--space-5); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.pl-row > * { min-width: 0; }
/* The badge, then the name beside it (wrapping in its own column, never
   under the badge), then the state on a line of its own. */
.pl-row__head { grid-row: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.35rem 0.6rem; }
.pl-row__head h3 { font-size: var(--h3); }
.pl-row__head .lamp { grid-column: 1 / -1; }
.pl-row__body > * + * { margin-top: var(--space-1); }
/* One footer row on every card: what to do next on the left, the switch
   (or, for a variant, the note that it goes with its platform) on the
   right, on the same line. The left side wraps within itself. */
.pl-row__actions { display: flex; align-items: center; gap: var(--space-2) var(--space-4); }
.pl-row__go { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pl-row__go:empty { display: none; }
.pl-row__actions > .pl-switch { flex: none; margin-left: auto; }
.pl-row__go:empty + .pl-switch { margin-left: 0; }
.pl-row__actions > .pl-switch--note { flex: 0 1 auto; max-width: 13rem; text-align: right; }
@media (max-width: 600px) {
  .pl-row__actions { flex-wrap: wrap; }
  .pl-row__actions > .pl-switch--note { max-width: none; text-align: left; margin-left: 0; }
}
.needs-inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--space-2); }
.needs-inline li { font-size: var(--text-sm); padding: 0.15rem 0.65rem; border-radius: var(--radius-field); background: var(--paper-dim); border: 1px solid var(--rule); }
.later { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--ink-soft); font-size: var(--text-sm); }
.later li { display: inline-flex; align-items: center; gap: 0.45rem; }
@media (max-width: 1000px) {
  .pl-row { grid-template-columns: minmax(0, 1fr); }
  .pl-row__head { grid-row: auto; }
}

/* A profile to connect to: a choice and a button, on one line when it
   fits. (Not .picker: that is compose's media picker.) */
.connect-to { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.connect-to label { font-size: var(--text-sm); font-weight: 600; }
.connect-to select { width: auto; max-width: 100%; min-height: 2.25rem; padding-block: 0.35rem; padding-left: 0.8rem; font-size: var(--text-sm); }

/* ---------- Admin, a platform's app ---------- */
.before { max-width: 52rem; }
.before > * + * { margin-top: var(--space-4); }
.before h2 { font-size: var(--h2); margin-bottom: 0; }
.before h3 { font-family: var(--mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.needs { padding-left: 1.1rem; }
.needs li + li { margin-top: var(--space-3); }
.needs li::marker { color: var(--teal-ink); }
.setup-progress { display: grid; gap: var(--space-2); max-width: 28rem; }
.setup-progress label { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.done-panel { max-width: 52rem; }
.done-panel > * + * { margin-top: var(--space-4); }
.done-panel h2 { font-size: var(--h2); }
/* The switch stays level with the first row of actions, even when the
   app set-up link wraps underneath the connect form. */
.pl-row__actions { align-items: flex-start; }
.pl-switch { display: flex; align-items: center; min-height: 2rem; }