/* portal.css — shared shell for the supplier portal, the customer portal and
   the email board. Concrete Online's own palette, not a second design: these
   are the same company as the order page and a signed-in view that looks like
   a different product reads as a phishing page. */
:root{
  --bg:#fff; --ink:#171a1f; --mut:#6a7280; --line:#e8ebef; --panel:#f5f6f8;
  --terra:#e8623a; --terra-d:#c94e2c; --teal:#12a594; --blue:#155eef;
  --warn:#c0392b; --gold:#7a5b00; --gold-bg:#fffbea; --gold-line:#f2dd9a;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100%}
body{font:16px/1.55 "Nunito","Inter",-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--panel);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:22px}

.demobar{background:var(--gold-bg);border-bottom:1px solid var(--gold-line);
  padding:10px 22px;font-size:13px;color:var(--gold);text-align:center;font-weight:700}
.demobar b{font-weight:900}

nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .in{max-width:1120px;margin:0 auto;padding:0 22px;height:60px;
  display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.03em;font-size:18px;text-decoration:none}
/* The real mark, not a drawn stand-in. The three portals used to build a
   wordmark out of a terracotta dot and the company name in bold, which read as
   a second, slightly-off logo next to the one on the order pages and in the
   emails. One file, one mark. */
.brand img{height:42px;width:auto;display:block;flex:none}
.brand .b{width:13px;height:13px;border-radius:50%;background:var(--terra);flex:none}
.brand .who{font:800 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);border-left:1px solid var(--line);padding-left:9px}
nav .sp{flex:1}
nav .acct{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--mut)}
nav select{font:800 13px/1 inherit;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 12px;cursor:pointer}
nav select:hover{border-color:var(--ink)}
.btn{border:0;border-radius:10px;padding:10px 15px;font-weight:800;font-size:13.5px;
  cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block}
.btn.p{background:var(--terra);color:#fff}.btn.p:hover{background:var(--terra-d)}
.btn.g{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.g:hover{border-color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{background:#000}
.btn:disabled{opacity:.45;cursor:not-allowed}

h1{font-size:clamp(24px,3.6vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.1}
.lede{color:var(--mut);font-weight:600;margin-top:8px;max-width:70ch}
.k{font:800 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mut)}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 16px}
.tabs button{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font:800 13.5px/1 inherit;color:var(--mut);cursor:pointer}
.tabs button:hover{border-color:var(--ink);color:var(--ink)}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabs .count{font-family:var(--mono);font-size:11.5px;opacity:.7;margin-left:5px}

.list{display:flex;flex-direction:column;gap:12px}
.job{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px 18px}
.job.hot{border-color:#f6cdbd;box-shadow:0 1px 0 #fdeee7}
.job .top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.job .ref{font-family:var(--mono);font-weight:800;color:var(--blue);font-size:13px}
.job .ttl{font-weight:900;font-size:17px;letter-spacing:-.02em}
.job .sp{flex:1}
.job .amt{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.job .amt small{display:block;text-align:right;font:800 10px/1.4 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}

.pill{display:inline-block;border-radius:999px;padding:4px 10px;
  font:800 10.5px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.pill.offered{background:#fff3ec;color:#a2400f}
.pill.accepted{background:#eef4ff;color:#1b47b4}
.pill.paid{background:#eefaf6;color:#0d7a68}
.pill.done{background:var(--panel);color:var(--mut)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;margin-top:14px}
.fl{font:800 10.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.fv{margin-top:4px;font-size:14px;font-weight:700;overflow-wrap:anywhere}
.fv.soft{color:var(--mut);font-weight:600}
.f.wide{grid-column:span 2}
@media(max-width:560px){.f.wide{grid-column:span 1}}

.act{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.act .note{font-size:12.5px;color:var(--mut);font-weight:700}

.empty{background:#fff;border:1px dashed var(--line);border-radius:16px;
  padding:44px 20px;text-align:center;color:var(--mut);font-weight:700}
.empty a{color:var(--terra-d);font-weight:800}

.notice{border-radius:12px;padding:12px 15px;font-size:13.5px;font-weight:700;margin-bottom:14px}
.notice.bad{background:#fff2ef;border:1px solid #f6cdbd;color:var(--warn)}
.notice.good{background:#eefaf6;border:1px solid #9fdccd;color:#0d7a68}

.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 17px;min-width:120px}
.stat .n{font-size:23px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;color:var(--mut);font-weight:800;text-transform:uppercase;letter-spacing:.06em}

footer{border-top:1px solid var(--line);margin-top:36px;background:#fff}
footer .in{max-width:1120px;margin:0 auto;padding:22px;color:var(--mut);font-size:13px;line-height:1.7}
footer a{color:var(--ink);font-weight:700;text-decoration:none}
footer .links{margin-top:8px;display:flex;gap:15px;flex-wrap:wrap}