/* =====================================================================
   Social AI Manager - shared component library.
   Nothing here is page-specific. A page that needs a one-off look should
   compose these rather than growing its own stylesheet.
   ===================================================================== */

/* ---------------------------------------------------------------------
   PageHeader
   --------------------------------------------------------------------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.page-header__text { flex: 1 1 260px; min-width: 0; }
.page-header__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.022em;
}
.page-header__subtitle {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-base);
}
.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
@media (max-width: 767.98px) {
    .page-header__title { font-size: var(--text-xl); }
    .page-header__actions { width: 100%; }
    .page-header__actions > * { flex: 1 1 auto; }
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}
.section-title__count {
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.section-title__action { margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-medium); }

/* ---------------------------------------------------------------------
   Card
   --------------------------------------------------------------------- */
.ui-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}
.ui-card__body { padding: var(--space-5); }
.ui-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    font-weight: var(--weight-semibold);
}
.ui-card__footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
}
.ui-card--flush .ui-card__body { padding: 0; }
.ui-card--interactive { transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease); }
.ui-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
@media (max-width: 767.98px) {
    .ui-card__body { padding: var(--space-4); }
    .ui-card__header, .ui-card__footer { padding: var(--space-3) var(--space-4); }
}

.card-grid {
    display: grid;
    gap: var(--space-4);
    /* minmax(0, ...) rather than a bare 1fr: a bare fr keeps an automatic min-content
       minimum, so a single wide child widens the track and pushes the page sideways. */
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 480px) and (max-width: 1023.98px) {
    .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

/* Counters are short. Two across reads fine on a phone and saves a screenful of scrolling;
   an odd last card takes the full width rather than sitting alone in a half. */
@media (max-width: 767.98px) {
    .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .card-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* The editor/preview switch is a phone affordance. On a wide screen both panels are shown
   at once, so the toggle's hidden attribute must not survive into the desktop layout.
   The !important is not decoration: Bootstrap's reboot declares [hidden]{display:none
   !important}, and it loads first. */
@media (min-width: 1024px) {
    .split-layout > [data-toggle-panel][hidden] { display: block !important; }
}

/* Icons sitting directly in a heading, rather than in a sized wrapper. */
.ui-card__header > svg,
.section-title > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-muted); }

/* Desktop gets a second column where it genuinely helps; mobile stacks. */
.split-layout { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
    .split-layout--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); }
    .split-layout--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5); }
    .split-layout--1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: var(--surface-sunken);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}
.ui-btn:hover { text-decoration: none; }
.ui-btn:active { transform: scale(0.985); }
.ui-btn:disabled,
.ui-btn.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ui-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.ui-btn--primary {
    background: var(--gradient-accent);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-accent);
}
.ui-btn--primary:hover { color: #fff; filter: brightness(1.06); }

.ui-btn--secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}
.ui-btn--secondary:hover { background: var(--surface-sunken); color: var(--text); }

.ui-btn--ghost { background: transparent; color: var(--text-secondary); }
.ui-btn--ghost:hover { background: var(--surface-sunken); color: var(--text); }

.ui-btn--quiet {
    background: transparent;
    color: var(--accent);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}
.ui-btn--quiet:hover { background: var(--accent-50); color: var(--accent-700); }

.ui-btn--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.ui-btn--danger:hover { background: #FBDDDD; color: var(--danger); }

.ui-btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.ui-btn--lg { min-height: 50px; padding: 0 var(--space-6); font-size: var(--text-md); }
.ui-btn--block { display: flex; width: 100%; }
.ui-btn--icon { padding: 0; width: var(--tap-target); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn-row--end { justify-content: flex-end; }

/* AIActionButton - an AI action, marked as one without shouting. */
.ai-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 38px;
    padding: 0 var(--space-3);
    border: 1px solid var(--accent-200);
    border-radius: var(--radius-pill);
    background: var(--accent-50);
    color: var(--accent-700);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
}
.ai-action:hover { background: var(--accent-100); border-color: var(--accent-400); color: var(--accent-700); text-decoration: none; }
.ai-action:active { transform: scale(0.97); }
.ai-action:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-action svg { width: 15px; height: 15px; }

/* A horizontally scrollable strip of AI actions on narrow screens. */
.ai-action-bar {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    margin-bottom: calc(var(--space-2) * -1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ai-action-bar::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
    .ai-action-bar { flex-wrap: wrap; overflow: visible; }
}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field__label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.field__hint {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.field__error {
    display: block;
    margin-top: var(--space-2);
    color: var(--danger);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.field__error:empty { display: none; }
.field__optional { color: var(--text-subtle); font-weight: var(--weight-normal); }

.ui-input,
.ui-select,
.ui-textarea {
    display: block;
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-input);
    color: var(--text);
    font-family: inherit;
    /* 16px on mobile stops iOS zooming the viewport on focus. */
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--text-subtle); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-50);
}
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"] {
    border-color: var(--danger);
}
.ui-textarea { min-height: 120px; resize: vertical; line-height: var(--leading-normal); }
.ui-textarea--tall { min-height: 260px; }
.ui-select {
    appearance: none;
    padding-right: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
}
.input-group-row { display: flex; gap: var(--space-2); }
.input-group-row > .ui-input { flex: 1; min-width: 0; }

