/* /student and /student/<slug>: public student portfolios. Rides on acct.css for
   cards, buttons, alerts and the page frame; markup comes from student-render.js.
   The certificate is a fixed "paper" object in both themes (it is printed, saved as
   PDF and screenshotted), everything else follows the site tokens. */

.pf-wrap{max-width:1000px}
/* app.css gives every <article> the reader's measure (78ch) and padding */
.acct-main article.pf,.acct-main .pf-card{max-width:none; padding-block:0}
.acct-main .pf-card{padding:18px}
/* Arabic labels: no letter-spacing, it pulls the joined letters apart */
.pf-k{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:4px}
.pf-eyebrow{display:inline-block; font-size:12.5px; font-weight:600; color:var(--brass);
  border:1px solid var(--rule); background:var(--brass-soft); padding:3px 10px; border-radius:999px; margin-bottom:12px}
.pf-btn{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding-inline:14px; font-size:14px}
.pf-btn .ico{width:17px; height:17px}

/* tones for medals, cards and chips; brass unless a pf-t-* class on the element or an
   ancestor says otherwise (custom properties inherit) */
.pf,.pf-ix{--tone:var(--brass)}
.pf-t-brass{--tone:var(--brass)}
.pf-t-red{--tone:var(--t-foundation)}
.pf-t-green{--tone:var(--t-appsec)}
.pf-t-rose{--tone:var(--t-adversarial)}
.pf-t-steel{--tone:var(--t-defense)}

/* ---------- hero ---------- */
.pf-hero{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px 26px; align-items:center;
  background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:26px 26px 24px;
  box-shadow:var(--shadow); position:relative; overflow:hidden}
.pf-hero::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--t-foundation),var(--brass),var(--t-appsec))}
.pf-av{position:relative; width:104px; height:104px; border-radius:50%; flex:none;
  background:var(--brass-soft); box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--brass); overflow:hidden}
.pf-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pf-ini{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--dp); font-weight:700;
  font-size:36px; color:var(--brass); letter-spacing:.02em}
.pf-who{min-width:0}
.pf-name{font-size:clamp(28px,4.6vw,40px); line-height:1.2; font-weight:700; margin:0; color:var(--ink)}
.pf-name-en{font-family:var(--dp); font-size:17px; color:var(--ink-2); margin:4px 0 0; text-align:right;
  letter-spacing:.01em}
.pf-headline{font-size:16px; line-height:1.8; color:var(--ink-2); margin:10px 0 0; max-width:62ch}
.pf-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.pf-stats{display:grid; grid-template-columns:repeat(3,auto); gap:6px 22px; margin:0; align-self:stretch;
  padding-inline-start:24px; border-inline-start:1px solid var(--rule); align-content:center}
