/* post.lesarchives.app
   Same paper/archive language as the beta onboarding tool and the admin
   dashboard: ink on parchment, JetBrains Mono bracket labels, Sorts Mill
   Goudy for body and display, white cards with a soft paper edge. */

@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --archive-paper:#EFEEE8; --paper:#ffffff; --sticker-white:#F5F2EC;
  --ink:#231006; --ink-mid:#4A2C18; --ink-soft:#6B4A30;
  --paper-yellow:#F3E0A8; --paper-edge:#D8D5CC;
  --library-blue:#C5D3D8; --grid-pink:#E9CEB1; --kraft-taupe:#D9CDBE;
  --ok:#2f5d3a; --danger:#a03a2a;
  --serif:'Sorts Mill Goudy','Goudy Old Style',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r-sm:3px; --r-md:6px;
  --shadow-card:0 1px 2px rgba(35,16,6,0.06),0 8px 24px rgba(35,16,6,0.07);
  --ease:cubic-bezier(0.22,0.61,0.36,1); --dur:180ms;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background-color:var(--paper-yellow);
  background-image:
    linear-gradient(var(--grid-pink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-pink) 1px, transparent 1px);
  background-size:22px 22px, 22px 22px;
  background-position:-1px -1px, -1px -1px;
  color:var(--ink);font-family:var(--serif);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:inherit;}
[hidden]{display:none !important;}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;}
.eyebrow::before{content:"[ ";}
.eyebrow::after{content:" ]";}
h1{font-weight:400;font-size:30px;line-height:1.15;margin:0 0 12px;letter-spacing:-0.005em;}
h2{font-weight:400;font-size:22px;line-height:1.2;margin:0 0 10px;}
p{margin:0 0 12px;}
.lede{color:var(--ink-mid);}
.muted{color:var(--ink-soft);}
.note{background:var(--sticker-white);border:1px solid var(--paper-edge);border-radius:var(--r-sm);padding:10px 12px;font-size:15px;}
.warn{color:var(--danger);font-size:15px;}
.error{color:var(--danger);margin-top:14px;font-size:15px;}
.fineprint{font-size:14px;color:var(--ink-soft);margin:6px 0 0;}
.dot{margin:0 8px;color:var(--ink-soft);}

/* ------------------------------------------------------------ shell */
#app{min-height:100vh;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;gap:16px;padding:14px 28px;
  background:var(--sticker-white);border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--ink-soft);
  position:sticky;top:0;z-index:20;flex-wrap:wrap;}
.topbar .wordmark{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;}
.topbar .wordmark img{height:26px;display:block;}
.topbar .wordmark .b-label{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);}
.who{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.who-email{color:var(--ink);}
.ws-picker{display:flex;align-items:center;gap:8px;}
.ws-picker .eyebrow{margin:0;}
.ws-picker select{font-family:var(--mono);font-size:11px;letter-spacing:0.05em;background:var(--paper);
  border:1px solid var(--paper-edge);border-radius:var(--r-sm);padding:5px 8px;color:var(--ink);}

main{flex:1;padding:44px 20px 60px;}
.screen{max-width:1080px;margin:0 auto;}
.auth-card{max-width:520px;margin:6vh auto 0;}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
#card-post{grid-row:span 2;}
@media (max-width:860px){.grid{grid-template-columns:1fr;} #card-post{grid-row:auto;}}

/* ------------------------------------------------------------ cards */
.card{background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--r-md);
  padding:26px 28px 24px;box-shadow:var(--shadow-card);}

/* ------------------------------------------------------------ forms */
.stack{display:flex;flex-direction:column;gap:14px;margin-top:18px;}
.field{display:flex;flex-direction:column;gap:6px;position:relative;}
.field>span:first-child{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);}
.field input,.field textarea{font-family:var(--serif);font-size:17px;color:var(--ink);
  background:var(--sticker-white);border:1px solid var(--paper-edge);border-radius:var(--r-sm);
  padding:10px 12px;width:100%;transition:border-color var(--dur) var(--ease);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
.field textarea{resize:vertical;line-height:1.5;}
.counter{position:absolute;right:2px;top:0;font-family:var(--mono);font-size:10px;color:var(--ink-soft);letter-spacing:0.05em;}

.btn{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r-sm);
  padding:11px 18px;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur);}
