/* ===== Crafted for Good — brand system =====
   Colors + fonts are overridden at runtime from Config, but these are the
   correct defaults from the brand guide so nothing ever flashes off-brand. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Jost:wght@300;400;500;600;700&display=swap');

:root{
  --plum:#5E4B71;
  --amber:#CEB27B;
  --teal:#01687A;
  --cream:#FFFBF6;
  --ink:#141412;
  --font-head:'Playfair Display', Georgia, serif;
  --font-body:'Jost', system-ui, sans-serif;

  --plum-soft:#efeaf3;
  --amber-soft:#f7f0e2;
  --teal-soft:#e2f0f2;
  --line:#ece7dd;
  --muted:#8b8478;
  --card:#ffffff;
  --shadow:0 10px 34px rgba(20,20,18,.08);
  --shadow-sm:0 4px 14px rgba(20,20,18,.06);
  --radius:20px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}
::selection{background:var(--amber);color:var(--ink);}

.hide{display:none !important;}
.spin{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:middle;}
@keyframes sp{to{transform:rotate(360deg);}}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}

/* ---------- LOGIN ---------- */
#login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(1,104,122,.10) 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(94,75,113,.10) 0%, transparent 55%),
    var(--cream);
}
.login-card{
  width:100%;max-width:410px;background:var(--card);border-radius:26px;
  box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden;animation:rise .4s ease;
}
.login-top{background:var(--teal);padding:30px 26px 24px;text-align:center;}
.login-top img{width:96px;height:auto;display:inline-block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));}
.login-top .wm{margin-top:12px;height:26px;width:auto;display:inline-block;}
.login-body{padding:26px 26px 30px;}
.login-body h1{font-family:var(--font-head);font-weight:800;font-size:24px;color:var(--teal);margin-bottom:4px;letter-spacing:-.01em;}
.login-body .sub{font-size:13.5px;color:var(--muted);margin-bottom:20px;line-height:1.45;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--plum);margin-bottom:6px;letter-spacing:.02em;}
.input{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1.6px solid var(--line);border-radius:13px;padding:12px 14px;background:#fdfcf9;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(1,104,122,.12);}
.code-input{letter-spacing:12px;text-align:center;font-size:22px;font-weight:600;}
.btn{
  width:100%;border:none;border-radius:13px;padding:13px;font-size:15px;font-weight:600;color:#fff;
  background:var(--teal);box-shadow:0 8px 18px rgba(1,104,122,.24);
  display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s, opacity .12s;
}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.6;transform:none;cursor:default;}
.btn-ghost{background:transparent;color:var(--teal);box-shadow:none;font-weight:600;font-size:13px;padding:8px;width:auto;}
.note{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center;line-height:1.5;}
.msg{font-size:13px;border-radius:11px;padding:10px 12px;margin-bottom:14px;line-height:1.4;}
.msg.err{background:#fbeceb;color:#9b2c25;}
.msg.ok{background:var(--teal-soft);color:var(--teal);}

/* ---------- APP CHROME ---------- */
#app{min-height:100vh;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:30;background:var(--teal);color:var(--cream);
  display:flex;align-items:center;justify-content:space-between;padding:12px 20px;
  box-shadow:0 3px 14px rgba(1,104,122,.2);
}
.topbar .brand{display:flex;align-items:center;gap:12px;}
.topbar .brand img.ted{width:34px;height:34px;}
.topbar .brand img.wm{height:20px;width:auto;}
.topbar .right{display:flex;align-items:center;gap:14px;}
.userchip{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--amber);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;letter-spacing:.02em;}
.rolechip{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  background:rgba(255,255,255,.16);padding:3px 9px;border-radius:999px;}
.logout{background:rgba(255,255,255,.14);border:none;color:var(--cream);font-size:12.5px;font-weight:600;
  padding:7px 13px;border-radius:999px;transition:background .15s;}
.logout:hover{background:rgba(255,255,255,.26);}

.nav{display:flex;gap:6px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:58px;z-index:20;overflow-x:auto;}
.navlink{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
  font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;border:none;background:transparent;transition:all .14s;}
.navlink .ic{font-size:15px;}
.navlink:hover{background:var(--cream);color:var(--ink);}
.navlink.active{background:var(--plum-soft);color:var(--plum);}

.main{flex:1;max-width:1120px;width:100%;margin:0 auto;padding:24px 20px 60px;}

/* ---------- CARDS / WIDGET GRID ---------- */
/* Two-column masonry: cards pack tightly up the column, independent of the
   other column's heights, so there is no dead space when one card is tall. */
.grid{columns:2 280px;column-gap:28px;}
.col-span{grid-column:1 / -1;}
.main > .hero, .main > .card{margin-bottom:28px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  overflow:hidden;animation:pop .35s ease both;}
.grid .card{margin-bottom:28px;break-inside:avoid;}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:15px 20px 0;}
.card-h .t{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--teal);letter-spacing:-.01em;}
.card-b{padding:11px 20px 16px;}
.kicker{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}

/* HERO */
.hero{grid-column:1 / -1;background:linear-gradient(135deg, var(--teal), #015463);color:var(--cream);
  border:none;border-radius:24px;padding:24px 30px;display:flex;align-items:center;gap:22px;position:relative;overflow:hidden;}
.hero .ted{width:104px;height:auto;flex:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));}
.hero h1{font-family:var(--font-head);font-weight:800;font-size:clamp(22px,3.4vw,32px);line-height:1.05;letter-spacing:-.01em;}
.hero .tag{font-style:italic;font-family:var(--font-head);opacity:.9;margin-top:6px;font-size:15px;}
.hero .ted-note{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,251,246,.14);
  padding:8px 14px;border-radius:999px;font-size:13px;}
.hero .wm{position:absolute;right:20px;bottom:16px;height:16px;opacity:.55;}

/* ANNOUNCEMENTS */
.ann{padding:13px 0;border-bottom:1px dashed var(--line);}
.ann:last-child{border-bottom:none;}
.ann .row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.ann .h{font-weight:600;font-size:15px;color:var(--ink);}
.pin{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--plum);
  background:var(--plum-soft);padding:2px 8px;border-radius:999px;}
