/* portal.css — teenused.vibuta.me service portal styles
   Location: /public_html/teenused/portal.css
   Requires: vibutame-brand.css + vibutame-shell.css (via shell.php) */

/* ── Body theme fallbacks ── */
body.vb-dark{background:var(--vb-paper,#160A20);color:var(--vb-ink,#F3ECFA);
  font-family:var(--vb-font-body,'Work Sans',system-ui,sans-serif)}

/* ── Main content ── */
.portal-main{flex:1;max-width:calc(1100px + 3rem);margin:0 auto;padding:40px 1.5rem 8px;width:100%}

.section-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--vb-ink-soft);margin-bottom:20px}

/* ── Grid ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:16px}
.group:first-of-type .grid{margin-top:0}
.group + .group{margin-top:4px}

/* ── Category headings ── */
.cat-heading{font-family:var(--vb-font-display);font-weight:400;font-size:1.15rem;letter-spacing:-.01em;
  margin:36px 0 6px;padding-bottom:8px;border-bottom:1px solid var(--vb-line)}
.cat-desc{font-size:.88rem;color:var(--vb-ink-soft);margin:0 0 16px;max-width:70ch}

/* ── Cards (shared between logged-in and logged-out) ── */
.card{background:var(--vb-paper-2);border:1px solid var(--vb-line);
  border-radius:var(--vb-radius-lg,22px);box-shadow:var(--vb-shadow);
  padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:inherit;transition:border-color .15s,background .15s,transform .15s;position:relative}
.card__head{display:flex;align-items:center;gap:12px}
.card--accessible:hover{border-color:var(--vb-purple-300);transform:translateY(-2px)}
.card--locked{opacity:.45;cursor:default;filter:grayscale(.4)}

/* Admin card */
.card--admin{border-color:rgba(252,228,48,.25);background:rgba(252,228,48,.04)}
.card--admin:hover{border-color:rgba(252,228,48,.5);background:rgba(252,228,48,.07)}
.card--admin .card__name{color:var(--vb-gold)}
.card--admin .svc-chip svg{stroke:var(--vb-gold)}

/* ── Card content ── */
.card__name{font-family:var(--vb-font-display);font-weight:400;font-size:1.05rem;letter-spacing:-.01em;line-height:1.2}
.card__desc{font-size:.87rem;color:var(--vb-ink-soft);line-height:1.5;flex:1}
.card__badge{align-self:flex-start;font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;padding:.25em .75em;border-radius:var(--vb-pill)}
.card__badge--role{background:rgba(154,111,182,.15);color:var(--vb-purple-300)}
.card__badge--locked{background:rgba(255,255,255,.06);color:var(--vb-ink-soft)}
.card__badge--gated{background:rgba(91,155,232,.14);color:var(--vb-blue)}
.card__badge--admin-tag{background:rgba(252,228,48,.12);color:var(--vb-gold)}

/* Download card meta row */
.card__dl{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--vb-ink-soft)}
.card__dl svg{stroke:var(--vb-purple-300);flex-shrink:0}
.card__ext{font-weight:700;letter-spacing:.05em;padding:.1em .5em;border-radius:6px;
  background:rgba(154,111,182,.18);color:var(--vb-purple-300)}

/* ── Icon chip / monogram (from service_chip_html) ── */
.svc-chip{border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-chip svg{fill:none}
.svc-mono{border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--vb-font-display);font-weight:400;letter-spacing:-.02em}

/* Dark theme chip colors */
.vb-dark .svc-chip{background:var(--vb-elevated,#2A1640)}
.vb-dark .svc-chip svg{stroke:var(--vb-purple-300)}
.vb-dark .svc-mono--0{background:rgba(154,111,182,.18);color:var(--vb-purple-300)}
.vb-dark .svc-mono--1{background:rgba(91,155,232,.16);color:var(--vb-blue)}
.vb-dark .svc-mono--2{background:rgba(45,200,170,.15);color:#4FD0B6}
.vb-dark .svc-mono--3{background:rgba(252,228,48,.14);color:var(--vb-gold)}
.vb-dark .card__badge--locked{background:rgba(255,255,255,.06)}

/* Light theme chip colors */
body:not(.vb-dark) .svc-chip{background:var(--vb-purple-100,#E9DEF1)}
body:not(.vb-dark) .svc-chip svg{stroke:var(--vb-purple)}
body:not(.vb-dark) .svc-mono--0{background:var(--vb-purple-100);color:var(--vb-purple)}
body:not(.vb-dark) .svc-mono--1{background:#E2ECFB;color:var(--vb-blue,#2F71CB)}
body:not(.vb-dark) .svc-mono--2{background:#DCF0EC;color:#2A8A6E}
body:not(.vb-dark) .svc-mono--3{background:#F7ECD8;color:#9A7030}
body:not(.vb-dark) .card__badge--locked{background:var(--vb-line);color:var(--vb-ink-soft)}
body:not(.vb-dark) .card__ext{background:var(--vb-purple-100);color:var(--vb-purple)}

/* ── Contact line (logged-out only) ── */
.portal-contact{max-width:calc(1100px + 3rem);margin:8px auto 0;padding:28px 1.5rem 44px;
  font-size:.9rem;color:var(--vb-ink-soft);line-height:1.6}
.portal-contact a{color:var(--vb-purple);text-decoration:none}
.portal-contact a:hover{text-decoration:underline}

/* ── Responsive ── */
@media(max-width:680px){
  .portal-main{padding:24px 1rem 8px}
  .portal-contact{padding:20px 1rem 36px}
  .grid{grid-template-columns:1fr}
}