.btn:hover{background:var(--sticker-white);}
.btn.primary{background:var(--ink);color:var(--paper-yellow);}
.btn.primary:hover{background:var(--ink-mid);}
.btn[disabled]{opacity:0.45;cursor:not-allowed;}
.btn.busy{position:relative;color:transparent !important;}
.btn.busy::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--paper-yellow);border-top-color:transparent;animation:spin 0.8s linear infinite;}
.btn:not(.primary).busy::after{border-color:var(--ink);border-top-color:transparent;}
@keyframes spin{to{transform:rotate(360deg);}}

button.link{background:none;border:none;padding:0;font:inherit;color:var(--ink-soft);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;font-size:inherit;}
button.link:hover{color:var(--ink);}
.topbar button.link{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;}

/* ------------------------------------------------------------ profile */
.profile{display:flex;align-items:center;gap:16px;margin:8px 0 16px;}
.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--paper-edge);}
.avatar.placeholder{background:var(--library-blue);}
.profile-text .handle{font-family:var(--mono);font-size:14px;letter-spacing:0.04em;}
.profile-text .name{font-size:19px;line-height:1.2;margin-top:2px;}
.profile-text .type{font-size:13px;color:var(--ink-soft);text-transform:capitalize;}
.counts{display:flex;gap:26px;margin:0 0 14px;padding:12px 0;border-top:1px solid var(--paper-edge);border-bottom:1px solid var(--paper-edge);}
.counts dt{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);}
.counts dd{margin:0;font-size:20px;}

/* ------------------------------------------------------------ post */
.tabs{display:flex;gap:6px;margin:14px 0 14px;border-bottom:1px solid var(--paper-edge);}
.tab{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;background:none;border:none;
  padding:8px 10px;color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab.active{color:var(--ink);border-bottom-color:var(--ink);}
.tabpane{margin-bottom:16px;display:flex;flex-direction:column;gap:12px;}

.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:34px 18px;border:1px dashed var(--ink-soft);border-radius:var(--r-md);background:var(--sticker-white);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.dropzone:hover,.dropzone.over{background:var(--archive-paper);border-color:var(--ink);}
.dz-text{font-size:17px;}
.dz-sub{font-size:13px;color:var(--ink-soft);max-width:380px;}

.samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.samples button{padding:0;border:2px solid transparent;border-radius:var(--r-sm);background:none;cursor:pointer;overflow:hidden;aspect-ratio:4/5;}
.samples button img{width:100%;height:100%;object-fit:cover;display:block;}
.samples button.selected{border-color:var(--ink);}

.preview{margin:0 0 16px;border:1px solid var(--paper-edge);border-radius:var(--r-md);overflow:hidden;background:var(--archive-paper);}
.preview img{display:block;max-height:380px;width:100%;object-fit:contain;background:var(--archive-paper);}
.preview-meta{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:0.04em;}

.actions{display:flex;align-items:center;gap:16px;margin-top:16px;}
.status{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--ink-soft);}

.result{margin-top:18px;padding:12px 14px;border-radius:var(--r-sm);font-size:15px;}
.result p{margin:0 0 4px;}
.result.ok{background:#e9f0e5;border:1px solid #c9dcc0;color:var(--ok);}
.result.bad{background:#f5e6e2;border:1px solid #e3c7bf;color:var(--danger);}

/* ------------------------------------------------------------ history */
.history{list-style:none;margin:0;padding:0;}
.history li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--paper-edge);}
.history li:last-child{border-bottom:none;}
.history img{width:48px;height:48px;object-fit:cover;border-radius:var(--r-sm);background:var(--archive-paper);flex:none;}
.history .h-cap{font-size:15px;line-height:1.35;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.history .h-when{font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:var(--ink-soft);white-space:nowrap;}

/* ------------------------------------------------------------ footer */
.foot{padding:18px 28px;border-top:1px solid var(--ink);background:var(--sticker-white);
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--ink-soft);display:flex;flex-wrap:wrap;align-items:center;}
.foot a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--paper-edge);}
.foot a:hover{color:var(--ink);border-bottom-color:var(--ink);}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--paper-yellow);
  font-family:var(--mono);font-size:12px;letter-spacing:0.06em;padding:12px 18px;border-radius:var(--r-sm);
  box-shadow:var(--shadow-card);max-width:90vw;z-index:50;}