/* #1500: Circle-as-a-tab shell (D-C1). Rules are prefixed .circle- or scoped
   under #circle-panel only; colours reuse style.css var(--*) tokens and the
   existing .card / .btn-* / .chip / .circle-chip-* classes are the visual
   building blocks. 44px interactive targets, overflow-wrap on names/meta.
   Everything here is inert until app.js applies data-feature="circles"
   (unhiding #circle-btn) and circle.js unhides #circle-panel. */

#circle-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    max-width: 100%;
}

.circle-heading {
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--teal-deep);
}

.circle-heading,
.circle-open-card,
.circle-families-card,
.circle-empty-card {
    min-width: 0;
    max-width: 100%;
}

.circle-open-text {
    margin: 6px 0 0;
    font-size: .9rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.circle-families-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.circle-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    min-width: 0;
    max-width: 100%;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 12px;
}
/* Both spellings: buildPendingRow/buildProposalRow set the class as
   `circle-row-expired`, which this file only ever matched as `.circle-row.expired`,
   so the dim never actually applied. Kept both rather than renaming the other. */
.circle-row.expired,
.circle-row-expired {
    opacity: .85;
}

.circle-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.circle-row-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink);
    overflow-wrap: anywhere;
    min-width: 0;
}
/* The chip is reused from style.css (.circle-chip-*); only layout here. */
.circle-row .circle-chip {
    flex: none;
    white-space: nowrap;
}

.circle-row-meta {
    display: block;
    font-size: .82rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.circle-empty-text {
    margin: 0;
    font-size: .9rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.circle-invite-cta {
    width: 100%;
    min-height: 44px;
}

/* An anchor used as a button (invite links in later tickets) still gets the
   real hit area — inline by default, so min-height alone would never take. */
#circle-panel a.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    line-height: 1.2;
    text-decoration: none;
}

/* The four 44px floors the shell owns (buttons/chips/inputs); the rest is
   inherited from style.css's existing min-height rules. */
#circle-panel .btn-primary,
#circle-panel .btn-secondary,
#circle-panel .btn-ghost.small {
    min-height: 44px;
}

/* #1504: HOME extensions (proposals, plan-together, settings) + INVITE /
   SHARE / SENT / GROUPS. Every rule below is either .circle- prefixed or
   scoped under #circle-panel, matching the ticket-6 convention. */

.circle-open-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.circle-proposals-card,
.circle-upcoming-card,
.circle-overlap-card,
.circle-sent-card,
.circle-share-preview {
    min-width: 0;
    max-width: 100%;
}

/* D-C7 overlap card: the one card on home that names another household, so
   it gets the teal edge that marks a mutual reveal. */
.circle-overlap-card {
    border-color: var(--teal);
}

.circle-overlap-spark {
    color: var(--teal);
}

.circle-overlap-card .circle-row-name {
    margin-top: 8px;
}

.circle-overlap-plan {
    margin-top: 10px;
    min-height: 44px;
}

.circle-proposals-list,
.circle-past-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

/* T2417 (C-PAST): home's two proposal cards each end in a single action —
   "Answer" into the inbox, "Past plans" into the history. Right-aligned like
   .circle-open-actions above, and 44px so both are real tap targets. */
.circle-proposals-actions,
.circle-upcoming-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.circle-proposals-answer,
.circle-past-link {
    min-height: 44px;
    overflow-wrap: anywhere;
}

/* The history is read-only, and it is not where attention belongs — it reads
   one step back from the live cards on home. */
.circle-past-list .circle-row-name {
    color: var(--muted);
}

.circle-plan-together-cta,
.circle-settings-link {
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
}

/* T2430 (C-PAST-DOOR): the unconditional door to the history, sitting with
   the persistent home CTAs rather than on a card that may not render. Ghost
   like .circle-settings-link — a quiet entry, full width and 44px so it is a
   real tap target. */
.circle-past-cta {
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
}

.circle-sub {
    margin: 0 0 12px;
    font-size: .9rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.circle-hint {
    font-size: .82rem;
    color: var(--muted);
    margin: 6px 0 0;
    overflow-wrap: anywhere;
}

.circle-topbar {
    display: flex;
    align-items: center;
    margin: 0 0 8px;
}

.circle-back {
    background: none;
    border: 0;
    color: var(--teal);
    font-weight: 800;
    font-size: 1rem;
    padding: 6px 8px 6px 0;
    min-height: 44px;
}

.circle-field {
    margin: 0 0 10px;
}

.circle-invite-error,
.circle-groups-error,
.circle-group-error {
    margin: 0 0 8px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--danger);
    overflow-wrap: anywhere;
}

