/* ==========================================================================
   Strawberry Manuals — Light Theme, Tinted Sidebar
   Based on light_theme_styles.txt with a subtly darker left navigation menu.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg-base: #ffffff;
  --bg-elevated: #fafafa;
  --bg-surface: #f4f5f7;
  --bg-surface-hover: #eceef2;
  --bg-surface-active: #e4e7ec;

  /* Text */
  --text-primary: #24282f;
  --text-secondary: #5c6370;
  --text-muted: #8b919c;

  /* Accent */
  --accent: #2e6cf6;
  --accent-hover: #1a56db;
  --accent-muted: #5b8def;
  --accent-subtle: rgba(46, 108, 246, 0.08);

  /* Brand (top bar) */
  --brand: #ffffff;
  --brand-mid: #fafafa;
  --brand-border: rgba(0, 0, 0, 0.08);
  --text-navbar: #111827;

  /* Sidebar */
  --bg-sidebar: #eef1f6;
  --bg-sidebar-hover: #e4e8ef;
  --bg-sidebar-section: #e8ebf0;
  --bg-toc-current: #ffffff;
  --toc-text-top: #3d4554;
  --toc-text-nested: #5c6575;
  --toc-text-hover: #24282f;
  --toc-text-current: #24282f;
  --border-sidebar: rgba(0, 0, 0, 0.06);

  /* Borders & shadows */
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Semantic */
  --success-bg: #ecfdf3;
  --success-border: #a7f3c0;
  --success-text: #047857;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #b91c1c;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;
  --info-text: #1d4ed8;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --warning-text: #b45309;

  /* Layout */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition: 0.15s ease;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
}


/* --------------------------------------------------------------------------
   Base & typography
   -------------------------------------------------------------------------- */

body.media-screen {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent-subtle);
  color: var(--accent-hover);
}

.media-screen #topic-body,
.media-screen #topic-body p,
.media-screen #topic-body li,
#topic-body,
#topic-body p,
#topic-body li {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.7;
}

.media-screen #topic-header h1 {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.media-screen #topic-body h1,
.media-screen #topic-body .h1,
.media-screen #topic-body h2,
.media-screen #topic-body .h2,
.media-screen #topic-body h3,
.media-screen #topic-body .h3,
.media-screen #topic-body h4,
.media-screen #topic-body .h4,
.media-screen #topic-body h5,
.media-screen #topic-body .h5,
.media-screen #topic-body h6,
.media-screen #topic-body .h6 {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

.media-screen #topic-body h2,
.media-screen #topic-body .h2 {
  font-size: 1.5rem;
  padding-bottom: 0.35em;
  border-bottom: 1px solid var(--border);
}

.media-screen #topic-body h3,
.media-screen #topic-body .h3 {
  font-size: 1.2rem;
}

.media-screen #topic-body p.footnote {
  color: var(--text-muted);
  font-size: 13px;
}


/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

.media-screen #topic-body a,
#topic-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.media-screen #topic-body a:hover,
#topic-body a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-muted);
}

.media-screen #content .topic-prev-next a,
.media-screen #comment-container a.btn-show-comment-form {
  color: var(--accent);
  border-bottom: none;
}

.media-screen #content .topic-prev-next a:hover,
.media-screen #comment-container a.btn-show-comment-form:hover {
  color: var(--accent-hover);
}


/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.media-screen .navbar-inner {
  background: var(--brand);
  background-image: none;
  border-bottom: 1px solid var(--brand-border);
  box-shadow: var(--shadow-sm);
}

.media-screen .navbar .brand,
.media-screen .navbar .brand:hover,
.media-screen .navbar .nav > li > a,
.media-screen .navbar .nav > li > a:hover {
  color: var(--text-navbar);
  text-shadow: none;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: color var(--transition);
}

