/* CircleTrust Editorial Shell — app frame (rail / dock / view).
   Page-internal styling lives in each page's CSS (e.g. editorial-browse.css).
   Trust + tokens come from tokens.css; this file never hardcodes theme/trust colour. */

*{box-sizing:border-box}
html,body{margin:0;height:100%;width:100%;max-width:100%;overflow-x:clip}
body{background:var(--ct-base);color:var(--ct-ink);font-family:var(--ct-font-ui)}
#app,.app{width:100%;max-width:100%;min-width:0;overflow-x:clip}

.app{display:flex;min-height:100vh}

/* ---------- desktop left rail (the 5-button spine) ---------- */
.rail{
  position:sticky;top:0;align-self:flex-start;
  flex:0 0 76px;width:76px;height:100vh;
  background:var(--ct-paper);border-right:1px solid var(--ct-line);
  display:flex;flex-direction:column;align-items:center;
  padding:22px 0;gap:14px;z-index:20;
}
.rail-logo{
  width:40px;height:40px;border-radius:50%;
  border:3px solid var(--ct-trust-trusted);
  display:flex;align-items:center;justify-content:center;
  color:var(--ct-trust-trusted);font-size:19px;margin-bottom:8px;
}
.rail-btn{
  width:44px;height:44px;border-radius:12px;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--ct-sub);font-size:19px;
}
.rail-btn:hover{background:color-mix(in srgb,var(--ct-ink) 6%,transparent)}
.rail-btn.active{background:var(--ct-ink);color:var(--ct-paper)}
.rail-btn.plus{background:var(--ct-accent);color:var(--ct-accent-contrast);box-shadow:0 8px 16px color-mix(in srgb,var(--ct-accent) 32%,transparent)}
.rail-btn.plus:hover{filter:brightness(1.03)}

/* ---------- the routed view ---------- */
.app-view{flex:1;min-width:0;max-width:100%;min-height:100vh;overflow-x:clip}

/* ---------- mobile bottom dock ---------- */
.dock{display:none}

/* ---------- placeholder pages ---------- */
.ph{max-width:1240px;margin:0 auto;padding:64px 52px}
.ph-kick{font-family:var(--ct-font-ui);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ct-sub);font-size:.72rem}
.ph h1{font-family:var(--ct-font-display);font-weight:500;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-.03em;line-height:1;margin:10px 0 0}
.ph h1 em{font-style:italic}
.ph p{max-width:52ch;margin:16px 0 0;color:var(--ct-sub);font-size:1rem;line-height:1.55}
.ph-tag{display:inline-block;margin-top:22px;padding:6px 12px;border-radius:999px;border:1px dashed color-mix(in srgb,var(--ct-ink) 24%,transparent);font-family:var(--ct-font-ui);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ct-sub)}
.ph-next{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px}
.ph-next a{font-family:var(--ct-font-ui);font-weight:700;font-size:.82rem;color:var(--ct-ink);text-decoration:none;border:1px solid var(--ct-line);background:var(--ct-paper);border-radius:999px;padding:9px 15px}
.ph-next a:hover{border-color:color-mix(in srgb,var(--ct-ink) 30%,transparent)}

/* ---------- production account / Community context ---------- */
.contextbar{
  position:fixed;top:14px;right:132px;bottom:auto;z-index:58;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;
  max-width:min(720px,66vw);padding:6px;
  background:color-mix(in srgb,var(--ct-paper) 94%,transparent);
  border:1px solid var(--ct-line);border-radius:13px;
  box-shadow:0 8px 24px color-mix(in srgb,var(--ct-ink) 10%,transparent);
  backdrop-filter:blur(8px);
}
.contextbar-label{padding:5px 8px;font-family:var(--ct-font-ui);font-weight:750;font-size:.66rem;letter-spacing:.03em;color:var(--ct-sub);white-space:nowrap}
.contextbar-communities{display:flex;gap:4px}
.contextbar-communities button,.contextbar-signout{border:0;background:none;cursor:pointer;border-radius:8px;padding:6px 9px;font-family:var(--ct-font-ui);font-weight:750;font-size:.66rem;letter-spacing:.035em;text-transform:uppercase;color:var(--ct-sub)}
.contextbar-communities button:hover,.contextbar-signout:hover{background:color-mix(in srgb,var(--ct-ink) 6%,transparent);color:var(--ct-ink)}
.contextbar-communities button.on{background:var(--ct-ink);color:var(--ct-paper)}


