/* Guides — Cachet + the Y palette, shared with the other staff apps. */
@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; }

.muted { color:var(--muted); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.spacer { flex:1; }
.pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:700; }
.pill.draft { background:#fff3e8; color:#a24c07; }
.pill.live  { background:#e7f7f2; color:#046b5a; }
button.link { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; }
.btn.danger { background:#b42318; }

/* guide list */
.glist { display:grid; gap:12px; }
.glist a.card { display:block; text-decoration:none; color:inherit; }
.glist a.card:hover { border-color:var(--y-purple); }
.glist h3 { margin:0 0 4px; color:var(--y-purple); }

/* reading a guide */
.guide-head { margin-bottom:22px; }
.steps { list-style:none; margin:0; padding:0; counter-reset:step; display:grid; gap:18px; }
.step { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; }
.step .num { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
             background:var(--y-purple); color:#fff; font-weight:700; margin-right:10px; flex:none; }
.step .text { display:flex; align-items:flex-start; font-size:1.05rem; }
.step img { display:block; max-width:100%; height:auto; margin-top:14px; border-radius:var(--r-sm);
            border:1px solid var(--line); }

/* editing */
.edit-step textarea { min-height:70px; }
.edit-step .tools { margin-top:10px; }
.edit-step .tools form { display:inline; margin:0; }
.edit-step img { display:block; max-width:100%; max-height:260px; width:auto; height:auto; }
.check { display:flex; gap:8px; align-items:center; font-weight:400; margin:10px 0; }
.check input { width:auto; }

/* blur tool */
.blur-wrap { position:relative; display:inline-block; max-width:100%; touch-action:none; user-select:none; }
.blur-wrap img { display:block; max-width:100%; height:auto; }
.blur-box { position:absolute; background:rgba(146,39,143,.35); border:2px solid var(--y-purple); }
.blur-box.sel { border-color:var(--y-orange); }

.topbar .who { color:var(--muted); font-size:.9rem; }
.foot { text-align:center; color:var(--muted); font-size:.85rem; padding:20px; }
@media (max-width:600px) {
  .topbar { padding:12px 16px; flex-wrap:wrap; }
  .wrap { padding:20px 16px 50px; }
  .step { padding:14px; }
}