/* ==========================================================================
   /privacy and /terms — the two documents the App Store requires a link to.

   Loads *after* main.css and borrows its tokens, fonts and .panel language,
   exactly as tide.css does. The one thing it has to undo is the same one:
   `body { overflow: hidden }` makes the app shell a fixed viewport, and these
   are documents that scroll.

   These pages are deliberately plain — no script, no fetch, no state. A policy
   page that needs JavaScript to render is a policy page that can fail to render
   for the reviewer who is checking it.
   ========================================================================== */

body.policy-page {
  overflow: auto;
  overflow-x: hidden;
  min-height: 100%;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

/* ---------- header ---------- */
.pol-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 18px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: rgba(6,12,22,0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.pol-home { flex: none; text-decoration: none; color: var(--text); opacity: 0.9; }
.pol-home:hover { opacity: 1; text-shadow: var(--glow-cyan); }
.pol-nav a {
  font-family: var(--disp); font-weight: 500; font-size: 10.5px; letter-spacing: 2.5px;
  color: var(--dim); text-decoration: none;
}
.pol-nav a:hover { color: var(--cyan); }

/* ---------- document ---------- */
.pol-main {
  position: relative; z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 18px 0;
  font-size: 14.5px;
  line-height: 1.62;
}

.pol-main h1 {
  font-family: var(--disp); font-weight: 900;
  font-size: clamp(24px, 4vw, 34px); letter-spacing: 3px;
  color: var(--text);
}
.pol-eff {
  margin: 8px 0 0;
  font-family: var(--disp); font-weight: 500; font-size: 10px; letter-spacing: 2px;
  color: var(--dim); text-transform: uppercase;
}
.pol-lede {
  margin: 22px 0 0;
  font-size: 16px; line-height: 1.6; color: var(--text);
  border-left: 2px solid var(--cyan);
  padding-left: 15px;
}
.pol-lede em { color: var(--cyan); font-style: normal; }

.pol-main h2 {
  margin: 34px 0 12px;
  font-family: var(--disp); font-weight: 700; font-size: 12.5px; letter-spacing: 3px;
  color: var(--dim); text-transform: uppercase;
}
.pol-main h3 {
  margin: 0 0 8px;
  font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: 1.4px;
  color: var(--cyan);
}

/* ---------- cards ---------- */
.pol-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 12px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pol-card > h2 { margin-top: 0; }
.pol-card p { margin: 0 0 10px; color: var(--text); }
.pol-card p:last-child { margin-bottom: 0; }
.pol-card ul { margin: 0; padding-left: 20px; }
.pol-card li { margin: 0 0 8px; }
.pol-card li:last-child { margin-bottom: 0; }
.pol-card strong { color: var(--text); font-weight: 700; }
.pol-card em { color: var(--cyan); font-style: normal; }
.pol-fine { font-size: 12.5px; color: var(--dim); }

/* The two cards that carry the weight: one says what is never done, one is the
   safety warning. Both earn a colour so they are not skimmed past. */
.pol-never { border-color: rgba(43,255,168,0.32); }
.pol-never h2 { color: var(--green); margin-top: 0; }
.pol-warn { border-color: rgba(255,179,71,0.38); }
.pol-warn h2 { color: var(--amber); margin-top: 0; }
/* /support's coloured cards head with an h3, because the h2s on that page are
   its three section titles. The colour has to follow the card, not the level,
   or the amber border sits under a cyan heading. */
.pol-warn h3 { color: var(--amber); }
.pol-never h3 { color: var(--green); }

.pol-main a { color: var(--cyan); }
.pol-main a:hover { text-shadow: var(--glow-cyan); }

.pol-foot {
  margin: 34px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--disp); font-size: 10px; letter-spacing: 2px;
  color: var(--dim); text-transform: uppercase;
}
.pol-foot a { color: var(--dim); text-decoration: none; }
.pol-foot a:hover { color: var(--cyan); }

@media (max-width: 560px) {
  .pol-main { padding: 20px 14px 0; font-size: 14px; }
  .pol-card { padding: 14px 15px; }
  .pol-lede { font-size: 15px; }
}

/* ==========================================================================
   /support only — the feedback form and the donate call.

   The header comment above says these pages carry no script and no state, and
   /privacy and /terms still do not. /support is the one exception: it has a
   form. The exception is kept narrow — the page renders and reads correctly
   with `js/support.js` dead, and only the counter, the inline submit and a
   configured donate URL depend on it.
   ========================================================================== */

/* Jump links under the lede: three anchors, not a menu. */
.sup-jump {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 22px 0 26px;
  font-family: var(--disp); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
}
.sup-jump a { color: var(--dim); text-decoration: none; border-bottom: 1px solid transparent; }
.sup-jump a:hover { color: var(--cyan); border-bottom-color: var(--line); }

/* ---------- the form ---------- */
.sup-form { display: block; margin: 18px 0 12px; }

.sup-label {
  display: block;
  margin: 16px 0 6px;
  font-family: var(--disp); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dim);
}
.sup-label:first-child { margin-top: 0; }
.sup-optional { color: var(--dim); opacity: 0.75; letter-spacing: 1.4px; }

.sup-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 11px 12px;
  background: rgba(4,7,13,0.62);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit; font-size: 15px; line-height: 1.5;
  /* iOS zooms the page on focus below 16px; 15px plus this is the usual fix,
     and a support form is not the place to fight the platform. */
  -webkit-text-size-adjust: 100%;
}
.sup-input::placeholder { color: var(--dim); opacity: 0.8; }
.sup-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}
.sup-textarea { resize: vertical; min-height: 120px; }

.sup-count {
  margin: 6px 0 0;
  font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: right;
}
.sup-count[data-over="yes"] { color: var(--amber); }

.sup-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 18px;
}

.sup-send {
  flex: none;
  min-height: 44px; padding: 0 22px;
  background: rgba(33,230,255,0.10);
  border: 1px solid var(--cyan);
  border-radius: 8px;
  color: var(--cyan);
  font-family: var(--disp); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
}
.sup-send:hover:not(:disabled) { background: rgba(33,230,255,0.18); text-shadow: var(--glow-cyan); }
.sup-send:disabled { opacity: 0.42; cursor: default; border-color: var(--line); color: var(--dim); }

.sup-status { margin: 0; flex: 1 1 220px; font-size: 14px; color: var(--dim); }
.sup-status[data-kind="good"] { color: var(--green); }
.sup-status[data-kind="bad"] { color: var(--amber); }

/* ---------- donate ---------- */
.sup-donate-wrap { margin: 18px 0 10px; }
.sup-donate {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 30px;
  background: rgba(255,179,71,0.12);
  border: 1px solid var(--amber);
  border-radius: 8px;
  color: var(--amber) !important;
  font-family: var(--disp); font-size: 12px; letter-spacing: 2.6px; text-transform: uppercase;
  text-decoration: none;
}
.sup-donate:hover { background: rgba(255,179,71,0.2); text-shadow: 0 0 14px rgba(255,179,71,0.35); }

@media (max-width: 560px) {
  .sup-send, .sup-donate { width: 100%; }
  .sup-status { flex-basis: 100%; }
}