/* Shared app-shell layout (#30). Colours come from the theme tokens in
 * style.css; this file is structure only. */

.tol-banner {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; row-gap: .25rem;           /* #61: wrap, never spill off-screen */
  padding: .55rem 1rem;
  background: var(--banner); color: var(--banner-ink);
  border-bottom: 1px solid var(--line);
}
/* #61: drop the decorative pieces before the controls collide. */
@media (max-width: 760px) {
  .tol-banner .subtitle, .tol-banner .version { display: none; }
}
.tol-banner .brand { font-weight: 800; font-size: 1.3rem; color: inherit; text-decoration: none; }
.tol-banner .subtitle { color: var(--muted); font-size: .95rem; }
.tol-banner .spacer { margin-left: auto; }
.tol-banner .version { color: var(--muted); font-size: .8rem; }
.tol-banner .theme-pick { color: var(--muted); font-size: .8rem; display: flex; align-items: center; gap: .35rem; }
.tol-collapse-btn {
  background: transparent; border: 1px solid var(--line); color: inherit;
  border-radius: 6px; padding: .15rem .5rem; cursor: pointer; line-height: 1;
}

/* Top-right Docs/Settings cluster (#86): de-cluttered out of the sidebar. */
.tol-banner .corner-links { display: flex; align-items: center; gap: .25rem; }
.corner-link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .55rem; border-radius: 6px; border: 1px solid transparent;
  color: inherit; text-decoration: none; font-size: .85rem;
}
.corner-link:hover { background: var(--sidebar-btn); border-color: var(--line); }
.corner-link .ico { flex: 0 0 auto; }
/* Collapse to icon-only when the banner gets tight (#61). */
@media (max-width: 760px) { .corner-link .label { display: none; } }

.shell-layout { display: flex; align-items: stretch; min-height: calc(100vh - 50px); }

.tol-sidebar {
  flex: 0 0 auto; width: 210px; padding: .6rem .5rem;
  background: var(--sidebar); border-right: 1px solid var(--line);
  transition: width .15s ease;
}
.tol-sidebar.collapsed { width: 58px; }
/* #80: auto-collapse to icon rail at narrow widths so the canvas keeps the room. */
@media (max-width: 900px) {
  .tol-sidebar:not(.expanded) { width: 58px; }
  .tol-sidebar:not(.expanded) .label { display: none; }
  .tol-sidebar:not(.expanded) .tol-nav-item { justify-content: center; padding: .55rem 0; }
}

.tol-nav-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .65rem; margin-bottom: .4rem;
  border-radius: 7px; border: 1px solid transparent;
  background: var(--sidebar-btn); color: var(--ink);
  text-decoration: none; white-space: nowrap; overflow: hidden;
}
.tol-nav-item .ico { flex: 0 0 auto; }
.tol-nav-item.active { background: var(--sidebar-active); font-weight: 700; border-color: var(--line); }
.tol-nav-item.disabled { opacity: .42; pointer-events: none; cursor: not-allowed; }
.tol-sidebar.collapsed .label { display: none; }
.tol-sidebar.collapsed .tol-nav-item { justify-content: center; padding: .55rem 0; }

.shell-content { flex: 1 1 auto; min-width: 0; }
.shell-content > main { padding: 1rem 1.25rem; }
/* The unified banner replaces each page's own <header>. */
.shell-content > header { display: none; }

.project-context {
  font-weight: 700; font-size: 1.05rem;
  padding: .8rem 1.25rem 0;
}

/* Tooltip styling (FR-018) */
.tol-tooltip-container {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.tol-tooltip-trigger {
  /* position:relative is the anchor for the absolutely-positioned popup box.
     Without it the box resolved against a distant ancestor and was clipped by
     table overflow — the "click does nothing" bug (FR-018). */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  font-size: 10px;
  font-weight: bold;
  cursor: help;
  margin-left: 5px;
  user-select: none;
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
  vertical-align: middle;
}
.tol-tooltip-trigger:hover,
.tol-tooltip-trigger.open {
  opacity: 1;
  background: var(--accent);
  color: var(--accent-ink);
}

/* Tooltip Popup Box */
.tol-tooltip-box {
  visibility: hidden;
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: normal;
  width: 250px;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  line-height: 1.4;
  text-transform: none; /* In case parent text is uppercase */
}
.tol-tooltip-trigger:hover .tol-tooltip-box,
.tol-tooltip-trigger.open .tol-tooltip-box {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
  pointer-events: auto; /* so the "Learn more" link is clickable when open */
}

/* "Learn more →" deep-link into the full doc article (opens the help drawer). */
.tol-tooltip-box .tol-learn-more {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 11px;
  color: var(--link, var(--accent));
  cursor: pointer;
  text-decoration: none;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  width: 100%;
}
.tol-tooltip-box .tol-learn-more:hover { text-decoration: underline; }

/* ── Per-page "? Help" banner button ──────────────────────────────────────── */
.tol-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tol-help-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tol-help-btn .q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 11px;
}
.tol-help-btn:hover .q { background: var(--accent-ink); color: var(--accent); }

/* ── Slide-in help drawer ─────────────────────────────────────────────────── */
.tol-help-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transition: opacity 0.2s; z-index: 10000;
}
.tol-help-backdrop.open { opacity: 1; visibility: visible; }
.tol-help-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(680px, 92vw);
  background: var(--bg);
  box-shadow: -8px 0 28px rgba(0,0,0,0.28);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  z-index: 10001;
  display: flex; flex-direction: column;
}
.tol-help-drawer.open { transform: translateX(0); }
.tol-help-drawer .drawer-head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--banner);
}
.tol-help-drawer .drawer-title {
  font-family: 'Outfit', system-ui, sans-serif; font-weight: 700; font-size: 0.95rem;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tol-help-drawer .drawer-open-tab,
.tol-help-drawer .drawer-close {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 8px; padding: 0.3rem 0.55rem; font-size: 0.8rem; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
}
.tol-help-drawer .drawer-close { font-size: 1rem; line-height: 1; padding: 0.25rem 0.5rem; }
.tol-help-drawer .drawer-open-tab:hover,
.tol-help-drawer .drawer-close:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tol-help-drawer iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }