/* ==========================================================================
   StudieSync · Hjælp, funktioner og guides (P4 / UI v2 D1-stil)
   Roligt, typografisk stærkt og kompakt overblik i papir-æstetik.
   ========================================================================== */

/* --- Story Cards / Kender du det? (Kompakt og rolig) --- */
.ss-story-cards {
  position: relative;
  max-width: 760px;
  margin: 20px auto 24px;
  box-sizing: border-box;
  width: 100%;
}
.ss-story-deck {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.ss-story-cards.is-enhanced .ss-story-deck {
  perspective: 1200px;
  min-height: 230px;
}
.ss-story-cards.is-enhanced .ss-story-card {
  display: none;
  width: 100%;
}
.ss-story-cards.is-enhanced .ss-story-card.is-active {
  display: block;
}
.ss-story-cards.is-enhanced .ss-story-card-inner {
  position: relative;
  width: 100%;
  min-height: 230px;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.4,1);
  cursor: pointer;
  border-radius: var(--ss-radius);
  outline: none;
}
.ss-story-cards.is-enhanced .ss-story-card-inner:hover {
  border-color: #cfcbc0;
}
.ss-story-cards.is-enhanced .ss-story-card-inner:focus-visible {
  outline: 2px solid var(--ss-green);
  outline-offset: 2px;
}
.ss-story-cards.is-enhanced .ss-story-card.is-flipped .ss-story-card-inner {
  transform: rotateY(180deg);
}
.ss-story-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--ss-radius);
  padding: 16px 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--ss-line);
  background: white;
  box-shadow: none;
}
.ss-story-face-front {
  border-top: 3px solid #b45309;
}
.ss-story-face-back {
  border-top: 3px solid var(--ss-green);
  transform: rotateY(180deg);
}
.ss-story-face-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ss-story-badge {
  font-size: 11px;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.ss-story-badge-without {
  background: #fdf5e7;
  color: #92400e;
  border: 1px solid #fae1b8;
}
.ss-story-badge-with {
  background: #edf6f0;
  color: #1e5439;
  border: 1px solid #d0e5d6;
}
.ss-story-badge-summary {
  background: var(--ss-soft);
  color: var(--ss-ink);
  border: 1px solid var(--ss-line);
}
.ss-story-body-grid {
  display: flex;
  gap: 20px;
  align-items: center;
  flex: 1;
  min-height: 0;
  margin: 4px 0;
}
.ss-story-text-col {
  flex: 1;
  min-width: 0;
}
.ss-story-illustration-col {
  width: 90px;
  height: 75px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-story-illustration {
  max-width: 100%;
  max-height: 100%;
}
.ss-story-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.2px;
  margin: 0 0 6px;
  color: var(--ss-ink);
  line-height: 1.3;
}
.ss-story-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ss-muted);
  margin: 0;
}
.ss-story-flip-prompt {
  margin-top: 6px;
}
.ss-story-flip-hint {
  font-size: 12px;
  color: var(--ss-muted);
  font-weight: 550;
}

/* Summary card (Kort 10) */
.ss-story-card-summary .ss-story-summary-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.ss-story-summary-title {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.2px;
  margin: 0 0 6px;
  color: var(--ss-ink);
}
.ss-story-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 6px 0 10px;
  list-style: none;
}
.ss-story-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--ss-soft);
  border: 1px solid var(--ss-line);
  border-radius: 4px;
  font-size: 12px;
  color: var(--ss-ink);
}
.ss-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ss-green);
}
.ss-story-summary-actions {
  margin-top: 6px;
}
.ss-story-summary-note {
  font-size: 12px;
  color: var(--ss-muted);
  margin: 4px 0 0;
}

