/* =============================================================
   styles.css - Chemculator hub
   Maps the hub's components onto the Lavender + Willow tokens in
   design-system.css (linked first). No colour values live here.
   ============================================================= */


/* ---------------- header / footer ---------------- */
.site-header { max-width: 1120px; margin: 0 auto; padding: var(--sp-7) var(--sp-5) var(--sp-2); }
.site-title { margin: var(--sp-2) 0 0; display: flex; align-items: center; }
.site-logo { display: block; height: 112px; max-width: 100%; width: auto; }
.site-logo--dark { display: none; }
:root[data-theme="dark"] .site-logo--light { display: none; }
:root[data-theme="dark"] .site-logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-logo--light { display: none; }
  :root:not([data-theme="light"]) .site-logo--dark { display: block; }
}

main { max-width: 1120px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-7); }

/* ---------------- footer ---------------- */
.site-footer { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-5) var(--sp-7); text-align: center; }
.site-footer p { margin: 0; font: var(--t-small); color: var(--muted); }
.site-footer a { color: var(--link); }

/* ---------------- app cards ----------------
   Each card has two faces. The front is the icon and the name; the back is the description. Hover, keyboard focus
   or (on touch) a first tap turns the card over. Reduced motion swaps the turn for a cross-fade. */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-2) 0 var(--sp-5);
}

.app-card {
  flex: 0 1 244px;
  min-width: 0;
  min-height: 316px;
  display: block;
  position: relative;
  perspective: 1100px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border-radius: var(--r-lg);
}
.app-card__inner {
  position: absolute; inset: 0;
  display: grid;
  transform-style: preserve-3d;
  transition: transform var(--dur-slow) var(--ease);
}
.app-card__face {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.app-card__front { background: var(--card); justify-content: center; gap: var(--sp-4); text-align: center; }
.app-card__back  { background: var(--primary-soft); border-color: var(--primary); transform: rotateY(180deg); gap: var(--sp-3); text-align: left; align-items: flex-start; justify-content: space-between; }

.app-card__icon { display: block; width: 148px; height: 148px; }
.hub-icon { display: block; width: 100%; height: 100%; overflow: visible; }
.app-card__title { font: var(--t-h2); letter-spacing: var(--tr-heading); color: var(--ink-2); min-height: 2.7em; display: flex; align-items: center; justify-content: center; }
.app-card__hint { font: var(--t-small); color: var(--muted); display: none; }
.app-card__back-title { font: var(--t-h3); color: var(--primary-soft-ink); }
.app-card__desc { font: var(--t-body); color: var(--ink-2); flex: 1 1 auto; margin: 0; }
.app-card__chip { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }

/* icon palette: house tokens only */
.hub-icon .k { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hub-icon .fp  { fill: var(--primary); }
.hub-icon .fps { fill: var(--primary-soft); }
.hub-icon .fa  { fill: var(--accent); }
.hub-icon .fas { fill: var(--accent-soft); }
.hub-icon .fw  { fill: var(--warn); }
.hub-icon .fws { fill: var(--warn-soft); }
.hub-icon .n   { stroke: none; }
.hub-icon .nuc { fill: var(--ink-2); stroke: none; }
.hub-icon .ray, .hub-icon .ray path { fill: none; stroke: var(--warn); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.hub-icon .t { font: var(--w-display) 11px/1 var(--font-display); fill: var(--ink-2); stroke: none; }

/* turn over: hover (mouse), keyboard focus, or a first tap (is-flipped, set by app.js) */
.app-card:focus-visible .app-card__inner,
.app-card.is-flipped .app-card__inner { transform: rotateY(180deg); }
@media (hover: hover) { .app-card:hover .app-card__inner { transform: rotateY(180deg); } }
.app-card:hover .app-card__back,
.app-card:focus-visible .app-card__back,
.app-card.is-flipped .app-card__back { box-shadow: var(--shadow-3); }
.app-card:hover .app-card__chip,
.app-card:focus-visible .app-card__chip { background: var(--primary-hover); color: var(--primary-ink); }
.app-card:focus-visible .app-card__face { box-shadow: var(--focus-ring), var(--shadow-3); }
@media (hover: none) { .app-card__hint { display: block; } }

.app-card--disabled { cursor: default; }
.app-card--disabled .app-card__front { background: var(--card-2); box-shadow: var(--shadow-1); }
.app-card--disabled .app-card__icon { opacity: .55; }

.ds-note { grid-column: 1 / -1; margin: 0; }

@media (max-width: 1040px) { .site-header { padding-right: 84px; } }
@media (max-width: 600px) {
  .site-header { padding: var(--sp-6) var(--sp-4) var(--sp-2); padding-right: 72px; }
  .site-logo { height: 88px; }
  main { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle, body { transition: none !important; }
  .theme-toggle:hover { transform: none !important; }
  /* no turn: the two faces cross-fade in place */
  .app-card__inner, .app-card:focus-visible .app-card__inner, .app-card.is-flipped .app-card__inner,
  .app-card:hover .app-card__inner { transform: none !important; transition: none !important; }
  .app-card__back { transform: none; opacity: 0; }
  .app-card:focus-visible .app-card__back, .app-card.is-flipped .app-card__back { opacity: 1; }
  .app-card:focus-visible .app-card__front, .app-card.is-flipped .app-card__front { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .app-card:hover .app-card__back { opacity: 1; }
  .app-card:hover .app-card__front { opacity: 0; }
}