/* 19A: Notes & Comments — the stock page's journal section.

   The root repair is lexical: the section stops filing visibility as metadata
   (Private/Public, a pill and a 13px lock) and starts naming two acts, Note and
   Comment, in the filter, the composer, the row and the empty state. The CSS
   follows that: rows differ by ANATOMY (a note has no avatar and leads with a
   lock; a comment leads with a face), which is also what makes the list legible
   in dark mode, where hairline contrast alone was doing the work.

   Retires .sv-visibility-pill and the whole .sv-comment-filter-* family — the
   filter is now IjSegmented (16A), the composer mode is the same control. */

/* ── Header ──────────────────────────────────────────────────────
   Shipped flex-wrap kept: at column width the segmented sits right of the
   title; at phone width it wraps to its own line at its natural size. A filter
   is a lens, never --fill. */
.sv-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px;
}

/* ── Composer ────────────────────────────────────────────────────
   19B: the Note | Comment segmented is permanent chrome in the top row — an
   untouched composer already says the section takes two kinds of writing.
   Focus grows the text area and adds the footer BELOW; the segmented never
   moves. Growth, caret and footer are the focus state, so there is no ring
   and no border to add. */
.sv-composer {
    border-radius: 16px;
    background: var(--ij-field);
    padding: 8px 8px 8px 16px;
}

/* Only the BOTTOM padding may change between states. The design's two frames
   differ by 4px on top/right as well, which would slide the segmented by 4px
   on focus — and "no control relocates" is the whole point of 19B, so the
   measured invariant wins over the hand-drawn frame. Height comes from the
   text area growing, never from the box's top edge moving. */
.sv-composer--expanded {
    padding-bottom: 12px;
}

.sv-composer-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Expanded, the text area is multi-line: the segmented aligns to its first
   line rather than floating in the vertical middle of a growing box. */
.sv-composer--expanded .sv-composer-top {
    align-items: flex-start;
}

.sv-composer-top > .ij-segmented {
    flex: none;
}

/* The placeholder yields before the control does — the segmented is the
   answer to "what is this box?" and must never compress. */
.sv-composer-rest {
    display: flex;
    align-items: center;
    /* Explicit: the UA stylesheet centres a flex <button>'s content, which
       would centre the placeholder and break the illusion of a text field. */
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
    min-height: 28px;
    padding: 0;
    border: none;
    background: none;
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: text;
}

.sv-composer-rest span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sv-composer-top .mud-input-control {
    flex: 1;
    min-width: 0;
    min-height: 52px;
}

/* MudBlazor's text input is a quiet surface plus a caret here — the Material
   underline and its focus sweep are the loudest Material tell in the section. */
.sv-composer .mud-input.mud-input-text {
    margin-top: 0;
}

.sv-composer .mud-input-control,
.sv-composer .mud-input.mud-input-text {
    background: transparent;
}

.sv-composer-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* Identity at the moment of commitment: in Note mode it reassures, in Comment
   mode it names the author and the audience. Truncates before it wraps — the
   footer must stay one row so the button never moves. */
.sv-composer-caption {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-composer-caption .mud-icon-root {
    flex: none;
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

/* Exists only inside the last 1,000 characters — "0 / 10000" at rest is
   information about the developer, not about the note. */
.sv-composer-counter {
    flex: none;
    font-size: 12px;
    color: var(--ij-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.sv-composer-counter--low {
    color: var(--ij-loss);
}

.sv-composer-footer .ij-btn-primary,
.sv-composer-footer .ij-btn-tinted {
    flex: none;
}

.sv-composer-footer .ij-btn-primary:disabled,
.sv-composer-footer .ij-btn-tinted:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ── Rows ────────────────────────────────────────────────────────
   Silhouette carries the taxonomy: lock-led and flush-left = yours alone;
   face-led = public. */
.sv-comment-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.sv-comment-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 0.5px solid var(--mud-palette-divider);
}

.sv-comment-row:last-child {
    border-bottom: 0;
}

/* Hover only intensifies — it never reveals a control, because the same row
   ships to iOS/Android/Mac where there is no hover to reveal it. */
@media (hover: hover) {
    .sv-comment-row:hover {
        margin: 0 -8px;
        padding: 16px 8px;
        border-radius: 10px;
        background: var(--mud-palette-table-hover);
    }

    .sv-comment-row:hover .sv-comment-menu-btn {
        background: var(--ij-field);
        color: var(--mud-palette-text-secondary);
    }
}

.sv-comment-body {
    flex: 1;
    min-width: 0;
}

.sv-comment-avatar {
    flex-shrink: 0;
    /* Aligns the avatar with the cap height of the author name in the meta row. */
    margin-top: 1px;
}

/* The meta line owns the row's furniture: who/what, when, and the ··· docked
   at its end — part of the row's first line, not a floating glyph centred
   against a measure the text rarely fills. */
.sv-comment-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.sv-comment-author {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The date truncates before the name does — a nameless row is unreadable, a
   shortened timestamp is merely terse. */
.sv-comment-date {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sv-comment-separator {
    color: var(--mud-palette-text-secondary);
    user-select: none;
}

/* A note's meta line: the lock leads, "Note" names the act. */
.sv-comment-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.sv-comment-kind .mud-icon-root {
    font-size: 12px !important;
    width: 12px !important;
    height: 12px !important;
}

.sv-comment-menu-btn {
    margin-left: auto;
    flex: none;
    width: 28px;
    height: 28px;
    /* 28px glyph in a 44px effective target — touch heads get the full one. */
    margin-top: -8px;
    margin-bottom: -8px;
    padding: 8px 0;
    color: var(--ij-text-tertiary);
}

.sv-comment-text {
    margin: 0;
    font-size: 15px;
    color: var(--mud-palette-text-primary);
    line-height: 1.47;
    word-break: break-word;
}

.sv-comment-edit {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sv-comment-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* ── Empty states ────────────────────────────────────────────────
   Signed in: two lines teaching the two nouns, 24px under the resting
   composer, no button — the composer is right there. */
.sv-comments-empty {
    padding: 32px 16px;
    text-align: center;
}

.sv-comments-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.sv-comments-empty-body {
    margin: 0 auto;
    max-width: 340px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* Signed out sells the journal, not the login — and the public comments keep
   rendering below it, because the content is the pitch. */
.sv-comments-invite {
    padding: 24px 16px;
    text-align: center;
    background: var(--ij-field);
    border-radius: 16px;
}

.sv-comments-invite .ij-btn-primary {
    display: inline-flex;
    margin: 0 auto;
}

/* ── Mobile compose sheet ────────────────────────────────────────
   At phone width the section is last on the page, so composing in place means
   typing into the keyboard's shadow. Focus opens 16A's FullScreen sheet
   instead: ij-form-nav on top, so the action is above the keyboard by
   construction. */
.sv-compose-host .mud-dialog-content {
    padding: 0;
}

.sv-compose-sheet {
    padding: 16px 18px calc(env(safe-area-inset-bottom) + 12px);
}

.sv-compose-sheet .sv-composer-caption {
    margin-top: 8px;
}

.sv-compose-sheet .sv-composer-counter {
    display: block;
    margin-top: 8px;
    text-align: right;
}

/* 16px keeps iOS from zooming the viewport when the field takes focus. */
.sv-compose-sheet .mud-input.mud-input-text {
    font-size: 16px;
}