/* =====================================================================
   Spenta Marketing — screens built on the CRM's design ("Spenta Command",
   /css/v2.css). Only Marketing-specific pieces live here.
   ===================================================================== */

/* Page heading */
.ph { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.ph h1 { margin: 2px 0 0; font-size: 1.6rem; font-weight: 700; font-stretch: 118%; letter-spacing: -.01em; }
.ph .eyebrow { font-size: .8rem; color: var(--ink-2); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.back { font-size: .85rem; color: var(--ink-2); text-decoration: none; }
.back:hover { text-decoration: underline; }

/* Bell */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
        border-radius: var(--r-md); color: inherit; text-decoration: none; }
.bell svg { width: 22px; height: 22px; }
.bell .b { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
           background: var(--alert); color: #fff; font: 700 .7rem/18px var(--font); text-align: center; }
.side .bellrow { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 12px; color: var(--side-ink); }
.side .bellrow a.lnk { color: var(--side-ink); text-decoration: none; font-size: .9rem; }
.side a.nav .soon { margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--side-muted); border: 1px solid rgba(255,255,255,.18);
                    border-radius: 99px; padding: 1px 7px; }
.side a.nav.off { opacity: .55; pointer-events: none; }
.side .nav .cnt { margin-left: auto; background: var(--alert); color: #fff; border-radius: 99px; font: 700 .7rem/18px var(--font); padding: 0 6px; }
.tabbar a .cnt { position: absolute; margin-left: 14px; margin-top: -4px; background: var(--alert); color: #fff; border-radius: 99px;
                 font: 700 .64rem/16px var(--font); padding: 0 5px; }
.tabbar a { position: relative; }

/* Status pills */
.sp { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.sp.wait { background: var(--amber-soft); color: var(--amber); }
.sp.work { background: var(--sea-soft); color: var(--sea); }
.sp.done { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); }
.sp.bad { background: var(--alert-soft); color: var(--alert); }
.sp.go { background: var(--graphite); color: #fff; }
@media (prefers-color-scheme: dark) { .sp.go { background: #e8eaeb; color: #16191b; } }
.urg { font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: var(--alert); text-transform: uppercase; }

/* Request list */
.reqs { list-style: none; margin: 0; padding: 0; }
.reqs li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 13px 14px; border-bottom: 1px solid var(--rule);
             text-decoration: none; color: inherit; }
.reqs li:last-child a { border-bottom: 0; }
.reqs li a:hover { background: var(--surface-2); }
.reqs .t1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.reqs .t1 b { font-weight: 600; }
.reqs .id { font: 600 .78rem var(--font); color: var(--ink-3); font-stretch: 110%; }
.reqs .t2 { font-size: .82rem; color: var(--ink-2); }
.reqs .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.reqs .due { font-size: .78rem; color: var(--ink-2); white-space: nowrap; }
.reqs .due.late { color: var(--alert); font-weight: 700; }
.reqs .act { font-size: .74rem; font-weight: 700; color: var(--graphite); background: var(--yellow) var(--y-img) repeat; padding: 2px 8px; border-radius: 99px; }
.act .lbl, .reqs .act { -webkit-text-fill-color: currentColor; }
@media (max-width: 560px) { .reqs li a { grid-template-columns: 1fr; } .reqs .r { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.filters input[type=search], .filters select { font: 400 .92rem var(--font); padding: 8px 10px; min-height: 40px; border: 1px solid var(--rule);
  border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.filters input[type=search] { flex: 1; min-width: 180px; }
@media (max-width: 860px) { .filters .seg2 { width: 100%; } .filters .seg2 button { flex: 1; } }

/* Forms */
.form { display: grid; gap: 16px; max-width: 720px; }
.fld { display: grid; gap: 6px; }
.fld > span { font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.fld small { color: var(--ink-3); font-size: .78rem; }
.fld input, .fld select, .fld textarea { font: 400 1rem var(--font); padding: 10px 12px; min-height: 46px; width: 100%;
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 3px solid var(--yellow); outline-offset: 0; border-color: var(--charcoal); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r-md);
       background: var(--surface); color: var(--ink); font: 600 .9rem var(--font); text-align: left; cursor: pointer; min-height: 74px; }
.cat svg { width: 22px; height: 22px; color: var(--ink-2); }
.cat[aria-pressed="true"] { border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); }
.cat[aria-pressed="true"] svg { color: var(--ink); }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--alert); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.err { color: var(--alert); font-size: .88rem; margin: 0; }
.okmsg { background: var(--sea-soft); color: var(--sea); border-radius: var(--r-md); padding: 12px 14px; font-weight: 600; }

/* Request page */
.rq-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .rq-grid { grid-template-columns: 1fr; } }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; margin: 6px 0 0; }
.facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.facts dt, .facts span.l { font-size: .74rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.facts b { font-weight: 600; overflow-wrap: anywhere; }
.facts .late { color: var(--alert); }
.det { white-space: pre-wrap; margin: 12px 0 0; color: var(--ink); }

.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 4px 0 2px; }
.steps div { display: flex; flex-direction: column; gap: 6px; font-size: .72rem; color: var(--ink-3); text-align: center; }
.steps i { height: 6px; border-radius: 3px; background: var(--floor-off); }
.steps .on i { background: var(--yellow) var(--y-img) repeat; }
.steps .on { color: var(--ink); font-weight: 600; }
.steps .now i { background: var(--graphite); }
@media (prefers-color-scheme: dark) { .steps .now i { background: #e8eaeb; } }
.steps .now { color: var(--ink); font-weight: 700; }
.steps .skip { opacity: .45; }

.box { background: var(--surface-2); border-radius: var(--r-md); padding: 14px; display: grid; gap: 12px; margin-top: 12px; }
.box h4 { margin: 0; font-size: .95rem; }
.box p { margin: 0; font-size: .86rem; color: var(--ink-2); }

.apl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.apl li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.apl .dot2 { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--font);
             background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); }
.apl .dot2.ok { background: var(--sea); border-color: var(--sea); color: #fff; }
.apl .dot2.back { background: var(--alert); border-color: var(--alert); color: #fff; }
.apl .dot2.pend { background: var(--yellow) var(--y-img) repeat; border-color: var(--yellow); color: var(--graphite); }
.apl b { font-weight: 600; font-size: .9rem; }
.apl small { display: block; color: var(--ink-2); font-size: .8rem; }
.rd2 { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: .74rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 8px; }
.rd2 .lnk { text-transform: none; letter-spacing: 0; font-size: .82rem; }

.tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--rule); display: grid; gap: 14px; }
.tl li { position: relative; }
.tl li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--charcoal); }
.tl li.c::before { background: var(--yellow); border-color: var(--yellow); }
.tl b { font-weight: 600; font-size: .9rem; }
.tl .m { font-size: .76rem; color: var(--ink-3); }
.tl p { margin: 3px 0 0; font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl a { color: var(--sea); font-weight: 600; font-size: .85rem; }

.lnk { color: var(--sea); font-weight: 600; overflow-wrap: anywhere; }
.wa { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }

/* Admin */
.people .tr { grid-template-columns: minmax(150px, 1.4fr) minmax(170px, 1.6fr) minmax(130px, 1fr) 90px; }
.people .tr:not(.th) > span:nth-child(n+3), .people .th > span:nth-child(n+3) { text-align: left; }
@media (max-width: 860px) { .people .tr > span:first-child { grid-column: 1 / -1; } }

/* Sign-in */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--graphite); }
.signin .card2 { background: var(--surface); border-radius: var(--r-lg); padding: 30px 28px; max-width: 420px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.signin img { height: 40px; }
.signin h1 { margin: 18px 0 4px; font-size: 1.5rem; font-stretch: 118%; }
.signin .sq { display: flex; gap: 4px; margin: 14px 0 0; }
.signin .sq i { width: 10px; height: 10px; background: var(--yellow) var(--y-img) repeat; }
.signin .gbtn { width: 100%; justify-content: center; min-height: 48px; margin-top: 18px; }
.signin .msg { margin-top: 14px; font-size: .9rem; }
.signin .msg.err { color: var(--alert); }
.signin footer { color: var(--side-muted); font-size: .75rem; text-align: center; margin-top: 18px; }