/* HPA TERMINAL V6 — additive visual system */
:root {
  --hpa-bg: #b8bcbf;
  --hpa-ink: #121521;
  --hpa-panel: rgba(211,214,216,.62);
  --hpa-panel-strong: rgba(225,227,228,.76);
  --hpa-line: rgba(18,21,33,.72);
  --hpa-soft-line: rgba(18,21,33,.28);
  --hpa-shadow: rgba(18,21,33,.28);
  --hpa-gap: 18px;
  --hpa-sidebar: 300px;
}

html { background: var(--hpa-bg); }
body {
  min-height: 100vh;
  background-color: var(--hpa-bg) !important;
  background-image:
    linear-gradient(rgba(0,0,0,.035) 50%, transparent 50%),
    radial-gradient(var(--hpa-ink) .55px, transparent .55px) !important;
  background-size: 100% 4px, 3px 3px !important;
}

/* full-width application shell */
body.hpa-shell-ready > .container {
  width: min(1180px, calc(100vw - var(--hpa-sidebar) - 84px)) !important;
  max-width: none !important;
  margin: 28px 32px 48px calc(var(--hpa-sidebar) + 52px) !important;
  padding: 28px 30px 38px !important;
  background: rgba(205,208,210,.70) !important;
  border: 1px solid var(--hpa-line) !important;
  box-shadow: 0 12px 42px rgba(18,21,33,.18) !important;
}

body.hpa-shell-ready header {
  border-bottom: 3px double var(--hpa-ink) !important;
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
}
body.hpa-shell-ready header h1 {
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  letter-spacing: .045em;
  margin: 0 0 8px;
}
body.hpa-shell-ready header p { margin: 0 0 14px; opacity: .86; }

/* common panels */
body.hpa-shell-ready .system-panel,
body.hpa-shell-ready .dossier-link,
body.hpa-shell-ready .comment,
body.hpa-shell-ready .post-card,
body.hpa-shell-ready .newsletter-panel,
body.hpa-shell-ready .editor-shell {
  background: var(--hpa-panel) !important;
  border: 1px solid var(--hpa-line) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
body.hpa-shell-ready .system-panel { padding: 20px !important; }
body.hpa-shell-ready .system-panel h2,
body.hpa-shell-ready .system-panel h3 {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--hpa-soft-line);
  letter-spacing: .035em;
}

body.hpa-shell-ready .top-nav { gap: 9px; }
body.hpa-shell-ready .top-nav a,
body.hpa-shell-ready .top-nav button,
body.hpa-shell-ready button,
body.hpa-shell-ready .action-button {
  min-height: 36px;
  border-radius: 0 !important;
  letter-spacing: .025em;
}
body.hpa-shell-ready input,
body.hpa-shell-ready textarea,
body.hpa-shell-ready select,
body.hpa-shell-ready [contenteditable="true"] {
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* fixed left terminal */
.hpa-side-rail {
  position: fixed;
  left: 22px;
  top: 62px;
  width: var(--hpa-sidebar);
  max-height: calc(100vh - 84px);
  overflow: auto;
  z-index: 950;
  display: grid;
  gap: 14px;
  scrollbar-width: thin;
}
.hpa-rail-card {
  background: rgba(203,206,208,.88);
  border: 1px solid var(--hpa-line);
  box-shadow: 0 8px 20px rgba(18,21,33,.13), inset 0 0 0 1px rgba(255,255,255,.15);
  padding: 14px;
}
.hpa-profile-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
}
.hpa-avatar-frame {
  width: 92px;
  aspect-ratio: 1;
  border: 1px solid var(--hpa-line);
  padding: 4px;
  background: rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.hpa-avatar-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(18,21,33,.055) 3px 4px);
}
.hpa-avatar-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.08);
}
.hpa-avatar-fallback {
  width:100%;height:100%;display:grid;place-items:center;
  font-weight:900;font-size:1.7rem;background:rgba(18,21,33,.08);
}
.hpa-profile-data { min-width: 0; font-size: .78rem; line-height: 1.7; }
.hpa-profile-data strong { font-size: .98rem; }
.hpa-admin-badge {
  display: inline-block; border: 1px solid var(--hpa-ink); padding: 1px 5px; margin-left: 5px; font-size: .68rem;
}
.hpa-rail-heading {
  font-weight: 900; font-size: .78rem; margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--hpa-soft-line);
}
.hpa-rail-nav { display: grid; }
.hpa-rail-nav a {
  color: var(--hpa-ink); text-decoration: none; padding: 10px 8px;
  border-bottom: 1px dotted var(--hpa-soft-line); display:flex;align-items:center;justify-content:space-between;
}
.hpa-rail-nav a:hover,
.hpa-rail-nav a.is-current { background: var(--hpa-ink); color: var(--hpa-bg); }
.hpa-rail-meta { font-size:.74rem;line-height:1.8;opacity:.88; }
.hpa-status-dot { display:inline-block;width:7px;height:7px;background:var(--hpa-ink);margin-right:7px; }
.hpa-rail-footer { font-size:.68rem; opacity:.7; padding: 2px 3px 10px; }

