*{box-sizing:border-box}
body{margin:0;background:var(--bg2);font-family:var(--font-ui);color:var(--ink2)}

/* ---- shell layout ---- */
.shell{display:grid;grid-template-columns:212px 1fr 320px;grid-template-rows:60px 1fr;height:100vh}
/* Columns are explicit: nav and aside have a definite row but would otherwise
   auto-place into column 2 ahead of the topbar and main. */
.shell>nav{grid-column:1;grid-row:1/3;background:var(--card);border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:0}
.shell>aside{grid-column:3;grid-row:1/3;background:var(--card);border-left:1px solid var(--border);padding:18px 16px;display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto}
.shell>main{grid-column:2;grid-row:2;padding:24px;overflow:auto;min-width:0}

/* Signed out: the sign-in view is the entire window. */
body.signed-out .shell{grid-template-columns:1fr;grid-template-rows:1fr}
body.signed-out .shell>nav,
body.signed-out .shell>aside,
body.signed-out .topbar{display:none}
body.signed-out .shell>main{grid-column:1;grid-row:1;padding:0;overflow:auto}

/* ---- nav ---- */
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid transparent;border-radius:var(--r-md);font-size:14px;color:var(--ink2);text-decoration:none}
.nav-item img{width:17px;height:17px}
.nav-item.active{background:var(--accent-wash);border:1px solid var(--accent-border);color:var(--accent-deep);border-radius:var(--r-md);font-weight:600}

/* ---- topbar ---- */
.topbar{grid-column:2;grid-row:1;height:60px;border-bottom:1px solid var(--border);background:var(--card);display:flex;align-items:center;gap:10px;padding:0 24px;min-width:0}
.crumb{font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* ---- controls ---- */
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--ink2);cursor:pointer}
.chip.active{background:var(--accent-wash);border-color:var(--accent-border);color:var(--accent-deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:8px;min-height:36px;padding:0 13px;font:500 13px var(--font-ui);cursor:pointer;text-decoration:none}
.btn img{width:17px;height:17px;filter:invert(1)}
.btn.secondary{background:var(--bg2);border-color:var(--border-strong);color:var(--ink)}
.btn.secondary img{filter:none}
.btn.big{min-height:38px;font-size:14px}
.icon-btn{width:34px;height:34px;flex:none;border:1px solid var(--border);background:var(--bg2);border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}

/* ---- badges, cards, dots ---- */
.badge{display:inline-block;border-radius:var(--r-sm);padding:1px 7px;font:600 11px var(--font-ui);white-space:nowrap}
.badge.warn{background:var(--warn-wash);color:var(--warn)}
.badge.ok{background:var(--ok-wash);color:var(--ok)}
.badge.bad{background:var(--bad-wash);color:var(--bad)}
.badge.info{background:var(--accent-wash);border:1px solid var(--accent-border);color:var(--accent-deep)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:16px}
.dot{width:8px;height:8px;border-radius:999px;flex:none}
.dot.ig{background:var(--ch-ig)}
.dot.tt{background:var(--ch-tt)}
.dot.li{background:var(--ch-li)}
.dot.fb{background:var(--ch-fb)}
.dot.x{background:var(--ch-x)}
.dot.yt{background:var(--ch-yt)}

/* ---- type + misc ---- */
.kpi-value{font:500 26px var(--font-mono);color:var(--ink)}
.h-display{font-family:var(--font-display);color:var(--ink)}
.media-ph{background:repeating-linear-gradient(45deg,var(--row) 0 7px,var(--bg2) 7px 14px)}
.avatar{width:26px;height:26px;flex:none;border-radius:999px;background:var(--row);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font:600 10px var(--font-ui);color:var(--ink)}

/* ---- assistant bubbles ---- */
.msg{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;font-size:13px;line-height:1.45}
.msg.me{background:var(--accent-wash);border-color:var(--accent-border);color:var(--accent-deep);align-self:flex-end;max-width:250px}

/* ---- narrow screens -------------------------------------------------------
   The design is a three column desktop shell: 212px nav, fluid main, 320px
   assistant. That is 532px of chrome before a single word of content, so on a
   390px phone the middle column collapsed to a sliver and the page scrolled
   sideways. Below the breakpoints the two side columns become drawers that
   slide over the content instead of competing with it for width.

   Drawers, not "display:none": the nav is how you change screen and the
   assistant is the product's main feature. Hiding either one on a phone would
   remove function rather than reflow it. */

/* One column, both sides off canvas. */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: 60px 1fr;
  }
  .shell > main { grid-column: 1; grid-row: 2; padding: 16px; }
  .topbar { grid-column: 1; }

  .shell > nav,
  .shell > aside {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 40;
    width: min(86vw, 320px);
    transition: transform .18s ease-out;
    box-shadow: var(--shadow);
  }
  .shell > nav   { left: 0;  transform: translateX(-102%); }
  .shell > aside { right: 0; transform: translateX(102%); border-left: 1px solid var(--border); }

  /* `transform` alone still leaves the element in the scroll area, and a drawer
     parked off the right edge made the page 612px wide on a 390px screen —
     the exact sideways scroll this breakpoint exists to remove. `visibility`
     takes it out of the scrollable region; the delay lets the slide finish
     before it disappears. */
  .shell > nav, .shell > aside {
    visibility: hidden;
    transition: transform .18s ease-out, visibility 0s linear .18s;
  }
  body.nav-open   .shell > nav,
  body.aside-open .shell > aside {
    transform: none;
    visibility: visible;
    transition: transform .18s ease-out, visibility 0s;
  }

  /* Tapping away closes whichever drawer is open. */
  .drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(17, 17, 17, .38);
    border: 0;
    padding: 0;
  }
  body:not(.nav-open):not(.aside-open) .drawer-scrim { display: none; }

  /* The two buttons that open them. Hidden on desktop, where both columns
     are always visible and a toggle would be noise. */
  .drawer-btn { display: inline-flex !important; }

  /* The topbar has room for the drawer buttons and the New post button, and
     little else. The scope chips live inside the nav drawer at this width. */
  .topbar > .chip { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
}

/* Desktop: no drawers, no scrim, no toggle buttons. */
@media (min-width: 901px) {
  .drawer-btn, .drawer-scrim { display: none !important; }
}

/* Phones: give the content the whole width and stop long words widening it. */
@media (max-width: 560px) {
  .shell > main { padding: 12px; }
  .card { padding: 14px; }
  main, main * { overflow-wrap: anywhere; }
  /* A table or a code block scrolls inside itself rather than the page. */
  main table, main pre { display: block; max-width: 100%; overflow-x: auto; }
}

/* Card rails on narrow screens.
   The views lay cards out as `display:flex;flex-wrap:wrap` rows whose children
   are `flex:1;min-width:0`. On a desktop that shares the row evenly; at 390px
   it let three cards shrink to 83px each and post titles wrapped one letter
   per line. A width floor makes them wrap onto their own rows instead, which
   is what `flex-wrap:wrap` was already there to do.

   Scoped to children of a *wrapping row*: a `min-width` on the column-direction
   inner panels would push content back out past the screen edge. */
@media (max-width: 700px) {
  #view [style*="flex-wrap:wrap"] > [style*="min-width:0"] {
    min-width: 150px !important;
  }
  /* A card carrying an image is a post card: give it the full width so the
     title, the channel chips and the Approve button are all readable. */
  #view [style*="flex-wrap:wrap"] > :has(.media-ph) {
    min-width: 100% !important;
  }
}