/* ClipShare styles. Dark, phone-first, thumb-reachable.
   External file rather than a <style> block because the CSP forbids inline
   script and we keep style in one place for the same reason. */

:root {
  --bg: #14171c;
  --panel: #1d222a;
  --panel2: #262d38;
  --line: #333c4a;
  --fg: #e7eaf0;
  --dim: #96a1b2;
  --accent: #4a9eff;
  --send: #3ecf8e;   /* outbound actions: Send text, Photo, upload bar */
  --ok: #3ecf8e;
  --err: #ff5f5f;
  --warn: #ffb020;
  --r: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
  padding: max(10px, env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
  max-width: 720px;
  margin: 0 auto;
}

.hide { display: none !important; }
.grow { flex: 1; }
.muted { color: var(--dim); font-size: 13px; }
.fine { color: var(--dim); font-size: 12px; text-align: center; margin: 14px 4px; line-height: 1.5; }
.warn { color: var(--warn); }
a { color: var(--accent); }

/* --- header --- */
.bar { display: flex; align-items: center; gap: 9px; padding: 6px 2px 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.on { background: var(--ok); }
.dot.off { background: var(--err); }

/* --- cards --- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px;
  margin-bottom: 12px;
}

/* --- controls --- */
button {
  display: block; width: 100%; min-height: 46px;
  border: 0; border-radius: 10px;
  background: var(--panel2); color: var(--fg);
  font: 600 15px/1 inherit; padding: 0 14px; margin-top: 9px;
}
button.primary { background: var(--accent); color: #fff; }
button.sec { background: var(--panel2); border: 1px solid var(--line); }
button.danger { color: var(--err); }
button:active { filter: brightness(.86); }
button:disabled { opacity: .45; }
button.icon {
  width: auto; min-height: 34px; margin: 0;
  font-size: 13px; padding: 0 11px;
  background: var(--panel2); border: 1px solid var(--line);
}
.row { display: flex; gap: 9px; }
.row > button { margin-top: 9px; }

textarea, input[type=text] {
  width: 100%;
  background: var(--panel2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px; font: 15px/1.4 inherit; resize: vertical;
}
.code-input {
  text-align: center; letter-spacing: .32em;
  font-size: 26px; font-weight: 700; text-transform: uppercase;
  padding: 14px 11px;
}

/* --- welcome --- */
.hero { text-align: center; padding: 34px 0 20px; }
.hero img { border-radius: 16px; }
.hero h1 { margin: 12px 0 6px; font-size: 27px; }
.hero .sub { color: var(--dim); margin: 0; font-size: 15px; }

/* --- clip list --- */
.list { display: flex; flex-direction: column; gap: 10px; }
.clip {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px;
}
.clip .meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--dim); margin-bottom: 8px;
}
.clip .body {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px;
  white-space: pre-wrap; word-break: break-word;
  max-height: 30vh; overflow: auto; font-size: 15px;
}
.clip .body.tappable { cursor: pointer; }
.clip img { width: 100%; border-radius: 10px; display: block; }
.clip .acts { display: flex; gap: 8px; }
.clip .acts button { margin-top: 9px; }
.mine { border-left: 3px solid var(--accent); }
.empty { text-align: center; padding: 34px 18px; }

/* --- pairing --- */
.pair { margin-top: 14px; }
.qr {
  background: #fff; padding: 12px; border-radius: 12px;
  display: flex; justify-content: center; margin-bottom: 12px;
}
.qr svg { display: block; width: 100%; height: auto; max-width: 260px; }
.codebig {
  text-align: center; font-size: 30px; font-weight: 700;
  letter-spacing: .3em; padding: 10px 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- progress --- */
.bar-progress {
  height: 4px; background: var(--panel2); border-radius: 2px;
  overflow: hidden; margin-top: 10px;
}
.bar-progress > i {
  display: block; height: 100%; width: 0;
  background: var(--accent); transition: width .15s;
}

/* --- sheet --- */
.sheet {
  position: fixed; inset: 0; background: #0009;
  display: flex; align-items: flex-end; z-index: 20;
}
.sheet-inner {
  background: var(--panel); width: 100%;
  border-radius: 16px 16px 0 0; padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.sheet-btn { text-align: center; }

/* --- toast --- */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: #000d; color: #fff; padding: 11px 18px;
  border-radius: 11px; font-size: 14px; max-width: 88vw;
  text-align: center; opacity: 0; transition: opacity .18s;
  pointer-events: none; z-index: 40;
}
#toast.show { opacity: 1; }

/* terms page */
.backlink {
  display: block; text-align: center; padding: 14px;
  background: var(--accent); color: #fff; border-radius: 10px;
  text-decoration: none; font-weight: 600;
}
h1 { font-size: 22px; }
h2 { font-size: 16px; margin: 0 0 8px; }
.card p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.7; }
code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; }

/* --- documentation page --- */
.doc { padding-bottom: 40px; }
.doc h1 { font-size: 25px; margin: 22px 0 10px; }
.doc .lede { color: var(--dim); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.doc h2 {
  font-size: 19px; margin: 34px 0 12px; padding-top: 14px;
  border-top: 1px solid var(--line); color: var(--fg);
}
.doc h3 { font-size: 15px; margin: 18px 0 7px; }
.doc p { font-size: 15px; line-height: 1.6; margin: 0 0 11px; }
.doc ul { font-size: 15px; line-height: 1.7; padding-left: 21px; margin: 0 0 12px; }
.doc li { margin-bottom: 7px; }

/* table of contents */
.toc { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.toc a { font-size: 14px; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* numbered steps */
.step h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.step .num {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.step p:last-child { margin-bottom: 0; }

/* callouts */
.note { border-left: 3px solid var(--accent); }
.note p:last-child { margin-bottom: 0; }
.warnbox { border-left: 3px solid var(--warn); }
.warnbox h3 { color: var(--warn); margin-top: 0; }
.warnbox p:last-child { margin-bottom: 0; }
.warnline { color: var(--warn); font-size: 14px; }
.qa h3 { margin-top: 0; color: var(--accent); }
.qa p:last-child { margin-bottom: 0; }

/* limits table */
.limits { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
.limits td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.limits td:first-child { color: var(--dim); width: 42%; }

/* --- attribution --- */
.byline {
  text-align: center; font-size: 12px; color: var(--dim);
  margin: 20px 4px 6px;
}
.byline a { color: var(--dim); text-decoration: underline; }
.byline a:hover { color: var(--accent); }
.whobuilt h3 { margin-top: 0; }
.whobuilt p:last-child { margin-bottom: 0; }

/* --- the compose box ---
   This card is the only one you TYPE INTO; everything below it is received
   clips. The first version tinted it slightly, which was too subtle to notice
   on a dark background. This version uses a clear left accent bar, a lighter
   panel, and a small "COMPOSE" label so the difference is obvious at a glance. */
.card.send {
  background: #232c3a;
  border: 1px solid #3f4d63;
  border-left: 4px solid var(--accent);
  position: relative;
  padding-top: 30px;
}

/* Small label so the purpose is stated, not just implied by colour. */
.card.send::before {
  content: "COMPOSE";
  position: absolute;
  top: 9px;
  left: 13px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
}

.card.send textarea {
  background: #171d26;
  border-color: #3f4d63;
}
.card.send textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Received clips sit visually lower than the compose box: flatter, no accent. */
.list .clip {
  background: var(--panel);
}

/* --- send buttons ---
   "Send text" and "Photo" are the OUTBOUND actions. Everything else in the app
   (Copy, Save, Pair, Start) is blue, so leaving these blue made the one thing
   you do most look like everything else. Green reads as "go" and separates
   sending from receiving at a glance. */
#btnSend {
  background: var(--send);
  color: #06231a;
}
#btnSend:active { filter: brightness(.88); }
#btnSend:disabled { background: var(--send); opacity: .45; }

/* Photo is the other outbound action: same family, quieter, so it does not
   compete with the primary Send. */
#btnPickFile {
  background: transparent;
  color: var(--send);
  border: 1px solid var(--send);
}
#btnPickFile:active { background: #1b3a30; }

/* The upload progress bar belongs to the send action, so match it. */
.card.send .bar-progress > i { background: var(--send); }

/* Compose accents follow the send colour too, so the whole outbound area reads
   as one thing rather than a blue box with green buttons in it. */
.card.send { border-left-color: var(--send); }
.card.send::before { color: var(--send); content: "SEND"; }
.card.send textarea:focus { border-color: var(--send); }