/* profile picture controls */
.profile-avatar-editor {
  display: grid;
  grid-template-columns: 128px minmax(0,1fr);
  gap: 18px;
  align-items: center;
}
.profile-avatar-preview {
  width: 128px; height: 128px; object-fit: cover;
  border: 1px solid var(--hpa-line); padding: 5px; background: rgba(255,255,255,.14);
  filter: grayscale(1) contrast(1.06);
}
.profile-avatar-actions { display:grid;gap:10px; }
.profile-avatar-actions input[type=file] { font-size:.78rem; }
.profile-avatar-note { font-size:.72rem;opacity:.72;margin:0; }
.comment-meta-with-avatar { display:flex; align-items:center; gap:8px; }
.comment-avatar { width:28px;height:28px;object-fit:cover;border:1px solid var(--hpa-line);filter:grayscale(1); }

/* newsletter editor: denser workstation styling */
body.newsletter-admin-page .container { width:min(1260px,calc(100vw - var(--hpa-sidebar) - 84px)) !important; }
body.hpa-shell-ready .newsletter-grid,
body.hpa-shell-ready .composer-grid { gap: 18px !important; }
body.hpa-shell-ready .editor-toolbar {
  background: rgba(18,21,33,.08) !important;
  padding: 8px !important;
  border: 1px solid var(--hpa-line) !important;
  gap: 5px !important;
}
body.hpa-shell-ready .editor-toolbar button,
body.hpa-shell-ready .editor-toolbar select,
body.hpa-shell-ready .editor-toolbar input {
  background: rgba(225,227,228,.85) !important;
  color: var(--hpa-ink) !important;
  border: 1px solid var(--hpa-line) !important;
}
body.hpa-shell-ready .rich-editor,
body.hpa-shell-ready #newsletter-editor {
  min-height: 430px !important;
  background: rgba(239,240,241,.88) !important;
  padding: 24px !important;
}

@media (max-width: 1050px) {
  :root { --hpa-sidebar: 250px; }
  body.hpa-shell-ready > .container { width: calc(100vw - var(--hpa-sidebar) - 58px) !important; margin-left: calc(var(--hpa-sidebar) + 38px) !important; margin-right:20px !important; }
  .hpa-side-rail { left:12px;width:var(--hpa-sidebar); }
  .hpa-profile-card { grid-template-columns: 72px 1fr; }
  .hpa-avatar-frame { width:72px; }
}
@media (max-width: 820px) {
  .hpa-side-rail { position:relative;left:auto;top:auto;width:calc(100% - 20px);max-height:none;margin:12px auto 0;grid-template-columns:1fr; }
  body.hpa-shell-ready > .container { width:calc(100% - 20px) !important;margin:14px auto 36px !important;padding:20px !important; }
  .hpa-profile-card { grid-template-columns:82px 1fr; }
  .hpa-avatar-frame { width:82px; }
  .profile-avatar-editor { grid-template-columns:1fr; }
}