.media-screen .navbar .brand,
.media-screen .navbar .brand:hover {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.media-screen .navbar .brand.brand-large {
  font-weight: 700;
  font-size: 19px;
}

.media-screen .navbar .brand-phone {
  font-weight: 600;
  font-size: 16px;
}

.media-screen .navbar .nav > li > a {
  font-weight: 500;
  opacity: 1;
}

.media-screen .navbar .nav > li > a:hover {
  color: var(--accent);
  font-weight: 500;
}

.media-screen .navbar .nav > li > a .caret {
  border-top-color: var(--text-secondary);
  opacity: 0.8;
}

.media-screen .navbar .divider-vertical {
  background-color: var(--brand-border);
  border-right-color: transparent;
}

.media-screen .navbar-search .search-query {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  box-shadow: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.media-screen .navbar-search .search-query:focus {
  background: var(--bg-base);
  border-color: var(--accent-muted);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.media-screen .navbar-search .search-query::placeholder {
  color: var(--text-muted);
}

.media-screen .navbar .btn-navbar {
  background: var(--bg-surface);
  background-image: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.media-screen .navbar .btn-navbar:hover {
  background: var(--bg-surface-hover);
}

.media-screen .dropdown-menu {
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px 0;
}

.media-screen .dropdown-menu > li > a {
  color: var(--text-primary);
  padding: 8px 16px;
  transition: background var(--transition);
}

.media-screen .dropdown-menu > li > a:hover {
  background: var(--bg-surface);
  color: var(--accent);
}


/* --------------------------------------------------------------------------
   Sidebar & table of contents — tinted sidebar
   -------------------------------------------------------------------------- */

.well {
  background-color: var(--bg-sidebar);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.well.well-lighter {
  background-color: var(--bg-sidebar);
}

.media-screen #content .well,
.media-screen #content .well.well-lighter {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.media-screen #sidebar .sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-surface-active) transparent;
  background-color: var(--bg-sidebar);
}

.media-screen #manual-toc li a,
.media-screen #manual-toc-phone li a {
  color: var(--toc-text-nested);
  font-weight: 500;
  line-height: 1.45;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}

.media-screen #manual-toc > li > a,
.media-screen #manual-toc-phone > li > a {
  color: var(--toc-text-top);
  font-weight: 600;
  font-size: 15px;
}

.media-screen #manual-toc li ul a,
.media-screen #manual-toc-phone li ul a {
  color: var(--toc-text-nested);
  font-weight: 500;
  font-size: 14px;
}

.media-screen #manual-toc li.active > a,
.media-screen #manual-toc-phone li.active > a {
  background-color: var(--bg-toc-current);
  color: var(--toc-text-current);
  font-weight: 600;
}

.media-screen #manual-toc li:not(.active) > a:hover,
.media-screen #manual-toc li:not(.active) li a:hover,
.media-screen #manual-toc-phone li:not(.active) > a:hover,
.media-screen #manual-toc-phone li:not(.active) li a:hover {
  background-color: var(--bg-sidebar-hover);
  color: var(--toc-text-hover);
  font-weight: 500;
}

.media-screen #manual-toc li.active > a {
  border-left: 3px solid var(--accent);
  padding-left: 21px;
  background-color: var(--bg-toc-current);
  color: var(--toc-text-current);
}

.media-screen #manual-toc li.divider,
.media-screen #manual-toc-phone li.divider {
  border-top-color: var(--border-sidebar);
  border-bottom-color: transparent;
}


/* --------------------------------------------------------------------------
   TOC collapse handle (replaces vgrabber.png)
   -------------------------------------------------------------------------- */

.media-screen #sidebar .box-toc {
  position: relative;
  overflow: visible;
}

.media-screen .box-gn-icon-menu-outer {
  border-left-color: var(--border-sidebar);
}

