/* ============================================================
   help.css — Readable for Chrome
   Extension-specific additions on top of readablebrand.css.
   Keep this file slim — anything reusable belongs in the
   shared brand stylesheet.
   ============================================================ */

/* -----------------------------------------------------------
   Self-hosted Poppins
   Bundled with the extension so the help page works offline
   and on networks that block Google Fonts. Files live in
   help/fonts/. Five weights × two subsets (Latin + Latin-ext);
   ~80 KB total. Ranges below are the standard Google Fonts
   subset boundaries — the browser will only download a file
   if the page actually uses characters in its range.
   ----------------------------------------------------------- */

/* Weight 400 — body, paragraphs */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Weight 500 — sidebar links, footer body */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Weight 600 — site-nav, breadcrumbs, FAQ links, section-nav */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Weight 700 — h2/h3 in content, brand name, current sidebar item, strong */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Weight 800 — h1, sidebar h2 label, FAQ dt, section labels */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/poppins-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/poppins-800-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------
   Anchor scroll offset
   The brand site has a sticky header (~78px). When jumping to
   an in-page anchor, leave room so the heading isn't hidden.
   ----------------------------------------------------------- */
.content section[id] {
  scroll-margin-top: 90px;
}
.content h3[id],
.content h4[id] {
  scroll-margin-top: 90px;
}

/* -----------------------------------------------------------
   <kbd> — keyboard shortcut chips
   The brand CSS doesn't style <kbd>; this matches the tone of
   the rest of the brand identity (sky-faint background, indigo
   text, subtle shadow).
   ----------------------------------------------------------- */
kbd {
  display: inline-block;
  font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.85em;
  font-weight: 600;
  padding: 2px 7px;
  background: var(--sky-faint);
  color: var(--title-indigo);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: 0.05em;
}

/* -----------------------------------------------------------
   .note — inline known-issue / cautionary callout
   Used for things like the select-to-speak / clipboard conflict.
   Lighter-weight than the .help-callout pattern (which is for
   "need more help" footers).
   ----------------------------------------------------------- */
.content p.note {
  background: #fff8e6;
  border-left: 4px solid #d99a00;
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 16px 0;
  color: var(--body-text);
  font-size: 0.94rem;
}
.content p.note strong {
  color: #8a5c00;
}

/* -----------------------------------------------------------
   Sidebar — softer .current state for nested sub-items
   The brand CSS sets the same brand-sky background for any
   .current item. For deeply nested sub-items the result is
   a bit heavy; soften it.
   ----------------------------------------------------------- */
.sidebar ul ul a.current,
.sidebar ul ul a[aria-current="page"] {
  background: var(--sky-faint);
}

/* -----------------------------------------------------------
   Tables — keyboard-shortcuts table tightening
   The default brand table styling is right for data tables.
   For the shortcuts list we want less padding.
   ----------------------------------------------------------- */
.content table.shortcuts th,
.content table.shortcuts td {
  padding: 7px 10px;
}

/* -----------------------------------------------------------
   Figure spacing
   Brand CSS handles figures generically. Tighten the margin
   when a figure immediately follows an h3.
   ----------------------------------------------------------- */
.content h3 + figure {
  margin-top: 10px;
}

/* -----------------------------------------------------------
   .section-nav — prev/next pager between sections
   Saves users having to scroll back to the sidebar. Uses brand
   tokens; behaves cleanly when only one of prev/next is present.
   ----------------------------------------------------------- */
.content .section-nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  margin: 36px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.content .section-nav a,
.content .section-nav span {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--sky-faint);
  color: var(--title-indigo);
  font-weight: 600;
  font-size: 0.94rem;
  border-bottom: none;
  transition: background 0.12s, transform 0.12s;
}
.content .section-nav a:hover {
  background: var(--brand-sky);
  border-bottom: none;
  text-decoration: none;
  transform: translateY(-1px);
}
.content .section-nav-prev {
  text-align: left;
}
.content .section-nav-next {
  text-align: right;
}
/* Empty placeholder span keeps the next link right-aligned when
   there is no previous link (first section). */
.content .section-nav span.section-nav-prev:empty,
.content .section-nav span.section-nav-next:empty {
  background: transparent;
  pointer-events: none;
}

/* On narrow viewports, stack prev/next vertically rather than
   squeezing both into one row. */
@media (max-width: 540px) {
  .content .section-nav {
    flex-direction: column;
  }
  .content .section-nav-prev,
  .content .section-nav-next {
    text-align: left;
  }
}

/* -----------------------------------------------------------
   FAQ section — make the dt feel clickable-ish
   Brand CSS styles dt as bold indigo. Keep that, but make the
   spacing a bit roomier and cue questionness with a subtle bullet.
   ----------------------------------------------------------- */
.content .faq-section dt {
  position: relative;
  padding-left: 22px;
}
.content .faq-section dt::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: var(--brand-indigo);
  color: var(--pure-white);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.content .faq-section dd {
  padding-left: 22px;
}

/* -----------------------------------------------------------
   help-callout — paragraph margin reset
   help-callout content may include a <p>; brand CSS gives <p>
   a 14px bottom margin which adds unwanted whitespace inside
   the callout box. Strip it.
   ----------------------------------------------------------- */
.content .help-callout p {
  margin: 0;
}

/* -----------------------------------------------------------
   Preview banner (public version only)
   Sits above the sticky header. Uses warm-yellow tones to
   feel like a status banner without being alarming.
   ----------------------------------------------------------- */
.preview-banner {
  background: #fff3c4;
  border-bottom: 1px solid #e5c97a;
  color: #5a4400;
  font-size: 0.92rem;
  position: relative;
  z-index: 200; /* above the sticky site-header */
}
.preview-banner-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.preview-banner strong {
  color: #5a4400;
  font-weight: 700;
  white-space: nowrap;
}
.preview-banner span {
  flex: 1 1 auto;
  min-width: 0;
}

/* -----------------------------------------------------------
   Install callout (public version only)
   Sits at the top of the content under the intro paragraph.
   Different from .help-callout (which is a "need more help"
   footer) and from .note (which is a known-issue marker).
   ----------------------------------------------------------- */
.content .install-callout {
  background: linear-gradient(135deg, var(--brand-sky) 0%, var(--brand-lavender) 100%);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin: 24px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.content .install-callout > div:first-child {
  flex: 1 1 320px;
}
.content .install-callout strong {
  display: block;
  color: var(--title-indigo);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.content .install-callout p {
  margin: 0;
  color: var(--body-text);
  font-size: 0.94rem;
  line-height: 1.5;
}
.content .install-callout-actions {
  flex: 0 1 auto;
}
.install-cta-primary {
  display: inline-block;
  padding: 12px 22px;
  background: var(--title-indigo);
  color: var(--pure-white);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.96rem;
  text-decoration: none;
  border-bottom: none;
  transition: background 0.12s, transform 0.12s;
}
.install-cta-primary:hover {
  background: var(--brand-indigo);
  color: var(--pure-white);
  transform: translateY(-1px);
  text-decoration: none;
  border-bottom: none;
}