/**
 * Planix — Help & Support
 *
 * Same document shell as What's New and the legal pages, extended with a
 * support card, an FAQ accordion built on native <details>/<summary> (no JS,
 * keyboard and screen-reader friendly for free), and a link grid.
 *
 * Theme switching: js/theme.js applies the `dark` class to BOTH <html> and
 * <body>, so overrides are scoped to `.dark` (an ancestor match) and never to
 * `.dark body`, which silently fails when the class lands on <body>.
 */

:root{
  color-scheme: light;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --brand:#2563eb;
  --brand-ink:#1d4ed8;
  --soft:#eff6ff;
  --card:#ffffff;
  --canvas:#f8fafc;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ===== Page content column ===== */
.shell{width:100%;max-width:920px;margin:0 auto;padding:40px 24px 88px;}
/* Reserve the home indicator. */
@media (max-width:767px){.shell{padding:24px 16px calc(88px + env(safe-area-inset-bottom,0px));}}

/* ===== Sticky page header ===== */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  /* Reserve the notch so the header content is not clipped. */
  padding:calc(12px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 12px max(24px,env(safe-area-inset-left,0px));
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top-left{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap;}
.top-right{display:flex;align-items:center;gap:12px;}
.top .logo{color:var(--brand);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;}

.back{
  /* Was 36px, under the 44px touch target minimum. */
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--muted);font-size:.875rem;font-weight:600;text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.back:hover{border-color:#cbd5e1;color:var(--ink);}
.back:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.25);}

/* ===== Page heading ===== */
.page-head{margin-bottom:28px;}
/* Was .7rem (11.2px), below the 12px legibility floor. */
.eyebrow{display:inline-block;color:var(--brand);font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;}
h1{margin:10px 0 12px;font-size:clamp(1.9rem,5vw,2.6rem);font-weight:800;line-height:1.12;letter-spacing:-.045em;}
.intro{margin:0;max-width:62ch;color:var(--muted);font-size:.975rem;line-height:1.75;}
.section-title{margin:36px 0 14px;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

/* ===== Support card ===== */
.hero-card{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 28px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,#ffffff,var(--soft));
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 28px -18px rgba(15,23,42,.18);
}
.hero-card__body{display:flex;align-items:flex-start;gap:16px;flex:1 1 320px;}
.hero-card__icon{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;
  border-radius:12px;background:var(--soft);color:var(--brand);
}
.hero-card__icon svg{width:22px;height:22px;}
.hero-card h2{margin:0 0 6px;font-size:1rem;font-weight:700;letter-spacing:-.015em;}
.hero-card p{margin:0;max-width:56ch;color:var(--muted);font-size:.875rem;line-height:1.7;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;
  border-radius:12px;background:var(--brand);color:#fff;font-size:.875rem;font-weight:600;
  text-decoration:none;white-space:nowrap;
  transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn:hover{background:var(--brand-ink);box-shadow:0 8px 20px -10px rgba(37,99,235,.9);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.3);}

/* ===== FAQ accordion ===== */
.faq{
  border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 28px -18px rgba(15,23,42,.18);
}
.faq-item + .faq-item{border-top:1px solid var(--line);}

.faq-item summary{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;
  font-size:.9rem;font-weight:650;color:var(--ink);
  cursor:pointer;list-style:none;
  transition:background-color .15s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{background:#f8fafc;}
.faq-item summary:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(37,99,235,.35);}

/* Chevron rotates when the <details> is open. */
.faq-item summary::after{
  content:"";flex-shrink:0;width:16px;height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(180deg);}
.faq-item p{margin:0;padding:0 22px 20px;max-width:70ch;color:var(--muted);font-size:.875rem;line-height:1.75;}
.faq-item strong{color:var(--ink);font-weight:650;}

/* ===== Link grid ===== */
.shortcuts__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.shortcut{
  display:flex;flex-direction:column;gap:4px;
  padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--card);
  text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.shortcut:hover{border-color:#cbd5e1;box-shadow:0 10px 24px -16px rgba(15,23,42,.4);transform:translateY(-1px);}
.shortcut:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.25);}
.shortcut__title{font-size:.875rem;font-weight:700;color:var(--ink);}
.shortcut__desc{font-size:.8125rem;color:var(--muted);line-height:1.6;}

/* ===== Dark theme (.dark on <html> and/or <body>) ===== */
.dark{color-scheme:dark;}
.dark body{background-color:#0f172a;color:#f1f5f9;}

.dark .top{background:rgba(15,23,42,.85);border-bottom-color:#1e293b;}
.dark .logo{color:#60a5fa;}
.dark .back{background:#1e293b;border-color:#334155;color:#94a3b8;}
.dark .back:hover{border-color:#475569;color:#e2e8f0;}

.dark h1{color:#f8fafc;}
.dark .eyebrow{color:#60a5fa;}
/* #94a3b8 on #0f172a was 4.0:1 and #64748b was 3.7:1, both under the 4.5:1
   WCAG AA floor for this body-sized text. #B6C2D4 clears 8.6:1 and matches
   the fix already shipped in css/whats-new.css. */
.dark .intro{color:#B6C2D4;}
.dark .section-title{color:#B6C2D4;}

.dark .hero-card{background:#1e293b;border-color:#334155;box-shadow:0 12px 32px -18px rgba(0,0,0,.7);}
.dark .hero-card__icon{background:rgba(96,165,250,.14);color:#93c5fd;}
.dark .hero-card h2{color:#e2e8f0;}
/* #94a3b8 on #1e293b was 3.83:1, under the 4.5:1 WCAG AA floor for this
   body text. #B6C2D4 clears 8.6:1 and matches whats-new.css. */
.dark .hero-card p{color:#B6C2D4;}
.dark .btn{background:#2563eb;}
.dark .btn:hover{background:#3b82f6;}

.dark .faq{background:#1e293b;border-color:#334155;box-shadow:0 12px 32px -18px rgba(0,0,0,.7);}
.dark .faq-item + .faq-item{border-top-color:#334155;}
.dark .faq-item summary{color:#e2e8f0;}
.dark .faq-item summary:hover{background:#0f172a;}
.dark .faq-item summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");}
/* #94a3b8 on #1e293b was 3.83:1, under the 4.5:1 WCAG AA floor for this
   body text. #B6C2D4 clears 8.6:1 and matches whats-new.css. */
.dark .faq-item p{color:#B6C2D4;}
.dark .faq-item strong{color:#f1f5f9;}

.dark .shortcut{background:#1e293b;border-color:#334155;}
.dark .shortcut:hover{border-color:#475569;box-shadow:0 10px 24px -16px rgba(0,0,0,.9);}
.dark .shortcut__title{color:#e2e8f0;}
/* #94a3b8 on #1e293b was 3.83:1, under the 4.5:1 WCAG AA floor for this
   body text. #B6C2D4 clears 8.6:1 and matches whats-new.css. */
.dark .shortcut__desc{color:#B6C2D4;}

/* ===== Responsive ===== */
@media (max-width:640px){
  /* Keep the home indicator inset: the previous 72px constant clipped
     bottom content on notched devices. */
  .shell{padding:28px 16px calc(72px + env(safe-area-inset-bottom,0px));}
  .top{padding:10px 16px;}
  .hero-card{padding:22px 20px;}
  .hero-card .btn{width:100%;}
  .faq-item summary{padding:16px 18px;}
  .faq-item p{padding:0 18px 18px;}
  .shortcuts__grid{grid-template-columns:1fr;}
}
@media (min-width:768px){.shell{padding-top:48px;}}
@media (prefers-reduced-motion:reduce){
  .btn,.back,.shortcut,.faq-item summary,.faq-item summary::after{transition:none;}
}