.media-screen .gn-icon-menu-inner {
  border-left-color: var(--border-sidebar);
  z-index: 20;
  overflow: visible;
  width: 26px;
  right: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-screen .gn-icon-menu-inner .arrow-2-3,
.media-screen .box-gn-icon-menu-outer .alert.gn-icon-menu-outer {
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: right var(--transition), margin-left var(--transition), background var(--transition);
}

.media-screen .gn-icon-menu-inner .arrow-2-3 {
  position: relative;
  right: auto;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 22px;
  height: 64px;
  padding: 8px 0;
  text-align: center;
  float: none;
}

.media-screen .gn-icon-menu-inner:hover > .arrow-2-3 {
  background: var(--bg-sidebar-hover);
}

.media-screen .gn-icon-menu-inner .arrow-2-3 > img,
.media-screen .box-gn-icon-menu-outer .alert.gn-icon-menu-outer > img {
  display: none;
}

.media-screen .gn-icon-menu-inner .arrow-2-3::before,
.media-screen .gn-icon-menu-inner .arrow-2-3::after {
  content: '';
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.45;
  box-shadow: 4px 0 0 var(--text-muted);
  flex-shrink: 0;
}

.media-screen .gn-icon-menu-inner .arrow-2-3 > i.icon-chevron-left {
  display: block;
  float: none;
  width: 10px;
  opacity: 0.7;
  margin: 0;
}

.media-screen .box-gn-icon-menu-outer .alert.gn-icon-menu-outer {
  background: var(--bg-base);
  border-color: var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  padding: 8px 0;
  width: 22px;
}

.media-screen .box-gn-icon-menu-outer .alert.gn-icon-menu-outer::before,
.media-screen .box-gn-icon-menu-outer .alert.gn-icon-menu-outer::after {
  content: '';
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.45;
  box-shadow: 4px 0 0 var(--text-muted);
  flex-shrink: 0;
}

.media-screen .box-gn-icon-menu-outer .alert.gn-icon-menu-outer:hover {
  background: var(--bg-sidebar-hover);
}

.media-screen .box-gn-icon-menu-outer .alert.gn-icon-menu-outer > i.icon-chevron-right {
  display: block;
  float: none;
  width: 10px;
  opacity: 0.5;
  margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Content area
   -------------------------------------------------------------------------- */

.media-screen #topic-header.page-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.media-screen #topic-header .print-page {
  background: var(--bg-base);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  opacity: 1;
}

.media-screen #topic-header .print-page:hover {
  background: var(--bg-surface);
  border-color: var(--accent-muted);
  color: var(--text-primary);
}

.media-screen #topic-header .print-page .icon-print {
  opacity: 1;
}

.media-screen #topic-body ul,
.media-screen #topic-body ol {
  padding-left: 1.4em;
}

.media-screen #topic-body li {
  margin-bottom: 0.35em;
}

.media-screen #topic-body li::marker {
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   Images & media
   -------------------------------------------------------------------------- */

.media-screen #topic-body img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 1.25em;
  max-width: 100%;
  height: auto;
}

.media-screen #topic-body img:hover {
  box-shadow: var(--shadow-md);
}


/* --------------------------------------------------------------------------
   Code & preformatted text
   -------------------------------------------------------------------------- */

.media-screen #topic-body code,
.media-screen code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}

.media-screen #topic-body pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1em 1.25em;
  overflow-x: auto;
}

.media-screen #topic-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.media-screen #topic-body table {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.media-screen #topic-body table th,
.media-screen #topic-body table td {
  border-color: var(--border);
  padding: 10px 14px;
  color: var(--text-primary);
}

.media-screen #topic-body table th {
  background-color: var(--bg-surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.media-screen #topic-body table tr:nth-child(even) td {
  background-color: var(--bg-elevated);
}

.media-screen #topic-body table tr:hover td {
  background-color: var(--accent-subtle);
}


/* --------------------------------------------------------------------------
   Banners & alerts
   -------------------------------------------------------------------------- */

.media-screen #topic-body .banner {
  position: relative;
  display: block;
  padding: 14px 16px 14px 2.5em;
  border-radius: var(--radius-md);
  text-shadow: none;
  border-width: 1px;
  border-style: solid;
  line-height: 1.55;
}