.pf-stats div{text-align:center}
.pf-stats dt{font-size:12.5px; color:var(--muted); order:2}
.pf-stats dd{margin:0; font-size:30px; font-weight:700; color:var(--ink); line-height:1.2}
.pf-stats div{display:flex; flex-direction:column-reverse}
@media (max-width:820px){
  .pf-hero{grid-template-columns:auto minmax(0,1fr); padding:22px 18px}
  .pf-stats{grid-column:1 / -1; padding-inline-start:0; border-inline-start:0; border-top:1px solid var(--rule);
    padding-top:14px; grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .pf-hero{grid-template-columns:1fr; justify-items:start; text-align:start}
  .pf-av{width:84px; height:84px}
  .pf-ini{font-size:29px}
  .pf-stats{justify-self:stretch}
  .pf-links .pf-btn{flex:1 1 auto; justify-content:center}
}

.pf-bio{margin:22px 4px 0; font-size:16.5px; line-height:1.95; color:var(--ink-2); max-width:72ch}
.pf-bio p{margin:0 0 10px}

/* ---------- sections ---------- */
.pf-sec{margin-top:40px}
.pf-sec-h{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.pf-sec-h h2{margin:0; font-size:clamp(21px,2.8vw,26px)}

/* ---------- certificate (paper, both themes) ---------- */
.pf-cert{margin:0 0 14px; container-type:inline-size; --paper:#FBF8F0; --pink:#1C1A16; --pbrass:#8A6A22;
  --pmuted:#6D6658; --emb-cut:var(--paper); --boss-cut:var(--paper)}
.pf-cert-in{position:relative; background:var(--paper); color:var(--pink); border-radius:6px;
  padding:5.2cqi 6cqi 4cqi; text-align:center; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.25),0 24px 48px -24px rgba(0,0,0,.55);
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(200,160,74,.10), transparent 60%),
    radial-gradient(90% 70% at 50% 110%, rgba(138,106,34,.08), transparent 60%)}
.pf-cert-in::before,.pf-cert-in::after{content:""; position:absolute; pointer-events:none; border-radius:3px}
.pf-cert-in::before{inset:1.6cqi; border:2px solid var(--pbrass); opacity:.85}
.pf-cert-in::after{inset:2.3cqi; border:1px solid var(--pbrass); opacity:.45}
.pf-cert-top{display:flex; justify-content:space-between; align-items:center; gap:3cqi; margin-bottom:3.4cqi}
.pf-cert-brand{display:inline-flex; align-items:center; gap:1.4cqi; color:var(--pbrass); text-align:start}
.pf-cert-brand .mark{width:6.4cqi; height:6.4cqi; min-width:34px; min-height:34px}
.pf-cert-brand b{display:block; font-family:var(--dp); font-size:max(13px,2.3cqi); letter-spacing:.16em; color:var(--pink)}
.pf-cert-brand small{display:block; font-family:var(--dp); font-size:max(10px,1.45cqi); letter-spacing:.12em; color:var(--pmuted)}
.pf-cert-kind{text-align:end}
.pf-cert-kind b{display:block; font-size:max(15px,2.7cqi); color:var(--pbrass)}
.pf-cert-kind small{display:block; font-family:var(--dp); font-size:max(10px,1.5cqi); letter-spacing:.16em;
  text-transform:uppercase; color:var(--pmuted)}
.pf-cert-pre{margin:0; font-size:max(13px,1.9cqi); color:var(--pmuted)}
.pf-cert-name{margin:1.2cqi 0 0; font-size:max(28px,5.6cqi); font-weight:700; line-height:1.25; color:var(--pink)}
.pf-cert-name-en{margin:.4cqi 0 0; font-family:var(--dp); font-size:max(14px,2.3cqi); letter-spacing:.06em; color:var(--pbrass)}
.pf-cert-body{margin:2.4cqi auto 0; max-width:78cqi; font-size:max(13.5px,1.95cqi); line-height:1.85}
.pf-cert-body-en{margin:1cqi auto 0; max-width:78cqi; font-family:var(--dp); font-size:max(11px,1.45cqi);
  line-height:1.6; color:var(--pmuted); font-weight:600}
.pf-cert-foot{display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:3cqi; margin-top:3.6cqi}
.pf-cert-f{display:flex; flex-direction:column; gap:.2cqi; padding-top:1.2cqi; border-top:1px solid rgba(138,106,34,.5)}
.pf-cert-f small{font-size:max(10.5px,1.35cqi); color:var(--pmuted)}
.pf-cert-f b{font-size:max(13px,1.95cqi)}
.pf-cert-seal{width:max(64px,11cqi); height:max(64px,11cqi); border-radius:50%; display:grid; place-items:center;
  color:var(--pbrass); background:radial-gradient(circle, rgba(200,160,74,.18), rgba(200,160,74,.05) 70%);
  box-shadow:inset 0 0 0 2px var(--pbrass),inset 0 0 0 5px var(--paper),inset 0 0 0 6px rgba(138,106,34,.55)}
.pf-cert-seal .pf-emb{width:58%; height:58%}
.pf-cert-serial{margin:2.6cqi 0 0; display:flex; justify-content:center; flex-wrap:wrap; gap:.4em 1em;
  font-family:var(--mo); font-size:max(10.5px,1.4cqi); letter-spacing:.06em; color:var(--pmuted)}
/* a wide certificate keeps the proportions of A4 landscape; on a phone it flows */
@container (min-width:640px){ .pf-cert-in{aspect-ratio:1.414; display:flex; flex-direction:column; justify-content:center} }
@container (max-width:520px){
  .pf-cert-top{flex-direction:column; align-items:center; text-align:center}
  .pf-cert-kind{text-align:center}
  .pf-cert-foot{grid-template-columns:1fr 1fr}
  .pf-cert-seal{grid-column:1 / -1; grid-row:1; justify-self:center}
}
/* opened from a certificate link on /account (#cert-<serial>): below the sticky header, ringed */
.pf-cert{scroll-margin-top:84px}
.pf-cert:target .pf-cert-in{box-shadow:0 0 0 3px var(--brass),0 24px 48px -24px rgba(0,0,0,.55)}
.pf-verify{display:flex; gap:10px; align-items:flex-start; margin:6px 2px 0; font-size:13.5px; color:var(--muted); line-height:1.75}
.pf-verify .ico{width:18px; height:18px; flex:none; color:var(--ok); margin-top:3px}

/* ---------- badges ---------- */
.pf-medal{display:inline-grid; place-items:center; flex:none; width:42px; height:42px;
  border-radius:12px; color:var(--tone); background:color-mix(in srgb,var(--tone) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 45%,transparent)}
.pf-medal .ico{width:22px; height:22px}
.pf-medal.is-big{width:58px; height:58px; border-radius:50%;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tone) 70%,transparent),inset 0 0 0 6px var(--surface),
    inset 0 0 0 7px color-mix(in srgb,var(--tone) 35%,transparent)}