.field-row { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Checkbox / radio with a full-width tap area. */
.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--tap-target);
    padding: var(--space-2) 0;
    cursor: pointer;
}
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.check__text { font-size: var(--text-base); }

/* Selectable card - goals, post types, tone. */
.choice-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .choice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .choice-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 92px;
    padding: var(--space-4);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-card);
    /* A choice card is often an anchor, and must not inherit link colouring for its text. */
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
}
.choice:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
}
.choice:active { transform: scale(0.99); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.choice__icon svg { width: 18px; height: 18px; }
.choice__title { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.choice__desc { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
.choice__tick {
    position: absolute;
    top: var(--space-3); right: var(--space-3);
    display: none;
    place-items: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
}
.choice__tick svg { width: 12px; height: 12px; }

.choice.is-selected,
.choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-50);
}
.choice.is-selected .choice__icon,
.choice:has(input:checked) .choice__icon { background: var(--accent-100); color: var(--accent-700); }
.choice.is-selected .choice__tick,
.choice:has(input:checked) .choice__tick { display: grid; }
.choice:has(input:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Segmented control - calendar views, filters. */
.segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--surface-sunken);
    border-radius: var(--radius-button);
}
.segmented__option {
    min-height: 36px;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.segmented__option:hover { color: var(--text); text-decoration: none; }
.segmented__option.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

/* Filter chips - horizontally scrollable on mobile. */
.chip-bar {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.chip-bar::-webkit-scrollbar { display: none; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--border-strong); color: var(--text); text-decoration: none; }
.filter-chip.is-active {
    background: var(--surface-inverse);
    border-color: var(--surface-inverse);
    color: #fff;
}
.filter-chip__count {
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.filter-chip.is-active .filter-chip__count { background: rgba(255,255,255,0.2); color: #fff; }

/* ---------------------------------------------------------------------
   ContentStatusChip - every post carries exactly one
   --------------------------------------------------------------------- */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--neutral-chip-bg);
    color: var(--neutral-chip-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
}
/* A dot shape backs up the colour, so status never depends on hue alone. */
.status-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status-chip--idea       { background: var(--neutral-chip-bg); color: var(--text-muted); border-color: var(--border); }
.status-chip--draft      { background: var(--surface-sunken); color: var(--text-secondary); border-color: var(--border-strong); }
.status-chip--ai         { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-200); }
.status-chip--review     { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.status-chip--approved   { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.status-chip--scheduled  { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.status-chip--published  { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.status-chip--failed     { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.status-chip--skipped    { background: var(--neutral-chip-bg); color: var(--text-subtle); border-color: var(--border); }

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}
.meta-chip svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------
   StatCard
   --------------------------------------------------------------------- */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    transition: box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
a.stat-card:hover { text-decoration: none; color: var(--text); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.stat-card__label svg { width: 15px; height: 15px; }
.stat-card__value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.stat-card__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.stat-card__delta svg { width: 13px; height: 13px; }
.stat-card__delta--up { color: var(--success); }
.stat-card__delta--down { color: var(--danger); }
.stat-card__delta--flat { color: var(--text-muted); }
.stat-card__foot { color: var(--text-muted); font-size: var(--text-sm); }
.stat-card--attention { border-color: var(--warning-border); background: var(--warning-bg); }
.stat-card--danger { border-color: var(--danger-border); background: var(--danger-bg); }

/* ---------------------------------------------------------------------
   AIInsightCard / briefing
   --------------------------------------------------------------------- */
.ai-panel {
    position: relative;
    padding: var(--space-5);
    background: var(--gradient-accent-soft);
    border: 1px solid var(--accent-200);
    border-radius: var(--radius-card);
}
.ai-panel__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-3);
    color: var(--accent-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ai-panel__label svg { width: 14px; height: 14px; }

.insight-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.insight-card__icon {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--gradient-accent-soft);
    color: var(--accent);
}
.insight-card__icon svg { width: 17px; height: 17px; }
.insight-card__body { min-width: 0; flex: 1; }
.insight-card__statement { font-size: var(--text-base); line-height: var(--leading-snug); }
.insight-card__meta { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.insight-card__actions { margin-top: var(--space-3); }

/* Briefing list on the dashboard. */
.briefing { display: flex; flex-direction: column; gap: var(--space-1); }
.briefing__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--text-base);
}
.briefing__row + .briefing__row { border-top: 1px solid rgba(15, 23, 42, 0.06); }
.briefing__icon {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--accent);
}
.briefing__icon svg { width: 14px; height: 14px; }
.briefing__value { font-weight: var(--weight-semibold); }
.briefing__link { margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* ---------------------------------------------------------------------
   Priority card - the single most important thing today
   --------------------------------------------------------------------- */
.priority-card {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--accent-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.priority-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradient-accent);
}
.priority-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-3);
}
.priority-card__eyebrow {
    color: var(--accent-700);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.priority-card__title {
    margin-top: 2px;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.015em;
}
.priority-card__body { padding: 0 var(--space-5) var(--space-4); }
.priority-card__excerpt {
    padding: var(--space-4);
    background: var(--surface-sunken);
    border-radius: var(--radius-input);
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    white-space: pre-wrap;
    /* A pasted URL with no spaces must wrap, not widen the card past the viewport. */
    overflow-wrap: anywhere;
    /* Three lines is enough to recognise the post without reading it here. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.priority-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.priority-card__foot .ui-btn { flex: 1 1 auto; }
@media (min-width: 640px) {
    .priority-card__foot .ui-btn { flex: 0 0 auto; }
    .priority-card__foot .ui-btn--primary { margin-left: auto; }
}
@media (max-width: 767.98px) {
    .priority-card__head { padding: var(--space-4) var(--space-4) var(--space-3); }
    .priority-card__body { padding: 0 var(--space-4) var(--space-4); }
    .priority-card__foot { padding: var(--space-3) var(--space-4); }
}

/* AI score meter. */
.score {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.score__track {
    width: 64px; height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}
.score__fill { height: 100%; border-radius: var(--radius-pill); background: var(--gradient-accent); }
.score__fill--warn { background: var(--warning); }
.score__fill--poor { background: var(--danger); }
.score__value { color: var(--text); }
.score__label { color: var(--text-muted); font-weight: var(--weight-medium); }

/* ---------------------------------------------------------------------
   PostCard
   --------------------------------------------------------------------- */
.post-card {
    display: block;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    transition: box-shadow var(--duration-base) var(--ease),
                border-color var(--duration-base) var(--ease),
                transform var(--duration-base) var(--ease);
}
a.post-card:hover, .post-card--interactive:hover {
    text-decoration: none;
    color: var(--text);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.post-card.is-selected { border-color: var(--accent); background: var(--accent-50); }
.post-card__top {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.post-card__when { margin-left: auto; color: var(--text-muted); font-size: var(--text-sm); }
.post-card__title {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
}
.post-card__excerpt {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card__foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.post-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------------------------------------------------------------------
   SocialAccountCard
   --------------------------------------------------------------------- */
.account-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}
.account-card--soon { background: var(--surface-sunken); box-shadow: none; }
.account-card__logo {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px; height: 46px;
    border-radius: 13px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
}
.account-card__logo svg { width: 24px; height: 24px; }
.account-card__logo--linkedin { background: #0A66C2; color: #fff; }
.account-card__body { flex: 1; min-width: 0; }
.account-card__name { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.account-card__meta { margin-top: 2px; color: var(--text-muted); font-size: var(--text-sm); }
.account-card__note { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); }
.account-card__actions { margin-top: var(--space-4); }
@media (min-width: 640px) {
    .account-card__actions { margin-top: var(--space-3); }
}
.capability-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 4px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.capability-list li { display: flex; align-items: center; gap: var(--space-2); }
.capability-list svg { width: 14px; height: 14px; flex: 0 0 auto; }
.capability-list .is-yes { color: var(--success); }
.capability-list .is-no { color: var(--text-subtle); }

/* ---------------------------------------------------------------------
   EmptyState - never a blank table
   --------------------------------------------------------------------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-5);
    text-align: center;
}
.empty-state__icon {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--gradient-accent-soft);
    color: var(--accent);
}
.empty-state__icon svg { width: 24px; height: 24px; }
.empty-state__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty-state__text {
    max-width: 44ch;
    color: var(--text-muted);
    font-size: var(--text-base);
}
.empty-state__actions { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.empty-state--sm { padding: var(--space-6) var(--space-4); }
.empty-state--sm .empty-state__icon { width: 40px; height: 40px; }
.empty-state--sm .empty-state__icon svg { width: 19px; height: 19px; }

/* ---------------------------------------------------------------------
   PostPreview - what the post will look like on LinkedIn
   --------------------------------------------------------------------- */
.post-preview {
    max-width: 520px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.post-preview__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-2); }
.post-preview__author { min-width: 0; }
.post-preview__name { font-size: 14px; font-weight: var(--weight-semibold); line-height: 1.3; }
.post-preview__headline {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-preview__time { color: var(--text-muted); font-size: 12px; }
.post-preview__body {
    padding: var(--space-2) var(--space-4) var(--space-3);
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
/* LinkedIn truncates around three lines behind a "see more". */
.post-preview__body.is-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-preview__more {
    padding: 0 var(--space-4) var(--space-3);
    background: none;
    border: 0;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--weight-semibold);
    cursor: pointer;
}
.post-preview__hashtags { padding: 0 var(--space-4) var(--space-3); color: #0A66C2; font-size: 14px; }
.post-preview__media { display: flex; gap: 2px; overflow-x: auto; background: var(--surface-sunken); }
.post-preview__media img { height: 200px; width: auto; display: block; }
.post-preview__stats {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
}
.post-preview__actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
}
.post-preview__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-3) 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: var(--weight-semibold);
}
.post-preview__action svg { width: 16px; height: 16px; }

.preview-frame {
    display: flex;
    justify-content: center;
    padding: var(--space-5);
    background: var(--surface-sunken);
    border-radius: var(--radius-card);
    border: 1px solid var(--border);
}

/* ---------------------------------------------------------------------
   Stepper - onboarding progress
   --------------------------------------------------------------------- */
.stepper { margin-bottom: var(--space-6); }
.stepper__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
}
.stepper__step { font-weight: var(--weight-semibold); }
.stepper__remaining { color: var(--text-muted); }
.stepper__track {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    overflow: hidden;
}
.stepper__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--gradient-accent);
    transition: width var(--duration-slow) var(--ease-out);
}
.stepper__dots { display: none; gap: var(--space-2); margin-top: var(--space-3); }
.stepper__dot {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-subtle);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.stepper__dot-num {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}
.stepper__dot.is-done { color: var(--success); }
.stepper__dot.is-done .stepper__dot-num { background: var(--success-bg); color: var(--success); }
.stepper__dot.is-current { color: var(--accent-700); }
.stepper__dot.is-current .stepper__dot-num { background: var(--gradient-accent); color: #fff; }
.stepper__dot svg { width: 12px; height: 12px; }
@media (min-width: 768px) {
    .stepper__dots { display: flex; flex-wrap: wrap; gap: var(--space-4); }
}

/* Onboarding page frame - narrow, centred, no distractions. */
.onboarding-shell { min-height: 100dvh; background: var(--app-bg); }
.onboarding-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-height) + env(safe-area-inset-top));
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.onboarding-body {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-16);
}
@media (min-width: 768px) { .onboarding-body { padding: var(--space-10) var(--space-6) var(--space-16); } }

