/* app-style.css -- this application's own screen rules, loaded after the five site
   stylesheets (site-fonts, site-tokens, site-components, site-header, sky-constellations),
   per reference/website_brand/README.md point 2/6. Built only from the site's own tokens
   (site-tokens.css); the site itself has no secondary-button, form or table style to copy. */

/* the one deliberate adaptation the brand kit's own README calls for: a full-height hero
   reads as the site's homepage everywhere else, so every screen but login gets a compact
   band instead. Loaded after sky-constellations.css, and ".sky.sky--compact" already
   out-specifies the bare ".sky" selector sky-constellations.css's own phone rule uses
   (134svh), but both together are what the founder's own fix asked for: this rule must win
   on every screen that carries it. */
.sky.sky--compact { height: auto; min-height: 300px; padding-block: 3.5rem 2.5rem; }
.sky.sky--compact .sky-copy { position: static; max-width: 100%; }
@media (max-width: 768px) { .sky.sky--compact { min-height: 220px; padding-block: 2.5rem 1.75rem; } }

/* the login sign-in card: the one screen that keeps the full-height constellation sky.
   Sits beside .sky-copy on desktop (same bottom baseline, mirrored to the right) and below
   it on phones, positioned near the top of the (taller, 134svh) mobile sky so the whole
   card is visible with no scrolling at 1280x800 and at 375x812 -- the founder's own two
   test sizes. sky-constellations.js reads this element's own getBoundingClientRect() (the
   same ".sky-copy, .sky-aside" selector it already keeps every constellation figure off
   of), so no script change was needed, only this element and its position. */
