/* Poemdrop: a single white reading column; poems float as soft sheets, the share form opens on demand */
:root{
  --paper:#FFFFFF; --sheet:#FFFFFF; --field:#F6F7F9; --ink:#141A24; --muted:#6B7482; --line:#E6E9EE;
  --accent:#23477A; --accent-soft:#EEF2F8; --accent-ink:#FFFFFF; --warn:#A33A2C; --ok:#2C6B47;
  --shadow:0 1px 2px rgba(20,26,36,.04),0 8px 28px rgba(20,26,36,.07);
  --display:"Gloock", Georgia, "Times New Roman", serif;
  --body:"Literata", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
[hidden]{display:none!important}
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:.75rem;max-width:42rem;margin:0 auto;padding-inline:20px;padding-block:1rem 0;font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.wrap{max-width:42rem;margin:0 auto;padding-inline:20px;padding-block:2rem 5rem;display:grid;gap:2.75rem}
header{display:grid;gap:.9rem;justify-items:center;text-align:center;padding-bottom:2.25rem;border-bottom:1px solid var(--line)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(3rem,11vw,4.75rem);line-height:.95;margin:0;letter-spacing:-.015em}
h1 .mark{color:var(--accent)}
.tag{color:var(--muted);margin:0;max-width:30rem;text-wrap:balance;font-size:1.05rem}
.open-btn{margin-top:.5rem}
.label{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.notice{font-family:var(--mono);font-size:.8rem;background:var(--accent-soft);border-radius:10px;padding:.85rem 1.1rem;color:var(--accent)}
.notice.err{background:#FBEFED;color:var(--warn)}
.panel,form{background:var(--sheet);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.75rem;display:grid;gap:1.1rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.panel h2,form h2{font-family:var(--display);font-weight:400;font-size:1.75rem;margin:0}
.panel p{margin:0;color:var(--muted)}
.or{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.field{display:grid;gap:.3rem}
input[type=text],input[type=email],textarea,select{font:inherit;color:var(--ink);background:var(--field);border:1px solid transparent;border-radius:10px;padding:.7rem .85rem;width:100%;transition:border-color .15s,background .15s}
input[type=text]:focus,input[type=email]:focus,textarea:focus{background:var(--sheet);border-color:var(--accent)}
textarea{min-height:12rem;resize:vertical;line-height:1.75}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.check{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem}
.check input{margin-top:.3rem}
.rules{background:var(--field);border-radius:12px;padding:1rem 1.1rem;display:grid;gap:.4rem}
.rules ul{margin:0;padding-left:1.1rem;display:grid;gap:.3rem;font-size:.9rem;color:var(--muted)}
.rules b{color:var(--ink);font-weight:600}
.license{font-size:.88rem;color:var(--muted);margin:0}
.license b{color:var(--ink);font-weight:600}
.ts{min-height:0}
button{font:500 .78rem var(--mono);letter-spacing:.03em;cursor:pointer;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);padding:.45rem .85rem;transition:background .15s,color .15s}
button:hover{background:var(--field);color:var(--ink)}
button.primary{background:var(--accent);color:var(--accent-ink);padding:.75rem 1.4rem;font-size:.82rem}
button.primary:hover{background:var(--ink);color:var(--accent-ink)}
button.outline{border-color:var(--line);color:var(--ink);padding:.7rem 1.2rem}
button.outline:hover{border-color:var(--ink);background:transparent}
button:disabled{opacity:.5;cursor:not-allowed}
.status{font-family:var(--mono);font-size:.8rem;color:var(--ok)}
.status.err{color:var(--warn)}
.bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.tabs{display:flex;gap:.25rem;background:var(--field);border-radius:999px;padding:.25rem}
.tabs button[aria-pressed=true]{background:var(--sheet);color:var(--ink);box-shadow:0 1px 3px rgba(20,26,36,.1)}
.feed{display:grid;gap:1.75rem}
article{background:var(--sheet);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:2.25rem 2rem 1.25rem;display:grid;gap:1rem;min-width:0;transition:transform .2s,box-shadow .2s}
article:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,26,36,.05),0 14px 36px rgba(20,26,36,.1)}
article.hidden-poem{opacity:.6;border-style:dashed;box-shadow:none}
article h3{font-family:var(--display);font-weight:400;font-size:1.65rem;line-height:1.2;margin:0;text-wrap:balance}
.poem{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:1.08rem;line-height:1.85}
.byline{font-style:italic;color:var(--muted);margin:0}
.meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:center;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.cc{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:.15rem .6rem}
.ai-tag{background:var(--field);color:var(--muted);border-radius:999px;padding:.15rem .6rem}
.flag{color:var(--warn)}
.actions{display:flex;flex-wrap:wrap;gap:.25rem;border-top:1px solid var(--line);padding-top:.85rem;margin-inline:-.5rem}
.inline-box{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;background:var(--field);border-radius:10px;padding:.6rem .75rem}
.inline-box select{width:auto;background:var(--sheet)}
.empty{text-align:center;color:var(--muted);padding:3.5rem 1.5rem;border:1px dashed var(--line);border-radius:16px}
.empty b{font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--ink);display:block;margin-bottom:.35rem}
.more{justify-self:center}
footer{max-width:42rem;margin:0 auto;padding-inline:20px;padding-block:0 3rem;color:var(--muted);font-size:.85rem;text-align:center}
@media (max-width:480px){article{padding:1.75rem 1.25rem 1rem}form,.panel{padding:1.25rem}}
@media (prefers-reduced-motion:no-preference){article{animation:rise .4s ease both}@keyframes rise{from{transform:translateY(8px)}to{transform:none}}}
@media (prefers-reduced-motion:reduce){article,article:hover{transition:none;transform:none}}