/* ============================================================
   ASTORUM CLIENT PORTAL — brand system per astorum-site-h2/design-spec.md
   (H2 "Daylight Astronomy": ivory canvas, ink, single oxblood accent)
   ============================================================ */

:root{
  /* CANVAS */
  --ivory:       #FAF9F5;
  --ivory-deep:  #F1EEE6;
  --ivory-sink:  #EAE6DA;
  --ink:         #141413;
  --ink-2:       #6E695E;
  --ink-3:       #9B968A;
  --hairline:    #E2DED2;
  --hairline-ink:rgba(250,249,245,.14);

  /* ACCENT */
  --oxblood:      #5C1A24;
  --oxblood-deep: #471119;
  --oxblood-soft: rgba(92,26,36,.08);

  /* TYPE */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;

  --type-display: clamp(2.1rem, 4.6vw, 3.6rem);  --lh-display:1.05;
  --type-title:   clamp(1.45rem, 2vw, 1.85rem);
  --type-lead:    1.15rem; --type-body:1.0625rem; --lh-body:1.6;
  --type-label:   .6875rem; --ls-label:.18em;

  /* GRID & MOTION */
  --max-content: 64rem; --gutter: clamp(1.25rem, 4vw, 3rem);
  --space-section: clamp(2.6rem, 6vw, 4.5rem);
  --ease-out:cubic-bezier(.2,.65,.2,1);
  --dur-micro:180ms; --dur-reveal:700ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:var(--type-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--oxblood);color:var(--ivory)}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
img{max-width:100%}
a{color:inherit}

.wrap{max-width:var(--max-content);margin:0 auto;padding:0 var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:var(--type-display);line-height:var(--lh-display);letter-spacing:-.01em}
h2{font-size:var(--type-title);line-height:1.15}
em,i{font-style:italic}
.eyebrow{
  font-family:var(--mono);font-size:var(--type-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--hairline)}
.muted{color:var(--ink-2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--hairline);background:var(--ivory);position:sticky;top:0;z-index:20}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:4rem}
.wordmark{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--serif);font-size:1.35rem}
.wordmark .star{width:1.6rem;height:1.6rem}
.wordmark small{font-family:var(--mono);font-size:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);margin-left:.4rem;padding-left:.75rem;border-left:1px solid var(--hairline)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-weight:600;
  font-size:.9375rem;text-decoration:none;padding:.8rem 1.6rem;border-radius:2rem;border:0;
  cursor:pointer;transition:transform var(--dur-micro) ease,background var(--dur-micro) ease,color var(--dur-micro) ease;
}
.btn-ink{background:var(--ink);color:var(--ivory)}
.btn-ink:hover{background:var(--oxblood)}
.btn-ink:active{background:var(--oxblood-deep);transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:4px;padding:.8rem .4rem}
.btn-ghost:hover{color:var(--oxblood)}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.btn-small{padding:.5rem 1.1rem;font-size:.875rem}
.textlink{color:var(--oxblood);text-decoration:underline;text-underline-offset:4px;cursor:pointer;background:none;border:0;font:inherit;padding:0}

/* ---------- forms ---------- */
label{display:block;font-family:var(--mono);font-size:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-2);margin:0 0 .45rem}
input[type=text],input[type=email],input[type=url],textarea,select{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--hairline);
  padding:.55rem .1rem;border-radius:0;appearance:none;
  transition:border-color var(--dur-micro) ease;
}
input:focus,textarea:focus,select:focus{outline:none;border-bottom:2px solid var(--oxblood);margin-bottom:-1px}
textarea{resize:vertical;min-height:7.5rem;line-height:1.55}
.field{margin-bottom:1.5rem}
.field-hint{font-size:.85rem;color:var(--ink-3);margin:.35rem 0 0}
.form-error{color:var(--oxblood);font-size:.925rem;margin:.75rem 0 0;min-height:1.3em}

/* choice chips (request type, priority) */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chip span{
  display:inline-block;padding:.5rem 1.05rem;border:1px solid var(--hairline);border-radius:2rem;
  font-size:.9rem;font-weight:600;color:var(--ink-2);background:var(--ivory);
  transition:all var(--dur-micro) ease;cursor:pointer;
}
.chip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.chip input:focus-visible + span{outline:2px solid var(--oxblood);outline-offset:2px}
.chip:hover span{border-color:var(--ink-2)}