/* A sticky primary action so the main step action is always reachable. */
.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    gap: var(--space-2);
    margin: var(--space-6) calc(var(--space-4) * -1) 0;
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: rgba(245, 246, 250, 0.92);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
}
.sticky-actions .ui-btn { flex: 1; }
/* A secondary action and a square icon button keep their own size; only the primary
   action should stretch to fill the bar. */
.sticky-actions .ui-btn--secondary,
.sticky-actions .ui-btn--icon { flex: 0 0 auto; }
@media (min-width: 768px) {
    .sticky-actions {
        position: static;
        margin: var(--space-6) 0 0;
        padding: var(--space-5) 0 0;
        background: none;
        backdrop-filter: none;
        border-top: 1px solid var(--border);
    }
    .sticky-actions .ui-btn { flex: 0 0 auto; }
    .sticky-actions__spacer { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------
   Pipeline board
   --------------------------------------------------------------------- */
.pipeline {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    -webkit-overflow-scrolling: touch;
}
.pipeline__column {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-card);
}
.pipeline__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
.pipeline__count {
    margin-left: auto;
    padding: 0 7px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--text-xs);
}
@media (min-width: 1280px) {
    .pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
    .pipeline__column { flex: 1; }
}

/* ---------------------------------------------------------------------
   Calendar
   --------------------------------------------------------------------- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.calendar-grid__dayname {
    padding: var(--space-2);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.calendar-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 118px;
    padding: var(--space-2);
    background: var(--surface);
}
.calendar-cell--outside { background: var(--surface-sunken); }
.calendar-cell--today .calendar-cell__num {
    background: var(--gradient-accent);
    color: #fff;
}
.calendar-cell__num {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.calendar-entry {
    display: block;
    padding: 5px 7px;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: var(--accent-50);
    color: var(--text);
    font-size: var(--text-xs);
    line-height: 1.35;
    text-align: left;
    transition: background var(--duration-fast) var(--ease);
}
.calendar-entry:hover { background: var(--accent-100); text-decoration: none; color: var(--text); }
.calendar-entry__time { font-weight: var(--weight-bold); }
.calendar-entry__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-secondary);
}
.calendar-entry--published { border-left-color: var(--success); background: var(--success-bg); }
.calendar-entry--review { border-left-color: var(--warning); background: var(--warning-bg); }
.calendar-entry--failed { border-left-color: var(--danger); background: var(--danger-bg); }
.calendar-entry--planned { border-left-color: var(--border-strong); background: var(--surface-sunken); }
.calendar-entry--queued { border-left-color: var(--accent); background: var(--accent-50); }

/* The <button> an unwritten idea uses. It has to look like the <a> beside it, because what an
   entry is - a written post or an idea waiting to be written - is carried by its colour, not
   by whether it happens to be a link. */
