/* =============================================================================
   know.css — Know project styles
   Extends main.css — do not duplicate tokens or reset rules here
   Accent: #ff5c00
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Accent tokens
   Set here as the canonical source — also injected inline in templates
   for render-blocking safety
----------------------------------------------------------------------------- */

:root {
  --accent:       #ff5c00;
  --accent-hover: #ff7a2e;
  --accent-muted: rgba(255, 92, 0, 0.12);
}


/* -----------------------------------------------------------------------------
   First-visit privacy notice
----------------------------------------------------------------------------- */

.notice-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.notice-overlay[hidden] {
  display: none;
}

.notice-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  max-width: 28rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.notice__dismiss {
  flex-shrink: 0;
}

.notice-source a {
  color: var(--accent);
}

.notice-source a:hover {
  color: var(--accent-hover);
}

.notice-logo {
  height: 32px;
  width: auto;
  display: block;
  margin-bottom: var(--space-2);
}


/* -----------------------------------------------------------------------------
   Hero
----------------------------------------------------------------------------- */

.know-hero__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.know-hero__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  max-width: 40rem;
}


/* -----------------------------------------------------------------------------
   Progress bar
----------------------------------------------------------------------------- */

.progress-bar-wrap {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background-color: var(--bg);
  padding-block: var(--space-2);
  z-index: 9;
}

.progress-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.progress-bar {
  height: 6px;
  background-color: var(--bg-surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  width: 0%;
  background-color: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 400ms ease;
}


/* -----------------------------------------------------------------------------
   Guide layout
----------------------------------------------------------------------------- */

.know-guide {
  padding-block-start: calc(var(--space-4) + 96px);
  padding-block-end: var(--space-6);
}


/* -----------------------------------------------------------------------------
   Group
----------------------------------------------------------------------------- */

.group {
  margin-bottom: var(--space-8);
}

.group__header {
  margin-bottom: var(--space-3);
}

.group__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.group__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 48rem;
}

.group__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}


/* -----------------------------------------------------------------------------
   Section item — accordion
----------------------------------------------------------------------------- */

.section-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.section-item--big-tech {
  border-color: var(--accent-muted);
}

.section-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--bg-surface);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 150ms ease;
}

.section-item__trigger:hover {
  background-color: var(--accent-muted);
}

.section-item__trigger[aria-expanded="true"] {
  background-color: var(--accent-muted);
  border-bottom: 1px solid var(--border);
}

.section-item__title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.section-item__status {
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.section-item__chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 200ms ease;
}

.section-item__trigger[aria-expanded="true"] .section-item__chevron {
  transform: rotate(180deg);
}

.section-item__body {
  padding: var(--space-3);
  background-color: var(--bg);
}

.section-item__body[hidden] {
  display: none;
}

.section-item__content {
  margin-bottom: var(--space-3);
}

.section-item__content p {
  margin-bottom: var(--space-2);
}

.section-item__content ul,
.section-item__content ol {
  list-style: disc;
  padding-left: var(--space-3);
  margin-bottom: var(--space-2);
}

.section-item__content li {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.section-item__content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-item__content a:hover {
  color: var(--accent-hover);
}

.section-item__content strong {
  font-weight: var(--weight-bold);
}

.section-item__content h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
  margin-top: var(--space-3);
  color: var(--text-primary);
}

.section-item__content details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-block: var(--space-2);
}

.section-item__content summary {
  font-weight: var(--weight-bold);
  cursor: pointer;
  color: var(--accent);
  list-style: none;
}

.section-item__content summary::-webkit-details-marker {
  display: none;
}

.section-item__content details[open] summary {
  margin-bottom: var(--space-2);
}

.section-item__content details ul {
  list-style: disc;
  padding-left: var(--space-3);
}


/* -----------------------------------------------------------------------------
   Providers, benefits, further reading
----------------------------------------------------------------------------- */

.section-item__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.section-item__providers,
.section-item__benefits,
.section-item__further {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.providers-list,
.further-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.provider-link {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.provider-link:hover {
  background-color: var(--accent-muted);
}

.benefits-list {
  list-style: disc;
  padding-left: var(--space-3);
}

.benefits-list li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  line-height: var(--leading-body);
}

.further-list {
  flex-direction: column;
  gap: var(--space-1);
}

.further-list a {
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.further-list a:hover {
  color: var(--accent-hover);
}


/* -----------------------------------------------------------------------------
   Section footer — Done button
----------------------------------------------------------------------------- */

.section-item__footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* completed state — trigger row */
.section-item--complete .section-item__trigger {
  background-color: var(--accent);
}

.section-item--complete .section-item__trigger:hover {
  background-color: var(--accent-hover);
}

.section-item--complete .section-item__title {
  color: var(--color-white-pure);
}

.section-item--complete .section-item__chevron {
  color: var(--color-white-pure);
}

/* done button — complete state */
.section-item__done--complete {
  background-color: transparent;
  color: var(--color-white-pure);
  border-color: var(--color-white-pure);
  cursor: pointer;
}

.section-item__done--complete:hover {
  background-color: rgba(255, 255, 255, 0.15); /* --color-white-pure at 15% opacity */
}


/* -----------------------------------------------------------------------------
   Completion prompt
----------------------------------------------------------------------------- */

.completion-prompt {
  padding-block: var(--space-6);
  text-align: center;
}

.completion-prompt[hidden] {
  display: none;
}

.completion-prompt p {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}


/* -----------------------------------------------------------------------------
   Know pages — next-level, complete
----------------------------------------------------------------------------- */

.know-page {
  padding-block: var(--space-8);
}

.know-page__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.know-page__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  margin-bottom: var(--space-2);
}

.know-page__desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.know-page__body {
  margin-bottom: var(--space-6);
}

.know-page__body h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.know-page__body p {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
}

.know-page__body ul {
  list-style: disc;
  padding-left: var(--space-3);
  margin-bottom: var(--space-3);
}

.know-page__body li {
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.know-page__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.know-page__body a:hover {
  color: var(--accent-hover);
}

.know-page__body strong {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.know-page__body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin-block: var(--space-4);
}

.know-page__body details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-block: var(--space-2);
}

.know-page__body summary {
  font-weight: var(--weight-bold);
  cursor: pointer;
  color: var(--accent);
  list-style: none;
}

.know-page__body summary::-webkit-details-marker {
  display: none;
}

.know-page__back,
.know-page__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}


/* -----------------------------------------------------------------------------
   Site tagline
----------------------------------------------------------------------------- */

.site-tagline {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}


/* -----------------------------------------------------------------------------
   Responsive — mobile first, scale up
----------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .know-hero__title {
    font-size: var(--text-2xl);
  }

  .section-item__trigger {
    padding: var(--space-2) var(--space-4);
  }

  .section-item__body {
    padding: var(--space-4);
  }
}

/* task list checkboxes — remove bullet point */
.section-item__content ul li:has(> input[type="checkbox"]),
.section-item__content ul li:has(> p > input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.5em;
}