/* LogShaadi components. app.css is a fixed Tailwind build; anything it lacks lives here. */
:root{
  --ls-line:#e7dde2;
  --ls-soft:#fdf4f7;
  --ls-ink:#3c2b33;
  --ls-mute:#7a6a72;
  --ls-good:#146c43; --ls-good-bg:#e7f4ec;
  --ls-wait:#8a5a12; --ls-wait-bg:#fdf6e6;
  --ls-bad:#9b1c24;  --ls-bad-bg:#fbeaea;
}

/* ---- photos ---- */
.ls-photo{display:block;width:100%;aspect-ratio:3/4;border-radius:.6rem;overflow:hidden;background:#f2eaee;position:relative}
.ls-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ls-photo--lg{aspect-ratio:4/5;max-width:340px}
.ls-photo--locked{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  background:repeating-linear-gradient(45deg,#f5eef1,#f5eef1 10px,#f0e6ea 10px,#f0e6ea 20px);color:var(--ls-mute)}
.ls-photo__mark{font-size:1.6rem;line-height:1}
.ls-photo__note{font-size:.72rem;font-weight:600;letter-spacing:.02em;text-align:center;padding:0 .4rem}

.ls-gallery{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.ls-gallery .ls-photo{aspect-ratio:1/1}

/* ---- cards ---- */
.ls-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ls-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e9e2e5;border-radius:.75rem;
  overflow:hidden;box-shadow:0 1px 2px #0000000a;transition:box-shadow .15s,transform .15s}
.ls-card:hover{box-shadow:0 4px 12px #00000014;transform:translateY(-1px)}
.ls-card__media{display:block}
.ls-card__body{padding:.7rem .85rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.ls-card__name{font-weight:700;color:var(--ls-ink);text-decoration:none;line-height:1.3}
.ls-card__name:hover{color:var(--brand)}
.ls-card__code{font-size:.72rem;color:var(--ls-mute);font-variant-numeric:tabular-nums;margin:0}
.ls-card__line{font-size:.82rem;color:#5d4d55;margin:.15rem 0 0;line-height:1.45}
.ls-card__foot{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.35rem}

/* ---- badges ---- */
.ls-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;padding:.15rem .6rem;
  font-size:.72rem;font-weight:700;white-space:nowrap}
.ls-badge--neutral{background:#f1ecee;color:var(--ls-mute)}
.ls-badge--good{background:var(--ls-good-bg);color:var(--ls-good)}
.ls-badge--wait{background:var(--ls-wait-bg);color:var(--ls-wait)}
.ls-badge--bad{background:var(--ls-bad-bg);color:var(--ls-bad)}
.ls-badge--brand{background:#fce7ef;color:var(--brand-dark)}

/* ---- inbox shell ---- */
.ls-inbox{display:grid;gap:1.25rem}
@media (min-width:60rem){ .ls-inbox{grid-template-columns:220px 1fr;align-items:start} }

.ls-folders{display:flex;flex-direction:column;gap:.15rem;border:1px solid var(--ls-line);
  border-radius:.7rem;background:#fff;padding:.4rem;position:sticky;top:1rem}
@media (max-width:60rem){ .ls-folders{flex-direction:row;overflow-x:auto;position:static} }
.ls-folder{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;border-radius:.45rem;
  color:var(--ls-ink);text-decoration:none;font-size:.9rem;white-space:nowrap}
.ls-folder:hover{background:var(--ls-soft)}
.ls-folder.is-active{background:var(--brand);color:#fff;font-weight:600}
.ls-folder.is-active .ls-folder__count{background:#ffffff33;color:#fff}
.ls-folder__icon{width:1.1em;text-align:center;flex:none}
.ls-folder__label{flex:1}
.ls-folder__count{background:var(--brand);color:#fff;border-radius:999px;font-size:.7rem;font-weight:700;
  padding:.05rem .45rem;min-width:1.35em;text-align:center;font-variant-numeric:tabular-nums}

/* ---- inbox rows ---- */
.ls-list{border:1px solid var(--ls-line);border-radius:.7rem;background:#fff;overflow:hidden}
.ls-row{display:grid;grid-template-columns:52px 1fr auto;gap:.85rem;padding:.85rem 1rem;
  border-bottom:1px solid #f1eaed;align-items:start}
.ls-row:last-child{border-bottom:0}
.ls-row:hover{background:#fcf9fa}
.ls-row.is-unread{background:var(--ls-soft)}
.ls-row.is-unread .ls-row__name{font-weight:800}
.ls-row__avatar .ls-photo{aspect-ratio:1/1;border-radius:50%}
.ls-row__main{min-width:0}
.ls-row__name{color:var(--ls-ink);text-decoration:none;font-weight:600;font-size:.95rem}
.ls-row__name:hover{color:var(--brand)}
.ls-row__meta{font-size:.76rem;color:var(--ls-mute);margin:.1rem 0 0}
.ls-row__body{font-size:.86rem;color:#5d4d55;margin:.3rem 0 0;line-height:1.5}
.ls-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;font-size:.75rem;color:var(--ls-mute);white-space:nowrap}
.ls-row__acts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
@media (max-width:40rem){
  .ls-row{grid-template-columns:44px 1fr}
  .ls-row__side{grid-column:2;align-items:flex-start;flex-direction:row}
}

.ls-btn-sm{font-size:.78rem;font-weight:600;padding:.3rem .75rem;border-radius:.4rem;border:1px solid var(--ls-line);
  background:#fff;color:var(--ls-ink);cursor:pointer;text-decoration:none;display:inline-block}
.ls-btn-sm:hover{border-color:var(--brand);color:var(--brand)}
.ls-btn-sm--go{background:var(--brand);border-color:var(--brand);color:#fff}
.ls-btn-sm--go:hover{filter:brightness(.93);color:#fff}
.ls-btn-sm--no{color:var(--ls-bad)}
.ls-btn-sm--no:hover{border-color:var(--ls-bad);color:var(--ls-bad)}

/* ---- thread ---- */
.ls-thread{display:flex;flex-direction:column;gap:.75rem}
.ls-msg{max-width:min(85%,44rem);padding:.7rem .95rem;border-radius:.8rem;border:1px solid var(--ls-line);
  background:#fff;font-size:.92rem;line-height:1.6;white-space:pre-line}
.ls-msg--mine{align-self:flex-end;background:var(--ls-soft);border-color:#f0d8e2}
.ls-msg__meta{font-size:.72rem;color:var(--ls-mute);margin-top:.4rem;white-space:normal}

/* ---- profile detail ---- */
.ls-detail{display:grid;gap:1.5rem}
@media (min-width:56rem){ .ls-detail{grid-template-columns:340px 1fr;align-items:start} }
.ls-kv{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;font-size:.9rem;align-items:baseline}
.ls-kv dt{color:var(--ls-mute);font-weight:600}
.ls-kv dd{margin:0;color:var(--ls-ink)}
.ls-section{border:1px solid var(--ls-line);border-radius:.7rem;background:#fff;padding:1.1rem 1.25rem}
.ls-section + .ls-section{margin-top:1rem}
.ls-section h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ls-mute);
  font-weight:700;margin:0 0 .8rem}

.ls-locked{border:1px dashed #d9c6ce;border-radius:.6rem;padding:.85rem 1rem;background:var(--ls-soft);
  font-size:.88rem;color:#6b555f;line-height:1.55}

/* ---- forms ---- */
.ls-fields{display:grid;gap:.85rem}
@media (min-width:36rem){ .ls-fields--2{grid-template-columns:1fr 1fr} .ls-fields--3{grid-template-columns:repeat(3,1fr)} }
.ls-checks{display:grid;gap:.3rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ls-check{display:flex;align-items:center;gap:.45rem;font-size:.86rem;color:var(--ls-ink);
  padding:.25rem .4rem;border-radius:.35rem;cursor:pointer}
.ls-check:hover{background:var(--ls-soft)}
.ls-check input{accent-color:var(--brand)}
.ls-vis{display:grid;gap:.4rem}
.ls-vis label{display:flex;gap:.55rem;align-items:flex-start;border:1px solid var(--ls-line);border-radius:.5rem;
  padding:.55rem .75rem;cursor:pointer;font-size:.86rem;background:#fff}
.ls-vis label:hover{border-color:var(--brand)}
.ls-vis input{margin-top:.2rem;accent-color:var(--brand)}

.ls-thumbs{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin-top:.8rem}
.ls-thumb{border:1px solid var(--ls-line);border-radius:.5rem;overflow:hidden;background:#f2eaee}
.ls-thumb img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.ls-thumb__bar{display:flex;gap:.25rem;padding:.3rem;background:#fff;border-top:1px solid var(--ls-line)}
.ls-thumb__bar button{flex:1;font-size:.68rem;font-weight:700;padding:.2rem;border-radius:.25rem;
  border:1px solid var(--ls-line);background:#fff;cursor:pointer;color:#5d4d55}
.ls-thumb__bar button:hover{border-color:var(--brand);color:var(--brand)}
.ls-thumb.is-primary{outline:2px solid var(--brand);outline-offset:-1px}
.ls-drop{border:2px dashed #dcc8d2;border-radius:.7rem;padding:1.4rem 1rem;text-align:center;background:#fffafc;cursor:pointer}
.ls-drop:hover,.ls-drop.is-over{border-color:var(--brand);background:var(--ls-soft)}
.ls-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.ls-empty{text-align:center;padding:2.5rem 1rem;color:var(--ls-mute);border:1px solid var(--ls-line);
  border-radius:.7rem;background:#fff}
.ls-note{border-left:3px solid var(--brand);background:var(--ls-soft);padding:.7rem .95rem;
  border-radius:0 .4rem .4rem 0;font-size:.88rem;line-height:1.6;color:#5d4550}
.ls-note--warn{border-left-color:#d9a441;background:var(--ls-wait-bg);color:var(--ls-wait)}
.ls-meter{height:6px;border-radius:999px;background:#efe6ea;overflow:hidden}
.ls-meter span{display:block;height:100%;background:var(--brand);border-radius:999px}
@media (prefers-reduced-motion:reduce){ .ls-card{transition:none} }

/* the longest folder label is "Interests & Requests" — give it room rather than clipping it */
.ls-folder__label{font-size:.86rem;line-height:1.25;white-space:normal}
.ls-folder{align-items:center;padding-block:.5rem}