/* V7 identity treatments */
.author-meta {
  display:flex !important;
  align-items:center;
  gap:10px;
  margin-top:12px;
  min-height:34px;
}
.author-avatar,
.comment-avatar {
  flex:0 0 auto;
  width:32px;
  height:32px;
  object-fit:cover;
  border:1px solid var(--hpa-line);
  background:rgba(255,255,255,.16);
  filter:grayscale(1) contrast(1.08);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.14);
}
.author-avatar-large { width:42px; height:42px; }
.author-avatar-fallback,
.comment-avatar-fallback {
  display:inline-grid;
  place-items:center;
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.04em;
  background:rgba(18,21,33,.10);
  color:var(--hpa-ink);
}
.comment-meta-with-avatar { gap:10px; }
.comment-meta-with-avatar > span:last-child { line-height:1.45; }
.comment {
  position:relative;
  overflow:hidden;
}
.comment::before {
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:var(--hpa-ink);
  opacity:.8;
}
.post-author-meta {
  padding:8px 10px;
  border:1px dashed var(--hpa-soft-line);
  background:rgba(18,21,33,.04);
}


/* V10 unified terminal form surfaces */
:root{--hpa-field-bg:rgba(210,213,215,.24)}
input[type="text"],input[type="email"],input[type="password"],input[type="url"],input[type="search"],input[type="file"],textarea,select,[contenteditable="true"]{
  background:var(--hpa-field-bg)!important;color:var(--hpa-ink)!important;border-color:var(--hpa-line)!important;box-shadow:none!important;
}
input::placeholder,textarea::placeholder{color:var(--hpa-ink)!important;opacity:.42}

/* V12 editable-text failsafe: body is uppercase for UI chrome, user-authored content is not. */
body.hpa-shell-ready input,
body.hpa-shell-ready textarea,
body.hpa-shell-ready select,
body.hpa-shell-ready [contenteditable="true"],
body.hpa-shell-ready [contenteditable="true"] * {
  text-transform: none !important;
}


/* V15 Archive sidebar reinforcement */
body.archive-page.hpa-shell-ready > .container {
  width: min(1180px, calc(100vw - var(--hpa-sidebar) - 84px)) !important;
  margin-left: calc(var(--hpa-sidebar) + 52px) !important;
  margin-right: 32px !important;
}
body.archive-page .hpa-side-rail { display:grid !important; visibility:visible !important; opacity:1 !important; }
@media (max-width: 820px) {
  body.archive-page.hpa-shell-ready > .container {
    width: calc(100% - 20px) !important;
    margin: 14px auto 36px !important;
  }
}

/* =========================================================
   V16 // RIGHT-SIDE SIGNAL RAIL
   Home + Archive only. Live public Supabase telemetry.
   ========================================================= */
:root { --hpa-rightbar: 270px; }