.ann .body{font-size:13.5px;color:#5c564c;line-height:1.5;}
.ann .meta{font-size:11.5px;color:var(--muted);margin-top:5px;}

/* MY PROJECTS placeholder */
.placeholder{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 8px;color:var(--muted);}
.placeholder .em{font-size:30px;}
.placeholder .m{font-size:13.5px;line-height:1.5;max-width:280px;}

/* QUICK LINKS */
.links{display:flex;flex-direction:column;gap:8px;}
.qlink{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;border:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:all .14s;background:#fdfcf9;}
.qlink:hover{border-color:var(--teal);background:var(--teal-soft);transform:translateX(2px);}
.qlink .ic{font-size:18px;}
.qlink .lb{font-size:14px;font-weight:500;}
.qlink .go{margin-left:auto;color:var(--muted);font-size:14px;}

/* ROSTER */
.roster{display:flex;flex-wrap:wrap;gap:10px;}
.person{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:999px;background:var(--cream);border:1px solid var(--line);}
.person .avatar{width:34px;height:34px;background:var(--plum);color:#fff;}
.person .pn{font-size:13.5px;font-weight:600;line-height:1.1;}
.person .pr{font-size:11px;color:var(--muted);}

/* ---------- HOOTS & HOLLERS ---------- */
.hoots-intro{display:flex;align-items:center;gap:6px;}
.hoots-form label{display:block;font-size:12px;font-weight:600;color:var(--plum);margin:10px 0 5px;}
.hoots-form .req{color:var(--amber);}
.hoots-form textarea{resize:none;min-height:60px;}
.hoots-actions{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.gifbtn{font-size:12.5px;font-weight:600;border:1.6px dashed var(--teal);color:var(--teal);background:#fff;
  border-radius:11px;padding:8px 13px;display:inline-flex;align-items:center;gap:6px;transition:background .15s;}
.gifbtn:hover{background:var(--teal-soft);}
.gifprev{position:relative;display:none;}
.gifprev img{height:52px;border-radius:9px;border:1.5px solid var(--line);display:block;}
.gifclear{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--plum);
  color:#fff;border:none;font-weight:700;font-size:12px;line-height:1;}
.send-hoot{margin-top:12px;}
.feed{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.hoot{border-radius:15px;padding:12px 14px;border:1px solid rgba(0,0,0,.04);box-shadow:var(--shadow-sm);animation:pop .3s ease;}
.hoot .name{font-weight:700;font-size:14px;color:var(--plum);margin-bottom:3px;word-break:break-word;}
.hoot .body{font-size:13px;color:var(--ink);line-height:1.45;word-break:break-word;}
.hoot .gif{margin-top:8px;}
.hoot .gif img{max-height:150px;width:auto;max-width:70%;border-radius:11px;display:block;}
.hoot .sig{margin-top:6px;font-size:11.5px;font-style:italic;color:var(--muted);}
.react{display:flex;gap:6px;margin-top:9px;}
.rbtn{border:none;border-radius:999px;background:rgba(255,255,255,.7);padding:4px 10px;font-size:13px;font-weight:600;
  color:var(--ink);display:inline-flex;align-items:center;gap:5px;transition:transform .1s;}
.rbtn:hover{transform:scale(1.06);}
.rbtn.done{background:#fff;box-shadow:inset 0 0 0 1.5px var(--amber);}
.rbtn .c{font-size:11px;color:var(--muted);min-width:8px;}
.seeall{font-size:12px;font-weight:700;color:var(--plum);text-decoration:none;background:var(--plum-soft);
  padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;border:none;}
.seeall:hover{background:#e6ddef;}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:22px 10px;line-height:1.5;}
.thanks{text-align:center;padding:22px 10px;display:none;flex-direction:column;align-items:center;gap:8px;}
.thanks .big{font-size:34px;}
.thanks h3{font-family:var(--font-head);color:var(--teal);font-size:18px;}
.thanks p{font-size:12.5px;color:var(--muted);}

/* full wall */
.wall-head{text-align:center;margin-bottom:22px;}
.wall-head .em{font-size:34px;}
.wall-head h1{font-family:var(--font-head);font-weight:800;font-size:clamp(26px,5vw,40px);color:var(--teal);}
.wall-head p{color:var(--muted);font-size:14px;margin-top:6px;}
.wall-count{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--plum);background:#fff;
  border:1px solid var(--line);padding:6px 14px;border-radius:999px;}
.masonry{columns:4 250px;column-gap:16px;}
.masonry .hoot{break-inside:avoid;margin-bottom:16px;}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--teal);background:none;border:none;margin-bottom:16px;}

/* ---------- GIF MODAL ---------- */
.modal{position:fixed;inset:0;background:rgba(20,20,18,.5);backdrop-filter:blur(3px);display:none;
  align-items:center;justify-content:center;z-index:80;padding:16px;}
.modal.on{display:flex;}
.sheet{background:#fff;border-radius:18px;width:100%;max-width:440px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);}
.sheet-top{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center;}
.sheet-top .x{background:none;border:none;font-size:22px;color:var(--muted);font-weight:700;}
.ggrid{padding:11px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.ggrid img{width:100%;border-radius:10px;cursor:pointer;display:block;transition:transform .1s;}
.ggrid img:hover{transform:scale(1.04);}
.powered{font-size:9px;color:#c0b8a8;text-align:center;padding:7px;letter-spacing:.06em;}

/* ---------- TOAST + CONFETTI ---------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;padding:12px 20px;border-radius:999px;
  z-index:120;transition:all .3s;box-shadow:0 10px 30px rgba(0,0,0,.3);pointer-events:none;max-width:88vw;text-align:center;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:110;display:none;}

/* ---------- top bar: clickable profile + admin dropdown ---------- */
.userchip-btn{background:rgba(255,255,255,.10);border:none;color:var(--cream);border-radius:999px;padding:5px 12px 5px 6px;transition:background .15s;}
.userchip-btn:hover{background:rgba(255,255,255,.20);}
.admin-wrap{position:relative;}
.rolechip-btn{border:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.rolechip-btn:hover{background:rgba(255,255,255,.28);}
.caret{font-size:9px;opacity:.8;}
.dropdown{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 40px rgba(20,20,18,.18);padding:6px;min-width:210px;z-index:40;animation:rise .18s ease;}
.dropdown-h{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 12px 6px;}
.dropitem{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;text-align:left;
  padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink);transition:background .12s;}
.dropitem:hover{background:var(--plum-soft);color:var(--plum);}
.dropitem .di-ic{font-size:16px;}

/* ---------- tag picker ---------- */
.tagpick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px;}
.tagchip{display:inline-flex;align-items:center;gap:6px;border:1.4px solid var(--line);background:#fdfcf9;color:var(--ink);
  border-radius:999px;padding:4px 11px 4px 5px;font-size:12.5px;font-weight:500;transition:all .13s;}
.tagchip:hover{border-color:var(--teal);}
.tagchip.on{background:var(--amber-soft);border-color:var(--amber);color:var(--plum);font-weight:600;}
.tc-av{width:22px;height:22px;border-radius:50%;background:var(--plum);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;}
.tagchip.on .tc-av{background:var(--amber);color:var(--ink);}
.hoot-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11.5px;color:var(--plum);}
.hoot-tags span{background:rgba(94,75,113,.10);padding:2px 8px;border-radius:999px;font-weight:600;}

/* ---------- roster button reset ---------- */
.person-btn{cursor:pointer;text-align:left;font-family:inherit;}
.person-btn:hover{border-color:var(--teal);background:var(--teal-soft);}

/* ---------- profile ---------- */
.profile-head{display:flex;align-items:center;gap:16px;margin-bottom:6px;}
.avatar.big{width:60px;height:60px;font-size:20px;background:var(--plum);color:#fff;}
.profile-head h1{font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--teal);}
.profile-head .you{font-size:14px;color:var(--muted);font-weight:400;font-family:var(--font-body);}
.prole{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:2px;}
.profile-sub{font-size:13px;font-weight:600;color:var(--plum);background:var(--plum-soft);display:inline-block;
  padding:6px 14px;border-radius:999px;margin:8px 0 22px;}

/* ---------- settings / user table ---------- */
.addform{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.addform .input{flex:1;min-width:150px;}
.addform select.input{max-width:170px;}
.addbtn{width:auto;padding:12px 20px;flex:none;}
.tablewrap{overflow-x:auto;}
.utable{width:100%;border-collapse:collapse;font-size:14px;}
.utable th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  padding:8px 10px;border-bottom:2px solid var(--line);}
.utable td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
.utable td .avatar.sm{width:26px;height:26px;font-size:10px;background:var(--plum);color:#fff;margin-right:9px;vertical-align:middle;}
.utable td.muted{color:var(--muted);font-size:13px;}
.ta-r{text-align:right;}
.toggle{border:none;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .13s;}
.toggle.on{background:var(--teal-soft);color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal);}
.toggle:not(.on){background:#f2ece1;color:#8b7a52;box-shadow:inset 0 0 0 1.5px var(--amber);}
.toggle:disabled{opacity:.5;}
.lockchip{font-size:12px;color:var(--muted);font-weight:600;}

@media (max-width:720px){
  .grid{columns:1;}
  .hero{flex-direction:column;text-align:center;}
  .hero .wm{display:none;}
  .nav{top:56px;}
  .masonry{columns:2 160px;}
}
@media (max-width:560px){
  /* condense the top bar so nothing gets cut off on a phone */
  .topbar{padding-left:14px;padding-right:14px;gap:8px;}
  .topbar .brand img.wm{display:none;}
  .topbar .right{gap:8px;}
  .userchip-btn{padding:4px;}
  .userchip-btn span:not(.avatar){display:none;}
  .logout{padding:7px 11px;font-size:12px;}
  .dropdown{min-width:190px;}
}

/* iOS standalone: keep the top bar clear of the notch */
@supports (padding: max(0px)){ .topbar{ padding-top: max(12px, env(safe-area-inset-top)); } body{ padding-bottom: env(safe-area-inset-bottom); } }