/* =====================================================================
   AGENT ELITE INTERNAL TOOLS: APP SHELL
   ---------------------------------------------------------------------
   Layout only. Buttons, cards, badges, fields, tables and type all come from
   /vendor/ae/css/agent-elite-components.css: this file deliberately does NOT
   redefine any .ae-* class that the guide already owns. What lives here is
   the shell the guide has no component for (a collapsible rail, a topbar,
   an iframe host, a centred auth screen) plus the two places the tools hub
   has to depart from the guide, both flagged DEPARTURE below.

   Load order:
     /vendor/ae/css/agent-elite-tokens.css
     /vendor/ae/css/agent-elite-components.css
     /css/ae-theme.css
     /css/ae-shell.css     <- this file, last
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

/* Size and leading are NOT set here: <body class="ae-scope"> hands those to
   the guide (16px / 1.6), which is both the brand default and the right call
   for rule 9's 55+ audience. The old shell default was 14px / 1.5. */
body {
  margin: 0;
  background: var(--ae-bg);
  color: var(--ae-ink);
  font-family: var(--ae-font-body);
  -webkit-font-smoothing: antialiased;
  transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
}

h1, h2, h3, h4 { font-family: var(--ae-font-display); font-weight: 600; margin: 0; color: var(--ae-ink); }
a { color: var(--ae-blue); text-decoration: none; }
a:hover { color: var(--ae-blue-dark); }

/* ── App shell ────────────────────────────────────────────────────────
   Rail + content. The rail is sticky and full height so the iframed tools
   scroll under a fixed nav. */
.ae-app { display: flex; min-height: 100vh; }

/* DEPARTURE 1 - the rail is WHITE, not the portal's #363638.
   agent-elite-components.css is explicit that --ae-portal-nav-bg is "the
   client portal only. Other products (the WordPress plugin, standalone
   tools) use a white surface with .ae-tabs, not this fill." This hub is a
   standalone internal tool, so it may not have the dark rail. It keeps a
   left rail rather than converting to .ae-tabs because it hosts six tools
   in an iframe and needs room to grow, and because the rail also carries
   the signed-in identity and sign-out; the white surface plus a 1px border
   is the part of that instruction that actually matters. Active state is
   the blue tint the guide uses everywhere else for "you are here". */
.ae-sidebar {
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; flex-shrink: 0;
  width: var(--ae-sidebar-w);
  background: var(--ae-white);
  border-right: 1px solid var(--ae-border);
  color: var(--ae-gray);
  display: flex; flex-direction: column;
  min-height: 100%;
  padding: 0;
  transition: width var(--ae-dur) var(--ae-ease);
  overflow: hidden;
}
/* 64px keeps the 36px icon target centred with 14px either side. */
.ae-sidebar.is-collapsed { width: 64px; }

.ae-brand {
  display: flex; align-items: center; gap: var(--ae-s-3);
  padding: 20px 18px; white-space: nowrap;
  border-bottom: 1px solid var(--ae-border);
  min-height: 69px;
}
/* The real wordmark from the guide's asset pack - never retype or redraw it.
   Two files, because the script wordmark has no single-color version that
   works on both surfaces. */
.ae-brand .ae-wordmark { height: 26px; width: auto; flex-shrink: 0; }
.ae-brand .ae-wordmark.on-light { display: block; }
.ae-brand .ae-wordmark.on-dark  { display: none; }
:root[data-ae-theme="dark"] .ae-brand .ae-wordmark.on-light,
:root[data-theme="dark"]    .ae-brand .ae-wordmark.on-light { display: none; }
:root[data-ae-theme="dark"] .ae-brand .ae-wordmark.on-dark,
:root[data-theme="dark"]    .ae-brand .ae-wordmark.on-dark  { display: block; }
.ae-brand .ae-mark { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: none; }
.ae-sidebar.is-collapsed .ae-brand { padding: 20px 0; justify-content: center; }
.ae-sidebar.is-collapsed .ae-brand .ae-wordmark { display: none; }
.ae-sidebar.is-collapsed .ae-brand .ae-mark { display: block; }

.ae-nav { display: flex; flex-direction: column; gap: 2px; padding: var(--ae-s-3) var(--ae-s-3); flex: 1; }

/* .ae-nav-item comes from the guide (11px 14px, 8px radius). Only the colors
   change, because that rule is written for the dark portal rail. */
