/* === APT Extranet — reads apt-core tokens === */

/* === Header button === */
.site-nav__login.btn--ghost { color: var(--brand-heading); }
.site-nav__login.btn--ghost:hover { background: var(--brand-heading); border-color: var(--brand-heading); color: var(--brand-bg); }

/* === Layout === */
.extranet { display: grid; gap: 32px; }
.extranet__auth { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gutter); align-items: start; }
.extranet__panel { padding: clamp(20px, 3vw, 36px); background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius-l); }
.extranet__panel h2 { margin-top: 0; font-size: var(--fs-h3); text-transform: uppercase; }
.extranet__lead { color: var(--muted); font-size: var(--fs-s); }
.extranet__link { align-self: center; color: var(--muted); font-size: var(--fs-s); }

/* === Dashboard === */
.extranet__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--brand-border); }
.extranet__level { margin: 0; color: var(--brand-accent); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.extranet__section h3 { margin-bottom: 14px; font-size: var(--fs-m); letter-spacing: 0.08em; text-transform: uppercase; }
.extranet__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.extranet__item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius-m); transition: border-color .2s var(--ease); }
.extranet__item:hover { border-color: var(--brand-accent); }
.extranet__item p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-s); }
.extranet__item-title { color: var(--brand-heading); font-weight: 700; text-decoration: none; }
a.extranet__item-title:hover { color: var(--brand-accent); }
.extranet__item.is-locked { opacity: 0.55; }
.extranet__item.is-locked:hover { border-color: var(--brand-border); }
.extranet__tag { flex: none; padding: 4px 10px; border: 1px solid var(--brand-accent); border-radius: 999px; color: var(--brand-accent); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.extranet__tag--locked { border-color: var(--brand-border); color: var(--muted); }

/* === Mobile === */
@media (max-width: 860px) { .extranet__auth { grid-template-columns: 1fr; } .extranet__item { flex-direction: column; align-items: flex-start; } }

/* === Wider column on the extranet page === */
.entry-content:has(.extranet), .entry:has(.extranet) .page-head { width: var(--wrap); max-width: none; }

/* === Manage (team only) === */
.manage-count { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; margin-left: 6px; padding: 0 5px; background: var(--brand-error); border-radius: 999px; color: #fff; font-size: 0.65rem; }
.manage-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: var(--box-bg); border: 1px solid var(--brand-accent); border-radius: var(--radius-m); }
.manage-cta p { margin: 0; color: var(--brand-heading); font-weight: 700; }
.manage-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--brand-border); }
.manage-tabs a { padding: 10px 16px; border-bottom: 2px solid transparent; color: var(--muted); font-size: var(--fs-s); font-weight: 800; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.manage-tabs a[aria-current], .manage-tabs a:hover { border-color: var(--brand-accent); color: var(--brand-heading); }
.manage-card { display: grid; gap: 16px; padding: 20px 24px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius-m); }
.manage-card--row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.manage-who h3 { margin: 0 0 4px; font-size: var(--fs-m); }
.manage-who h3 span { color: var(--muted); font-weight: 400; }
.manage-meta { margin: 0; color: var(--muted); font-size: var(--fs-s); }
.manage-msg { margin: 12px 0 0; padding: 12px 14px; background: var(--brand-surface-2); border-radius: var(--radius-s); font-size: var(--fs-s); }
.manage-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.manage-form label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-s); }
.manage-form select { padding: 8px 10px; background: var(--brand-surface-2); border: 1px solid var(--brand-border); border-radius: var(--radius-s); color: var(--brand-heading); }
details.manage-card summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; }
details.manage-card summary span { color: var(--muted); font-size: var(--fs-s); }
.manage-dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: var(--fs-s); }
.manage-dl dt { color: var(--muted); }
.manage-dl dd { margin: 0; }
@media (max-width: 860px) { .manage-card--row { grid-template-columns: 1fr; } .manage-dl { grid-template-columns: 1fr; } .manage-cta { flex-direction: column; align-items: flex-start; } }