/* ============================================================================
   cc-onestop-editorial.css — the One-Stop portal's art-direction layer.

   This is the design of hackuniversity-onestopform-user-login.html, lifted out
   of that page so every portal page shares one source instead of each carrying
   its own copy. Editorial structure only: thin display type, a white canvas,
   hairline rules, one org accent, tactile CTAs, scroll reveal.

   Nothing here changes behaviour. Element IDs, the Google sign-in flow, every
   endpoint and script, and the shared cc-global-nav / cc-subhead / c305-footer
   blocks are untouched. The accent self-brands by hostname through
   --cc-org-accent (js/cc-org-context.js), falling back to Hack University blue.

   Load it AFTER css/cc-gallery.css and css/cc-onestop-gallery.css. Everything is
   scoped under .hu-ed, so a page opts in by putting that class on its main
   container and nothing leaks into the nav, the footer or a sibling page.
   ==========================================================================*/

.hu-ed{
  --ink:#0a0a0a;
  --muted:#5B6470;
  --faint:#8A929C;
  --hair:#E6E8EC;
  --canvas:#ffffff;
  --soft:#FAFBFC;
  --accent:var(--cc-org-accent, #1a73e8);
  background:var(--canvas);
  color:var(--ink);
}
.hu-wrap{max-width:1120px;margin:0 auto;padding:0 20px;}

/* ----- Hero: white canvas, hairline base, thin display type ----- */
.hu-hero{padding:clamp(2.8rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--hair);}
.hu-hero h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.06;font-weight:300;
  letter-spacing:-.03em;margin:0 0 20px;max-width:24ch;color:var(--ink);}
.hu-hero h1 em{font-style:normal;color:var(--accent);}
.hu-hero-sub{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--muted);max-width:62ch;line-height:1.65;}
.hu-meta{display:flex;flex-wrap:wrap;margin-top:34px;border-top:1px solid var(--hair);}
.hu-meta div{padding:20px 30px 0 0;margin-right:30px;border-right:1px solid var(--hair);}
.hu-meta div:last-child{border-right:0;margin-right:0;padding-right:0;}
.hu-meta .n{display:block;font-size:1.9rem;font-weight:300;letter-spacing:-.025em;line-height:1;}
.hu-meta .l{display:block;margin-top:7px;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-weight:600;}
.hu-openline{margin:18px 0 0;font-size:.9rem;color:var(--muted);}
/* Phones: an even 3-up grid, so the long label wraps inside its own column
   instead of pushing the third stat onto a second row. */
@media (max-width:560px){
  .hu-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .hu-meta div{padding:16px 10px 0 0;margin-right:10px;}
  .hu-meta .n{font-size:1.5rem;}
  .hu-meta .l{font-size:.66rem;letter-spacing:.08em;}
}

/* ----- Two-column body: sign-in panel + editorial step list ----- */
.hu-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,5vw,68px);align-items:start;
  padding-top:clamp(2.4rem,5vw,3.8rem);padding-bottom:clamp(2.4rem,5vw,3.8rem);}
@media (max-width:900px){.hu-split{grid-template-columns:1fr;}}

.hu-panel{border:1px solid var(--hair);border-top:2px solid var(--accent);border-radius:14px;
  background:#fff;padding:clamp(22px,3vw,32px);
  box-shadow:0 1px 2px rgba(10,10,10,.04),0 18px 40px -28px rgba(10,10,10,.35);}
.hu-kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:600;}
.hu-panel h2,.hu-steps h2{font-weight:300;letter-spacing:-.025em;color:var(--ink);}
.hu-panel h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin:8px 0 0;}
.hu-lead{color:var(--muted);font-size:.95rem;line-height:1.65;margin:12px 0 0;}
.hu-rule{border:0;border-top:1px solid var(--hair);margin:22px 0;}
.hu-gsi{margin-top:24px;display:flex;justify-content:center;min-height:44px;}
/* The sign-in script rewrites this element's className to set its state colour,
   so its layout is pinned by id and only the colour comes from that class. */
.hu-ed #onestop-gsi-status{margin-top:12px;font-size:.88rem;font-weight:600;text-align:center;}
/* Beat any utility-sheet ordering: the auth script toggles `hidden` to reveal
   the member-only block, and .hu-cta is display:inline-flex. */