.media-screen #topic-body .banner i {
  position: absolute;
  left: 14px;
  top: 15px;
  display: block;
  width: 20px;
  height: 20px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  font-style: normal;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.media-screen #topic-body .banner.tip i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231d4ed8' d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E");
}

.media-screen #topic-body .banner.important i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b91c1c' d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.media-screen #topic-body .banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-bottom: none;
}

.media-screen #topic-body .banner a:hover {
  opacity: 0.85;
  border-bottom: none;
}

.media-screen #topic-body .banner.important {
  color: var(--error-text);
  background-color: var(--error-bg);
  border-color: var(--error-border);
}

.media-screen #topic-body .banner.tip {
  color: var(--info-text);
  background-color: var(--info-bg);
  border-color: var(--info-border);
}

.media-screen .alert {
  border-radius: var(--radius-sm);
  text-shadow: none;
  border-width: 1px;
  border-style: solid;
}

.media-screen .alert-error {
  color: var(--error-text);
  background-color: var(--error-bg);
  border-color: var(--error-border);
}

.media-screen .alert-success {
  color: var(--success-text);
  background-color: var(--success-bg);
  border-color: var(--success-border);
}


/* --------------------------------------------------------------------------
   Prev / next navigation
   -------------------------------------------------------------------------- */

.media-screen #content .topic-prev-next {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
  margin-top: 2em;
}

.media-screen #content .topic-prev-next .prev,
.media-screen #content .topic-prev-next .next {
  display: flex;
  align-items: center;
  gap: 4px;
}

.media-screen #content .topic-prev-next .next {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.media-screen #content .topic-prev-next .icon {
  position: static;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.media-screen #content .topic-prev-next .icon i {
  opacity: 0.4;
  margin-top: 0;
  vertical-align: middle;
}

.media-screen #content .topic-prev-next a {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.media-screen #content .topic-prev-next .prev a,
.media-screen #content .topic-prev-next .next a {
  padding-left: 10px;
  padding-right: 10px;
}

.media-screen #content .topic-prev-next a:hover {
  background: var(--bg-surface);
}


/* --------------------------------------------------------------------------
   Feedback & footer
   -------------------------------------------------------------------------- */

.media-screen #feedback-container {
  border-radius: var(--radius-md);
}

.media-screen #feedback-container .contact-text {
  color: var(--text-muted) !important;
}

.media-screen #feedback-container .contact-text a {
  color: var(--accent);
}

.media-screen #feedback-container h3 {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.media-screen #footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}


/* --------------------------------------------------------------------------
   Search results
   -------------------------------------------------------------------------- */

.media-screen .search-result h3 a,
.media-screen .search-result h4 a {
  color: var(--accent);
}

.media-screen .search-result h4 {
  color: var(--text-secondary);
}

.media-screen .search-result p {
  color: var(--text-primary);
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.media-screen .btn {
  border-radius: var(--radius-sm);
  text-shadow: none;
  box-shadow: none;
  transition: background var(--transition), border-color var(--transition);
}

.media-screen .btn-mini {
  padding: 4px 10px;
  font-size: 12px;
}


/* --------------------------------------------------------------------------
   Scrollbars (WebKit)
   -------------------------------------------------------------------------- */

.media-screen ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.media-screen ::-webkit-scrollbar-track {
  background: transparent;
}

.media-screen ::-webkit-scrollbar-thumb {
  background: var(--bg-surface-active);
  border-radius: 4px;
}

.media-screen ::-webkit-scrollbar-thumb:hover {
  background: #c5c9d0;
}


/* --------------------------------------------------------------------------
   Glyphicons (default dark variant for light backgrounds)
   -------------------------------------------------------------------------- */

[class^="icon-"],
[class*=" icon-"] {
  vertical-align: middle;
  margin-top: 0;
}