.circle-invite-segs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.circle-invite-segs button {
    flex: none;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 700;
    font-size: .85rem;
    color: var(--ink);
    min-height: 44px;
    overflow-wrap: anywhere;
}

.circle-invite-segs button.on {
    background: var(--teal-soft);
    border-color: var(--teal);
    color: var(--teal-deep);
}

.circle-invite-new-group-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.circle-invite-new-group-form input {
    flex: 1 1 160px;
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
    color: var(--ink);
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 10px;
}

.circle-invite-send {
    width: 100%;
    margin-top: 4px;
}

.circle-invite-fallback {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    text-align: center;
}

.circle-share-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 6px;
    margin: 8px 0;
}
.circle-share-grid button {
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 8px 4px;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ink);
    min-height: 44px;
    cursor: pointer;
}

.circle-share-status {
    margin: 0 0 8px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--teal-deep);
}

.circle-share-preview {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 8%, var(--card));
}

.circle-share-preview-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
}

.circle-og {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex: none;
    border: 1px solid var(--line);
}

.circle-share-message {
    font: inherit;
    font-size: .92rem;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--cream);
    width: 100%;
    min-height: 110px;
    resize: vertical;
    color: var(--ink);
}

.circle-share-done,
.circle-sent-back {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
}

.circle-groups-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.circle-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.circle-group-name {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-weight: 800;
    border: 0;
    border-bottom: 1.5px dashed var(--line);
    background: transparent;
    color: var(--ink);
    padding: 6px 0;
}

.circle-group-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line);
    min-height: 44px;
    overflow-wrap: anywhere;
}
.circle-group-check:last-of-type {
    border-bottom: 0;
}
.circle-group-check input {
    width: 24px;
    height: 24px;
    flex: none;
    accent-color: var(--teal);
}
/* C-EG: a group with no families yet is shown but not tickable — an empty
   audience is the server's "whole circle", so the row says why instead. */
.circle-group-check.is-empty {
    color: var(--muted);
}
.circle-group-check.is-empty input {
    cursor: not-allowed;
    opacity: .5;
}
.circle-group-check-empty {
    margin-left: auto;
    padding-left: 8px;
    font-size: .8rem;
    color: var(--muted);
}

.circle-groups-new,
.circle-groups-new-form {
    width: 100%;
    margin-top: 8px;
}
.circle-groups-new-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.circle-groups-new-form input {
    flex: 1 1 100%;
    min-width: 0;
    font: inherit;
    font-size: .95rem;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--cream);
    color: var(--ink);
}

.circle-group-delete {
    margin-top: 8px;
}

/* #1505: AVAIL — home mini grid + the per-date grid/sheet. Every rule below
   is either .circle- prefixed or scoped under #circle-panel, matching the
   ticket-6 convention. */

.circle-home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.circle-home-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 44px;
    padding: 8px 10px;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    min-width: 0;
    overflow-wrap: anywhere;
}
.circle-home-tile.is-open {
    border-color: var(--teal);
    background: color-mix(in srgb, var(--teal) 8%, var(--card));
}

.circle-home-tile-slot {
    font-weight: 700;
    font-size: .85rem;
}
.circle-home-tile-state {
    font-size: .78rem;
    color: var(--muted);
}
.circle-home-tile.is-open .circle-home-tile-state {
    color: var(--teal-deep);
    font-weight: 700;
}

.circle-home-calendar-status {
    font-weight: 700;
}

.circle-week-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.circle-week-tab {
    flex: none;
    min-height: 44px;
    padding: 8px 14px;
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.circle-week-tab.is-active {
    color: var(--card);
    background: var(--teal-deep);
    border-color: var(--teal-deep);
}

.circle-week-more {
    width: 100%;
    margin-top: 4px;
}

.circle-avail-grid-host {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 10px;
    min-width: 0;
}

.circle-avail-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 44px;
    padding: 10px;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font: inherit;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    min-width: 0;
    overflow-wrap: anywhere;
}
.circle-avail-tile.is-open {
    border-color: var(--teal);
    background: color-mix(in srgb, var(--teal) 8%, var(--card));
}
.circle-avail-tile.is-busy {
    background: repeating-linear-gradient(
        45deg,
        var(--line),
        var(--line) 4px,
        transparent 4px,
        transparent 8px
    );
}
.circle-avail-tile.is-suggested {
    border-style: dashed;
    border-color: var(--gold);
}