.calendar-entry--button {
    width: 100%;
    border: 0;
    border-left: 3px solid var(--border-strong);
    cursor: pointer;
    font: inherit;
}

/* ---- Moving an entry -------------------------------------------------
   Drag-and-drop is a shortcut over the "Move to another day" form in the
   list view, never the only way to move a post.
   --------------------------------------------------------------------- */
.calendar-entry-wrap { display: block; }
.calendar-entry-wrap[draggable="true"] { cursor: grab; }
.calendar-entry-wrap.is-dragging { opacity: 0.4; cursor: grabbing; }

/* Held while the move is in flight. A drop that has not been confirmed yet must not look
   identical to one the server has accepted. */
.calendar-entry-wrap.is-saving { opacity: 0.6; }

/* Every day is a target while a drag is in progress, so the shape of the month reads as
   something you can drop onto rather than a table that happens to accept one. */
[data-calendar-grid].is-dragging [data-calendar-day]:not([data-calendar-outside="true"]) {
    outline: 1px dashed var(--border-strong);
    outline-offset: -3px;
}
[data-calendar-day].is-drop-target {
    background: var(--accent-50);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* The list view's move form: a disclosure under the card, opened only when wanted. */
.entry-move { margin-top: var(--space-2); }
.entry-move__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
}
.entry-move__summary:hover { color: var(--text); }
.entry-move__form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.entry-move__field { display: flex; flex-direction: column; gap: 2px; }

