/* ===================================================================
   GCS Creative Hub + Auth — components (uses tokens from styles.css)
   =================================================================== */

/* ---- Auth pages ---- */
.auth-wrap{min-height:calc(100vh - 82px);display:grid;place-items:center;padding:48px 22px;background:
  radial-gradient(120% 90% at 15% 0%,rgba(201,154,46,.08),transparent 60%),var(--paper-2)}
.auth-card{width:100%;max-width:440px;background:#fff;border:1px solid var(--hair);border-radius:18px;padding:clamp(28px,4vw,40px);box-shadow:var(--sh)}
.auth-card .tricolor{margin-bottom:18px}
.auth-card h1{font-family:var(--disp);font-weight:500;font-size:1.7rem;color:var(--ink);margin:0 0 6px}
.auth-card .sub{color:var(--ink-70);font-size:.98rem;margin:0 0 24px}
.auth-card .btn{width:100%;justify-content:center;margin-top:6px}
.auth-alt{margin-top:18px;text-align:center;color:var(--ink-70);font-size:.92rem}
.auth-alt a{color:var(--gold-dk);font-weight:600}
.auth-msg{margin:12px 0 0;font-size:.92rem;min-height:1.1em}
.auth-msg.err{color:#c0392b;font-weight:600}
.auth-msg.ok{color:var(--green);font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.chip-row .chip{border:1px solid var(--hair);background:#fff;color:var(--ink-70);padding:8px 14px;border-radius:999px;font-size:13.5px;cursor:pointer;transition:.18s}
.chip-row .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- Hub layout ---- */
.hub-userbar{background:var(--ink);color:#eceae4}
.hub-userbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:12px;flex-wrap:wrap}
.hub-userbar .who{display:flex;align-items:center;gap:11px;font-size:.95rem}
.hub-userbar .avatar{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#1c1400;display:grid;place-items:center;font-family:var(--disp);font-weight:600}
.hub-userbar .who b{color:#fff;font-weight:600}
.hub-userbar .who span{color:#a9a69e}
.hub-logout{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;padding:8px 16px;border-radius:999px;font:600 13.5px var(--body);cursor:pointer;transition:.2s}
.hub-logout:hover{background:rgba(255,255,255,.1)}

.hub-hero{background:var(--ink);color:#fff;padding:clamp(30px,5vw,52px) 0 clamp(24px,4vw,40px)}
.hub-hero .eyebrow{color:var(--gold)}
.hub-hero h1{font-family:var(--disp);font-weight:500;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;line-height:1.05}
.hub-hero p{color:#b7b4ac;margin-top:12px;max-width:60ch}

.hub-tabs{position:sticky;top:82px;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.hub-tabs .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:10px;-ms-overflow-style:none;scrollbar-width:none}
.hub-tabs .wrap::-webkit-scrollbar{display:none}
.hub-tab{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--hair);background:#fff;color:var(--ink-70);font:600 14px var(--body);cursor:pointer;white-space:nowrap;transition:.2s}
.hub-tab:hover{border-color:var(--gold)}
.hub-tab[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.hub-body{padding-block:clamp(28px,4vw,44px)}
.page-intro{color:var(--ink-70);max-width:70ch;margin-bottom:24px;font-size:1.02rem}

/* ---- Grids ---- */
.hg{display:grid;gap:16px}
.hg2{grid-template-columns:1fr}
.hg3{grid-template-columns:1fr}
.hg4{grid-template-columns:1fr 1fr}
@media(min-width:640px){ .hg3{grid-template-columns:repeat(2,1fr)} .hg4{grid-template-columns:repeat(4,1fr)} }
@media(min-width:900px){ .hg2{grid-template-columns:1fr 1fr} .hg3{grid-template-columns:repeat(3,1fr)} }

/* ---- Tiles / cards ---- */
.tile{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:18px 20px}
.tile .k{font-size:12.5px;color:var(--ink-45);font-weight:600;letter-spacing:.02em}
.tile .v{font-family:var(--disp);font-weight:500;font-size:1.9rem;color:var(--ink);line-height:1.05;margin-top:6px}
.tile .d{font-size:12px;color:var(--ink-45);margin-top:5px}
.tile .d.up{color:var(--green)}
.hcard{background:#fff;border:1px solid var(--hair);border-radius:16px;padding:22px}
.hcard-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.hcard-h h3{font-family:var(--disp);font-weight:500;font-size:1.2rem;color:var(--ink)}
.hcard-h .sub{font-size:12.5px;color:var(--ink-45)}

/* ---- List rows ---- */
.lrow{display:flex;align-items:center;gap:13px;padding:11px 0;border-top:1px solid var(--hair)}
.lrow:first-of-type{border-top:0}
.lrow .ava{width:34px;height:34px;border-radius:10px;background:var(--gold-soft);color:var(--gold-dk);display:grid;place-items:center;font-weight:700;flex:none;font-size:13px}
.lrow .lr-main{flex:1;min-width:0}
.lrow .t{font-weight:600;color:var(--ink);font-size:.96rem}
.lrow .s{font-size:12.5px;color:var(--ink-45);margin-top:2px}
.prog{height:7px;border-radius:5px;background:var(--hair);overflow:hidden}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-dk))}

/* ---- Badges / chips ---- */
.badge{display:inline-block;font:700 11px var(--body);letter-spacing:.03em;padding:4px 10px;border-radius:999px;background:var(--paper-2);color:var(--ink-70)}
.badge.good{background:rgba(31,122,61,.14);color:#1a7a34}
.badge.warn{background:rgba(201,154,46,.18);color:var(--gold-dk)}
.badge.bad{background:rgba(192,57,43,.14);color:#b23125}
.badge.info{background:rgba(20,22,27,.08);color:var(--ink)}
.badge.mut{background:var(--paper-2);color:var(--ink-45)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-t{background:var(--paper-2);border:1px solid var(--hair);color:var(--ink-70);padding:7px 13px;border-radius:999px;font-size:13px}

/* ---- Banner ---- */
.hbanner{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(120deg,rgba(201,154,46,.12),var(--paper-2));border:1px solid var(--hair);border-radius:16px;padding:20px 22px}
.hbanner .bi{width:44px;height:44px;border-radius:12px;background:var(--gold);color:#1c1400;display:grid;place-items:center;flex:none;font-size:20px}
.hbanner h4{font-family:var(--disp);font-weight:500;font-size:1.1rem;color:var(--ink);margin:0 0 4px}
.hbanner p{color:var(--ink-70);margin:0;font-size:.95rem}

/* ---- Gallery art tiles ---- */
.art{background:#fff;border:1px solid var(--hair);border-radius:14px;overflow:hidden}
.art .thumb{height:120px}
.art .ab{padding:14px 16px}
.art h4{font-family:var(--disp);font-weight:500;font-size:1rem;color:var(--ink);margin:0}
.art .who2{font-size:12px;color:var(--ink-45);margin-top:3px}
.art .foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}

/* ---- table ---- */
.t-wrap{overflow-x:auto}
.hub-body table{width:100%;border-collapse:collapse;font-size:.92rem}
.hub-body th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);padding:9px 10px;border-bottom:1px solid var(--hair)}
.hub-body td{padding:11px 10px;border-bottom:1px solid var(--hair);color:var(--ink-70)}
.hub-body td b{color:var(--ink)}
.tnum{text-align:right;font-variant-numeric:tabular-nums}

/* ---- gated / toast / modal ---- */
.gate{min-height:60vh;display:grid;place-items:center;text-align:center;padding:60px 22px}
.gate .inner{max-width:420px}
.gate h2{font-family:var(--disp);font-weight:500;font-size:1.8rem;color:var(--ink);margin:0 0 12px}
.gate p{color:var(--ink-70);margin:0 0 22px}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:999px;font-size:14px;box-shadow:var(--sh);opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:200;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-bg{position:fixed;inset:0;background:rgba(10,11,14,.6);backdrop-filter:blur(4px);z-index:150;display:none;place-items:center;padding:22px}
.modal-bg.open{display:grid}
.modal-box{background:#fff;border-radius:18px;padding:28px;width:min(460px,100%);position:relative;box-shadow:var(--sh)}
.modal-box h3{font-family:var(--disp);font-weight:500;font-size:1.3rem;margin:0 0 16px}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);background:#fff;cursor:pointer;font-size:18px}

/* ---- Form fields (hub modals + profile editor) ----
   The hub's inputs live outside a .form wrapper, so they were picking up
   browser defaults. These give them the same treatment as the site forms. */
.field{margin-bottom:16px}
.field > label{display:block;font:600 12.5px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-45);margin-bottom:7px}
.field input[type=text],.field input[type=url],.field input[type=email],.field input:not([type]),.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--hair);
  border-radius:11px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,154,46,.16)}
.field .hint{font-size:12px;color:var(--ink-45);margin:6px 0 0}
.field-2{display:grid;gap:0 14px;grid-template-columns:1fr}
@media(min-width:620px){.field-2{grid-template-columns:1fr 1fr}}

/* ---- Profile editor ---- */
.pf-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.pf-ava{width:92px;height:92px;border-radius:50%;object-fit:cover;background:var(--ink);color:#fff;
  display:grid;place-items:center;font:600 30px var(--body);flex:none;overflow:hidden;border:1px solid var(--hair)}
.pf-ava img{width:100%;height:100%;object-fit:cover;display:block}
.pf-actions{display:flex;gap:9px;flex-wrap:wrap}
.pf-file{display:none}

/* completeness meter */
.pf-meter{background:var(--paper-2);border:1px solid var(--hair);border-radius:14px;padding:18px 20px}
.pf-meter .pm-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.pf-meter .pm-top b{font-family:var(--disp);font-weight:500;font-size:1.45rem;color:var(--ink)}
.pf-meter .pm-top span{font-size:12.5px;color:var(--ink-45)}
.pf-bar{height:8px;border-radius:999px;background:#e4e0d6;overflow:hidden}
.pf-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--green));transition:width .5s var(--ease)}
.pf-checks{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.pf-check{font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--hair);background:#fff;color:var(--ink-45)}
.pf-check.on{background:var(--gold-soft);border-color:#e4d3a6;color:#6f5310;font-weight:600}
.pf-check.on::before{content:"✓ "}

/* ---- Work / portfolio cards ---- */
.work-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work{background:#fff;border:1px solid var(--hair);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.work:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--gold)}
.work .wt{height:150px;background:var(--paper-2);position:relative;overflow:hidden}
.work .wt img{width:100%;height:100%;object-fit:cover;display:block}
.work .wt .ph{width:100%;height:100%;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(135deg,var(--gold),var(--green))}
.work .wb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.work h4{font-family:var(--disp);font-weight:500;font-size:1.02rem;color:var(--ink);margin:0}
.work .wn{font-size:12.5px;color:var(--ink-45);margin:0;line-height:1.5}
.work .wf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.work .wf a{font-size:12.5px;color:var(--gold-dk);font-weight:600}
.work-del{border:1px solid var(--hair);background:#fff;color:var(--ink-45);border-radius:8px;
  width:30px;height:30px;cursor:pointer;font-size:14px;line-height:1;transition:.18s}
.work-del:hover{border-color:#c0392b;color:#c0392b}
.work-empty{border:1px dashed var(--hair);border-radius:14px;padding:38px 24px;text-align:center;color:var(--ink-45);background:var(--paper-2)}
.work-empty p{margin:0 0 16px}

/* Avatars may hold a photo instead of initials — keep it inside the shape. */
.hub-userbar .avatar,.lrow .ava{overflow:hidden}
.hub-userbar .avatar img,.lrow .ava img{width:100%;height:100%;object-fit:cover;display:block}