/* === 1 · Tokens ====================================================== */
:root{
  --ivory:#F9F7F4;
  --carbon:#121212;
  --pewter:#6A6A6A;
  --purple:#4B306A;
  --gold:#C1A875;

  --radius:10px;
  --t-base:.18s cubic-bezier(.4,0,.2,1);
  --t-hover:.22s cubic-bezier(.35,.01,.23,1);
  --rail:120px;                /* width of left nav */
  --header:60px;               /* height of top bar */

  --brand: #0079d3;         /* main */
  --brand-hover: #0060a9;   /* hover/active */
  --brand-ring: rgba(0,121,211,.28);
  --thread-line:#d8dee4; --indent:16px; --connector:12px;
}

/* === 2 · Base reset ================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font:400 .95rem/1.55 "Inter",sans-serif;background:var(--ivory);color:var(--carbon);}

/* === 3 · Left navigation rail ======================================= */
.nav{
  width:var(--rail);position:fixed;left:0;top:30px;bottom:0;
  padding:30px 0 0;display:flex;flex-direction:column;gap:12px;
  background:var(--ivory);border-right:1px solid rgba(0,0,0,.08);
  align-items:center;justify-content:flex-start;
}

.nav a{
  padding:10px 24px;display:block;text-decoration:none;font-weight:300;color:var(--pewter);
  transition:background var(--t-base),color var(--t-base);
}
.nav a:hover{background:rgba(0,0,0,.05);color:var(--purple);}


/* === 4 · Top bar ===================================================== */
.topbar{
  position:fixed;left:0;right:0;top:0;height:var(--header);
  display:flex;align-items:center;gap:24px;padding:0 12px;
  background:var(--ivory);border-bottom:1px solid rgba(0,0,0,.08);z-index:5;
  padding: 0 16px
}

.logo{font:600 1.25rem "EB Garamond",serif;text-align:center;color:var(--carbon);text-decoration:none;margin-bottom:0px;display:inline-block;align-self:center;}

.search{
  flex:1;display:flex;justify-content:center;
}
.search input{
  width:60%;max-width:420px;padding:7px 12px;font-size:.9rem;
  background:rgba(255,255,255,.65);backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.1);border-radius:var(--radius);
}
.login{
  text-decoration:none;font-weight:500;color:var(--carbon);
  transition:color var(--t-base);
}
.login:hover{color:var(--purple);}

.dropdown {
  position: relative;
  display: inline-block;
  margin-right: 12px;
}

.user{
  text-decoration:none;font-weight:500;color:var(--carbon);
  transition:color var(--t-base);
  padding-inline: 6px;
}

.user:hover{
  color:var(--purple);
}

.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
}



.post_create{
  text-decoration:none;font-weight:500;color:var(--carbon);
  transition:color var(--t-base);
}
.post_create:hover{color:var(--purple);}

/* === 5 · Feed wrapper =============================================== */
main{
  margin:calc(var(--header) + 24px) 0 64px var(--rail);
  padding:0 24px;max-width:760px;
  display:flex;flex-direction:column;row-gap:16px;
}

/* === 6 · Post card =================================================== */
.post{
  display:grid;grid-template-columns:40px 16px 1fr;align-items:start;
  padding:12px 16px;border-radius:var(--radius);
  background:rgba(255,255,255,.65);backdrop-filter:blur(10px) saturate(130%);
  position:relative;box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform var(--t-hover),box-shadow var(--t-hover),
             backdrop-filter var(--t-hover),background-color var(--t-hover);
}
.post::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(193,168,117,.35);pointer-events:none;
  transition:border-color var(--t-hover);
}
.post::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 70%);
  opacity:0;pointer-events:none;transition:opacity var(--t-hover);
}
.post:hover,.post:focus-within{
  transform:translateY(-4px) scale(1.015);box-shadow:0 8px 24px rgba(0,0,0,.08);
  backdrop-filter:blur(12px) saturate(145%);background-color:rgba(255,255,255,.72);
}
.post:hover::before,.post:focus-within::before{border-color:var(--purple);}
.post:hover::after,.post:focus-within::after{opacity:1;}

/* —  Vote column  — */
.vote-col{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
.vote-btn{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.25);backdrop-filter:blur(6px);
  border:1px solid rgba(0,0,0,.05);font-size:.9rem;cursor:pointer;
  transition:background var(--t-hover),border-color var(--t-hover),color var(--t-hover),transform var(--t-hover);
  color:var(--carbon);
}
.vote-btn:hover{border-color:var(--gold);transform:scale(1.08);}
.vote-btn.active{background:var(--purple);border-color:var(--purple);color:#fff;}
.vote-count{font-size:.85rem;font-variant-numeric:tabular-nums;font-weight:500;}

/* —  Post body  — */
.post-body{grid-column:3;display:flex;flex-direction:column;row-gap:6px;}
.post-title{
  font:600 1.1rem/1.3 "EB Garamond",serif;color:var(--carbon);text-decoration:none;
  transition:color var(--t-base);
}
.post-title:hover{color:var(--purple);}
.meta{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--pewter);}
.summary{color:var(--pewter);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* —  Optional picture (no animation)  — */
figure{margin:8px 0 0;}
figure img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);
}