/* A date and a time input each ask for about as much room as they need; letting them stretch
   across a desktop card makes a two-field form look like a page. */
.ui-input--time, .entry-move__field .ui-input { width: auto; min-width: 9rem; }

/* The whole readable part of a list card is one link; the buttons under it are not. This is
   why the card is a div now - a form cannot live inside an anchor. */
.post-card__link { display: block; color: inherit; }
.post-card__link:hover { text-decoration: none; color: inherit; }
.post-card:has(.post-card__link:hover) {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.entry-actions { flex-wrap: wrap; }

/* ---- Sending the month ----------------------------------------------- */
.month-queue { padding: var(--space-4) var(--space-5); }
.month-queue__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
}
.month-queue__summary::-webkit-details-marker { display: none; }
.month-queue__icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--accent-50);
    color: var(--accent);
}
.month-queue__heading { display: flex; flex-direction: column; gap: 2px; }
.month-queue__form { margin-top: var(--space-4); }

/* Indented under the option it belongs to, so it reads as that option's detail rather than as
   the next question. */
.month-queue__options {
    margin: var(--space-2) 0 var(--space-3) var(--space-6);
    padding-left: var(--space-3);
    border-left: 2px solid var(--border);
}

.choice-set { border: 0; padding: 0; margin: 0; }
.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    cursor: pointer;
}
.choice__body { display: flex; flex-direction: column; gap: 2px; }
.choice__title { font-weight: var(--weight-semibold); }
.choice__blurb { color: var(--text-muted); font-size: var(--text-sm); }

/* Agenda - the mobile default. */
.agenda { display: flex; flex-direction: column; gap: var(--space-5); }
.agenda__day { display: flex; flex-direction: column; gap: var(--space-3); }
.agenda__date {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.agenda__date--today { color: var(--accent); }

/* ---------------------------------------------------------------------
   Bottom sheet
   --------------------------------------------------------------------- */
.scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-sheet);
    max-height: 82dvh;
    overflow-y: auto;
    padding: var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: var(--shadow-sheet);
    transform: translateY(100%);

    /*
     * A closed sheet must be genuinely gone, not merely invisible. Left visible it keeps
     * swallowing clicks and stays in the tab order - and because it is centred on wide
     * screens, that means an unseen panel intercepting taps in the middle of every page.
     * Visibility is delayed by the transition so the slide-out still animates.
     */
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--duration-slow) var(--ease-out),
                visibility 0s linear var(--duration-slow);
}
.sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--duration-slow) var(--ease-out), visibility 0s;
}
.sheet__grabber {
    width: 38px; height: 4px;
    margin: var(--space-2) auto var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--border-strong);
}
.sheet__title {
    margin-bottom: var(--space-3);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}
.sheet__list { display: flex; flex-direction: column; }
.sheet__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-3) var(--space-2);
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease);
}
.sheet__item:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.sheet__item svg { width: 20px; height: 20px; color: var(--text-muted); flex: 0 0 auto; }
.sheet__item.is-active { color: var(--accent-700); }
.sheet__item.is-active svg { color: var(--accent); }
.sheet__item-sub { display: block; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-normal); }
.sheet__divider { height: 1px; margin: var(--space-2) 0; background: var(--border); }

@media (min-width: 640px) {
    .sheet {
        inset: 50% auto auto 50%;
        max-width: 460px;
        width: calc(100% - var(--space-8));
        max-height: 80dvh;
        border-radius: var(--radius-lg);
        transform: translate(-50%, -46%);
        opacity: 0;
        transition: opacity var(--duration-base) var(--ease),
                    transform var(--duration-base) var(--ease-out),
                    visibility 0s linear var(--duration-base);
        padding-bottom: var(--space-5);
    }
    .sheet.is-open {
        transform: translate(-50%, -50%);
        opacity: 1;
        transition: opacity var(--duration-base) var(--ease),
                    transform var(--duration-base) var(--ease-out),
                    visibility 0s;
    }
    .sheet__grabber { display: none; }
}