.hu-ed .hidden{display:none !important;}
.hu-note{font-size:.86rem;color:var(--muted);}
.hu-fine{font-size:.76rem;color:var(--faint);line-height:1.6;margin-top:12px;}
.hu-banner{border:1px solid color-mix(in srgb, var(--accent) 24%, #fff);
  background:color-mix(in srgb, var(--accent) 6%, #fff);
  border-radius:12px;padding:12px 14px;font-size:.88rem;font-weight:600;
  color:color-mix(in srgb, var(--accent) 78%, #000);text-align:center;}

/* ----- Tactile CTA pills (hard bottom edge, 70ms press) ----- */
.hu-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:14px 22px;border-radius:999px;font-size:.92rem;font-weight:600;
  text-decoration:none;background:var(--ink);color:#fff;border:1px solid var(--ink);
  box-shadow:0 3px 0 color-mix(in srgb, var(--ink) 55%, #fff);
  transition:transform 70ms ease, box-shadow 70ms ease, background 120ms ease;}
.hu-cta:hover{background:#1d1d1f;color:#fff;}
.hu-cta:active{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,0);}
.hu-cta--accent{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 3px 0 color-mix(in srgb, var(--accent) 60%, #000);}
.hu-cta--accent:hover{background:color-mix(in srgb, var(--accent) 88%, #000);color:#fff;}
.hu-cta--ghost{background:#fff;color:var(--ink);border-color:var(--hair);
  box-shadow:0 3px 0 var(--hair);}
.hu-cta--ghost:hover{background:var(--soft);color:var(--ink);}
.hu-cta + .hu-cta{margin-top:10px;}
.hu-cta .arrow{transition:transform 160ms cubic-bezier(.22,.7,.2,1);}
.hu-cta:hover .arrow{transform:translateX(4px);}

/* ----- Steps: hairline-separated editorial list, not boxed cards ----- */
.hu-steps h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin:8px 0 6px;}
.hu-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  padding:24px 0;border-bottom:1px solid var(--hair);}
.hu-step:first-of-type{border-top:1px solid var(--hair);}
.hu-step .num{font-size:1.9rem;font-weight:300;line-height:1;letter-spacing:-.03em;
  color:color-mix(in srgb, var(--accent) 42%, #fff);}
.hu-step h3{font-size:1rem;font-weight:600;margin:0;color:var(--ink);letter-spacing:-.01em;}
.hu-step p{margin:7px 0 0;font-size:.92rem;color:var(--muted);line-height:1.65;}
.hu-step ul{margin:10px 0 0;padding:0;list-style:none;}
.hu-step li{position:relative;padding-left:18px;margin-top:8px;
  font-size:.92rem;color:var(--muted);line-height:1.6;}
.hu-step li::before{content:"";position:absolute;left:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.55;}

/* ----- FAQ: pulled into the editorial system -----
   The markup keeps its .apple-faq-* class names (shared with sibling pages),
   so this only re-skins it: the gradient card, the pill icons, the rounded
   glass rows and the 800-weight heading are replaced by hairline rows and
   thin type. Scoped under .hu-ed and loaded last in <head>, so it wins over
   the original rules without editing them. */
.hu-ed .apple-faq-shell{margin-top:0;padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(2rem,4vw,3rem);
  background:none;border:0;border-top:1px solid var(--hair);border-radius:0;box-shadow:none;}
.hu-ed .apple-faq-intro{max-width:60ch;margin-bottom:clamp(1.4rem,3vw,2.2rem);}
.hu-ed .apple-faq-title{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:300;
  letter-spacing:-.025em;line-height:1.08;color:var(--ink);}
.hu-ed .apple-faq-subtitle{margin:.8rem 0 0;color:var(--muted);font-size:.98rem;line-height:1.65;}
.hu-ed .apple-faq-list{display:block;}
.hu-ed .apple-faq-item{border:0;border-top:1px solid var(--hair);border-radius:0;
  background:none;backdrop-filter:none;box-shadow:none;overflow:visible;}
.hu-ed .apple-faq-list .apple-faq-item:last-child{border-bottom:1px solid var(--hair);}
.hu-ed .apple-faq-item summary{padding:20px 0;font-size:1rem;font-weight:600;
  color:var(--ink);gap:20px;}
.hu-ed .apple-faq-item summary:hover{color:var(--accent);}
/* The icon keeps its slot for alignment but loses the tinted circle. */
.hu-ed .apple-faq-icon{width:22px;height:22px;background:none;border-radius:0;
  color:var(--accent);font-size:.9rem;margin-right:14px;justify-content:flex-start;}
.hu-ed .apple-faq-caret{color:var(--faint);font-size:.85rem;}
.hu-ed .apple-faq-panel{padding:0 0 24px;color:var(--muted);line-height:1.7;font-size:.94rem;}
.hu-ed .apple-faq-panel ul{margin:.8rem 0 0;padding:0;list-style:none;}
.hu-ed .apple-faq-panel li{position:relative;padding-left:18px;margin:.5rem 0;}
.hu-ed .apple-faq-panel li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.55;}
.hu-ed .apple-faq-note{border-radius:12px;padding:.9rem 1rem;font-size:.92rem;}

/* The ecosystem footer is no longer styled here — it is written to this page
   and its six siblings by scripts/rollout_editorial_footer.py, which carries
   its own scoped CSS. Edit the script, not the page. */

/* ----- Scroll reveal (progressive enhancement, gated on .js-anim) ----- */
.js-anim .hu-reveal{opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.7,.2,1),transform .7s cubic-bezier(.22,.7,.2,1);}
.js-anim .hu-reveal.is-in{opacity:1;transform:none;}
.js-anim .hu-reveal[data-d="1"]{transition-delay:.08s;}
.js-anim .hu-reveal[data-d="2"]{transition-delay:.16s;}
.js-anim .hu-reveal[data-d="3"]{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .js-anim .hu-reveal{opacity:1;transform:none;transition:none;}
  .hu-cta,.hu-cta .arrow{transition:none;}
}

/* ============================================================================
   COMMUNITY DIRECTORY — the only portal page whose body is not already covered
   by cc-onestop-gallery.css. These rules give its sign-in panel and org groups
   the same hairline treatment the gallery gives the other portal pages, so the
   five pages read as one set. No !important: the gallery sheet stays in charge
   of anything both of them touch.
   ==========================================================================*/
.hu-ed .cp-signin{border:0;border-top:1px solid var(--hair);background:none;
  padding:22px 0 18px;margin-top:22px;}
.hu-ed .cp-signin-title{font-size:1rem;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.01em;}
.hu-ed .cp-signin-sub{font-size:.88rem;color:var(--muted);margin:6px 0 0;}
.hu-ed .cp-status{font-size:.88rem;font-weight:600;margin-top:12px;}
.hu-ed .cp-org{border-top:1px solid var(--hair);padding:22px 0 8px;}
.hu-ed .cp-org h3{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 2px;}
.hu-ed .cp-org-sub{font-size:.8rem;color:var(--faint);margin:0 0 12px;}
.hu-ed .cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 28px;}
/* Icon and name on the first line, the status tag on its own line beneath it.
   Side by side, a long platform name and the tag collided inside these columns. */
.hu-ed .cp-item{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2px 10px;align-items:start;padding:12px 0;
  border-bottom:1px dashed var(--hair);color:var(--ink);text-decoration:none;
  font-size:.94rem;font-weight:600;}
.hu-ed .cp-item > i{grid-column:1;grid-row:1;margin-top:3px;}
.hu-ed .cp-item > span:first-of-type{grid-column:2;grid-row:1;min-width:0;}
.hu-ed .cp-locked-tag,.hu-ed .cp-open-tag{grid-column:2;grid-row:2;}
.hu-ed .cp-item:hover{color:var(--accent);}
/* A platform a signed-out visitor cannot open yet. It stays on the page, reads as
   inert, and carries the one line that explains how to open it. */
.hu-ed .cp-item-locked{color:var(--faint);cursor:default;}
.hu-ed .cp-item-locked:hover{color:var(--faint);}
.hu-ed .cp-locked-tag{display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--faint);}
.hu-ed .cp-open-tag{font-size:.76rem;font-weight:600;color:var(--accent);margin-top:4px;}
.hu-ed .cp-open-tag .arrow{display:inline-block;transition:transform 160ms cubic-bezier(.22,.7,.2,1);}
.hu-ed .cp-item:hover .cp-open-tag .arrow{transform:translateX(4px);}
.hu-ed .cp-plat{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;}
.hu-ed .cp-lock-note,.hu-ed .cp-loading{font-size:.86rem;color:var(--muted);padding:14px 0;}
.hu-ed .onestop-cta{border-top:1px solid var(--hair);padding:22px 0 4px;margin-top:18px;}
@media (max-width:560px){ .hu-ed .cp-grid{grid-template-columns:1fr;} }

/* ============================================================================
   PORTAL PAGE TITLES — the login page's hero sits outside .cc-onestop.gx, so it
   keeps the editorial treatment: weight 300 and the second phrase in the accent.
   The other portal pages put their title inside that scope, where the gallery
   sheet sets weight 200 and a grey <em>. That is the one place the five pages
   read as two different designs, so restore the hero treatment for a title the
   editorial layer owns. Scoped to .hu-ed, and the .cc-onestop.gx.hu-ed variant
   only exists to outrank the gallery rule on the pages that load both.
   ==========================================================================*/
.hu-ed > h1, .hu-ed > * > h1,
.cc-onestop.gx.hu-ed h1{
  font-size:clamp(2rem,5vw,3.4rem);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.03em;
  margin:0 0 20px;
  max-width:24ch;
  color:var(--ink);
}
.hu-ed > h1 em, .hu-ed > * > h1 em,
.cc-onestop.gx.hu-ed h1 em{font-style:normal;color:var(--accent);}
/* The kicker above it, same as the login hero. */
.cc-onestop.gx.hu-ed .hu-kicker{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin:0 0 4px;}
.cc-onestop.gx.hu-ed .hu-hero-sub{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--muted);
  max-width:62ch;line-height:1.65;margin:0;}