/* ============================================================
   CRP UI  —  assets/css/crp-ui.css
   App layer. Version 1.0.0.

   THE FRAMEWORK IS THREE FILES, IN THIS ORDER:

     1. crp.css        structure  — tokens, reset, base, 200+ components,
                                     app shell, layout utilities.
                                     (existing, unmodified)
     2. crp-ant.css    theme      — the Ant Design / Arco / T Design
                                     look: 14px base, 6px radii, 32px
                                     controls, hairline borders, flat
                                     buttons, soft tinted states.
                                     (existing, unmodified)
     3. crp-ui.css     app layer  — THIS FILE. Page scaffolding that
                                     every app needs: notice bar, appbar
                                     nav, landing block, page shell,
                                     link-cards, motion preferences.

   Then, optionally, exactly one app file:
     /assets/apps/<app>/<app>.css

   Do not add a 4th framework file. If an app needs something the
   framework lacks and it is generic, it belongs here. If it is
   specific to one app, it belongs in that app's file. That is the
   whole contract.

   RULES (inherited from crp.css and enforced here):
     · One token layer. Never hard-code a hex that a token covers.
     · Transitions name their properties. `transition: all` is banned.
     · Nothing animates on page load. Motion is feedback only.
     · Every interactive element keeps a visible :focus-visible ring.
     · Component classes are unprefixed and semantic. Page-level
       scaffolding is namespaced to this layer.
   ============================================================ */

/* ── Visibility ────────────────────────────────────────────
   The HTML `hidden` attribute must beat every component
   display rule. It does not, on its own: the UA stylesheet's
   `[hidden] { display: none }` is specificity 0,1,0 and loses
   on source order to any later rule of equal weight, so
   `.modal-overlay { display: grid }` or `.btn { display:
   inline-flex }` in crp.css / crp-ant.css renders a hidden
   element anyway. A full-screen modal overlay is the worst
   case — it covers the page and clicking close cannot help,
   because closeDetail() only sets the attribute back.

   Placement matters and this is the reason it is here and not
   in crp.css: this file loads AFTER crp.css and crp-ant.css,
   so at equal specificity it wins on order and needs no
   !important. An app stylesheet that deliberately re-displays
   a [hidden] element can still do so. */
[hidden] {
  display: none;
}

/* ── Notice bar ─────────────────────────────────────────────
   The single-line strip above the appbar ("go to main site").
   .notice-bar-link is the only thing an app ever touches. */
.notice-bar {
  padding: 0.5rem var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  background: var(--brand-deep);
}

.notice-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease);
}

.notice-bar a:hover { color: var(--accent); }

/* ── Appbar navigation ─────────────────────────────────────
   crp.css owns .appbar / .appbar-brand / .appbar-spacer /
   .appbar-actions. These are the links that go in the bar. */
.appbar-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.appbar-link {
  padding: 0.44rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-dim);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.appbar-link:hover {
  color: var(--brand);
  background: var(--surface-2);
  text-decoration: none;
}

.appbar-link.is-primary {
  margin-left: var(--sp-2);
  padding-inline: 0.9rem;
  color: #fff;
  background: var(--brand);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease);
}

.appbar-link.is-primary:hover { color: #fff; background: var(--brand-deep); }

.appbar-logo { height: 38px; width: auto; }

/* ── Landing block ─────────────────────────────────────────
   The one marketing-shaped block in the system. Deliberately
   plain: an optional --landing-image behind a brand scrim, a
   kicker, a serif display line, one lede. No gradients stacked
   on gradients, one hairline of accent at the foot.

   Usage:
     <section class="landing"
              style="--landing-image:url('/assets/images/hero-bg.png')">
       <div class="landing-inner">
         <span class="kicker">…</span>
         <h1 class="landing-title">…</h1>
         <p class="landing-lede">…</p>
       </div>
     </section>
*/
.landing {
  position: relative;
  overflow: hidden;
  padding: var(--sp-8) 0;
  color: #fff;
  background: var(--brand-deep);
}

.landing:where([style*="--landing-image"]) {
  background-image:
    linear-gradient(105deg,
      rgba(13, 61, 102, 0.97) 0%,
      rgba(30, 90, 150, 0.93) 52%,
      rgba(13, 61, 102, 0.90) 100%),
    var(--landing-image);
  background-position: center;
  background-size: cover;
}

/* the only orange in the landing block */
.landing::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  opacity: 0.8;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 65%);
}

.landing-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.landing .kicker {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--accent);
}

.landing-title {
  max-width: 18ch;
  margin-bottom: var(--sp-4);
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.landing-lede {
  max-width: 46ch;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ── Page shell ───────────────────────────────────────────
   .page is the padded content area under the appbar.
   .page-section is one band inside it. */
.page {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-7);
}

.page-section + .page-section { margin-top: var(--sp-8); }

.page-header { margin-bottom: var(--sp-5); }

.page-title {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.page-sub {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-dim);
}

/* ── Link cards ───────────────────────────────────────────
   A .card that is itself the link. crp.css owns .card and
   .card-interactive; this adds the flex column + overflow
   behaviour that an anchor-card needs. Use it instead of
   re-declaring .tool-card in every app. */
.card-link {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.card-link:hover {
  color: inherit;
  text-decoration: none;
}

.card-link > .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* the paragraph between title and cta absorbs the slack */
.card-link > .card-body > p { margin-bottom: var(--sp-4); }

/* icon tile for a card that has no photograph */
.card-mark {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: var(--brand-soft);
  border-radius: var(--r-lg);
}

.card-mark svg { width: 28px; height: 28px; }

/* the text-only call to action at the foot of a card.
   (.kb-cta in crp.css is the same thing, kept under its own
   name because the homepage renderer emits it from JS.) */
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
  transition: color var(--dur-fast) var(--ease);
}

.card-link:hover .card-cta { color: var(--brand-deep); }

/* ── Grid that sizes itself ───────────────────────────────
   .grid-auto is the default card grid: one class, min column
   width supplied by the author.
   <div class="grid-auto" style="--grid-min:280px"> */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 260px), 1fr));
  gap: var(--sp-4);
}

/* ── Motion preferences ───────────────────────────────────
   The framework respects the OS setting everywhere. This is a
   hard stop, not a nicety. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Small screens ────────────────────────────────────────
   The appbar keeps only its primary action; the landing block
   and the page shell lose their generous desktop padding. */
@media (max-width: 720px) {
  .appbar { padding-inline: var(--sp-4); }
  .appbar-link:not(.is-primary) { display: none; }
  .appbar-link.is-primary { margin-left: 0; }
  .appbar-logo { height: 30px; }

  .landing { padding: var(--sp-7) 0; }
  .landing-inner { padding-inline: var(--sp-4); }
  .landing-title { max-width: none; }
  .landing-lede { font-size: var(--fs-md); }

  .page { padding: var(--sp-6) var(--sp-4); }
  .page-section + .page-section { margin-top: var(--sp-7); }
  .page-title { font-size: var(--fs-xl); }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .notice-bar { padding-inline: var(--sp-4); }
}