/* Story Controls */
.ss-story-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.ss-story-btn {
  min-height: 38px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 550;
  border-radius: 6px;
  border: 1px solid var(--ss-line);
  background: white;
  color: var(--ss-ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ss-story-btn:hover:not(:disabled) {
  background: var(--ss-soft);
  border-color: #cfcbc0;
}
.ss-story-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.ss-story-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ss-story-dots {
  display: flex;
  gap: 5px;
}
.ss-story-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cfcbc0;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ss-story-dot.is-active {
  background: var(--ss-green);
}
.ss-story-counter {
  font-size: 12px;
  color: var(--ss-muted);
  font-variant-numeric: tabular-nums;
}

/* Swipe hint on mobile */
.ss-story-swipe-hint {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(31, 36, 33, .9);
  color: white;
  border-radius: 4px;
  font-size: 11px;
  pointer-events: none;
}
@media(min-width: 641px) {
  .ss-story-swipe-hint {
    display: none !important;
  }
}

/* Non-enhanced fallback (JS off) */
.ss-story-cards:not(.is-enhanced) .ss-story-card {
  display: block;
  margin-bottom: 14px;
  border-radius: var(--ss-radius);
  overflow: hidden;
}
.ss-story-cards:not(.is-enhanced) .ss-story-card-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ss-story-cards:not(.is-enhanced) .ss-story-face {
  position: static;
  padding: 14px 16px;
  transform: none;
}


/* ==========================================================================
   Funktioner (#funktioner) i ren række/liste-form
   Rolig informationstæthed uden tunge kasser eller store ikoner
   ========================================================================== */
.ss-features-section {
  padding: 24px 0 16px;
  border-top: 1px solid var(--ss-line);
  scroll-margin-top: 24px;
}
.ss-features-section h2 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.3px;
  margin: 0 0 16px;
  color: var(--ss-ink);
}
.ss-features-block {
  margin-bottom: 24px;
}
.ss-features-block h3 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.2px;
  margin: 0 0 10px;
  color: var(--ss-ink);
}

/* Lister/rækker i stedet for store kort */
.ss-features-cards-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ss-line);
  margin: 0;
  gap: 0;
}
.ss-feature-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ss-line);
  border-radius: 0;
  padding: 12px 0;
  margin: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ss-feature-card:hover {
  border-color: var(--ss-line);
  box-shadow: none;
}
.ss-feature-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.ss-feature-card-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--ss-ink);
  line-height: 1.35;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.ss-feature-card-title > span:first-child {
  font-size: 15px;
  line-height: 1;
}
.ss-feature-badge-new {
  background: #edf6f0;
  color: #1e5439;
  border: 1px solid #d0e5d6;
  font-size: 11px;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .4px;
  flex-shrink: 0;
}
.ss-feature-card-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ss-muted);
  margin: 0;
}
.ss-feature-card-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
  font-weight: 550;
  color: var(--ss-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Enkle rolige lister for mangler og planlagt */
.ss-features-simple-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--ss-line);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ss-features-simple-list li {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ss-line);
  border-radius: 0;
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ss-muted);
}

/* Banner til Gemini Notebook guide (kun én primær knap i sektionen) */
.ss-guide-feature-banner {
  margin: 20px 0 24px;
}
.ss-guide-feature-banner .ss-button.ss-primary {
  font-size: 14px;
  padding: 10px 18px;
}


/* ==========================================================================
   Gemini Notebook Guide (P4)
   Roligt trin-for-trin overblik med ens overskrifter og afbalancerede medier
   ========================================================================== */
.ss-guide-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ss-muted);
  margin: 6px 0 16px;
  overflow-wrap: anywhere;
}
.ss-guide-active-course {
  margin-bottom: 16px;
}
.ss-badge-notebook {
  background: var(--ss-soft);
  color: var(--ss-green);
  border: 1px solid var(--ss-line);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}