.hpa-right-rail {
  position: fixed;
  right: 22px;
  top: 62px;
  width: var(--hpa-rightbar);
  max-height: calc(100vh - 84px);
  overflow: auto;
  z-index: 940;
  display: grid;
  gap: 14px;
  scrollbar-width: thin;
}
.hpa-right-card {
  background: rgba(203,206,208,.88);
  border: 1px solid var(--hpa-line);
  box-shadow: 0 8px 20px rgba(18,21,33,.13), inset 0 0 0 1px rgba(255,255,255,.15);
  padding: 14px;
}
.hpa-right-heading {
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .035em;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--hpa-soft-line);
}
.hpa-monitor-grid { display:grid; gap:7px; }
.hpa-monitor-grid > div {
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
  align-items:center;
  padding:5px 0;
  border-bottom:1px dotted var(--hpa-soft-line);
  font-size:.68rem;
}
.hpa-monitor-grid strong { font-size:.72rem; text-align:right; }
.hpa-monitor-grid > div:nth-child(4) strong::before {
  content:"■ ";
  font-size:.58rem;
}
.hpa-intercept-meta,
.hpa-random-date {
  font-size:.62rem;
  line-height:1.5;
  opacity:.62;
  margin-bottom:8px;
}
.hpa-intercept-title {
  font-size:.78rem;
  line-height:1.55;
  font-weight:700;
  min-height:64px;
  margin-bottom:10px;
}
.hpa-right-action {
  display:block;
  color:var(--hpa-ink);
  text-decoration:none;
  text-align:center;
  border:1px solid var(--hpa-line);
  padding:8px 9px;
  font-size:.68rem;
  font-weight:900;
  background:rgba(18,21,33,.035);
}
.hpa-right-action:hover { background:var(--hpa-ink); color:var(--hpa-bg); }
.hpa-right-action.is-disabled { opacity:.42; pointer-events:none; }
.hpa-activity-log { display:grid; gap:0; }
.hpa-activity-log > div {
  display:grid;
  grid-template-columns:50px 1fr;
  gap:7px;
  padding:6px 0;
  border-bottom:1px dotted var(--hpa-soft-line);
  font-size:.64rem;
  line-height:1.35;
}
.hpa-activity-log time { opacity:.62; font-variant-numeric:tabular-nums; }
.hpa-node-state {
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed var(--hpa-soft-line);
  font-size:.61rem;
  opacity:.72;
}
.hpa-random-dossier h4 {
  margin:8px 0 7px;
  font-size:.76rem;
  line-height:1.35;
}
.hpa-random-dossier p {
  margin:0 0 10px;
  font-size:.66rem;
  line-height:1.45;
  opacity:.78;
}
.hpa-random-thumb {
  display:block;
  width:100%;
  height:112px;
  object-fit:cover;
  border:1px solid var(--hpa-line);
  filter:grayscale(1) contrast(1.06);
  background:rgba(18,21,33,.08);
}
.hpa-random-noimage,
.hpa-random-placeholder {
  min-height:76px;
  display:grid;
  place-items:center;
  border:1px dashed var(--hpa-soft-line);
  padding:10px;
  text-align:center;
  font-size:.64rem;
  opacity:.62;
}

/* Three-column workstation layout when the signal rail exists. */
body.hpa-right-rail-ready.hpa-shell-ready > .container {
  width: min(1040px, calc(100vw - var(--hpa-sidebar) - var(--hpa-rightbar) - 126px)) !important;
  margin-left: calc(var(--hpa-sidebar) + 52px) !important;
  margin-right: calc(var(--hpa-rightbar) + 52px) !important;
}
body.archive-page.hpa-right-rail-ready.hpa-shell-ready > .container {
  width: min(1040px, calc(100vw - var(--hpa-sidebar) - var(--hpa-rightbar) - 126px)) !important;
  margin-left: calc(var(--hpa-sidebar) + 52px) !important;
  margin-right: calc(var(--hpa-rightbar) + 52px) !important;
}

