/* Cultivate Donor Playbook — shared styles for app-owned pages (login, stories,
   submit, submissions). Matches the playbook: Cachet Pro + the Y palette. */
@font-face { font-family:'Cachet'; src:url('/static/fonts/cachet-book.otf') format('opentype');   font-weight:400; font-display:swap; }
@font-face { font-family:'Cachet'; src:url('/static/fonts/cachet-medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Cachet'; src:url('/static/fonts/cachet-bold.otf') format('opentype');   font-weight:700; font-display:swap; }
@font-face { font-family:'Cachet'; src:url('/static/fonts/cachet-light.otf') format('opentype');  font-weight:300; font-display:swap; }

:root {
  --y-purple:#92278f; --y-red:#ed1c24; --y-green:#01a490; --y-blue:#0089d0;
  --y-cyan:#00aeef; --y-orange:#f47920;
  --ink:#1f2430; --muted:#5c6472; --line:#e6e8ee; --bg:#f6f7fb; --card:#fff;
  --r-sm:8px; --r-md:12px; --r-lg:20px;
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:'Cachet',-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
}
a { color:var(--y-purple); }
h1,h2,h3 { font-weight:700; line-height:1.15; margin:0 0 .4em; }

/* top bar */
.topbar {
  display:flex; align-items:center; gap:18px; padding:14px 22px;
  background:var(--card); border-bottom:1px solid var(--line);
}
.topbar .brand { font-weight:700; color:var(--y-purple); font-size:1.15rem; text-decoration:none; }
.topbar nav { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.topbar nav a {
  padding:8px 14px; border-radius:999px; text-decoration:none; color:var(--muted); font-weight:500;
}
.topbar nav a:hover { background:var(--bg); }
.topbar nav a.active { background:var(--y-purple); color:#fff; }

.wrap { max-width:1040px; margin:0 auto; padding:28px 22px 60px; }
.btn {
  display:inline-block; border:0; border-radius:999px; padding:11px 22px; font:inherit;
  font-weight:700; cursor:pointer; background:var(--y-purple); color:#fff; text-decoration:none;
}
.btn:hover { filter:brightness(1.07); }
.btn.ghost { background:transparent; color:var(--y-purple); border:1.5px solid var(--y-purple); }
.btn.sm { padding:7px 14px; font-size:.9rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; }

label { display:block; font-weight:500; margin:14px 0 5px; }
input[type=text], input[type=email], select, textarea {
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--r-md);
  font:inherit; background:#fff;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--y-purple); }

.flash { padding:12px 16px; border-radius:var(--r-md); margin-bottom:16px; }
.flash.success { background:#e7f7f2; color:#046b5a; }
.flash.danger  { background:#fdeaea; color:#9b1c1c; }

.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:22px; }
.filters > div { flex:1; min-width:170px; }

/* story wall mosaic */
.mosaic { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.story {
  border-radius:var(--r-lg); padding:20px 20px 22px; color:#fff; position:relative; overflow:hidden;
  min-height:150px; display:flex; flex-direction:column;
}
.story .meta { font-size:.82rem; opacity:.9; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.story h3 { color:#fff; }
.story .body { font-size:.95rem; opacity:.96; }
.story-c0{background:var(--y-purple);} .story-c1{background:var(--y-blue);}
.story-c2{background:var(--y-green);}  .story-c3{background:var(--y-orange);}
.story-c4{background:var(--y-cyan);}   .story-c5{background:var(--y-red);}
.empty { color:var(--muted); text-align:center; padding:50px 0; }

table.grid { width:100%; border-collapse:collapse; }
table.grid th, table.grid td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
table.grid th { font-weight:500; color:var(--muted); font-size:.85rem; }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; }
.pill.pending{background:#fff3e0;color:#a85a00;} .pill.published{background:#e7f7f2;color:#046b5a;}
.pill.rejected{background:#fdeaea;color:#9b1c1c;} .pill.archived{background:#eef0f4;color:#5c6472;}
.foot { text-align:center; color:var(--muted); font-size:.8rem; padding:30px 0 8px; }