/* AreaShell (nav v2 PR 8): a left sub-nav beside the page; below 1024px a section picker above it. */
.cc-area { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 28px; align-items: start; }
.cc-area-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 24px; border-right: 1px solid var(--border, #e2dbd0); min-height: 60vh; }
.cc-area-title { font-weight: 700; padding: 6px 12px 10px; color: var(--text, #1c2a1e); }
.cc-area-head { padding: 12px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary, #4f6855); }
.cc-area-link { display: flex; align-items: center; gap: 10px; padding: 7px 12px; color: var(--text-secondary, #4f6855); text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; }
.cc-area-link:hover { color: var(--text, #1c2a1e); background: rgba(0,0,0,.03); }
.cc-area-link[aria-current="page"] { color: var(--accent, #d97746); font-weight: 600; background: rgba(217,119,70,.08); border-left-color: var(--accent, #d97746); }
.cc-area-picker { display: none; margin-bottom: 1rem; }
.cc-area-body { min-width: 0; }
@media (max-width: 1023.98px) {
    .cc-area { grid-template-columns: minmax(0, 1fr); }
    .cc-area-nav { display: none; }
    .cc-area-picker { display: block; }
}
.cc-area-badge { margin-left: auto; min-width: 1.4rem; padding: 0 .45rem; border-radius: 999px; background: var(--accent, #d97746); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.4rem; text-align: center; }
.cc-area-exp { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; color: var(--text-secondary, #4f6855); }
.cc-area-exp + .cc-area-badge { margin-left: 8px; }
/* An area page's one-line explanation under its heading: capped so it never runs the full width of a wide screen (nav v2 PR 10). */
.cc-area-lede { max-width: 760px; }
/* The Experimental marker beside a page title (nav v2 PR 11): the same amber pill as the Admin home tile. */
.cc-area-pagebadge { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: #fdf0c7; color: #7a5600; white-space: nowrap; }

/* Review queue (Admin > Directory): the count pill on a tab, the toolbar above a queue, the segmented choices and the pieces of a card.
   Approved mockups: docs/design/nav-v2/mockups-switch-and-queue (rq- classes). */
.rq-count { margin-left: .45rem; min-width: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .72rem; font-weight: 700; line-height: 1.35rem; display: inline-block; text-align: center; }
.nav-link.active .rq-count { background: var(--accent, #d97746); color: #fff; }
.rq-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.rq-toolbar .rq-grow { margin-left: auto; }
.rq-lbl { font-size: .8rem; font-weight: 600; color: var(--text-secondary, #4f6855); margin-right: .4rem; }
.rq-seg { display: inline-flex; gap: 4px; }
.rq-diff td:first-child { font-weight: 600; white-space: nowrap; }
.rq-link { font-size: .8rem; display: inline-flex; align-items: center; gap: 4px; }
.rq-quote { border-left: 3px solid var(--border, #e2dbd0); padding-left: .6rem; font-style: italic; }
details > summary { cursor: pointer; }
@media (max-width: 767px) { .rq-toolbar .rq-grow { margin-left: 0; } }
/* Phone: the three tabs stay on one scrolling row instead of stacking into three lines. */
@media (max-width: 575px) { .cc-area-tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .cc-area-tabs .nav-link { padding-left: .6rem; padding-right: .6rem; } }