.sky-aside {
  position: absolute; z-index: 2; pointer-events: auto;
  right: max(5vw, 1.5rem); bottom: clamp(4.5rem, 11vh, 8rem);
  width: min(22rem, 90vw);
  background: rgba(8, 14, 28, .74); border: 1px solid rgba(143, 166, 200, .28);
  border-radius: 14px; padding: 1.5rem 1.65rem 1.35rem; backdrop-filter: blur(6px);
}
.sky-aside p { margin: 0 0 .65rem; }
.sky-aside label { color: var(--sky-ink, #eaf2ff); font-size: .9rem; }
.sky-aside input { width: 100%; }
.sky-aside .btn { width: 100%; margin-top: .25rem; }
.sky-aside-error { color: #ffb4b4; font-size: .9rem; font-weight: 600; }
@media (max-width: 700px) {
  .sky-aside { left: 1.35rem; right: 1.35rem; width: auto; top: 12rem; bottom: auto; }
}

/* header/footer chrome sits full-bleed; everything else reads at the site's own container width */
main.app-main { padding-block: 2rem 3rem; }

.warn { background: #fff3cd; color: #664d03; padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; }

.card { border: 1px solid var(--gray-200); background: var(--gray-50); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.grid { display: flex; flex-wrap: wrap; gap: .75rem; }
.card.stat { flex: 1 1 140px; text-align: center; }
.card.stat strong { display: block; font-family: var(--font-serif); font-size: 1.6rem; color: var(--primary-navy); }
.card.stat span { font-size: .8rem; color: var(--gray-500); }

.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: .5rem 0; border-bottom: 1px solid var(--gray-200); }

.badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.badge-ok { background: #dcfce7; color: #166534; }
.badge-pending { background: #fff3cd; color: #664d03; }
.badge-weak { background: var(--gray-100); color: var(--gray-600); }
.badge-wheel-spin { background: #fee2e2; color: #991b1b; }

.muted { color: var(--gray-500); font-size: .9rem; }
form.inline { display: inline; }

input, textarea, select {
  font: inherit; font-size: 1rem; padding: .5rem .6rem; margin: .2rem 0;
  border: 1px solid var(--gray-200); border-radius: 8px; background: var(--white); color: var(--gray-800);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }

button { font: inherit; cursor: pointer; }
button:not(.btn) {
  background: var(--primary-navy); color: var(--white); border: none; border-radius: 8px;
  padding: .55rem 1.1rem; font-weight: 600; font-size: .9375rem; transition: background var(--transition-fast);
}
button:not(.btn):hover { background: var(--primary-navy-light); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem; font-family: var(--font-primary); font-size: .9375rem; font-weight: 600;
  color: var(--primary-navy); background: transparent; border: 1px solid var(--primary-navy);
  border-radius: 8px; text-decoration: none; cursor: pointer; transition: all var(--transition-fast);
}
.btn-secondary:hover { background: var(--gray-50); }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .9375rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--gray-200); }
thead th { background: var(--gray-50); color: var(--gray-700); font-weight: 600; }
tbody tr:nth-child(even) { background: var(--gray-50); }

a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* the header's Log out control: a form/button styled to match the nav links beside it
   (reference/website_brand/header.html's own instruction) */
.rs-hdr #hdrnav .hdr-logout-form { display: inline-flex; margin: 0; }
.rs-hdr #hdrnav button.hdr-logout {
  font: inherit; font-size: .82rem; font-weight: 500; color: var(--sky-ink, #EAF2FF); background: none;
  border: none; white-space: nowrap; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  transition: color .18s ease, background .18s ease;
}
.rs-hdr #hdrnav button.hdr-logout:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.rs-hdr.scrolled #hdrnav button.hdr-logout { color: var(--gray-800); }
.rs-hdr.scrolled #hdrnav button.hdr-logout:hover { color: var(--accent-blue); background: var(--gray-100); }
@media (max-width: 960px) {
  /* site-header.css's own mobile rule sets flex-direction:column but never overrides the
     base rule's flex-wrap:wrap, so a nav with enough links to overflow the panel's height
     wraps into a SECOND COLUMN instead of scrolling -- that second column sits past the
     280px panel width with no horizontal scroll, clipping whatever landed in it (the
     founder's own preview: Ask a question, Design Map, My Data and Log out all hidden).
     nowrap forces a single column; the panel's own overflow-y:auto (already in
     site-header.css, untouched) then does what it was always meant to. */
  .rs-hdr #hdrnav { flex-wrap: nowrap; }
  .rs-hdr #hdrnav .hdr-logout-form { width: 100%; flex-shrink: 0; }
  .rs-hdr #hdrnav button.hdr-logout {
    color: #eaf2ff !important; background: none !important; padding: 13px 0; border-radius: 0;
    width: 100%; text-align: left; border-bottom: 1px solid rgba(234, 242, 255, .12);
  }
  .rs-hdr #hdrnav button.hdr-logout:hover { color: #e0a82e !important; }
}

/* the Design Map screen (app/screens/design_map.php): the 225-atom inventory as stars,
   grouped by system, on a dark sky-like backdrop -- built only from the site's own tokens */
.design-map-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; font-size: .875rem; color: var(--gray-700); }
.design-map-legend .legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.design-map-legend .atom-star { position: static; }

.design-map-sky {
  background: radial-gradient(ellipse at 30% 0%, #101d33 0%, #050912 70%);
  border-radius: 12px; padding: 1.5rem; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem;
}
.design-map-panel { background: rgba(255, 255, 255, .03); border: 1px solid rgba(143, 166, 200, .18); border-radius: 10px; padding: .9rem 1rem; }
.design-map-panel h3 { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sky-ink, #eaf2ff); margin: 0 0 .6rem; font-family: var(--font-primary); }
.design-map-stars { display: flex; flex-wrap: wrap; gap: .4rem; }

.atom-star {
  width: 14px; height: 14px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.atom-star:hover, .atom-star:focus-visible { transform: scale(1.5); outline: none; }
.atom-star.status-built { background: var(--accent-gold-light); box-shadow: 0 0 6px 1px rgba(218, 165, 32, .7); }
.atom-star.status-planned { background: var(--accent-blue-light); box-shadow: 0 0 6px 1px rgba(59, 130, 246, .6); }
.atom-star.status-aspirational { background: var(--sky-faint, #8fa6c8); box-shadow: 0 0 4px 1px rgba(143, 166, 200, .5); }
.atom-star.status-not_applicable { background: rgba(148, 163, 184, .35); box-shadow: none; width: 8px; height: 8px; }

.atom-detail {
  margin-top: 1.25rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px;
  padding: 1.25rem 1.5rem; position: relative;
}
.atom-detail-close {
  position: absolute; top: .6rem; right: .75rem; background: none; border: none; font-size: 1.4rem;
  line-height: 1; color: var(--gray-500); cursor: pointer; padding: .25rem .5rem;
}
.atom-detail-close:hover { color: var(--gray-800); }
.atom-detail h3 { margin-top: 0; }
.atom-detail h4 { font-family: var(--font-primary); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-600); margin: 1rem 0 .25rem; }

.badge.status-built-badge { background: #fdf3d9; color: #8a6d1a; }
.badge.status-planned-badge { background: #dbeafe; color: #1d4ed8; }
.badge.status-aspirational-badge { background: var(--gray-100); color: var(--gray-600); }
.badge.status-not_applicable-badge { background: var(--gray-100); color: var(--gray-500); }

/* the learner Curriculum Map (app/screens/curriculum_map.php): the same sky-constellations
   idiom as the Design Map above, but with real prerequisite lines drawn between stars */
.curriculum-map-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; font-size: .875rem; color: var(--gray-700); }
.curriculum-map-legend .legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.curriculum-map-legend .curriculum-star { position: static; }

.curriculum-map-sky {
  background: radial-gradient(ellipse at 30% 0%, #101d33 0%, #050912 70%);
  border-radius: 12px; padding: 2rem 1.5rem; position: relative;
}
.curriculum-map-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.curriculum-map-edge { stroke: rgba(234, 242, 255, .35); stroke-width: 1.5; }

.curriculum-map-stars { position: relative; display: flex; flex-wrap: wrap; gap: 2.25rem 3rem; justify-content: center; }
.curriculum-node { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 140px; text-align: center; }
.curriculum-node-label { color: var(--sky-ink, #eaf2ff); font-size: .8rem; }

.curriculum-star {
  width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.curriculum-star:hover, .curriculum-star:focus-visible { transform: scale(1.4); outline: none; }
.curriculum-star.mastery-bright { background: var(--accent-gold-light); box-shadow: 0 0 12px 3px rgba(218, 165, 32, .85); }
.curriculum-star.mastery-progress { background: var(--accent-blue-light); box-shadow: 0 0 8px 2px rgba(59, 130, 246, .6); }
.curriculum-star.mastery-none { background: var(--sky-faint, #8fa6c8); box-shadow: 0 0 4px 1px rgba(143, 166, 200, .4); }
.curriculum-star.mastery-weak { background: rgba(148, 163, 184, .45); box-shadow: 0 0 3px 1px rgba(148, 163, 184, .4); }

.curriculum-map-fallback { margin-top: 1.25rem; }
.curriculum-map-fallback summary { cursor: pointer; color: var(--gray-600); font-size: .9rem; }