.ss-badge-notebook.ss-badge--plain:before,
.ss-badge-notebook.ss-badge--plain::before {
  content: none !important;
  display: none !important;
}
.ss-guide-steps-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.ss-guide-step-card {
  background: white;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  box-shadow: none;
  transition: border-color .15s;
}
.ss-guide-step-card:hover {
  border-color: #cfcbc0;
}
.ss-guide-step-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.ss-guide-step-badge {
  background: var(--ss-soft);
  color: var(--ss-muted);
  border: 1px solid var(--ss-line);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ss-guide-step-header h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.2px;
  color: var(--ss-ink);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.ss-guide-step-media {
  width: 100%;
  max-width: 480px;
  background: var(--ss-bg);
  border: 1px solid var(--ss-line);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-guide-step-media img {
  width: 100%;
  height: auto;
  display: block;
}
.ss-guide-step-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ss-ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.ss-guide-step-card .ss-actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


/* ==========================================================================
   Studiepakker og Google Drev Forbindelse (P4)
   Kompakte connector-rækker og rolige pakkekort
   ========================================================================== */
.ss-package-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ss-package-tools form {
  margin: 0;
}
.ss-package-drive-notice {
  background: var(--ss-soft);
  border-left: 3px solid var(--ss-green);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 16px 0 24px;
}
.ss-package-drive-notice h2 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.2px;
  margin: 0 0 6px;
  color: var(--ss-ink);
}
.ss-package-drive-notice p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ss-muted);
  margin: 0 0 12px;
}
.ss-package-drive-guide {
  background: white;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 18px 20px;
  margin: 16px 0 24px;
}
.ss-package-drive-guide h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.2px;
  margin: 2px 0 6px;
  color: var(--ss-ink);
}
.ss-package-drive-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ss-muted);
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
.ss-package-connectors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.ss-package-connector-card {
  background: var(--ss-bg);
  border: 1px solid var(--ss-line);
  border-left: 3px solid var(--ss-green);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.ss-package-connector-card h3 {
  font-size: 15px;
  font-weight: 650;
  margin: 0;
  color: var(--ss-ink);
  overflow-wrap: anywhere;
}
.ss-package-connector-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ss-muted);
  margin: 0;
  overflow-wrap: anywhere;
}
.ss-package-connector-card .ss-linkbutton {
  font-size: 13px;
  font-weight: 550;
  color: var(--ss-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* Pakkeliste */
.ss-package {
  background: white;
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 18px 20px;
  margin: 12px 0;
  transition: border-color .15s;
}
.ss-package:hover {
  border-color: #cfcbc0;
}
.ss-package header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ss-package header h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.2px;
  margin: 2px 0 0;
  color: var(--ss-ink);
  overflow-wrap: anywhere;
}
.ss-package p.ss-muted {
  font-size: 13px;
  margin: 2px 0 8px;
}
.ss-package > p:not(.ss-muted) {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ss-ink);
  margin: 6px 0;
}
.ss-package-drive-link {
  margin: 14px 0 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ss-package-zip-details {
  border: none;
  border-top: 1px solid var(--ss-line);
  margin-top: 12px;
  padding-top: 4px;
}
.ss-package-zip-toggle {
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--ss-muted);
  padding: 6px 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.ss-package-zip-toggle:hover {
  color: var(--ss-ink);
}
.ss-package-zip-details[open] .ss-package-download {
  margin-top: 8px;
  padding: 10px 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ss-package-download label {
  font-size: 13px;
  color: var(--ss-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ss-package-download select {
  padding: 6px 10px;
  border: 1px solid var(--ss-line);
  border-radius: 6px;
  font-size: 13px;
  background: white;
}


/* ==========================================================================
   Mobil-tilpasning (320px - 640px)
   ========================================================================== */
@media(max-width: 640px) {
  .ss-story-cards {
    margin: 14px 0 20px;
  }
  .ss-story-cards.is-enhanced .ss-story-deck,
  .ss-story-cards.is-enhanced .ss-story-card-inner {
    min-height: 250px;
  }
  .ss-story-face {
    padding: 14px 16px;
  }
  .ss-story-body-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ss-story-illustration-col {
    display: none;
  }
  .ss-story-title {
    font-size: 15px;
  }
  .ss-story-text {
    font-size: 13px;
  }
  .ss-story-btn {
    min-height: 44px;
    padding: 8px 12px;
  }
  .ss-guide-step-card {
    padding: 16px;
  }
  .ss-guide-step-header h2 {
    font-size: 16.5px;
  }
  .ss-package {
    padding: 16px;
  }
  .ss-package-drive-guide {
    padding: 16px;
  }
  .ss-features-section h2 {
    font-size: 18px;
  }
  .ss-feature-card {
    padding: 10px 0;
  }
  .ss-feature-card-title {
    font-size: 14.5px;
  }
  .ss-feature-card-desc {
    font-size: 13px;
  }
}

@media(max-width: 360px) {
  .ss-story-counter {
    display: none;
  }
}

/* ==========================================================================
   v5 (fase 2 D): Hjælp som ikon-kort-gitter + PWA-hjælp + emner i v5-stil
   ========================================================================== */
.v5 .ss-shell.ss-guide{max-width:960px}
.hj-grid{margin:0 0 18px}
.v5 .hj-grid .hcard{display:flex;flex-direction:column;align-items:flex-start;transition:box-shadow .15s,transform .15s;min-width:0}
.v5 .hj-grid .hcard:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.v5 .hj-grid .hcard b{line-height:1.35;margin-bottom:2px;overflow-wrap:break-word}
.v5 .hj-grid .hcard span:not(.ic){display:block;line-height:1.45;overflow-wrap:break-word}
.hj-phone{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;margin:0 0 28px;scroll-margin-top:20px}
.hj-phone .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--hover);color:var(--ink2);flex:none}
.hj-phone h2{font-size:15px;margin:4px 0 4px;font-weight:650}
.hj-phone p{margin:0 0 8px;color:var(--mute);font-size:13.5px}
.hj-phone ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink2)}
.hj-phone li{margin:3px 0}
.hj-topics-section{margin:28px 0 0}
.hj-topics-title{font-size:16px;font-weight:700;margin:0 0 14px;letter-spacing:-.01em}
.v5 .ss-guide details,.v5 .hj-topics-list details{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh1);margin:8px 0;padding:0 16px;scroll-margin-top:20px}
.v5 .ss-guide details>summary,.v5 .hj-topics-list details>summary{min-height:46px;display:flex;align-items:center;font-weight:600;font-size:14px;cursor:pointer}
.v5 .ss-guide details>div,.v5 .hj-topics-list details>div{padding:0 0 14px;font-size:14px;color:var(--ink2)}
.v5 .hj-topics-list details details{background:transparent;border:1px solid var(--line);box-shadow:none;margin:12px 0 8px;padding:0 14px}
.v5 .hj-topics-list details details>summary{min-height:40px;font-size:13.5px}
.v5 .ss-guide details:target,.v5 .hj-topics-list details:target,.v5 .hj-topics-section details:target{border-color:var(--accent);box-shadow:var(--sh2)}
.v5 .ss-guide-index{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 8px}
.v5 .ss-guide-index a{display:inline-flex;align-items:center;height:30px;min-height:0;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:550;color:var(--ink2);text-decoration:none}
.v5 .ss-guide-feature-banner{margin:20px 0 24px}
.v5 .ss-guide-feature-banner .btn{max-width:100%;white-space:normal;height:auto;min-height:36px;padding:8px 14px;line-height:1.35;text-align:center}
.v5 .ss-guide #safari-mac{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh1)}
@media (max-width:900px){.v5 .hj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v5 .hj-grid .hcard{padding:14px}.v5 .hj-grid .hcard .ic{margin-bottom:10px}}
@media (max-width:340px){.v5 .hj-grid{grid-template-columns:minmax(0,1fr)}}
.v5 .ss-guide .ss-card,.v5 .ss-guide .ss-package{border-radius:14px;border-color:var(--line);box-shadow:var(--sh1);background:var(--panel)}