@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#12142b; --surface:#191c3a; --surface-2:#232755;
  --ink:#eae7db; --muted:#a3a5cf; --line:#33366b;
  --accent:#dbb642; --accent-2:#e2969b;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Source Sans 3', system-ui, sans-serif; line-height:1.55;
  transition:background-color .4s ease;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; }
.mono{ font-family:'IBM Plex Mono', monospace; }
input, select, textarea, button{ font-family:inherit; font-size:15px; }

.shell{ max-width:760px; margin:0 auto; padding:32px 20px 80px; }

.brand{ display:flex; align-items:baseline; gap:10px; margin-bottom:28px; }
.brand h1{ margin:0; font-size:28px; font-weight:700; }
.brand span{ color:var(--muted); font-size:13px; font-family:'IBM Plex Mono', monospace; }

/* On view.php (reached via a public link, so there's no tab bar to fall back
   on), the brand mark doubles as a "back to home" link — a small arrow plus
   the wordmark itself, both clickable, so it reads as navigation rather than
   a static logo. */
a.brand-home{
  display:flex; align-items:baseline; gap:8px; text-decoration:none; color:inherit;
}
a.brand-home:hover .brand-back{ color:var(--accent-2); transform:translateX(-2px); }
a.brand-home:hover h1{ color:var(--accent); }
.brand-back{
  color:var(--muted); font-size:22px; line-height:1; transition:color .15s ease, transform .15s ease;
}

.card{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:22px; transition:background-color .3s ease, border-left-color .3s ease; }

label{ display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; }
input[type="email"], input[type="password"], input[type="text"], select, textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink);
}
textarea{ min-height:110px; resize:vertical; border-top-width:1px; transition:border-top-color .25s ease; }
.template-preview{ margin:6px 0 0; min-height:1.2em; transition:color .25s ease; }

a{ color:var(--accent); }

details > summary{ list-style:none; }
details > summary::-webkit-details-marker{ display:none; }
details form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
details form select{ width:auto; flex:1; min-width:180px; }
details form button{ margin-top:0; }

button{
  cursor:pointer; border:1px solid var(--accent); background:var(--accent);
  color:#211a05; font-weight:600; padding:10px 18px; border-radius:8px; margin-top:14px;
}
button.secondary{ background:transparent; color:var(--ink); border-color:var(--line); }

.muted{ color:var(--muted); font-size:13.5px; }

.top-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }

.streak{ font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--accent); }

.tabs{ display:flex; gap:8px; margin-bottom:16px; }
.tab-btn{
  background:none; border:1px solid var(--line); color:var(--muted);
  padding:7px 14px; border-radius:20px; font-size:13px; margin-top:0;
}
.tab-btn.on{ color:var(--accent); border-color:var(--accent); }