/* ---------------------------------------------------------------------
   Toast / flash messages
   --------------------------------------------------------------------- */
.flash-stack {
    position: sticky;
    top: calc(var(--topbar-height) + env(safe-area-inset-top) + var(--space-2));
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    font-size: var(--text-base);
    animation: flash-in var(--duration-slow) var(--ease-out);
}
.flash__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
.flash__text { flex: 1; min-width: 0; }
.flash__close {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    margin: -2px -6px 0 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.flash__close:hover { background: var(--surface-sunken); color: var(--text); }
.flash--success { border-color: var(--success-border); background: var(--success-bg); color: #0B5F45; }
.flash--success .flash__icon { color: var(--success); }
.flash--error { border-color: var(--danger-border); background: var(--danger-bg); color: #8E1B1B; }
.flash--error .flash__icon { color: var(--danger); }
.flash--warning { border-color: var(--warning-border); background: var(--warning-bg); color: #7A3B06; }
.flash--warning .flash__icon { color: var(--warning); }
.flash--info { border-color: var(--info-border); background: var(--info-bg); color: #08496E; }
.flash--info .flash__icon { color: var(--info); }

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Inline notice, non-dismissable. */
.notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    font-size: var(--text-base);
}
.notice__icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; color: var(--text-muted); }
.notice--warning { border-color: var(--warning-border); background: var(--warning-bg); }
.notice--warning .notice__icon { color: var(--warning); }
.notice--info { border-color: var(--info-border); background: var(--info-bg); }
.notice--info .notice__icon { color: var(--info); }
.notice--danger { border-color: var(--danger-border); background: var(--danger-bg); }
.notice--danger .notice__icon { color: var(--danger); }
.notice--success { border-color: var(--success-border); background: var(--success-bg); }
.notice--success .notice__icon { color: var(--success); }

/* ---------------------------------------------------------------------
   NotificationItem
   --------------------------------------------------------------------- */
.notification {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    transition: background var(--duration-fast) var(--ease);
}
.notification:last-child { border-bottom: 0; }
.notification:hover { background: var(--surface-sunken); text-decoration: none; color: var(--text); }
.notification.is-unread { background: var(--accent-50); }
.notification.is-unread:hover { background: var(--accent-100); }
.notification__icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px; height: 34px;
    border-radius: 11px;
    background: var(--surface-sunken);
    color: var(--text-secondary);
}
.notification__icon svg { width: 17px; height: 17px; }
.notification__icon--success { background: var(--success-bg); color: var(--success); }
.notification__icon--warning { background: var(--warning-bg); color: var(--warning); }
.notification__icon--danger { background: var(--danger-bg); color: var(--danger); }
.notification__icon--accent { background: var(--accent-100); color: var(--accent-700); }
.notification__body { flex: 1; min-width: 0; }
.notification__title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.notification__text { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
.notification__time { margin-top: var(--space-1); color: var(--text-subtle); font-size: var(--text-xs); }

/* ---------------------------------------------------------------------
   Loading: skeletons and AI generation stages
   --------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg,
        var(--surface-sunken) 25%, #E6E9F2 37%, var(--surface-sunken) 63%);
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.4s ease infinite;
}
.skeleton--text { height: 12px; margin-bottom: var(--space-2); }
.skeleton--title { height: 18px; width: 55%; margin-bottom: var(--space-3); }
.skeleton--line-short { width: 62%; }
.skeleton--block { height: 96px; }
.skeleton-card { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Longer AI work reports its stages rather than spinning. */
.ai-progress { display: flex; flex-direction: column; gap: var(--space-3); }
.ai-progress__stage {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-subtle);
    font-size: var(--text-base);
    transition: color var(--duration-base) var(--ease);
}
.ai-progress__marker {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px; height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
}
.ai-progress__marker svg { width: 12px; height: 12px; opacity: 0; }
.ai-progress__stage.is-active { color: var(--text); font-weight: var(--weight-medium); }
.ai-progress__stage.is-active .ai-progress__marker {
    border-color: var(--accent);
    border-top-color: transparent;
    animation: spin 700ms linear infinite;
}
.ai-progress__stage.is-done { color: var(--text-secondary); }
.ai-progress__stage.is-done .ai-progress__marker {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    animation: none;
}
.ai-progress__stage.is-done .ai-progress__marker svg { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

/* Any button carrying data-loading swaps its label for a spinner on submit. */
.ui-btn.is-loading, .ai-action.is-loading { pointer-events: none; opacity: 0.75; }
.ui-btn.is-loading > .ui-btn__label, .ai-action.is-loading > span { opacity: 0.6; }

/* Success tick, used after publish/approve. */
.success-burst {
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    animation: pop var(--duration-slow) var(--ease-out);
}
.success-burst svg { width: 28px; height: 28px; }
@keyframes pop {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Pull-to-refresh indicator. */
.pull-indicator {
    position: fixed;
    top: calc(var(--topbar-height) + env(safe-area-inset-top));
    left: 50%;
    z-index: var(--z-sticky);
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    margin-left: -16px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-md);
    color: var(--accent);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease);
}

/* ---------------------------------------------------------------------
   Misc utilities
   --------------------------------------------------------------------- */
.u-muted { color: var(--text-muted); }
.u-subtle { color: var(--text-subtle); }
.u-sm { font-size: var(--text-sm); }
.u-xs { font-size: var(--text-xs); }
.u-semibold { font-weight: var(--weight-semibold); }
.u-bold { font-weight: var(--weight-bold); }
.u-mono { font-family: var(--font-mono); }

/* Numeric table columns read as columns only when their digits line up on the right. */
.u-right { text-align: right; }
.u-prewrap { white-space: pre-wrap; word-break: break-word; }
.u-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-row { display: flex; align-items: center; gap: var(--space-2); }
.u-row-wrap { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.u-col { display: flex; flex-direction: column; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.u-spacer { flex: 1 1 auto; }
.u-stack > * + * { margin-top: var(--space-4); }
.u-stack-sm > * + * { margin-top: var(--space-2); }
.u-stack-lg > * + * { margin-top: var(--space-6); }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-hidden { display: none !important; }
.u-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-5) 0; }

.data-list { display: flex; flex-direction: column; }
.data-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
}
.data-list__row:last-child { border-bottom: 0; }
.data-list__label { color: var(--text-secondary); }
.data-list__value { margin-left: auto; font-weight: var(--weight-semibold); text-align: right; }

/* Wide content scrolls inside its own container, never the page body. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-card);
}

details.disclosure { border-top: 1px solid var(--border); padding-top: var(--space-3); }
details.disclosure > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after {
    content: "";
    width: 8px; height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--duration-fast) var(--ease);
}
details.disclosure[open] > summary::after { transform: rotate(-135deg); }

/* -----------------------------------------------------------------------
   Google Business Profile

   Built on the same tokens as everything else. Nothing here is a colour or a
   spacing value of its own: a platform-specific screen that looked like it
   came from a different product would undo the point of one design system.
   ----------------------------------------------------------------------- */

/* The business selector. Identity on the left, health and the picker on the
   right, wrapping to two rows on a phone rather than shrinking to nothing. */
.location-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.location-bar__identity { display: flex; gap: var(--space-3); align-items: center; min-width: 0; }
.location-bar__logo {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
}
.location-bar__text { min-width: 0; }
.location-bar__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}
.location-bar__where { color: var(--text-muted); font-size: var(--text-sm); }
.location-bar__actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.location-bar__picker { min-width: 0; }
.location-bar__picker .ui-select { max-width: 260px; }