.pf-medal.is-big .ico{width:26px; height:26px}
.pf-badges{list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.pf-badge{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:16px; min-width:0}
.pf-badge b{display:block; font-size:16px}
.pf-badge small{display:block; font-family:var(--dp); font-size:12px; color:var(--muted); letter-spacing:.04em; text-align:right}
.pf-badge p{margin:6px 0 0; font-size:14px; line-height:1.75; color:var(--ink-2)}
.pf-when{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:12.5px; color:var(--muted)}
.pf-when .ico{width:15px; height:15px}
.pf-when .ico.ok{color:var(--ok)}

/* ---------- what they did ---------- */
.pf-course{background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:22px; box-shadow:var(--shadow)}
.pf-course + .pf-course{margin-top:18px}
.pf-course-h{display:flex; gap:14px; align-items:center; padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--rule)}
.pf-course-emb{color:var(--t-foundation); --emb-cut:var(--surface); flex:none}
.pf-course-emb .pf-emb{width:48px; height:48px; display:block}
.pf-course-h h2{margin:0; font-size:clamp(18px,2.4vw,22px)}
.pf-course-h h2 a{color:inherit}
.pf-en{display:block; font-family:var(--dp); font-size:13px; color:var(--muted); text-align:right}
.pf-cards{display:grid; gap:14px}
.pf-card{border:1px solid var(--rule); border-inline-start:3px solid var(--tone);
  background:var(--surface-2); border-radius:10px; padding:18px; min-width:0}
.pf-card > p{margin:12px 0 0; font-size:15px; line-height:1.9; color:var(--ink-2)}
.pf-card-h{display:flex; gap:14px; align-items:flex-start}
.pf-card-h h3{margin:0; font-size:17.5px; line-height:1.5}
.pf-stages{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:0; position:relative}
.pf-stages li{display:flex; gap:12px; align-items:flex-start; padding:0 0 14px; position:relative}
.pf-stages li:last-child{padding-bottom:0}
.pf-stages li:not(:last-child)::before{content:""; position:absolute; inset-inline-start:13px; top:28px; bottom:2px;
  width:2px; background:color-mix(in srgb,var(--tone) 35%,transparent)}
.pf-st-n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px;
  line-height:1; font-weight:700; color:var(--tone); background:var(--surface); box-shadow:inset 0 0 0 2px var(--tone)}
/* the text column only: a bare ".pf-stages span" also caught the number's own span and
   its display:block beat the circle's grid centring, pushing the digit onto the rim */
.pf-stages li > div{min-width:0}
.pf-stages b{display:block; font-size:15px}
.pf-stages li > div > span{display:block; font-size:14px; line-height:1.75; color:var(--ink-2)}
.pf-stages li > div > .pf-att{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.pf-tid{font-family:var(--mo); font-size:11.5px; padding:2px 8px; border-radius:4px; color:var(--tone);
  border:1px solid color-mix(in srgb,var(--tone) 40%,transparent); background:var(--surface)}
.pf-prlink{display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:8px 12px; border-radius:8px;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink); font-family:var(--mo); font-size:13.5px}
.pf-prlink:hover{border-color:var(--tone); text-decoration:none}
.pf-prlink .ico{width:17px; height:17px}
.pf-prlink .ico.sm{width:14px; height:14px; color:var(--muted)}
.pf-note{margin-top:16px; padding-top:14px; border-top:1px dashed var(--rule)}
.pf-card > .pf-note:first-child{margin-top:0; padding-top:0; border-top:0}
.pf-note h4{margin:0 0 6px; font-size:15.5px}
.pf-note > p{margin:0; font-size:14.5px; line-height:1.85; color:var(--ink-2)}
.pf-pts{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px}
.pf-pts li{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.8; color:var(--ink)}
.pf-pts .ico{width:17px; height:17px; flex:none; margin-top:5px; color:var(--ok)}
.pf-xlink{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:14px; font-weight:600}
.pf-xlink .ico{width:16px; height:16px}
.pf-skills{margin-top:18px}
.pf-skills ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.pf-skills li{font-family:var(--mo); font-size:12.5px; padding:5px 11px; border-radius:999px; border:1px solid var(--rule);
  background:var(--surface-2); color:var(--ink-2)}
@media (max-width:520px){ .pf-course{padding:16px} .acct-main .pf-card{padding:14px} }

