/* ============================================================
   EPRA Index Structure diagram — stylesheet

   Ported from frontend/structure.html (origin/structure-diagram branch,
   never merged). Every selector is nested under its own wrapper class,
   .epra-structure-app, using native CSS nesting -- same technique fen.css
   uses under .epra-fen-app, but a DIFFERENT, independent wrapper class on
   purpose: this diagram shares no layout (no tabs, no panels, no forms)
   with the dashboard block/page, so scoping it separately avoids
   inheriting fen.css's wrapper-level rules (body font-size/color, the
   sticky-tab rules, the .form-select override) or colliding with its
   generic class names (.box/.wrap/.msg/.num are all shared names) in
   case both blocks ever land on the same page. :root stays unscoped at
   the top level, same documented exception fen.css uses -- :root can't
   be meaningfully nested.
   ============================================================ */

:root {
  --epra-primary: #12497F;
  --epra-mid-blue: #2274BC;
  --epra-gold: #EBA61C;
  --epra-text-dark: #515151;
  --epra-text-med: #767676;
  /* Franklin Gothic (structure.html's original stack) predates this
     package's move to self-hosted Overpass -- colors_and_type.css's own
     --font-sans (DM Sans) has no @font-face anywhere in this package and
     silently falls back, so fen.css never references it either; matching
     that same already-proven choice here rather than introducing a third
     font stack. colors_and_type.css must be linked before this file (see
     view.php) for the Overpass @font-face to actually be available. */
  --epra-font-heading: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --epra-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.epra-structure-app {
  margin: 0; background: #fff; color: var(--epra-text-dark); font-family: var(--epra-font-body);

  & * { box-sizing: border-box; }

  & .wrap { max-width: 1120px; margin: 0 auto; padding: 20px 16px; }
  & .msg { font-size: 13px; color: var(--epra-text-med); }
  & .msg.error { color: #C53030; }
  & .num { font-variant-numeric: tabular-nums; }

  /* Families: Global = primary blue, Developed = gold, Emerging = mid blue.
     --fg: text on the full colour; --tint: region boxes; --ink: text on the tint; --bar: share bar;
     --line: connectors. Developed regions use bronze (a darkened gold) for text and bar. */
  & .f-global { --c: var(--epra-primary);  --fg: #fff; --tint: #E7EDF3; --ink: var(--epra-primary); }
  & .f-dev    { --c: var(--epra-gold);     --fg: #fff; --tint: #FDF3DE; --ink: #8A5D06; --bar: #8A5D06; }
  & .f-em     { --c: var(--epra-mid-blue); --fg: #fff; --tint: #E6F0F9; --ink: var(--epra-primary); }
  & .f-global, & .f-dev, & .f-em { --line: color-mix(in srgb, var(--c) 55%, #fff); }

  /* ---- layout ---- */
  & .top { width: min(440px, 100%); margin: 0 auto; }
  & .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  & .fam { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
  & .leaves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

  /* ---- connectors: stem, rail with rounded ends, three drops ---- */
  & .conn { position: relative; height: 34px; }
  & .conn::before { content: ""; position: absolute; left: 50%; top: 0; height: 17px; width: 2px; margin-left: -1px; background: var(--line); }
  & .conn .rail { position: absolute; top: 17px; left: calc(100% / 6); right: calc(100% / 6); height: 17px;
                border: 2px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; }
  & .conn .rail::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
  & .fam .conn { height: 30px; }
  & .fam .conn::before { height: 14px; }
  & .fam .conn .rail { top: 14px; height: 16px; }

  /* ---- boxes ---- */
  & .box { border-radius: 10px; padding: 14px 16px; text-align: center; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  /* main boxes: diagonal gradient in the family colour, coloured soft shadow, two faint circles top-right */
  & .main { position: relative; overflow: hidden; isolation: isolate; color: var(--fg); padding: 18px 20px 20px;
          background: linear-gradient(135deg, color-mix(in srgb, var(--c) 82%, #fff) 0%, var(--c) 45%,
                                               color-mix(in srgb, var(--c) 86%, #000) 100%);
          box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c) 70%, transparent),
                      inset 0 1px 0 rgba(255, 255, 255, .25); }
  & .main::before, & .main::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: #fff; pointer-events: none; }
  & .main::before { width: 180px; height: 180px; right: -60px; top: -90px; opacity: .10; }
  & .main::after  { width: 110px; height: 110px; right: 40px; top: -70px; opacity: .07; }
  & .main .name { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .28); }
  & .reg  { background: var(--tint); color: var(--ink); border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
          box-shadow: 0 4px 12px -8px color-mix(in srgb, var(--c) 60%, transparent); }
  & .kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
  & .name { font-family: var(--epra-font-heading); font-size: 19px; line-height: 1.2; }
  & .reg .name { font-size: 16px; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
  & .g3 .reg .name { min-height: 0; }
  & .cap { font-family: var(--epra-font-heading); font-size: 26px; line-height: 1.1; margin-top: 2px; }
  & .reg .cap { font-size: 19px; }
  & .cons { font-size: 13px; opacity: .85; }
  & .share { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
  & .share .bar { flex: 1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; }
  & .share .bar i { display: block; height: 100%; background: var(--bar, var(--c)); border-radius: 3px; }
  & .share .p { font-family: var(--epra-font-heading); font-size: 14px; min-width: 34px; text-align: right; }

  @media (max-width: 820px) {
    & .fam { grid-template-columns: 1fr; gap: 36px; }
    & .g3 { gap: 10px; }
    & .leaves { gap: 8px; }
    & .box { padding: 12px 10px; }
    & .cap { font-size: 22px; }
    & .reg .cap { font-size: 17px; }
  }
  @media (max-width: 480px) {
    & .g3 { grid-template-columns: 1fr; }
    & .conn.g { height: 18px; }
    & .conn.g .rail { display: none; }
    & .name { font-size: 17px; }
    & .reg .name { font-size: 14px; }
    & .reg .cap { font-size: 15px; }
    & .cons { font-size: 12px; }
  }
  @media (max-width: 400px) {
    & .leaves { grid-template-columns: 1fr; }
    & .fam .conn .rail { display: none; }
    & .reg .name { min-height: 0; }
  }
}