@media (max-width: 560px) {
    .location-bar { align-items: flex-start; }
    .location-bar__actions { width: 100%; justify-content: space-between; }
    .location-bar__picker { flex: 1 1 100%; }
    .location-bar__picker .ui-select { max-width: none; width: 100%; }
}

/* A review. A card rather than a table row, because the reviews screen is the
   one people use standing in their own shop with one hand. */
.review-card {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.review-card--attention { border-color: var(--border-strong); box-shadow: inset 3px 0 0 #DC2626; }
.review-card__head {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.review-card__stars { display: flex; gap: 1px; line-height: 1; }
.review-card__star { color: var(--border-strong); font-size: 15px; }
.review-card__star.is-filled { color: #F59E0B; }
.review-card__name { font-weight: var(--weight-semibold); margin-top: 2px; }
.review-card__meta {
    display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
    color: var(--text-muted); font-size: var(--text-sm); text-align: right;
}
.review-card__body { margin: 0 0 var(--space-3); white-space: pre-wrap; }
.review-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.review-card__reply {
    padding: var(--space-3);
    margin-top: var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-input);
}
.review-card__reply-label {
    display: flex; gap: var(--space-2); align-items: center;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.review-card__reply-label svg { width: 14px; height: 14px; }
.review-card__note {
    display: flex; gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.review-card__note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; }
.review-card__actions { margin-top: var(--space-3); }

/* The reply box, attached under the card it belongs to. */
.reply-composer {
    padding: var(--space-4);
    margin-top: -1px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* Review themes, as a count per subject. A bar chart for a dozen rows would be
   decoration; the number is the finding. */
.theme-list { display: flex; flex-direction: column; gap: var(--space-2); }
.theme-list__row { display: flex; justify-content: space-between; align-items: center; }
.theme-list__name { font-size: var(--text-sm); }
.theme-list__count {
    padding: 1px 8px;
    background: var(--surface-sunken);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.theme-list__count--warn { color: #B45309; }

/* One AI observation. Distinct from .check, which is a checkbox row. */
.finding-list { display: flex; flex-direction: column; gap: var(--space-2); }
.finding { display: flex; gap: var(--space-3); align-items: flex-start; }
.finding__icon { color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.finding__icon svg { width: 18px; height: 18px; }
.finding--concern .finding__icon { color: #B45309; }
.finding__text { font-size: var(--text-base); line-height: var(--leading-normal); }

/* A Google listing post, approximately as Google renders one. */
.gbp-preview {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.gbp-preview__head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.gbp-preview__logo {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #1A73E8; color: #fff;
}
.gbp-preview__logo svg { width: 18px; height: 18px; }
.gbp-preview__name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.gbp-preview__meta { color: var(--text-muted); font-size: var(--text-xs); }
.gbp-preview__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.gbp-preview__dates { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.gbp-preview__body { white-space: pre-wrap; font-size: var(--text-sm); line-height: var(--leading-normal); }
.gbp-preview__coupon {
    display: inline-block;
    margin-top: var(--space-3);
    padding: 4px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-input);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.gbp-preview__cta {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    color: #1A73E8;
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
}

/* Opening hours. A row per day that stays legible when it wraps on a phone. */
.hours-editor { display: flex; flex-direction: column; gap: var(--space-2); }
.hours-editor__row {
    display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}
.hours-editor__day { flex: 0 0 100px; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.hours-editor__closed { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.hours-editor__closed input { width: 16px; height: 16px; accent-color: var(--accent); }
.hours-editor__time { width: 110px; }
.hours-editor__sep { color: var(--text-muted); font-size: var(--text-sm); }
.hours-editor__extra {
    padding: 0 0 var(--space-2) 100px;
    color: var(--text-muted);
    font-size: var(--text-xs);
}

@media (max-width: 560px) {
    .hours-editor__day { flex-basis: 100%; }
    .hours-editor__time { flex: 1 1 0; width: auto; }
    .hours-editor__extra { padding-left: 0; }
}

/* Daily views. A CSS bar chart, because a few dozen points do not justify a library. */
.spark-chart {
    display: flex; gap: 2px; align-items: flex-end;
    height: 120px;
    padding-bottom: var(--space-2);
}
.spark-chart__bar {
    flex: 1 1 0;
    min-width: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    opacity: 0.85;
}
.spark-chart__axis {
    display: flex; justify-content: space-between;
    color: var(--text-muted); font-size: var(--text-xs);
}

/* The sync log. Scrolls inside its own container rather than pushing the page. */
.sync-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sync-table th {
    padding: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    text-align: left; text-transform: uppercase; letter-spacing: 0.04em;
}
.sync-table td { padding: var(--space-2); border-top: 1px solid var(--border); vertical-align: top; }

/* An editable field on the profile screen. */
.data-list__edit { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; flex: 1 1 220px; }
.data-list__edit .ui-input { flex: 1 1 160px; }
.data-list__edit-link { margin-left: var(--space-2); color: var(--text-muted); }
.data-list__edit-link:hover { color: var(--accent); }
.data-list__edit-link svg { width: 14px; height: 14px; }
.data-list__hint {
    padding: 0 0 var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

/* A location that cannot be connected. Shown rather than hidden: someone
   looking for a branch they own needs to know why it is not selectable. */
.choice.is-unavailable { opacity: 0.6; cursor: not-allowed; }
.choice.is-unavailable:hover { border-color: var(--border); box-shadow: none; }
.choice__desc--warn { color: #B45309; }

/* Which channel an entry belongs to, on a calendar that mixes them. A dot rather than a
   name because a month cell is 100px wide and the colour is enough to group by. */
.platform-dot {
    display: inline-block;
    width: 6px; height: 6px;
    flex: 0 0 auto;
    margin-right: 4px;
    border-radius: 50%;
    vertical-align: middle;
}

/* The locations under one connection, on the channels card. */
.target-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.target-list li {
    display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap;
    padding: 2px 0;
    font-size: var(--text-sm);
}
.target-list__name { font-weight: var(--weight-semibold); }
.target-list__where { color: var(--text-muted); font-size: var(--text-xs); }

/* One platform on the dashboard. Deliberately smaller than an account card: this is a
   status line the customer scans, not a control surface. */
.presence-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.presence-card__logo {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
}
.presence-card__body { min-width: 0; flex: 1 1 auto; }
.presence-card__name { font-weight: var(--weight-semibold); }
.presence-card__meta { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }
.presence-card__facts {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: var(--space-2);
}
.presence-card__fact { font-size: var(--text-sm); }
.presence-card__fact--attention { color: #B45309; font-weight: var(--weight-semibold); }

/* Images already uploaded in this workspace. A grid of thumbnails, because picking a photo
   is a visual act - a list of filenames would make the customer open each one. */
.media-library {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.media-library__item {
    display: block;
    padding: 0;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
}
.media-library__item:hover { border-color: var(--accent); }
.media-library__item img { display: block; width: 100%; height: 88px; object-fit: cover; }