.entry-card{ border:1px solid var(--line); border-left-width:4px; border-left-color:var(--accent); border-radius:10px; padding:16px; margin-bottom:14px; background:var(--bg); transition:background-color .3s ease, border-left-color .3s ease; }
.entry-meta{ display:flex; gap:10px; font-size:11.5px; font-family:'IBM Plex Mono', monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.entry-scheduled{ color:var(--accent); }

/* Delay-post picker inside "Today's entry" — a plain fieldset so the two
   "when" options read as one choice, with the actual date/time input only
   ever visible once "Schedule for later" is picked (see index.php's inline
   script), matching the composer's already-quiet, unboxed form style. */
.schedule-fieldset{ border:1px solid var(--line); border-radius:10px; padding:10px 14px 14px; margin:4px 0 14px; }
.schedule-fieldset legend{ font-size:11.5px; font-family:'IBM Plex Mono', monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:0 6px; }
.schedule-radio{ display:inline-flex; align-items:center; gap:6px; margin-right:18px; font-weight:400; }
.schedule-at-wrap{ margin-top:10px; }
.schedule-hint{ margin:6px 0 0; }
.entry-body{ margin:0 0 12px; white-space:pre-wrap; }
.dune-media{ margin:0 0 12px; }
.dune-media audio{ border-radius:8px; }
.dune-media .react-btn{ text-decoration:none; display:inline-block; }
.entry-actions{ display:flex; gap:8px; flex-wrap:wrap; }
/* Edit/Delete/Report live as <details> inside this flex row so their
   buttons sit compact and inline next to the reactions. But once opened,
   the revealed form needs the entry card's actual full width, not the
   cramped auto-sized width a flex item gets by default (which is what made
   opened forms render at roughly half the card's width). [open] only
   matches while expanded, so the closed button keeps its normal compact
   size and only forces onto its own full-width row once there's a form to
   show. */
.entry-actions details[open]{ flex-basis:100%; }
.react-btn, .report-btn{
  font-size:12.5px; padding:6px 10px; border-radius:20px; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); margin-top:0;
}
.report-btn{ margin-left:auto; color:var(--muted); background:none; }
.delete-btn{ margin-left:8px; }
.delete-btn:hover{ color:var(--accent-2); border-color:var(--accent-2); }
.delete-confirm-btn{
  border-color:var(--accent-2); background:var(--accent-2); color:#2a1013;
}
/* account_settings.php's "Danger zone" card (delete_account.php link) and
   delete_account.php's own warning/confirm page. Same rose --accent-2 used
   for entry-deletion, but a visible border on the whole card so account
   deletion reads as a distinct, weightier zone than an ordinary settings
   section. */
.danger-zone{ border-color:var(--accent-2); }
.danger-zone-list{ color:var(--muted); font-size:13.5px; line-height:1.7; padding-left:20px; margin:8px 0 16px; }
.danger-zone-list li{ margin-bottom:4px; }
/* .delete-confirm-btn is written for a <button> (inherits base button
   padding/radius/cursor); reused here on an <a>, which needs those
   properties spelled out since it isn't a <button>. */
.danger-zone-link{
  display:inline-block; text-decoration:none; cursor:pointer; font-weight:600;
  padding:10px 18px; border-radius:8px; margin-top:6px;
}
.n{ color:var(--muted); font-family:'IBM Plex Mono', monospace; }

.public-feed-track{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding-bottom:6px; margin:0 -2px;
}
.public-feed-track::-webkit-scrollbar{ height:6px; }
.public-feed-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
.public-feed-item{
  position:relative; flex:0 0 220px; scroll-snap-align:start; display:block; text-decoration:none;
  color:inherit; border:1px solid var(--line); border-left-width:4px; border-radius:10px;
  padding:12px; transition:background-color .3s ease, transform .15s ease, opacity .6s ease, filter .6s ease;
}
.public-feed-item:hover{ transform:translateY(-2px); }

/* A card sliding in when a fresh public post is picked up by the poll. */
.public-feed-item.feed-item-enter{ opacity:0; transform:translateX(-14px) scale(.96); }

/* A card falling out of the latest-10 window breaks apart instead of just
   disappearing: it fades/blurs/shrinks in place while a burst of small
   fragments (.feed-particle, spawned in JS) flies outward from it. */
.public-feed-item.disintegrating{
  opacity:0; transform:scale(.8) rotate(-4deg); filter:blur(5px) saturate(.4);
  transition:opacity .8s ease, transform .8s ease, filter .8s ease;
  pointer-events:none;
}
.feed-particle{
  position:absolute; width:5px; height:5px; border-radius:50%;
  pointer-events:none; opacity:.95; will-change:transform, opacity;
  animation:feed-particle-fly .85s ease-out forwards;
}
@keyframes feed-particle-fly{
  to{ transform:translate(var(--px), var(--py)) scale(0); opacity:0; }
}
.public-feed-toggle{
  display:block; margin:10px auto 0; font-size:12.5px; padding:6px 14px;
  border-radius:20px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--ink); cursor:pointer;
}
.public-feed-toggle:hover{ border-color:var(--accent); }
.public-feed-meta{
  display:block; font-size:11px; font-family:'IBM Plex Mono', monospace; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;
}
.public-feed-snippet{ display:block; font-size:13.5px; line-height:1.4; color:var(--ink); }