/* dropzone */
.dropzone{
  border:1px dashed var(--hairline);border-radius:.5rem;background:var(--ivory-deep);
  padding:1.4rem;text-align:center;color:var(--ink-2);cursor:pointer;
  transition:border-color var(--dur-micro) ease,background var(--dur-micro) ease;
}
.dropzone:hover,.dropzone.drag{border-color:var(--oxblood);background:var(--oxblood-soft)}
.dropzone input{display:none}
.file-list{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.file-list li{
  display:flex;align-items:center;gap:.7rem;font-size:.9rem;
  border:1px solid var(--hairline);border-radius:.4rem;padding:.45rem .7rem;background:#fff;
}
.file-list img{width:2.2rem;height:2.2rem;object-fit:cover;border-radius:.25rem}
.file-list .fname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list .fsize{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.file-list button{background:none;border:0;color:var(--oxblood);cursor:pointer;font-size:1.05rem;line-height:1;padding:.2rem}

/* ---------- cards / plates ---------- */
.plate{background:#fff;border:1px solid var(--hairline);border-radius:.5rem;padding:clamp(1.4rem,3vw,2.2rem)}
.plate-deep{background:var(--ivory-deep)}
.section{padding:var(--space-section) 0}
.section > .wrap > .eyebrow{margin-bottom:1.6rem}

/* site card */
.site-card{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.site-card h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.site-card .site-meta{display:flex;align-items:center;gap:.9rem;margin-top:.5rem;flex-wrap:wrap}
.tier{font-family:var(--mono);font-size:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;border:1px solid var(--hairline);border-radius:2rem;padding:.28rem .8rem;color:var(--ink-2)}

/* ---------- request history ---------- */
.req-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.req{border:1px solid var(--hairline);border-radius:.5rem;background:#fff;padding:1.25rem 1.4rem}
.req-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.req-type{font-family:var(--serif);font-size:1.2rem}
.req-date{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-left:auto}
.req-text{margin:.6rem 0 0;color:var(--ink-2);white-space:pre-line}
.req-files{margin:.6rem 0 0;display:flex;gap:.5rem;flex-wrap:wrap}
.req-files a{font-family:var(--mono);font-size:.75rem;color:var(--oxblood);text-decoration:underline;text-underline-offset:3px}
.req-foot{margin-top:.9rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.req-note{border-left:2px solid var(--oxblood);padding:.35rem 0 .35rem .9rem;margin:.8rem 0 0;color:var(--ink);font-style:italic}
.req .reply-box{margin-top:.9rem}

/* status pills */
.pill{
  display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  border-radius:2rem;padding:.3rem .85rem;border:1px solid var(--hairline);color:var(--ink-2);
}
.pill-pending{border-color:var(--ink-2);color:var(--ink)}
.pill-in_progress{background:var(--ivory-deep);border-color:var(--ivory-deep);color:var(--ink)}
.pill-preview{background:var(--oxblood);border-color:var(--oxblood);color:var(--ivory)}
.pill-needs_clarification{border-color:var(--oxblood);color:var(--oxblood)}
.pill-shipped{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.pill-rejected,.pill-cancelled{color:var(--ink-3);text-decoration:line-through}

/* ---------- auth view ---------- */
.auth{min-height:calc(100vh - 4rem);display:grid;place-items:center;padding:var(--space-section) 0}
.auth .plate{width:min(26.5rem,calc(100vw - 2*var(--gutter)))}
.auth h1{font-size:clamp(1.9rem,5vw,2.5rem);margin:.9rem 0 .4rem}
.auth .lead{color:var(--ink-2);margin:0 0 1.8rem}
.otp-input{font-family:var(--mono);font-size:1.6rem;letter-spacing:.45em;text-align:center}

/* ---------- footer ---------- */
.footer{background:var(--ivory-sink);border-top:1px solid var(--hairline);margin-top:var(--space-section)}
.footer .wrap{padding-top:2.2rem;padding-bottom:2.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer .astrum{font-family:var(--serif);font-style:italic;color:var(--ink-2)}
.footer .fine{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}

/* ---------- utility ---------- */
.hidden{display:none !important}
.reveal{opacity:0;transform:translateY(12px);animation:rise var(--dur-reveal) var(--ease-out) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-.15em}
@keyframes spin{to{transform:rotate(360deg)}}
.banner{
  background:var(--oxblood);color:var(--ivory);text-align:center;
  font-size:.9rem;padding:.6rem var(--gutter);
}
.banner a{color:var(--ivory)}

/* toast */
.toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translateX(-50%) translateY(120%);
  background:var(--ink);color:var(--ivory);border-radius:2rem;padding:.7rem 1.5rem;
  font-size:.925rem;transition:transform .35s var(--ease-out),visibility 0s .35s;z-index:50;max-width:min(34rem,90vw);
  visibility:hidden;
}
.toast.show{transform:translateX(-50%) translateY(0);visibility:visible;transition:transform .35s var(--ease-out)}

/* admin extras */
.admin-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.admin-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.2rem;margin-top:1rem}
.filter-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}