/* Gwench shared chrome — slim header + signed-in sidebar. v10 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");

:root {
  --gw-bg: #0b0f14;
  --gw-surface: #0d1218;
  --gw-fg: #e8eef5;
  --gw-body: #b8c4d4;
  --gw-muted: #8b9bb0;
  --gw-accent: #fec426;
  --gw-line: rgba(232, 238, 245, 0.08);
  --gw-header-h: 52px;
  --gw-rail: 52px;
  --gw-side: 232px;
  --gw-page-pad: 32px;
  --gw-edge: 12px;
  --gw-z-header: 60;
  --gw-z-side: 55;
  --gw-z-overlay: 50;
  --gw-z-toast: 90;
  --gw-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gw-pad-left: 0px;
}

body.gw-shell.is-signed-in {
  --gw-pad-left: var(--gw-rail);
}
body.gw-shell.is-signed-in.gw-side-open {
  --gw-pad-left: var(--gw-side);
}

/* ---- Slim top banner (full viewport width) ---- */
.gw-header {
  position: sticky;
  top: 0;
  z-index: var(--gw-z-header);
  height: var(--gw-header-h);
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--gw-line);
  background: rgba(11, 15, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--gw-font);
  color: var(--gw-fg);
  /* Let clicks reach the sidebar toggle under the header bar */
  pointer-events: none;
}

.gw-header-inner {
  position: relative;
  display: block;
  height: var(--gw-header-h);
  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.gw-header .gw-mark,
.gw-header .gw-menu-btn,
.gw-header .gw-center,
.gw-header .gw-right {
  pointer-events: auto;
}

/* G-circle: far top-left with edge padding; when signed-in, centered over the rail */
.gw-mark {
  position: absolute;
  left: var(--gw-edge);
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  text-decoration: none;
  line-height: 0;
  z-index: 3;
}
body.gw-shell.is-signed-in .gw-mark {
  left: calc(var(--gw-rail) / 2);
  transform: translate(-50%, -50%);
}
.gw-mark:hover { opacity: 0.9; text-decoration: none; }
.gw-mark img { width: 30px; height: 30px; border-radius: 5px; display: block; }
.gw-mark-tm {
  position: absolute;
  right: -3px;
  top: -2px;
  font-size: 6px;
  font-weight: 500;
  color: var(--gw-accent);
  line-height: 1;
}

.gw-menu-btn {
  display: none;
  position: absolute;
  left: calc(var(--gw-edge) + 36px);
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(254, 196, 38, 0.35);
  border-radius: 7px;
  background: transparent;
  color: var(--gw-accent);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.gw-menu-btn:hover { background: rgba(254, 196, 38, 0.1); }
.gw-menu-btn:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; }
.gw-menu-btn svg { display: block; }
@media (max-width: 720px) {
  body.gw-shell.is-signed-in .gw-menu-btn { display: inline-flex; }
  body.gw-shell.is-signed-in .gw-mark {
    left: var(--gw-edge);
    transform: translateY(-50%);
  }
}

/* Wordmark: centered on viewport (signed-out); centered in remaining area (signed-in) */
.gw-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: inherit;
  max-width: min(70%, 288px);
  z-index: 1;
}
body.gw-shell.is-signed-in .gw-center {
  left: calc(var(--gw-pad-left) + (100% - var(--gw-pad-left)) / 2);
}
@media (max-width: 720px) {
  body.gw-shell.is-signed-in .gw-center {
    left: 50%;
  }
}
.gw-center:hover { opacity: 1; text-decoration: none; }
.gw-center-word {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 26px;
}
.gw-center-word img {
  height: 26px;
  width: auto;
  display: block;
}
/* Locked TruePlank wordmark: transparent PNG (no plate). Do not blend — backdrop-filter would plate it. */
.gw-center-word img.gw-wordmark-trueplank {
  background: transparent;
}
.gw-product-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1.5px solid currentColor;
  font-family: var(--gw-font);
  font-weight: 200;
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
}
.gw-product-name {
  font-family: var(--gw-font);
  font-weight: 200;
  font-size: 19px;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.gw-motto {
  margin: 0;
  font-size: 6.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gw-accent);
  line-height: 1.2;
}