.ae-sidebar .ae-nav-item {
  color: var(--ae-gray);
  min-height: 36px;               /* rule 9: the audience skews 55+ */
  white-space: nowrap;
  transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
}
.ae-sidebar .ae-nav-item:hover { background: var(--ae-fill); color: var(--ae-ink); }
.ae-sidebar .ae-nav-item.is-active { background: var(--ae-blue-light); color: var(--ae-blue-dark); font-weight: 600; }
.ae-sidebar .ae-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.ae-nav-label { font-size: 14.5px; }
.ae-sidebar.is-collapsed .ae-nav-item { justify-content: center; padding: 11px 0; }
.ae-sidebar.is-collapsed .ae-nav-label { display: none; }

.ae-sidebar-foot {
  padding: var(--ae-s-3);
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--ae-border);
}

/* Signed-in identity, above the sign-out button. Reuses the guide's avatar
   tile idiom at rail scale. */
.ae-user { display: flex; align-items: center; gap: 10px; padding: var(--ae-s-2) 14px var(--ae-s-3); white-space: nowrap; }
.ae-user-avatar {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ae-blue-light); color: var(--ae-blue-dark);
  font-family: var(--ae-font-display); font-weight: 700; font-size: var(--ae-text-xs);
}
.ae-user-meta { min-width: 0; }
.ae-user-name { color: var(--ae-ink); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ae-user-sub { color: var(--ae-gray); font-size: 11px; }
.ae-sidebar.is-collapsed .ae-user { justify-content: center; padding: var(--ae-s-2) 0 var(--ae-s-3); }
.ae-sidebar.is-collapsed .ae-user-meta { display: none; }

.ae-rail-btn {
  display: flex; align-items: center; gap: var(--ae-s-3); width: 100%; white-space: nowrap;
  background: transparent; border: none; cursor: pointer; color: var(--ae-gray);
  padding: 11px 14px; border-radius: var(--ae-radius);
  font: 500 14.5px var(--ae-font-body);
  min-height: 36px;
  transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
}
.ae-rail-btn:hover { background: var(--ae-fill); color: var(--ae-ink); }
.ae-rail-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.ae-sidebar.is-collapsed .ae-rail-btn { justify-content: center; padding: 11px 0; }
.ae-sidebar.is-collapsed .ae-rail-btn span { display: none; }

/* ── Content column ──────────────────────────────────────────────────── */
.ae-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ae-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ae-s-4);
  padding: var(--ae-s-5) var(--ae-s-7);
  border-bottom: 1px solid var(--ae-border);
  background: var(--ae-white);
  min-height: 69px;               /* matches .ae-brand, so the two rules line up */
}
.ae-topbar .ae-page-title { font-family: var(--ae-font-display); font-size: var(--ae-text-xl); font-weight: 700; letter-spacing: -.01em; }
.ae-topbar .ae-page-sub { color: var(--ae-gray); font-size: 13px; margin-top: 2px; }
.ae-topbar-actions { display: flex; gap: var(--ae-s-2); align-items: center; }

.ae-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--ae-radius); cursor: pointer;
  background: var(--ae-white); border: 1px solid var(--ae-border); color: var(--ae-gray);
  transition: color var(--ae-dur) var(--ae-ease), border-color var(--ae-dur) var(--ae-ease);
}
.ae-icon-btn:hover { color: var(--ae-blue); border-color: var(--ae-blue); }
.ae-icon-btn svg { width: 18px; height: 18px; }

/* Rule 5: one section rhythm. 48px is the gap between sections AND the
   page's own outer padding, so the first gap matches every later one. */
.ae-main { padding: var(--ae-s-8) var(--ae-s-7); }
.ae-section-stack { display: flex; flex-direction: column; gap: var(--ae-section-gap); }

/* ── Tool grid (the hub's landing view) ──────────────────────────────
   .ae-tool is a card with a link's behaviour. It borrows the guide's card
   geometry rather than redefining .ae-card, and its hover is the same
   border-to-blue move .ae-btn-secondary uses. No lift, no shadow: the guide
   allows fades and color transitions only. */
