/* The portal's shared look, on the Nature Connect Design System (design-system/ in this project; its readme is the
   rulebook): a page links /assets/tokens/base.css, then this. His rules (29 Sep 2026), kept here once so no page
   carries its own copy:
     the logo        the official full-colour lockup (design-system/assets/logo/nature-connect-logo.png, sized for
                     screens as /assets/img/logo-web.png), top left of every header, width set with its height
     the teardrop    the brand's shape, from /assets/shapes/teardrop.svg: bullets, eyebrow marks, dots, steps
     lines           a short line under a page's title and a long one between its heading and what follows (his
                     example of line use; the design system's rule heading)
     the dividers    the design system's five motifs (/assets/dividers), one motif a page
     icons           only the design system's set (/assets/icons), used as they are, only where one fits
     circles         only for avatars, switches and controls (the design system: circles for avatars)
   A page sets only what's its own: --page-w (how wide its header runs), --accent (its teardrops' colour), --divider
   (its teardrop divider, fade-trio in its colour; grey-blue when neutral) and, if it wants, --line (its line accent's
   colour; cyan, the connector, otherwise). */

/* ---- the header: the logo, the page's name, then the page's own chips and who's signed in ---- */
.topbar{ position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--border, #dde6ea) }
.topbar-in{ max-width:var(--page-w, 1180px); margin:0 auto; min-height:76px; display:flex; align-items:center; gap:var(--space-3, 12px); padding:var(--space-1, 4px) var(--space-4, 16px); flex-wrap:wrap }
.nc-logo{ display:inline-flex; align-items:center; flex:0 0 auto; line-height:0 }
.nc-logo img{ display:block; width:93px; height:68px; flex:0 0 auto; align-self:center; object-fit:contain }
.brand{ display:flex; align-items:center; gap:9px; min-width:0 }
.brand b, .brand small{ font-family:var(--font-display, 'Poppins', 'Segoe UI', system-ui, sans-serif); font-weight:var(--fw-semibold, 600); font-size:15px; color:var(--nc-indigo, #2B3E78); letter-spacing:0; white-space:nowrap }
.spacer{ flex:1 }
.backchip, .backbtn{ display:inline-flex; align-items:center; gap:5px; border:1.5px solid var(--border, #dde6ea); background:#fff; color:var(--text-primary, #2B3E78); font-family:var(--font-display, 'Poppins', 'Segoe UI', system-ui, sans-serif); font-weight:var(--fw-semibold, 600); font-size:12.5px; padding:6px 11px; border-radius:var(--radius-pill, 999px); text-decoration:none; cursor:pointer }
.backchip:hover, .backbtn:hover{ border-color:var(--nc-indigo, #2B3E78); color:var(--nc-indigo, #2B3E78) }
.avatar{ width:34px; height:34px; border-radius:var(--radius-circle, 50%); background:var(--nc-indigo, #2B3E78); color:#fff; display:grid; place-items:center; font-family:var(--font-display, 'Poppins', 'Segoe UI', system-ui, sans-serif); font-weight:var(--fw-semibold, 600); font-size:12.5px; flex:none; cursor:pointer }
@media (max-width:560px){ .nc-logo img{ width:71px; height:52px } .brand b, .brand small{ font-size:14px } }

/* ---- the eyebrow: its text, its teardrop and the lines below it in one accent (the design system's heading) ---- */
.eyebrow{ display:flex; align-items:center; gap:8px; font-family:var(--font-display, 'Poppins', 'Segoe UI', system-ui, sans-serif); font-size:11.5px; font-weight:var(--fw-bold, 700); text-transform:uppercase; letter-spacing:.09em; color:var(--accent-ink, var(--nc-cyan-700, #1fb6da)); margin-bottom:8px }
.eyebrow .tear{ --c:var(--accent-ink, var(--nc-cyan-700, #1fb6da)) }

/* ---- lines: under a page's title, and between its heading and what follows ---- */
.page-title::after, .h-portal::after{ content:""; display:block; width:64px; height:3px; border-radius:2px; background:var(--line, var(--accent-ink, var(--accent, var(--nc-cyan, #46D1F1)))); margin-top:14px }
.headrow{ position:relative; display:flex; align-items:flex-end; gap:12px 16px; flex-wrap:wrap; margin-bottom:var(--space-6, 24px) }
/* a page's heading is separated from the page by its teardrop divider, never a second line (his rule, 30 Sep 2026:
   "Why isn't the heading separated by a teardrop divider?"): one motif, fade-trio, in the page's colour (--divider),
   the design system's own file at its own shape (120px wide, the height follows) */
.headrow::after{ content:""; flex:0 0 100%; height:38px; margin-top:var(--space-5, 20px); background:var(--divider, url(/assets/dividers/fade-trio-grey-blue.png)) center / auto 38px no-repeat }

/* ---- the teardrop: its colour is --c, else the page's --accent; its size is width and height ---- */
.tear{ display:inline-block; width:11px; height:11px; flex:none; background:var(--c, var(--accent, var(--nc-cyan, #46D1F1)));
  -webkit-mask:url(/assets/shapes/teardrop.svg) center/contain no-repeat; mask:url(/assets/shapes/teardrop.svg) center/contain no-repeat }
.badge .dot{ width:7px; height:8px; border-radius:0; background:currentColor;
  -webkit-mask:url(/assets/shapes/teardrop.svg) center/contain no-repeat; mask:url(/assets/shapes/teardrop.svg) center/contain no-repeat }
/* a teardrop in place of a circle (a status dot, a numbered step, a done mark): the element keeps its size and colour;
   a number or tick inside sits in the drop's round part */
.nc-drop{ border-radius:0 !important; border:0 !important; box-shadow:none !important; animation:none !important;
  -webkit-mask:url(/assets/shapes/teardrop.svg) center/contain no-repeat; mask:url(/assets/shapes/teardrop.svg) center/contain no-repeat }
.nc-drop:not(:empty){ padding-top:18% }

/* ---- the dividers between sections (one motif a page; the section's colour, or grey-blue on a neutral page) ---- */
.nc-divider{ display:block; width:120px; height:auto; margin:var(--space-8, 32px) auto var(--space-6, 24px) }

/* ---- the design system's core pieces (components/core: Card, Button, Input), for pages that don't carry their own:
   a white card with a hairline, a small shadow and 25px corners; pill buttons (indigo, or outlined) that darken on hover
   and press in; inputs with the cyan focus ring ---- */
.nc-card{ background:var(--surface-card, #fff); border:1px solid var(--border, #dde6ea); border-radius:25px; box-shadow:var(--shadow-sm, 0 2px 6px rgba(43,62,120,.08)); padding:20px 22px }
.nc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-pill, 999px); padding:11px 20px; font-family:var(--font-display, 'Poppins', 'Segoe UI', system-ui, sans-serif);
  font-weight:var(--fw-semibold, 600); font-size:14.5px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:filter .14s, transform .14s }
.nc-btn:hover{ filter:brightness(.94) } .nc-btn:active{ transform:scale(.97) } .nc-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(70,209,241,.45) }
.nc-btn:disabled{ opacity:.55; cursor:default; filter:none; transform:none }
.nc-btn.primary{ background:var(--nc-indigo, #2B3E78); color:#fff } .nc-btn.outline{ background:#fff; border-color:var(--border-strong, #c4d2d9); color:var(--text-primary, #2B3E78) }
.nc-in{ width:100%; font:inherit; font-size:15px; padding:10px 12px; border:1.5px solid var(--border-strong, #c4d2d9); border-radius:var(--radius-sm, 10px); background:#fff; color:var(--text-body, #2a3340) }
.nc-in:focus{ outline:none; border-color:var(--nc-cyan, #46D1F1); box-shadow:0 0 0 3px rgba(70,209,241,.45) }

/* ---- an icon from the design system's set: used as it is, never inside another teardrop, never stretched ---- */
.nc-icon{ display:block; width:56px; height:56px; flex:0 0 auto; align-self:flex-start; object-fit:contain }