/* Private Echo portal — base styles.
 *
 * Minimal CSS reset + typography + a small set of utility classes used
 * across components. Stays under ~6 KB to keep the critical path light.
 *
 * Conventions:
 *   - All colour / spacing values come from tokens.css.
 *   - Class prefix `pe-` is reserved for portal-specific helpers.
 *   - Utilities (.mt-2, .flex, etc.) are intentionally tiny — we only
 *     ship what we use, no Tailwind-style enumeration.
 */

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--pe-font-sans);
  font-size: var(--pe-font-size-base);
  line-height: var(--pe-line-base);
  color: var(--pe-text-primary);
  background: var(--pe-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: var(--pe-line-tight); color: var(--pe-text-primary); }
h1 { font-size: var(--pe-font-size-2xl); }
h2 { font-size: var(--pe-font-size-xl); }
h3 { font-size: var(--pe-font-size-lg); }
h4 { font-size: var(--pe-font-size-md); }
h5, h6 { font-size: var(--pe-font-size-base); }

p { margin: 0 0 var(--pe-space-3); }

a { color: var(--pe-accent-strong); text-decoration: none; }
a:hover { color: var(--pe-accent); text-decoration: underline; }
[data-theme="dark"] a { color: var(--pe-accent); }
[data-theme="dark"] a:hover { color: var(--pe-accent-strong); }

code, kbd, pre, samp { font-family: var(--pe-font-mono); font-size: 0.92em; }

img, svg, video { max-width: 100%; height: auto; display: block; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th, td { text-align: left; padding: var(--pe-space-3); border-bottom: 1px solid var(--pe-border); }
th { font-weight: 500; color: var(--pe-text-secondary); font-size: var(--pe-font-size-sm); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--pe-border); margin: var(--pe-space-6) 0; }

/* Focus ring — visible but not jarring. Applied by anchoring on
 * :focus-visible so mouse clicks stay clean. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--pe-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------- utilities */

/* Layout */
.pe-flex { display: flex; }
.pe-inline-flex { display: inline-flex; }
.pe-grid { display: grid; }
.pe-block { display: block; }
.pe-inline-block { display: inline-block; }
.pe-hidden { display: none; }

.pe-items-center { align-items: center; }
.pe-items-start { align-items: flex-start; }
.pe-items-end { align-items: flex-end; }
.pe-justify-center { justify-content: center; }
.pe-justify-between { justify-content: space-between; }
.pe-justify-end { justify-content: flex-end; }

.pe-flex-1 { flex: 1 1 0%; }
.pe-flex-col { flex-direction: column; }
.pe-flex-wrap { flex-wrap: wrap; }
.pe-shrink-0 { flex-shrink: 0; }

.pe-gap-1 { gap: var(--pe-space-1); }
.pe-gap-2 { gap: var(--pe-space-2); }
.pe-gap-3 { gap: var(--pe-space-3); }
.pe-gap-4 { gap: var(--pe-space-4); }
.pe-gap-6 { gap: var(--pe-space-6); }

/* Sprint Portal-EQ: these utilities were referenced by the labels /
   wifi / uplink-dl markup since Sprint 17.x but never defined — the
   grids silently rendered single-column. Defined here so the mini-EQ
   2×2 corner grid (and the pre-existing intent) actually lays out. */
.pe-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pe-gap-x-4 { column-gap: var(--pe-space-4); }
.pe-gap-y-1 { row-gap: var(--pe-space-1); }

/* Spacing */
.pe-m-0 { margin: 0; }
.pe-mt-1 { margin-top: var(--pe-space-1); }
.pe-mt-2 { margin-top: var(--pe-space-2); }
.pe-mt-3 { margin-top: var(--pe-space-3); }
.pe-mt-4 { margin-top: var(--pe-space-4); }
.pe-mt-6 { margin-top: var(--pe-space-6); }
.pe-mt-8 { margin-top: var(--pe-space-8); }
.pe-mb-2 { margin-bottom: var(--pe-space-2); }
.pe-mb-3 { margin-bottom: var(--pe-space-3); }
.pe-mb-4 { margin-bottom: var(--pe-space-4); }
.pe-mb-6 { margin-bottom: var(--pe-space-6); }

.pe-p-2 { padding: var(--pe-space-2); }
.pe-p-3 { padding: var(--pe-space-3); }
.pe-p-4 { padding: var(--pe-space-4); }
.pe-p-6 { padding: var(--pe-space-6); }
.pe-px-3 { padding-left: var(--pe-space-3); padding-right: var(--pe-space-3); }
.pe-px-4 { padding-left: var(--pe-space-4); padding-right: var(--pe-space-4); }
.pe-py-2 { padding-top: var(--pe-space-2); padding-bottom: var(--pe-space-2); }
.pe-py-3 { padding-top: var(--pe-space-3); padding-bottom: var(--pe-space-3); }

/* Type */
.pe-text-xs { font-size: var(--pe-font-size-xs); }
.pe-text-sm { font-size: var(--pe-font-size-sm); }
.pe-text-md { font-size: var(--pe-font-size-md); }
.pe-text-lg { font-size: var(--pe-font-size-lg); }
.pe-text-xl { font-size: var(--pe-font-size-xl); }

.pe-font-medium { font-weight: 500; }
.pe-font-mono { font-family: var(--pe-font-mono); }

.pe-text-primary { color: var(--pe-text-primary); }
.pe-text-secondary { color: var(--pe-text-secondary); }
.pe-text-tertiary { color: var(--pe-text-tertiary); }
.pe-text-accent { color: var(--pe-accent); }
.pe-text-success { color: var(--pe-success); }
.pe-text-warning { color: var(--pe-warning); }
.pe-text-danger { color: var(--pe-danger); }

.pe-text-center { text-align: center; }
.pe-text-right { text-align: right; }

.pe-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visibility helpers — used by mobile breakpoint media queries in Phase 9 */
.pe-md-only { display: none; }
@media (min-width: 769px) { .pe-md-only { display: revert; } }
.pe-mobile-only { display: revert; }
@media (min-width: 769px) { .pe-mobile-only { display: none; } }

/* Misc */
.pe-rounded-sm { border-radius: var(--pe-radius-sm); }
.pe-rounded-md { border-radius: var(--pe-radius-md); }
.pe-rounded-lg { border-radius: var(--pe-radius-lg); }
.pe-rounded-pill { border-radius: var(--pe-radius-pill); }

.pe-w-full { width: 100%; }
.pe-h-full { height: 100%; }

/* Visually hide content but keep it readable to assistive tech. */
.pe-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}