.ae-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--ae-card-gap);
  max-width: var(--ae-panel-max);
}
.ae-tool {
  display: flex; gap: var(--ae-s-4); align-items: flex-start;
  text-decoration: none; color: inherit;
  background: var(--ae-white);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  padding: var(--ae-card-p);
  transition: border-color var(--ae-dur) var(--ae-ease);
}
.ae-tool:hover { border-color: var(--ae-blue); }
.ae-tool:hover h3 { color: var(--ae-blue-dark); }
/* The icon uses the guide's own tile: light-blue tile, blue icon, lg = 48px. */
.ae-tool .ae-icon-tile svg { width: 22px; height: 22px; }
.ae-tool h3 { font-size: var(--ae-text-base); margin-bottom: var(--ae-s-1); transition: color var(--ae-dur) var(--ae-ease); }
.ae-tool p { margin: 0 0 var(--ae-s-2); color: var(--ae-gray); font-size: 13.5px; line-height: 1.5; }
.ae-tool .ae-route { font-family: var(--ae-font-mono); font-size: var(--ae-text-xs); color: var(--ae-gray); }

/* ── Iframe host ─────────────────────────────────────────────────────── */
.ae-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--ae-bg); min-height: 0; }

/* ── Centred single-card screens (sign-in, access denied) ─────────────
   DEPARTURE 2 - the full-bleed backdrop is --ae-chrome-bg (#0e0e10).
   This was a three-stop navy-to-blue gradient, which rule 1 forbids
   outright. Marketing black is the guide's sanctioned full-bleed dark
   surface, and a sign-in screen is the one place under /tools that is a
   full-bleed section rather than product chrome. */
.ae-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--ae-s-5); }
.ae-center.on-brand { background: var(--ae-chrome-bg); }

.ae-authcard {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--ae-white);
  border: 1px solid var(--ae-border);
  border-radius: var(--ae-radius-lg);
  padding: var(--ae-s-7) var(--ae-s-6) var(--ae-s-6);
}
.ae-authcard .ae-logo { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--ae-s-5); display: block; }
.ae-authcard h1 { font-size: var(--ae-text-xl); font-weight: 700; margin-bottom: var(--ae-s-2); }
.ae-authcard .ae-sub { color: var(--ae-gray); font-size: var(--ae-text-sm); line-height: var(--ae-leading-body); margin: 0 0 var(--ae-s-6); }
.ae-authcard .ae-note { margin-top: var(--ae-s-5); font-size: 12.5px; color: var(--ae-gray); line-height: 1.55; }
.ae-actions { display: flex; flex-direction: column; gap: var(--ae-s-2); margin-top: var(--ae-s-5); }

/* Status glyph on the access-denied card. Named .ae-status-glyph, not
   .ae-badge: the guide owns .ae-badge and it means a status pill. */
.ae-status-glyph {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--ae-s-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--ae-danger-light); color: var(--ae-danger);
}
.ae-status-glyph svg { width: 26px; height: 26px; }

/* ── Anchors used as buttons ──────────────────────────────────────────
   agent-elite-components.css scopes its link color as `.ae-scope a`, which is
   specificity (0,1,1) and therefore outranks every button class's own color at
   (0,1,0). On an <a class="ae-btn ae-btn-primary"> that painted the label Elite
   Blue on an Elite Blue fill: an invisible CTA. These win it back, and they
   also stop the link underline from appearing on hover. */
.ae-scope a.ae-btn,
.ae-scope a.ae-btn:hover,
.ae-scope a.ae-rail-btn,
.ae-scope a.ae-rail-btn:hover { text-decoration: none; }
.ae-scope a.ae-btn-primary,
.ae-scope a.ae-btn-primary:hover { color: #fff; }
.ae-scope a.ae-btn-secondary { color: var(--ae-ink); }
.ae-scope a.ae-btn-secondary:hover { color: var(--ae-blue); }
.ae-scope a.ae-rail-btn { color: var(--ae-gray); }
.ae-scope a.ae-rail-btn:hover { color: var(--ae-ink); }

/* Google sign-in keeps Google's own required white-button treatment; it is
   third-party chrome, not an Agent Elite button type. Listed after the block
   above so it beats a.ae-btn-secondary, which it is always paired with. */
.ae-btn-google, .ae-scope a.ae-btn-google { background: #fff; color: #3c4043; border-color: #dadce0; justify-content: center; }
.ae-btn-google:hover, .ae-scope a.ae-btn-google:hover { background: #f8f9fa; border-color: #c6cacd; color: #3c4043; }
.ae-btn-block { width: 100%; justify-content: center; }