/* ============================================================
   home.smro.bot — the person home page (SMR-125).
   Built from the Kimi design session's direction B, "The Card
   File" (site/home/directions/B/direction.css, round 2): raised
   cards on the card-stock ground, status chips, counted
   sections, a two-column grid at desk width. Montserrat
   ExtraBold throughout; tokens from site/index.html.
   API strings render as sent: no text-transform on any rule
   that styles API text (button labels, outcomes, history,
   link labels, names).
   ============================================================ */

@font-face{
  font-family:"Mont XB";
  src:url("/assets/fonts/Montserrat-ExtraBold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:block;
}

:root{
  --ground:#e9dcc3;
  --card:#f0e5cb;
  --ink:#0d0b08;
  --ink-soft:rgba(13,11,8,.72);    /* 6.9:1 on ground */
  --ink-faint:rgba(13,11,8,.62);   /* 5.0:1 on ground */
  --rule:rgba(13,11,8,.30);
  --rule-soft:rgba(13,11,8,.16);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0f0e0c;
    --card:#181510;
    --ink:#f5f1e8;
    --ink-soft:rgba(245,241,232,.72);  /* 9.1:1 on ground */
    --ink-faint:rgba(245,241,232,.62); /* 6.9:1 on ground */
    --rule:rgba(245,241,232,.30);
    --rule-soft:rgba(245,241,232,.16);
  }
}
:root[data-theme="dark"]{
  --ground:#0f0e0c;
  --card:#181510;
  --ink:#f5f1e8;
  --ink-soft:rgba(245,241,232,.72);
  --ink-faint:rgba(245,241,232,.62);
  --rule:rgba(245,241,232,.30);
  --rule-soft:rgba(245,241,232,.16);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ height:100%; }
body{
  margin:0;
  min-height:100%;
  min-height:100svh;
  background:var(--ground);
  color:var(--ink);
  font-family:"Mont XB","Montserrat","Avenir Next","Helvetica Neue",sans-serif;
  font-weight:800;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}

a{ color:inherit; }