.circle-avail-tile-date {
    font-weight: 700;
    font-size: .85rem;
}
.circle-avail-tile-state {
    font-size: .78rem;
    color: var(--muted);
}
.circle-avail-tile.is-open .circle-avail-tile-state {
    color: var(--teal-deep);
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.circle-avail-tile-overlap {
    font-size: .76rem;
    color: var(--teal-deep);
}

.circle-copy-next {
    width: 100%;
    margin-top: 10px;
}

.circle-avail-sheet {
    margin-top: 12px;
    padding: 14px;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    min-width: 0;
    max-width: 100%;
}

.circle-avail-sheet-subhead {
    margin: 10px 0 4px;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.circle-avail-whole {
    border-bottom: 1.5px dashed var(--line);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.circle-avail-sheet-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.circle-avail-sheet-actions button {
    flex: 1;
    min-height: 44px;
}

.circle-avail-toast {
    margin-top: 10px;
    padding: 10px 14px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--teal-deep);
    background: color-mix(in srgb, var(--teal) 10%, var(--card));
    border-radius: 12px;
    overflow-wrap: anywhere;
}

/* Two pre-existing #1505 classes that never got a rule (closing them out
   while this file is open — harmless, additive, no JS changed). */
.circle-avail-open-it,
.circle-avail-close-it,
.circle-open-sync {
    min-height: 44px;
}

/* #1506 (D-C6/D-C9/D-C11): Plan together (who/when/what/message), answering
   a proposal, and circle settings. Every view here is an in-page LIST — no
   side-swipe anywhere (D-C6) — so none of the containers below use
   overflow-x; the pre-existing .circle-week-strip horizontal scroller
   belongs to #1505's weekend tab strip, a different (and already shipped)
   surface, and is unchanged here. */

.circle-plan-list,
.circle-idea-list,
.circle-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    min-width: 0;
}

/* WHO / WHEN: the family + slot picker rows. Checkboxes only — the WHEN
   view's "one slot" picker is a manual-exclusive-select (JS unchecks the
   others), never a radio input (file-wide convention). */
.circle-plan-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.circle-plan-row input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: none;
    margin-top: 2px;
    accent-color: var(--teal);
}
.circle-plan-row.is-selected {
    border-color: var(--teal);
    background: color-mix(in srgb, var(--teal) 8%, var(--card));
}
.circle-plan-row.is-pending {
    opacity: .7;
    cursor: default;
}
.circle-plan-row-name,
.circle-plan-row-meta {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}
.circle-plan-row-name {
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink);
}
.circle-plan-row-meta {
    font-size: .8rem;
    color: var(--muted);
}
.circle-plan-more,
.circle-plan-next {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
}

/* WHAT: idea cards reuse .card.idea/.card-photo/.card-body/.card-reason/.chips
   from style.css — only the action buttons and the refine composer are new. */
.circle-idea-pick,
.circle-idea-not,
.circle-idea-tell,
.circle-idea-more,
.circle-idea-plans {
    min-height: 44px;
}
.circle-idea-more,
.circle-idea-plans {
    width: 100%;
    margin-top: 8px;
}
.circle-idea-extra {
    margin-top: 8px;
    font-size: .85rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.circle-refine-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
    min-width: 0;
}
.circle-refine-input {
    font: inherit;
    font-size: .92rem;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--cream);
    color: var(--ink);
    resize: vertical;
    min-height: 44px;
    width: 100%;
}
.circle-refine-go {
    align-self: flex-end;
    min-height: 44px;
}

/* MESSAGE */
.circle-msg-summary {
    margin: 0 0 10px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--teal-deep);
    overflow-wrap: anywhere;
}
.circle-msg-input {
    font: inherit;
    font-size: .95rem;
    padding: 11px 14px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--cream);
    color: var(--ink);
    width: 100%;
    resize: vertical;
    min-height: 100px;
}
.circle-msg-send {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
}

.circle-proposed-back {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
}

/* INBOX / answering a proposal (D-C9) */
.circle-inbox-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}
.circle-inbox-in,
.circle-inbox-not,
.circle-inbox-tell,
.circle-inbox-site,
.circle-inbox-another {
    min-height: 44px;
}
.circle-inbox-cta {
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
}

