/* PLANNER-238: /feeds/gerenciar — feed registration/management (fatia 1/5).
   Renders inside the shared layout.html, so page-header, form-group,
   form-actions, .btn*, .empty-state, .error come from base.css. */

.feeds-list ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.feed-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
}
.feed-row a:first-child { flex: 1; }
.feed-category {
    font-size: 0.7rem;
    color: var(--dim);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
}
.feed-status { color: var(--dim); font-size: 0.8rem; }
.feed-status-never { font-style: italic; }
.feed-status-error { color: var(--danger, #b3261e); }

.field-hint { color: var(--dim); font-size: 0.8rem; margin: 0.25rem 0 0; }

/* PLANNER-239: /feeds/atualizar's "já está em andamento" / "iniciada"
   notice -- .error (base.css) is for rejected input, not this. */
.notice { color: var(--dim); margin-bottom: 1rem; font-size: 0.85rem; }
.feed-atualizar-form { margin: 0; }

.feed-meta { margin-top: 1.5rem; }
.feed-meta dt { font-weight: 600; margin-top: 0.5rem; }
.feed-meta dd { margin: 0; }

/* PLANNER-240: GET /feeds -- article list (fatia 3/5). Google-Reader molde
   (Spec D23), corrected by D28: mobile-default is plain block flow (the
   origins column is a normal block above the item list, no <details>, no
   JS -- golden case 33), same mechanism as project-layout.css (PLANNER-27):
   one @media (min-width: 641px) turns it into a sticky sidebar column
   (golden case 34). The per-item <details> below (D11) is untouched by
   this breakpoint. */

.feeds-sidebar { margin-bottom: 2rem; }

.feeds-states { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.feeds-states a { color: var(--dim); }
.feeds-states a.active { color: var(--accent); font-weight: 600; }

.feeds-gerenciar-link { display: inline-block; margin-bottom: 1rem; color: var(--dim); font-size: 0.85rem; }

.feeds-categories { display: flex; flex-direction: column; gap: 0.75rem; }
.feeds-category-label {
    display: block;
    font-weight: 600;
    color: var(--dim);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}
a.feeds-category-label.active { color: var(--accent); }
.feeds-category-feeds { list-style: none; padding-left: 0.75rem; margin: 0; }
.feeds-category-feeds li { margin: 0.15rem 0; }
.feeds-category-feeds a { color: var(--txt); font-size: 0.9rem; }
.feeds-category-feeds a.active { color: var(--accent); font-weight: 600; }

.feeds-header { align-items: center; flex-wrap: wrap; }
.feeds-header-actions { display: flex; gap: 0.5rem; margin-left: auto; }
.feeds-marcar-lidos-form { margin: 0; }

.feeds-item-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.feed-item { border-bottom: 1px solid var(--line); }
.feed-item summary {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.6rem 0;
    cursor: pointer;
    list-style: none;
}
.feed-item summary::-webkit-details-marker { display: none; }
.feed-item-star {
    background: none;
    border: none;
    color: var(--dim);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex: none;
}
.feed-item-star-on { color: var(--accent); }
.feed-item-title { font-weight: 400; }
.feed-item-unread .feed-item-title { font-weight: 700; }
.feed-item-dash { color: var(--dim); flex: none; }
.feed-item-excerpt {
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* PLANNER-253 (D44): date + site in the collapsed row. Mobile-default is a
   metadata line (data · site) stacked above the title line, both inside the
   same <summary> -- no breakpoint of its own, reuses the existing 641px
   two-column cut (feeds-layout above). */
.feed-item-lines {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 0.1rem;
}
.feed-item-meta-line {
    display: flex;
    gap: 0.5rem;
    color: var(--dim);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.feed-item-main-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}
.feed-item-site {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 641px) {
    /* Collapses the stacked meta/title lines back into the single row the
       D23 molde specced, with data/site as fixed-width columns so the title
       starts at the same horizontal position on every row (requirement, not
       aesthetics -- j/k scanning). */
    .feed-item-lines { flex-direction: row; align-items: baseline; gap: 0.5rem; }
    .feed-item-meta-line { flex: none; }
    .feed-item-date { flex: none; width: 5.5rem; }
    .feed-item-site { flex: none; width: 15ch; }
}

.feed-item-body { padding: 0 0 1rem 1.75rem; }
.feed-item-body h2 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.feed-item-body h2 a { color: var(--txt); }
.feed-item-meta { color: var(--dim); font-size: 0.8rem; margin-bottom: 0.75rem; }
.feed-item-content { margin-bottom: 1rem; }
.feed-item-content img { max-width: 100%; height: auto; }
.feed-item-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* PLANNER-241: keyboard-shortcut focus ring (fatia 4/5) -- outline instead
   of a background fill so it stays visible under both feed-item-unread's
   bold title and the plain read state. */
.feed-item-focused { outline: 2px solid var(--accent); outline-offset: -2px; }

.feeds-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--dim);
    font-size: 0.85rem;
}

@media (min-width: 641px) {
    .feeds-layout { display: flex; gap: 2.5rem; align-items: flex-start; }
    .feeds-sidebar { flex: 1 0 260px; position: sticky; top: 4rem; margin-bottom: 0; }
    .feeds-main { flex: 0 1 720px; min-width: 0; }
}