.gw-right {
  position: absolute;
  right: var(--gw-edge);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  z-index: 2;
  max-height: var(--gw-header-h);
}
.gw-biz {
  text-align: right;
  max-width: none;
  line-height: 1.15;
  flex: 0 0 auto;
}
.gw-biz .name {
  margin: 0;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gw-fg);
  white-space: nowrap;
  display: block;
}
.gw-biz .place {
  margin: 1px 0 0;
  font-size: 8.5px;
  font-weight: 400;
  color: var(--gw-muted);
  white-space: nowrap;
  display: block;
}
.gw-signin {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(254, 196, 38, 0.55);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.2;
  color: var(--gw-accent);
  white-space: nowrap;
  text-decoration: none;
}
.gw-signin:hover { text-decoration: none; background: rgba(254, 196, 38, 0.1); opacity: 1; }
body.gw-shell.is-signed-in .gw-signin { display: none; }

@media (max-width: 640px) {
  .gw-biz { display: none; }
  .gw-center { max-width: min(58%, 224px); }
  .gw-product-name { font-size: 16px; }
}

/* ---- Sidebar (signed-in) ---- */
.gw-side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--gw-z-side);
  width: var(--gw-rail);
  display: none;
  flex-direction: column;
  background: var(--gw-surface);
  border-right: 1px solid var(--gw-line);
  font-family: var(--gw-font);
  color: var(--gw-fg);
  transition: width 0.18s ease;
  overflow: hidden;
}
body.gw-shell.is-signed-in .gw-side { display: flex; }
body.gw-shell.is-signed-in.gw-side-open .gw-side { width: var(--gw-side); }

.gw-side-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Sit below the 52px header band so the toggle is never under the G-mark/header */
  margin-top: var(--gw-header-h);
  height: 40px;
  padding: 0 7px;
  border-bottom: 1px solid var(--gw-line);
  flex: 0 0 auto;
}
body.gw-shell.is-signed-in:not(.gw-side-open) .gw-side-top {
  justify-content: center;
}
.gw-side-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 80;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--gw-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.gw-side-toggle:hover { background: rgba(254, 196, 38, 0.1); color: var(--gw-accent); }
.gw-side-toggle:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; }

.gw-side-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 9px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gw-side-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 3px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--gw-fg);
}
.gw-side-row:hover { background: rgba(254, 196, 38, 0.08); text-decoration: none; opacity: 1; }
.gw-side-row.is-active { background: rgba(254, 196, 38, 0.12); }
.gw-side-ico {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gw-font);
  font-weight: 200;
  font-size: 16px;
  line-height: 1;
  border: 1.5px solid currentColor;
  background: transparent;
}
.gw-side-ico img { width: 18px; height: 18px; display: block; }
.gw-side-label {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  width: 0;
  transition: opacity 0.12s ease;
}
body.gw-shell.gw-side-open .gw-side-label { opacity: 1; width: auto; }
.gw-launch {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border-radius: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--gw-accent);
  text-decoration: none;
  border: 1px solid rgba(254, 196, 38, 0.35);
}
.gw-launch:hover { background: rgba(254, 196, 38, 0.12); text-decoration: none; opacity: 1; }
body.gw-shell.gw-side-open .gw-launch.is-shown { display: inline-flex; }
.gw-launch svg { display: block; }