.page{
  max-width:74rem;
  margin:0 auto;
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(4rem, env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
}

/* ---------- head ---------- */

.head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1rem 0 1.4rem;
  border-bottom:2px solid var(--ink);
}
.head .brand{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
}
.head .mark{
  width:2.1rem;
  color:var(--ink);
  flex:none;
}
.head .mark svg{ display:block; width:100%; height:auto; fill:currentColor; }
.head .word{
  font-size:.78rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.who{
  display:flex;
  align-items:center;
  gap:1.1rem;
  text-align:right;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.who .id{ display:grid; justify-items:end; row-gap:.25rem; }
.who .person-name{ margin:0; font-size:.95rem; line-height:1.2; }
.who .person-email{
  margin:0;
  font-size:.66rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
  overflow-wrap:anywhere;
}

/* press buttons: the label is API data, rendered as sent */
.btn{
  font:inherit;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ground);
  background:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:.55em 1.1em;
  cursor:pointer;
  text-decoration:none;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.btn:hover{ background:var(--ink-soft); border-color:var(--ink-soft); }
.btn:focus-visible{ outline:2px solid currentColor; outline-offset:.25em; }
.btn:active{ opacity:.75; }

.btn-ghost{
  font:inherit;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink);
  background:none;
  border:1.5px solid var(--rule);
  border-radius:999px;
  padding:.55em 1.1em;
  cursor:pointer;
  text-decoration:none;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost:focus-visible{ outline:2px solid currentColor; outline-offset:.25em; }
.btn-ghost:active{ color:var(--ink-soft); }

.btn-plain{
  font:inherit;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
  background:none;
  border:none;
  padding:.55em .2em;
  cursor:pointer;
  text-decoration:none;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.btn-plain:hover{ color:var(--ink); }
.btn-plain:focus-visible{ outline:2px solid currentColor; outline-offset:.25em; }
.btn-plain:active{ color:var(--ink-faint); }

/* page's own controls (design copy: sign out, open, files, back) */
.cbtn{
  font:inherit;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  background:none;
  border:1.5px solid var(--rule);
  border-radius:999px;
  padding:.55em 1.1em .55em 1.28em;
  cursor:pointer;
  text-decoration:none;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.cbtn:hover{ border-color:var(--ink); }
.cbtn:focus-visible{ outline:2px solid currentColor; outline-offset:.25em; }
.cbtn:active{ color:var(--ink-soft); }

.cbtn-plain{
  font:inherit;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:none;
  border:none;
  padding:.55em .2em;
  cursor:pointer;
  text-decoration:none;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.cbtn-plain:hover{ color:var(--ink); }
.cbtn-plain:focus-visible{ outline:2px solid currentColor; outline-offset:.25em; }
.cbtn-plain:active{ color:var(--ink-faint); }
.cbtn-plain:disabled{ opacity:.55; cursor:default; }

/* data link: API label as sent */
.dlink{
  font:inherit;
  font-size:.8rem;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
  outline:none;
  border-bottom:1.5px solid var(--rule);
  padding-bottom:.1em;
}
.dlink:hover{ border-color:var(--ink); }
.dlink:focus-visible{ outline:2px solid currentColor; outline-offset:.25em; }
.dlink:active{ color:var(--ink-soft); }

/* ---------- sections ---------- */

.board{
  margin-top:2rem;
  display:grid;
  gap:2.5rem;
}

.section-head{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  margin:0 0 1rem;
}
.section-label{
  margin:0;
  font-size:.85rem;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.section-count{
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--ink-faint);
}

.cards{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(21rem,100%),1fr));
}
.cards-single{ grid-template-columns:1fr; }
.cards > *, .board > *, .duo > *{ min-width:0; }

.duo{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;
}
@media (min-width:62rem){
  .duo{ grid-template-columns:1fr 1fr; }
}

/* ---------- card ---------- */

.card{
  background:var(--card);
  border:1px solid var(--rule-soft);
  padding:1.15rem 1.25rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.card-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.4rem .8rem;
}
.item-kind{
  margin:0;
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* chips: outcome is API data as sent; waiting is dashed */
.chip{
  flex:none;
  font-size:.62rem;
  letter-spacing:.08em;
  border:1.5px solid var(--rule);
  border-radius:999px;
  padding:.45em 1em;
  color:var(--ink);
  white-space:nowrap;
}
.chip-solid{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--ground);
}
.chip-waiting{
  border-style:dashed;
  color:var(--ink-soft);
}

.item-title{
  margin:0;
  font-size:1.12rem;
  line-height:1.32;
}
.item-ask{
  margin:0;
  font-size:.82rem;
  line-height:1.62;
  color:var(--ink-soft);
}
.item-meta{
  margin:0;
  font-size:.66rem;
  letter-spacing:.05em;
  color:var(--ink-faint);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.3em .8em;
}
.item-meta .sep{ color:var(--rule); }
.item-meta .dlink{ font-size:.66rem; letter-spacing:.05em; }

.item-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.1rem;
}

.item-buttons{
  margin-top:auto;
  padding-top:.35rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55rem .8rem;
}

.item-text{
  display:block;
  width:100%;
  min-height:4.5rem;
  font:inherit;
  font-size:.82rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--ground);
  border:1.5px solid var(--rule);
  padding:.7em .8em;
  resize:vertical;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.item-text::placeholder{ color:var(--ink-faint); }
.item-text:focus{ border-color:var(--ink); }

.item-text-error{
  margin:0;
  font-size:.66rem;
  letter-spacing:.06em;
  color:var(--ink);
  border-left:2px solid var(--ink);
  padding-left:.6em;
}

.item-notice{
  margin:0;
  padding:.8rem .95rem;
  border:1.5px solid var(--ink);
  font-size:.78rem;
  line-height:1.6;
}
.item-notice p{ margin:0; }

.echo{
  border-left:2px solid var(--rule);
  padding-left:.85rem;
}
.echo-label{
  margin:0 0 .3rem;
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.echo-text{
  margin:0;
  font-size:.82rem;
  line-height:1.6;
}

.history{
  list-style:none;
  margin:0;
  padding:.7rem 0 0;
  border-top:1px solid var(--rule-soft);
  display:grid;
  row-gap:.65rem;
}
.history-line{
  margin:0;
  font-size:.66rem;
  letter-spacing:.05em;
  color:var(--ink-soft);
}
.history-text{
  margin:.25rem 0 0;
  font-size:.8rem;
  line-height:1.6;
}

/* ---------- list cards (reports, files, issues, sites, shared links) ---------- */

.list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
.list > li{
  padding:.85rem 0;
  border-bottom:1px solid var(--rule-soft);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:.3rem 1rem;
}
.list > li:last-child{ border-bottom:none; padding-bottom:0; }
.list > li:first-child{ padding-top:0; }

.report{ grid-template-columns:minmax(0,1fr) auto; }
.report-project{ margin:0; font-size:.92rem; }
.report-author, .report-date{
  font-size:.64rem;
  letter-spacing:.08em;
  color:var(--ink-faint);
}
/* the report's tag: its age in plain words, the exact time on hover (SMR-148) */
.report-date{
  color:var(--ink-soft);
  white-space:nowrap;
  text-decoration:underline dotted var(--rule);
  text-underline-offset:.22em;
  cursor:help;
}
.report-author{ grid-column:1; }
/* multi-line report text: newlines kept, long URLs wrapped (320 px, no scroll) */
.report-text{
  grid-column:1 / -1;
  margin:.3rem 0 .2rem;
  font-size:.8rem;
  line-height:1.6;
  color:var(--ink-soft);
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.report-text a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1.5px solid var(--rule);
  padding-bottom:.05em;
  overflow-wrap:anywhere;
  outline:none;
}
.report-text a:hover{ border-color:var(--ink); }
.report-text a:focus-visible{ outline:2px solid currentColor; outline-offset:.25em; }
.report-empty{
  grid-column:1 / -1;
  margin:.2rem 0 0;
  font-size:.72rem;
  color:var(--ink-faint);
}
.report-notice{
  grid-column:1 / -1;
  margin:.15rem 0 0;
  font-size:.72rem;
  line-height:1.6;
  color:var(--ink);
  border-left:2px solid var(--ink);
  padding-left:.6em;
}
.report-foot{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem 1rem;
  margin-top:.15rem;
}
.report-foot .report-refresh,
.report-foot .report-updating{ margin-left:auto; }
.report-updating{ flex:none; }

.list > li.file{ grid-template-columns:minmax(0,1fr) auto auto; }
/* file name as a click control: a button in the page's link treatment (.dlink) */
.file-name{
  margin:0;
  font:inherit;
  font-size:.84rem;
  color:var(--ink);
  background:none;
  border:none;
  border-bottom:1.5px solid var(--rule);
  padding:0 0 .1em;
  cursor:pointer;
  text-align:left;
  justify-self:start;
  overflow-wrap:anywhere;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
.file-name:hover{ border-color:var(--ink); }
.file-name:focus-visible{ outline:2px solid currentColor; outline-offset:.25em; }
.file-name:active{ color:var(--ink-soft); }
.file-facts{
  font-size:.64rem;
  letter-spacing:.08em;
  color:var(--ink-faint);
  white-space:nowrap;
}
.file-error{
  grid-column:1 / -1;
  margin:.2rem 0 0;
  font-size:.68rem;
}

.row-main{ font-size:.84rem; line-height:1.4; overflow-wrap:anywhere; }
.row-sub{
  font-size:.64rem;
  letter-spacing:.08em;
  color:var(--ink-faint);
  text-align:right;
}
.row-id{
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--ink-soft);
}

.shared-on{
  font-size:.68rem;
  letter-spacing:.05em;
  color:var(--ink-faint);
  text-align:right;
  max-width:20rem;
}
.shared-link-item:not(:last-child)::after{ content:", "; }

/* people as a chip grid */
.people{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));
}
.people li{
  background:var(--card);
  border:1px solid var(--rule-soft);
  padding:.8rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.people .row-main{ font-size:.8rem; }

/* other people's items: person chip above the card */
.other-person{
  margin:1.4rem 0 .6rem;
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}
.other-person:first-child{ margin-top:0; }

/* ---------- states ---------- */

.empty{
  margin:0;
  font-size:.85rem;
  color:var(--ink-soft);
}
.empty-card{
  background:var(--card);
  border:1px solid var(--rule-soft);
  padding:1.4rem 1.25rem;
}

.gate{
  min-height:64vh;
  display:grid;
  place-content:center;
  justify-items:center;
  text-align:center;
  row-gap:1.5rem;
}
.gate .mark{ width:3rem; color:var(--ink); }
.gate .mark svg{ display:block; width:100%; height:auto; fill:currentColor; }
.gate-message{
  margin:0;
  max-width:26rem;
  font-size:.95rem;
  line-height:1.7;
}
.gate-sub{
  margin:0;
  max-width:26rem;
  font-size:.72rem;
  line-height:1.7;
  color:var(--ink-soft);
}

.banner{
  background:var(--card);
  border:1.5px solid var(--ink);
  padding:1rem 1.15rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem 1.2rem;
  font-size:.8rem;
  line-height:1.6;
}
.banner p{ margin:0; flex:1 1 15rem; }

.loading{
  min-height:60vh;
  display:grid;
  place-content:center;
}
.loading p{
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ---------- foot ---------- */

.foot{
  margin-top:3rem;
  padding-top:1.3rem;
  border-top:2px solid var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
}
.foot small{
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--ink-faint);
}

/* ---------- production additions (home.js states) ---------- */

[hidden]{ display:none !important; }

.stack{ display:grid; gap:2.5rem; align-content:start; }
.duo.duo-single{ grid-template-columns:1fr; }
.list > li > a.row-main{ justify-self:start; }
[data-slot="other-group"] + [data-slot="other-group"]{ margin-top:1.4rem; }
.files-back{ margin-top:1rem; }
.stack > *{ min-width:0; }

.composer{ display:grid; gap:.6rem; }

.section-error{
  margin:0;
  font-size:.78rem;
  line-height:1.6;
  color:var(--ink);
  border-left:2px solid var(--ink);
  padding-left:.6em;
}

.banners{ display:grid; gap:1rem; margin-top:1.5rem; }
.banners:empty{ display:none; }
.banner .echo{ flex:1 1 100%; }

/* ---------- Sam's first-visit video (home.js rickRoll) ---------- */

.rr{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  padding:max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:rgba(13,11,8,.94);
}
.rr-video{
  display:block;
  width:min(100%, calc((100svh - 7rem) * 16 / 9), 72rem);
  aspect-ratio:16 / 9;
  border:0;
  border-radius:.6rem;
  background:#000;
}
.rr-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
.rr-btn{
  font:inherit;
  font-size:.9rem;
  letter-spacing:.04em;
  color:#0d0b08;
  background:#e9dcc3;
  border:1.5px solid #e9dcc3;
  border-radius:999px;
  padding:.65em 1.4em;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.rr-btn-ghost{ color:#e9dcc3; background:none; border-color:rgba(233,220,195,.5); }
.rr-btn:hover{ opacity:.85; }
.rr-btn:focus-visible{ outline:2px solid #e9dcc3; outline-offset:.25em; }

/* ---------- small screens ---------- */

@media (max-width:30rem){
  .page{ padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); }
  .head{ align-items:flex-start; }
  .who .id{ justify-items:end; }
  .shared-on{ text-align:left; }
  .list > li[data-slot="shared-link"]{ grid-template-columns:minmax(0,1fr); row-gap:.35rem; }
  .list > li.file{ grid-template-columns:minmax(0,1fr) auto; }
  .list > li.file .file-name{ grid-column:1 / -1; }
}

@media (prefers-reduced-motion: reduce){
  .loading p{ animation:none; }
}