/* styles/widgets/accountability.css
 *
 * Extracted from styles/main.css during T4#20 (the May-2026
 * CSS-split refactor). Originally lived at lines 5768-5850
 * of main.css. Cascade order is preserved: main.css loads first
 * (themes + base + modal/tab/layout infra), then per-widget
 * files in alphabetical order via <link> tags in index.html.
 */

/* ── ACCOUNTABILITY (D-big stage 2) ─────────────────────────────
   Shared check-in log with one or more friend partners. The widget
   stacks active partnerships vertically, each with its own header,
   recent-entries feed, and quick-add row. Pending invites show at
   the top with Accept / Decline. */
.ap-panel { display: flex; flex-direction: column; gap: 10px; }

/* Panel-icon notification dot. Surfaces when any active
   partner has posted today (regardless of whether the user
   has responded yet) - the "ambient" cue. The stricter
   "you haven't responded yet" cue lives on the dashboard tab
   chip in tab-bar.js. */
.ap-panel-icon-wrap {
    position: relative;
}
.ap-panel-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 2px var(--surface);
    pointer-events: none;
}
.ap-body { display: flex; flex-direction: column; gap: 12px; }
.ap-section {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.ap-section-title {
    font-size: 12px; color: var(--muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ap-pending-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0;
}
.ap-pending-name { flex: 1 1 auto; font-size: 13px; color: var(--text); }
.ap-partner-head {
    display: flex; align-items: center; gap: 8px;
}
.ap-partner-name { flex: 1 1 auto; font-weight: 700; color: var(--text); }
.ap-partner-end {
    background: transparent; border: 1px solid transparent; color: var(--muted);
    font-size: 12px; padding: 2px 6px; border-radius: 4px; cursor: pointer;
    font-family: inherit;
}
.ap-partner-end:hover { color: var(--red); border-color: var(--red); }
.ap-feed { display: flex; flex-direction: column; gap: 6px; }
.ap-empty-feed {
    font-size: 12px; color: var(--muted); font-style: italic; padding: 4px 0;
}
.ap-entry {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.ap-entry-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--muted);
}
.ap-entry-author { color: var(--accent); font-weight: 700; }
.ap-entry-date   { flex: 1 1 auto; }
.ap-entry-del {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px;
    font-family: inherit;
}
.ap-entry-del:hover { color: var(--red); }
/* Drop-2 #1: Edit affordance on each check-in row the user
   authored. Sits next to the existing × delete button. The edit
   pencil is muted by default and brightens to the accent on hover
   so it doesn't shout for attention. Both buttons only render
   for the entry's author (the widget gates the render). */
.ap-entry-edit {
    background: transparent; border: none; color: var(--muted);
    cursor: pointer; font-size: 12px; line-height: 1; padding: 0 4px;
    font-family: inherit;
}
.ap-entry-edit:hover { color: var(--accent); }
/* "(edited)" marker shown when updated_at differs from created_at
   by more than ~1s (the auto-touch trigger in 20260605 bumps the
   timestamp on every UPDATE; the threshold filters out the
   millisecond-level difference of the initial INSERT). */
.ap-entry-edited {
    font-size: 10px; color: var(--muted); font-style: italic;
    margin-right: 2px;
}
/* Inline edit mode: when the user clicks Edit, the entry row
   swaps to a textarea + Save / Cancel pair sized to match the
   non-edit row's padding so the feed doesn't jump. */
.ap-entry-editing {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.ap-entry-edit-input {
    width: 100%; resize: vertical; min-height: 60px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 8px; color: var(--text);
    font-family: inherit; font-size: 13px; line-height: 1.4;
    box-sizing: border-box;
}
.ap-entry-edit-input:focus {
    outline: none; border-color: var(--accent);
}
.ap-entry-edit-actions {
    display: flex; justify-content: flex-end; gap: 6px;
}
.ap-entry-body {
    font-size: 13px; color: var(--text); line-height: 1.4;
    word-break: break-word;
}
.ap-add-row { display: flex; flex-direction: column; gap: 6px; }
.ap-add-input {
    width: 100%; resize: vertical;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 8px; color: var(--text);
    font-family: inherit; font-size: 13px;
}
.ap-invite-popup {
    position: absolute; top: 48px; right: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    width: 280px; max-width: 90%;
    z-index: 10;
    display: flex; flex-direction: column; gap: 8px;
}
.ap-invite-title { font-size: 12px; color: var(--muted); }
.ap-invite-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.ap-invite-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
}
.ap-invite-name { flex: 1 1 auto; font-size: 13px; }
.ap-invite-foot { display: flex; justify-content: flex-end; }