.gw-user {
  position: relative;
  flex: 0 0 auto;
  border-top: 1px solid var(--gw-line);
  padding: 7px;
}
.gw-user-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--gw-fg);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.gw-user-btn:hover { background: rgba(254, 196, 38, 0.08); }
.gw-user-btn { outline: none; }
.gw-user-btn:focus { outline: none; box-shadow: none; }
.gw-user-btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.gw-user-btn:focus-visible {
  outline: 2px solid var(--gw-accent);
  outline-offset: 2px;
}
.gw-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(254, 196, 38, 0.15);
  color: var(--gw-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
}
.gw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gw-user-meta {
  flex: 1 1 auto;
  min-width: 0;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.12s ease;
}
body.gw-shell.gw-side-open .gw-user-meta { opacity: 1; width: auto; }
.gw-user-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
}
.gw-user-email {
  margin: 1px 0 0;
  font-size: 11px;
  color: var(--gw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-user-menu {
  display: none;
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: calc(100% + 6px);
  z-index: 2;
  margin: 0;
  padding: 5px;
  background: #121820;
  border: 1px solid rgba(232, 238, 245, 0.14);
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.gw-user-menu.is-open { display: block; }
.gw-user-menu a,
.gw-user-menu .signout-btn {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 7px 10px;
  border-radius: 6px;
  color: #e8eef5;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.gw-user-menu a:hover,
.gw-user-menu .signout-btn:hover {
  background: rgba(254, 196, 38, 0.12);
  color: #fec426;
  text-decoration: none;
  opacity: 1;
}
.gw-user-menu form { margin: 0; }
.gw-user-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(232, 238, 245, 0.14);
}

.gw-side-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--gw-z-overlay);
  background: rgba(0, 0, 0, 0.45);
}
body.gw-shell.is-signed-in.gw-side-open .gw-side-scrim { display: block; }
@media (min-width: 721px) {
  body.gw-shell.is-signed-in.gw-side-open .gw-side-scrim { display: none; }
}
@media (max-width: 720px) {
  body.gw-shell.is-signed-in .gw-side {
    width: var(--gw-side);
    transform: translateX(-105%);
    transition: transform 0.18s ease;
  }
  body.gw-shell.is-signed-in.gw-side-open .gw-side {
    transform: translateX(0);
  }
  body.gw-shell.is-signed-in .gw-side-label,
  body.gw-shell.is-signed-in .gw-user-meta { opacity: 1; width: auto; }
  body.gw-shell.is-signed-in .gw-launch.is-shown { display: inline-flex; }
}

/* Content: shift by sidebar width so .wrap blocks re-center in the remaining area.
   Extra --gw-page-pad clears the sidebar edge (stubs + pages without .wrap margins). */
body.gw-shell.is-signed-in main,
body.gw-shell.is-signed-in .site-footer,
body.gw-shell.is-signed-in .gw-page {
  margin-left: var(--gw-pad-left);
  padding-left: var(--gw-page-pad);
  padding-right: var(--gw-page-pad);
  box-sizing: border-box;
  transition: margin-left 0.18s ease;
}
/* www pages already pad via .wrap; avoid double-counting by zeroing wrap's implicit need —
   .wrap still centers within the reduced content box. */
body.gw-shell.is-signed-in main > .wrap,
body.gw-shell.is-signed-in main .wrap {
  /* keep existing wrap math; content box is already inset */
}
@media (max-width: 720px) {
  body.gw-shell.is-signed-in main,
  body.gw-shell.is-signed-in .site-footer,
  body.gw-shell.is-signed-in .gw-page,
  body.gw-shell.is-signed-in.gw-side-open main,
  body.gw-shell.is-signed-in.gw-side-open .site-footer,
  body.gw-shell.is-signed-in.gw-side-open .gw-page {
    margin-left: 0;
  }
  body.gw-shell.is-signed-in .gw-page {
    padding-left: var(--gw-page-pad);
    padding-right: var(--gw-page-pad);
  }
}

/* Hide legacy page header once shell mounts */
body.gw-shell .site-header { display: none !important; }

/* Launch app CTA on product pages */
.gw-launch-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 7px 14px;
  border: 1px solid rgba(254, 196, 38, 0.55);
  border-radius: 999px;
  color: var(--gw-accent);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  background: rgba(254, 196, 38, 0.08);
}
.gw-launch-cta:hover { background: rgba(254, 196, 38, 0.14); text-decoration: none; opacity: 1; }
.gw-launch-cta[hidden] { display: none !important; }

/* Toast (kept from session-header) */
.signin-notice {
  position: fixed;
  top: calc(var(--gw-header-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--gw-z-toast);
  width: min(calc(100% - 32px), 26rem);
  margin: 0;
  padding: 0.95rem 2.35rem 0.95rem 1.05rem;
  background: #121820;
  border: 1px solid rgba(254, 196, 38, 0.35);
  border-radius: 0.85rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  color: #b8c4d4;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
}
.signin-notice-title {
  margin: 0 0 0.35rem;
  color: #e8eef5;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
}
.signin-notice-body { margin: 0; color: #b8c4d4; }
.signin-notice-body a { color: #fec426; text-decoration: none; }
.signin-notice-body a:hover { opacity: 0.85; text-decoration: underline; text-underline-offset: 0.2em; }
.signin-notice-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8b9bb0;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.signin-notice-close:hover { background: rgba(254, 196, 38, 0.12); color: #fec426; }
.signin-notice-close:focus-visible { outline: 2px solid #fec426; outline-offset: 2px; }