/* At medium widths, keep the left rail sticky and place intelligence below content. */
@media (max-width: 1380px) {
  .hpa-right-rail {
    position:relative;
    right:auto;
    top:auto;
    width:auto;
    max-height:none;
    margin:18px 24px 36px calc(var(--hpa-sidebar) + 52px);
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.archive-page.hpa-right-rail-ready.hpa-shell-ready > .container {
    width:calc(100vw - var(--hpa-sidebar) - 84px) !important;
    margin-left:calc(var(--hpa-sidebar) + 52px) !important;
    margin-right:32px !important;
  }
}
@media (max-width: 820px) {
  .hpa-right-rail {
    width:calc(100% - 20px);
    margin:14px auto 36px;
    grid-template-columns:1fr;
  }
  body.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.archive-page.hpa-right-rail-ready.hpa-shell-ready > .container {
    width:calc(100% - 20px) !important;
    margin:14px auto 36px !important;
  }
}


/* =========================================================
   HPA V17 // THREE-COLUMN SHELL SIZING + UNIVERSAL RIGHT RAIL
   ========================================================= */
:root {
  --hpa-sidebar: 270px;
  --hpa-rightbar: 300px;
  --hpa-shell-gap: 18px;
}

@media (min-width: 1600px) {
  .hpa-side-rail {
    left: var(--hpa-shell-gap) !important;
    width: var(--hpa-sidebar) !important;
  }

  .hpa-right-rail {
    right: var(--hpa-shell-gap) !important;
    width: var(--hpa-rightbar) !important;
    max-height: calc(100vh - 36px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  body.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.archive-page.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.newsletter-admin-page.hpa-right-rail-ready.hpa-shell-ready > .container {
    width: min(1180px, calc(100vw - var(--hpa-sidebar) - var(--hpa-rightbar) - (var(--hpa-shell-gap) * 4))) !important;
    margin-left: calc(var(--hpa-sidebar) + (var(--hpa-shell-gap) * 2)) !important;
    margin-right: calc(var(--hpa-rightbar) + (var(--hpa-shell-gap) * 2)) !important;
  }

  .hpa-right-card {
    padding: 16px !important;
  }
  .hpa-right-heading {
    font-size: .78rem !important;
    margin-bottom: 13px !important;
  }
  .hpa-monitor-grid > div,
  .hpa-activity-log > div {
    font-size: .69rem !important;
  }
  .hpa-intercept-title {
    font-size: .77rem !important;
    line-height: 1.45 !important;
  }
  .hpa-random-thumb {
    width: 100% !important;
    max-height: 145px !important;
    object-fit: cover !important;
  }
}

/* Medium desktop: keep the rail visible, but dock it beneath the workspace. */
@media (min-width: 980px) and (max-width: 1599px) {
  .hpa-right-rail {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    margin: 20px 24px 38px calc(var(--hpa-sidebar) + 52px) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: start !important;
  }

  body.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.archive-page.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.newsletter-admin-page.hpa-right-rail-ready.hpa-shell-ready > .container {
    width: calc(100vw - var(--hpa-sidebar) - 84px) !important;
    max-width: none !important;
    margin-left: calc(var(--hpa-sidebar) + 52px) !important;
    margin-right: 32px !important;
  }
}

@media (max-width: 979px) {
  .hpa-right-rail {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 20px) !important;
    margin: 16px auto 34px !important;
    grid-template-columns: 1fr !important;
  }

  body.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.archive-page.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.newsletter-admin-page.hpa-right-rail-ready.hpa-shell-ready > .container {
    width: calc(100% - 20px) !important;
    margin: 14px auto 28px !important;
  }
}

/* =========================================================
   HPA V20 // ADMIN ROOT GEOMETRY FAILSAFE
   newsletter-admin is a <main>, not .container.
   ========================================================= */
@media (min-width:1600px){
  body.newsletter-admin-page.hpa-shell-ready.hpa-right-rail-ready > .newsletter-admin{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:none!important;
    margin-left:calc(var(--hpa-sidebar) + 44px)!important;
    margin-right:calc(var(--hpa-rightbar) + 44px)!important;
    min-width:0!important;
  }
  body.admin-composer-page.hpa-shell-ready.hpa-right-rail-ready > .container{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:none!important;
    margin-left:calc(var(--hpa-sidebar) + 44px)!important;
    margin-right:calc(var(--hpa-rightbar) + 44px)!important;
    min-width:0!important;
  }
}


/* =========================================================
   HPA V23 // DOSSIER READER UNIVERSAL SHELL
   ========================================================= */
body.hpa-post-reader-page.hpa-shell-ready > .container {
  box-sizing:border-box !important;
  min-width:0 !important;
}
body.hpa-post-reader-page #post-root,
body.hpa-post-reader-page #post-root > article,
body.hpa-post-reader-page .post-body,
body.hpa-post-reader-page .system-panel {
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
body.hpa-post-reader-page .post-hero {
  display:block !important;
  width:min(100%, 920px) !important;
  max-height:520px !important;
  object-fit:contain !important;
  margin:0 auto 22px !important;
}
body.hpa-post-reader-page .post-body img,
body.hpa-post-reader-page .post-body video,
body.hpa-post-reader-page .post-body iframe {
  max-width:100% !important;
}

@media (min-width:1600px) {
  body.hpa-post-reader-page.hpa-right-rail-ready.hpa-shell-ready > .container {
    width:auto !important;
    max-width:none !important;
    margin-left:calc(var(--hpa-sidebar) + 44px) !important;
    margin-right:calc(var(--hpa-rightbar) + 44px) !important;
  }
}

/* Readers should never hide either terminal rail on desktop. */
@media (min-width:901px) {
  body.hpa-post-reader-page .hpa-side-rail,
  body.hpa-post-reader-page .hpa-right-rail {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* =========================================================
   HPA V24 // BALANCED DESKTOP SPACING SYSTEM
   One source of truth for the three-column terminal shell.
   ========================================================= */
@media (min-width: 1281px) {
  :root {
    --hpa-sidebar: 270px;
    --hpa-rightbar: 300px;
    --hpa-edge: 16px;
    --hpa-column-gap: 16px;
  }

  .hpa-side-rail {
    left: var(--hpa-edge) !important;
    width: var(--hpa-sidebar) !important;
  }

  .hpa-right-rail {
    right: var(--hpa-edge) !important;
    width: var(--hpa-rightbar) !important;
  }

  /* Standard pages + reader + dossier composer */
  body.hpa-shell-ready > .container,
  body.archive-page.hpa-shell-ready > .container,
  body.hpa-post-reader-page.hpa-shell-ready > .container,
  body.admin-composer-page.hpa-shell-ready > .container,
  body.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.archive-page.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.hpa-post-reader-page.hpa-right-rail-ready.hpa-shell-ready > .container,
  body.admin-composer-page.hpa-right-rail-ready.hpa-shell-ready > .container {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: calc(var(--hpa-edge) + var(--hpa-sidebar) + var(--hpa-column-gap)) !important;
    margin-right: calc(var(--hpa-edge) + var(--hpa-rightbar) + var(--hpa-column-gap)) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Newsletter uses <main class="newsletter-admin"> instead of .container. */
  body.newsletter-admin-page.hpa-shell-ready > .newsletter-admin,
  body.newsletter-admin-page.hpa-shell-ready.hpa-right-rail-ready > .newsletter-admin {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: calc(var(--hpa-edge) + var(--hpa-sidebar) + var(--hpa-column-gap)) !important;
    margin-right: calc(var(--hpa-edge) + var(--hpa-rightbar) + var(--hpa-column-gap)) !important;
  }

  /* Keep major page sections breathing consistently. */
  body.hpa-shell-ready header { margin-bottom: 18px !important; }
  body.hpa-shell-ready .system-panel { margin-bottom: 16px !important; }
  body.hpa-shell-ready main > section + section,
  body.hpa-shell-ready .container > section + section { margin-top: 18px !important; }

  /* Reader-specific rhythm. */
  body.hpa-post-reader-page #post-root > article {
    padding: 22px 24px !important;
  }
  body.hpa-post-reader-page .post-body {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Slightly tighter laptop spacing before the mobile/tablet shell takes over. */
@media (min-width: 901px) and (max-width: 1280px) {
  :root { --hpa-sidebar: 238px; }
  .hpa-side-rail { left: 12px !important; width: var(--hpa-sidebar) !important; }
  body.hpa-shell-ready > .container,
  body.hpa-post-reader-page.hpa-shell-ready > .container,
  body.admin-composer-page.hpa-shell-ready > .container {
    margin-left: calc(var(--hpa-sidebar) + 26px) !important;
    margin-right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}