.circle-counter {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1.5px dashed var(--line);
    min-width: 0;
}
.circle-counter-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.circle-counter-slot {
    min-height: 44px;
}

.circle-accepted-band {
    border-color: var(--teal);
}
.circle-accepted-ics,
.circle-accepted-share {
    min-height: 44px;
}

/* SETTINGS */

/* D-C12 (KI-2): "What your circle calls you". A bounded text field, not a
   toggle, so it gets its own stacked row rather than .circle-settings-row's
   checkbox flex layout. */
.circle-settings-name-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.circle-settings-name-label {
    font-weight: 700;
    overflow-wrap: anywhere;
}
.circle-settings-name-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    font: inherit;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--cream);
    color: inherit;
}
.circle-settings-name-hint {
    margin: 0;
    font-size: .82rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}
.circle-settings-name-error {
    margin: 0;
    font-size: .85rem;
    font-weight: 700;
    color: var(--danger);
    overflow-wrap: anywhere;
}

.circle-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line);
    min-height: 44px;
    overflow-wrap: anywhere;
}
.circle-settings-row input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: none;
    accent-color: var(--teal);
}
.circle-settings-cal,
.circle-settings-save {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
}

/* Group card (groups screen) + pending/incoming row action rows — gaps found
   while completing #1506's file-wide CSS pass. */
.circle-group-card {
    min-width: 0;
    max-width: 100%;
}
.circle-row-pending-actions,
.circle-row-incoming-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.circle-row-pending-actions button,
.circle-row-incoming-actions button {
    min-height: 44px;
}

/* ── T2358 · SOC-3: the connected-row safety overflow ──────────────────────
   Layout only. The report picker itself reuses style.css's shipped
   .reason-picker / .reason-chips / .reason-chip / .other-row rules, so the
   two report surfaces (joint plan band, Families row) look identical. */

.circle-groups-cta {
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
}

.circle-row-connected-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
    min-width: 0;
}

.circle-row-more {
    min-height: 44px;
    min-width: 44px;
    line-height: 1;
}

.circle-row-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding-top: 8px;
    border-top: 1.5px dashed var(--line);
}

.circle-row-menu button {
    min-height: 44px;
}

.circle-row-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.circle-row-confirm-copy,
.circle-row-report-done {
    margin: 0;
    overflow-wrap: anywhere;
}

.circle-row-report {
    width: 100%;
    min-width: 0;
}

/* T2423 · C-FAM — the Families row now carries its groups, the caller's
   private alias, and the two controls that edit them (D-C3 + D-C12). */
.circle-row-own-name {
    font-style: italic;
}

.circle-row-rename-input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font: inherit;
    color: inherit;
    background: var(--cream);
}

.circle-row-groups {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.circle-row-group-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* T2359 · SOC-7 — the WHEN step gets the same three-week strip the
   availability grid has (D-C4), so a proposal is no longer hard-locked to the
   coming weekend. Chrome is .circle-week-strip / .circle-week-tab above. */
.circle-when-strip {
    margin-top: 10px;
}

/* T2359 · SOC-14 — pending invites are their own non-selectable section in
   the Who's-in picker; the old is-pending flag on a CONNECTED row could never
   fire (the two lists are disjoint by construction). */
.circle-plan-pending-head {
    margin-top: 16px;
    margin-bottom: 0;
}
.circle-plan-pending-list .circle-plan-row {
    cursor: default;
}

/* T2359 · SOC-12 — "Or pick from my plans" now opens inline instead of
   navigating to the Plans panel and discarding who/when/what. */
.circle-idea-plans-panel {
    margin-top: 8px;
}
.circle-idea-plans-panel .circle-plan-row {
    flex-wrap: wrap;
    cursor: default;
}
.circle-idea-plans-use {
    min-height: 44px;
    margin-left: auto;
}

/* D-C12 (KI-2): the one-line pointer under Profile -> Name. It lives in
   index.html's profile form, but the rule belongs here with the rest of the
   circle surface. .82rem keeps it above DESIGN.md's 12px floor. */
.circle-profile-name-hint {
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    overflow-wrap: anywhere;
}

/* T2418 (D-C4): the Plan-together WHO step reuses .circle-invite-segs above
   verbatim — the only state the invite form never had is a group with no
   families in it yet, which renders as a disabled segment. */
.circle-invite-segs button:disabled {
    opacity: .55;
}