/* ---------- the owner's private preview (portfolio_preview_mine) ---------- */
.pf-preview{display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; padding:14px 16px; border-radius:10px;
  border:1px solid color-mix(in srgb,var(--warn) 50%,var(--rule)); background:color-mix(in srgb,var(--warn) 9%,var(--surface))}
.pf-preview > .ico{width:20px; height:20px; flex:none; color:var(--warn); margin-top:2px}
.pf-preview b{font-size:15px}
.pf-preview p{margin:4px 0 0; font-size:14px; color:var(--ink-2); line-height:1.7}

/* ---------- pieces used on /account: certificate tile, badge shelf ---------- */
.pf-ctile{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:14px 16px; border-radius:10px;
  background:#FBF8F0; color:#1C1A16; box-shadow:inset 0 0 0 1px rgba(138,106,34,.55),inset 0 0 0 4px #FBF8F0,
  inset 0 0 0 5px rgba(138,106,34,.35); --emb-cut:#FBF8F0}
.pf-ctile-seal{flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#8A6A22;
  box-shadow:inset 0 0 0 2px #8A6A22; background:radial-gradient(circle, rgba(200,160,74,.18), rgba(200,160,74,.04) 70%)}
.pf-ctile-seal .pf-emb{width:30px; height:30px}
.pf-ctile-t{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px}
.pf-ctile-t small{font-size:12px; color:#6D6658}
.pf-ctile-t b{font-size:16px; line-height:1.5}
.pf-ctile-m{display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12.5px; color:#6D6658}
.pf-ctile-m > span:first-child{font-family:var(--mo); letter-spacing:.04em}
.pf-ctile .btn{flex:none}
.pf-badges-sm{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:10px}
.pf-badges-sm .pf-badge{padding:13px; background:var(--surface-2)}
.pf-badges-sm .pf-medal.is-big{width:46px; height:46px}
.pf-badges-sm .pf-medal.is-big .ico{width:22px; height:22px}
.pf-badges-sm .pf-badge b{font-size:15px}
.pf-badges-sm .pf-badge p{font-size:13.5px}
.pf-badge.is-locked{background:transparent; border-style:dashed}
.pf-badge.is-locked .pf-medal{filter:grayscale(1); opacity:.45}
.pf-badge.is-locked b{color:var(--ink-2)}
.pf-when .ico{width:14px; height:14px}

/* ---------- call to action ---------- */
.pf-cta{margin-top:40px; display:flex; gap:16px 24px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:1px solid var(--rule); background:var(--brass-soft); border-radius:12px; padding:20px 22px}
.pf-cta b{font-size:17px}
.pf-cta p{margin:4px 0 0; color:var(--ink-2); font-size:14.5px; max-width:60ch}
.pf-cta-a{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- /student list ---------- */
.pf-ix-h{margin-bottom:8px}
.pf-ix{list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.pf-ix-c{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--rule);
  border-radius:12px; padding:18px; color:var(--ink); height:100%; transition:border-color .15s, transform .15s}
.pf-ix-c:hover{border-color:var(--brass); text-decoration:none; transform:translateY(-2px)}
.pf-ix-c .pf-av{width:64px; height:64px; box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--brass)}
.pf-ix-c .pf-ini{font-size:22px}
.pf-ix-t{min-width:0; display:flex; flex-direction:column; gap:2px}
.pf-ix-t b{font-size:17px}
.pf-ix-t small{font-family:var(--dp); color:var(--muted); font-size:13px; text-align:right}
.pf-ix-t > span{font-size:13.5px; color:var(--ink-2); line-height:1.7}
.pf-ix-b{display:flex !important; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center}
.pf-mini{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  color:var(--tone); background:color-mix(in srgb,var(--tone) 14%,transparent)}
.pf-mini .ico{width:15px; height:15px}
.pf-chip{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:3px 10px 3px 8px;
  border-radius:999px; color:var(--brass); background:var(--brass-soft); border:1px solid var(--rule)}
.pf-chip .ico{width:15px; height:15px}
.pf-404{padding:30px 0}

/* ---------- print: the certificate alone, A4 landscape ---------- */
@media print{
  @page{size:A4 landscape; margin:0}
  html,body{background:#fff !important}
  body.acct > header.top, body.acct > footer, .acct-skip, .acct-toast, .pf-hero, .pf-bio, .pf-sec-h, .pf-verify,
  .pf-sec:not(:has(.pf-cert)), .pf-cta{display:none !important}
  .acct-main{padding:0 !important; min-height:0}
  .acct-wrap{max-width:none; padding:0}
  .pf-sec{margin:0}
  .pf-cert{width:297mm; height:210mm; margin:0; break-after:page; container-type:inline-size}
  .pf-cert:last-of-type{break-after:auto}
  .pf-cert-in{height:100%; aspect-ratio:auto; border-radius:0; box-shadow:none;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}
}