/* === 7 · Responsive tweaks ========================================== */
@media(max-width:600px){
  .search input{width:90%;}
  main{margin:calc(var(--header)+16px) 0 48px var(--rail);padding:0 16px;}
  .post{grid-template-columns:32px 12px 1fr;padding:12px;}
  .vote-btn{width:26px;height:26px;}
}

/* === 8 Invisiable card ==============================================*/

.modal{                  /* centre in the viewport */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;          /* above the header & posts */
  display: flex;         /* make the card flex again */
}

.inactive {
  display:none;
}

.card {
  background:#fff;
  padding:32px 40px;
  width:340px;
  justify-content:center;
  align-items:center;
  border:1px solid #dadada;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  border-radius:4px;
}

.feed {
  justify-content: center;
  align-items: center;
}

/*  full‑screen veil that eats every click underneath it  */
.backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);      /* grey tint             */
  backdrop-filter:blur(2px);       /* subtle soften          */
  z-index:800;                     /* below modal (999)      */
  pointer-events:auto;             /* catch the clicks       */
  transition:opacity .18s ease;
}

/* dim everything that lives *under* the backdrop          */
body.dimmed > *:not(#ui‑backdrop):not(.modal){
  filter:grayscale(1) brightness(.6);
  pointer-events:none;             /* belt‑and‑braces block  */
}
.content-column {                /* desktop / tablet */
  margin: calc(var(--header) + 12px) auto 64px;
  padding: 0 24px;
  max-width: 760px;
}

@media (max-width: 600px) {      /* phone */```
  .content-column {
    margin: calc(var(--header) + 16px) 0 48px var(--rail);
    padding: 0 16px;
  }
}
.post-content-for-detail{
  white-space: pre-line;      /* turn \n into visual line breaks */
  overflow-wrap: anywhere;    /* good for long CJK runs */
  }


/* Comment section */
.content-column .comment-box textarea {
  width: 100%;
  max-width: 100%;
  min-height: 96px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 8px;
  font: 400 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--carbon);
  background: #fff;

  /* Only vertical resize; never sideways */
  resize: vertical;
  overflow-x: hidden;
  box-sizing: border-box;
}

.content-column .comment-box textarea:focus {
  outline: none;
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* Comment Button */
.comment-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9999px;              /* pill */
  font: 600 .95rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .02s;
}

/* Primary "Comment" button */
.comment-btn--comment {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.comment-btn--comment:hover { background: var(--brand); border-color: var(--brand-hover); }
.comment-btn--comment:active { transform: translateY(1px); }
.comment-btn--comment:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Disabled */
.comment-btn:disabled,
.comment-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Show comment */
.thread{
  list-style: none;
  margin: 0;
  padding: 0;

  /* NEW: indent system */
  --indent-step: 1.75rem;   /* per-level indent */
  --thread-line: #733af7;   /* guide line color */
  --depth: 0;               /* root depth */
}

.replies {
  --depth: calc(var(--depth) + 1);
  list-style: none;
  margin: 0;
  margin-inline-start: calc(var(--depth) * var(--indent-step));
  padding-inline-start: 12px;
  border-inline-start: 0.55px solid var(--thread-line); }

.replies.is-collapsed { display:none; }

/* Spacing between siblings (top-level and nested) */
.thread > .show-comment + .show-comment,
.replies > .show-comment + .show-comment{
  margin-top: 8px;
}
.show-comment { position:relative; padding:8px 0 0; }
.show-comment::before{
  content:""; position:absolute; left:-2px; top:18px; width:var(--connector); height:2px;
  background:var(--thread-line); transform:translateX(-100%);
}
.thread > .show-comment::before{ display:none; }

.show-comment-card{ background:#fff; border:1px solid #eee; border-radius:10px; padding:10px 12px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.show-comment-meta{ display:flex; gap:8px; font-size:13px; color:#555; }
.show-comment-body{ margin-top:6px; font-size:14px; line-height:1.45; color:#000}
.show-comment-btn-link{ background:none; border:0; color:#2563eb; padding:0; cursor:pointer; }
.show-comment-btn-link:hover{ text-decoration:underline; }

/* Detail Post */
textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f8f9fa;
  font-family: ui-sans-serif, system-ui;
}
.btn-primary {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600;
}