form#follow-form{ display:flex; gap:8px; align-items:flex-end; }
form#follow-form input{ flex:1; }
form#follow-form button{ margin-top:0; }

/* The roster behind "People you follow" — previously the only way to see
   who you followed was noticing their posts show up in the Following feed,
   which doesn't work at all for someone whose posts are all link-only. */
.followee-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.followee-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg);
}
.followee-name{ font-weight:600; font-family:'Fraunces', Georgia, serif; }
.followee-name-wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.followee-row .follow-form{ margin:0; }
.followee-row .follow-btn{ margin-top:0; }

/* The byline + Follow/Unfollow toggle shown above someone else's post — on
   view.php (reached via its public link) and on Following-tab entry cards. */
.entry-byline{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; gap:10px;
}
/* Groups the author's name with their character badge (when they have one)
   as a single flex item, so adding the badge doesn't get spread apart from
   the name by .entry-byline's space-between — the Follow/Unfollow button
   stays pinned to the right either way. */
.entry-byline-name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.entry-author{ font-weight:600; font-family:'Fraunces', Georgia, serif; }
.follow-form{ margin:0; }

/* The unique @handle every account has now (db/migrations/006_usernames.sql) —
   shown next to the display name on entry cards, view.php, the People-you-
   follow list, and the top-row/Follow-someone card on index.php. Muted and
   monospace so it reads as a handle, not competing with the display name. */
.username-handle{ color:var(--muted); font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:400; }

/* "📖 Fictional Book Character" — the badge marking a public-domain literary
   character's account (render_character_badge() in includes/helpers.php),
   so their posts never read as a real person's. Shown wherever their name
   appears: entry cards, view.php, the People-you-follow list. The
   homepage's public strip is too narrow for this full badge and instead
   gets a plain 📖 in front of the name (see index.php/api_public_feed.php). */
.character-badge{
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px;
  background:rgba(226,150,155,.16); color:var(--accent-2); border:1px solid rgba(226,150,155,.45);
}
.follow-btn{
  font-size:12.5px; padding:6px 14px; border-radius:20px; margin-top:0;
  border:1px solid var(--accent); background:var(--accent); color:#211a05; font-weight:600;
}
.follow-btn.following{ background:transparent; color:var(--muted); border-color:var(--line); }
.follow-btn.following:hover{ border-color:var(--accent-2); color:var(--accent-2); }

/* Reddit-style comment thread: a "start a thread" box, a running count, and
   a nested list of replies. Depth beyond a few levels stops indenting
   further (capped inline via render_comment_thread()) so a long back-and-
   forth doesn't squeeze itself into a sliver of the page on a phone. */
.comment-section{ margin-top:4px; }
.comment-heading{ margin:0 0 10px; font-size:16px; }
.comment-list{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.comment{
  border-left:2px solid var(--line); padding:2px 0 2px 12px;
}
.comment-meta{
  display:flex; gap:8px; align-items:baseline; font-size:12px;
  font-family:'IBM Plex Mono', monospace; color:var(--muted); margin-bottom:4px;
}
.comment-author{ color:var(--ink); font-weight:600; text-transform:none; letter-spacing:0; }
.comment-body{ margin:0 0 6px; white-space:pre-wrap; font-size:14px; }
.comment-reply summary{ font-size:12px; }
.comment-replies{ margin-top:10px; }
.comment-toggle > summary{ list-style:none; }
.comment-toggle > summary::-webkit-details-marker{ display:none; }

.oauth-buttons{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.oauth-btn{
  display:block; text-align:center; padding:10px 18px; border-radius:8px;
  font-weight:600; text-decoration:none; border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink);
}
.oauth-btn.oauth-google:hover{ border-color:#dbb642; }
.oauth-btn.oauth-github:hover{ border-color:#a3a5cf; }
.oauth-divider{ text-align:center; margin:16px 0 0; }