@media (max-width:859px){
  html,body,#app,.app,.app-view{width:100%;max-width:100%;min-width:0}
  html,body{overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  #app,.app,.app-view{overflow-x:clip}
  .rail{display:none}
  .app{display:block;min-height:100dvh}
  .app-view{
    min-height:100dvh;
    /* Reserve exactly the dock footprint. Page CSS owns its own editorial spacing. */
    padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px));
  }
  .dock{
    /* Flex is deliberately used instead of an intrinsic grid here. Some Android
       WebViews/font-scaling combinations were expanding the fixed grid beyond the
       visual viewport. Five equal flex items hard-lock the dock to the screen. */
    display:flex;
    position:fixed;left:0;right:auto;bottom:0;z-index:100;
    width:100vw;max-width:100vw;min-width:0;
    height:calc(64px + env(safe-area-inset-bottom, 0px));min-height:0;
    background:var(--ct-paper);border-top:1px solid var(--ct-line);
    align-items:stretch;padding:4px 0 env(safe-area-inset-bottom, 0px);
    box-shadow:0 -8px 24px color-mix(in srgb,var(--ct-ink) 6%,transparent);
    isolation:isolate;overflow-x:clip;overflow-y:visible;
  }
  .dock-btn{
    flex:1 1 20%;width:20%;max-width:20%;min-width:0;min-height:56px;
    margin:0;padding:4px 0;border:0;background:none;cursor:pointer;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    white-space:nowrap;text-overflow:clip;
    font-family:var(--ct-font-ui);font-size:10px;line-height:1;font-weight:700;color:var(--ct-sub);
  }
  .dock-btn.active{color:var(--ct-ink)}
  .dock-btn .ic{display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
  .dock-btn.plus{overflow:visible}
  .dock-btn.plus .ic{
    width:42px;height:42px;border-radius:50%;background:var(--ct-accent);color:var(--ct-accent-contrast);
    font-size:22px;transform:translateY(-9px);margin-bottom:-9px;
    box-shadow:0 8px 16px color-mix(in srgb,var(--ct-accent) 32%,transparent);
  }
  .ph{padding:40px 20px}
  /* Keep Community switching compact and outside the dock footprint. */
  .contextbar{
    top:auto;left:auto;right:8px;
    bottom:calc(70px + env(safe-area-inset-bottom, 0px));
    width:max-content;max-width:calc(100vw - 16px);min-width:0;min-height:0;
    padding:5px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    z-index:90;
  }
  .contextbar-label{display:none}
  .contextbar-communities{flex:0 0 auto}
  .contextbar-communities button,.contextbar-signout{font-size:.62rem;padding:5px 7px;white-space:nowrap}
}
.rail-logo{overflow:hidden;border-color:var(--ct-line);background:var(--ct-paper)}
.rail-logo img{width:100%;height:100%;object-fit:contain;display:block;padding:2px}

/* v1.17 foreground notification: supplemental to the OS notification. */
.foreground-notice{position:fixed;z-index:1200;right:24px;top:76px;width:min(360px,calc(100vw - 40px));padding:14px 16px;border:1px solid var(--ct-line);border-radius:18px;background:var(--ct-paper);color:var(--ct-ink);box-shadow:0 18px 55px rgba(31,25,21,.18);text-align:left;display:grid;gap:4px;cursor:pointer}
.foreground-notice strong{font:700 .86rem/1.25 var(--ct-font-ui)}
.foreground-notice span{font:500 .76rem/1.4 var(--ct-font-ui);color:var(--ct-sub)}

/* v1.20C: one bounded desktop chrome row. Context and action icons can no longer
   compete for the same right-edge pixels on wide-content pages. */
@media (min-width:860px){
  /* v1.20E.1 — the 3-Community switcher must never create horizontal page width.
     The chrome owns only the visual viewport between the rail and right edge;
     page content remains centered independently underneath it. */
  .shell-top-chrome{position:fixed;top:14px;left:92px;right:20px;width:auto;max-width:calc(100vw - 112px);z-index:70;display:flex;align-items:flex-start;justify-content:flex-end;gap:10px;min-width:0;overflow:visible;pointer-events:none}
  .shell-top-chrome>.contextbar,.shell-top-chrome>.shell-tools{pointer-events:auto}
  .shell-top-chrome .contextbar{position:static;inset:auto;max-width:calc(100% - 102px);min-width:0;flex:0 1 auto;overflow:hidden}
  .shell-top-chrome .contextbar-label{min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis}
  .shell-top-chrome .contextbar-communities{min-width:0;flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}
  .shell-top-chrome .contextbar-communities button,.shell-top-chrome .contextbar-signout{flex:0 0 auto}
  .shell-top-chrome .shell-tools{position:static;inset:auto;flex:0 0 96px;z-index:auto}
}
@media (min-width:860px) and (max-width:1120px){
  .shell-top-chrome{left:86px;right:12px;max-width:calc(100vw - 98px);gap:7px}
  .shell-top-chrome .contextbar{max-width:calc(100% - 95px);padding:5px;gap:4px}
  .shell-top-chrome .contextbar-label{max-width:135px;padding:5px 6px}
  .shell-top-chrome .contextbar-communities button,.shell-top-chrome .contextbar-signout{padding:6px 7px;font-size:.62rem}
  .shell-top-chrome .shell-tools{flex-basis:88px;gap:6px}
}
@media (max-width:859px){
  .shell-top-chrome{display:contents}
}