/*
 * Ergon portal styles: the visual language of the LifeSkills module (paper background, deep green,
 * serif headings, rounded white panels), so that the portal and its modules read as one product.
 * Light only, like LifeSkills. No inline styles anywhere (CSP style-src 'self').
 *
 * Deviations from the LifeSkills values, for accessibility: form field borders (#7f9187) and the
 * focus ring (#9a7020) are darker, so that both reach 3:1 against the page and the panels.
 */
:root {
  color-scheme: light;
  --paper: #f7f6f2;
  --surface: #ffffff;
  --header: #f7f6f2;
  --ink: #18313a;
  --muted: #59666e;
  --eyebrow: #506b5e;
  --line: #dce1dd;
  --line-strong: #c9d4c8;
  --field-line: #7f9187;
  --field-bg: #fdfdfa;
  --green: #18313a;
  --green-strong: #294a54;
  --sage: #e8efe8;
  --quiet: #f0f3ed;
  --quiet-hover: #e4ebdf;
  --quiet-text: #38554a;
  --outline: #b7c9c1;
  --focus: #9a7020;
  --ok-bg: #e5f0e9;
  --ok-text: #245f4f;
  --off-bg: #eff1e7;
  --off-text: #506b5e;
  --alert-bg: #fff0e9;
  --alert-text: #8a3629;
  --caution-bg: #fff7e3;
  --caution-line: #e1cb91;
  --caution-text: #5e4a1c;
  --radius: 14px;
  --radius-small: 12px;
  --radius-control: 7px;
  --gap: 1rem;
  --sans: "Avenir Next", "Trebuchet MS", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  font-synthesis: none;
}

a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--green-strong); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.625rem 1rem;
  background: var(--surface);
  color: var(--green);
  font-weight: 600;
  border: 2px solid var(--green);
  border-radius: var(--radius-control);
  z-index: 10;
}
.skip-link:focus { top: 0.5rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Top bar. The platform shell (/_ergon/shell.js, styled by shell.css in its Shadow DOM) draws it
 * into #ergon-shell, the same bar as on every module page. The slot keeps the bar's height while
 * the shell starts; without scripts the slot shows the plain bar of <noscript>.
 */
.shell-slot {
  display: block;
  min-height: 3.5rem;
  background: var(--header);
}
.bar-fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  min-height: 3.5rem;
  padding: 0.5rem 1.75rem;
  background: var(--header);
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
}
.bar-fallback ul {
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}
.bar-fallback a { font-weight: 600; text-decoration: none; }
.bar-fallback a:hover, .bar-fallback a[aria-current="true"] { text-decoration: underline; }
.bar-fallback .user-name { color: var(--muted); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.875rem;
  height: 1.875rem;
  padding: 0 0.375rem;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: 0.9375rem;
}

/* Organization switch on the dashboard (the account menu's "Change organization"). */
.org-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  scroll-margin-top: 1rem;
}
.org-switch label { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.org-switch select { min-height: 2.5rem; padding-top: 0.375rem; padding-bottom: 0.375rem; }
.org-switch button { min-height: 2.5rem; padding: 0.375rem 0.875rem; font-size: 0.875rem; }

main {
  max-width: 85rem;
  margin: 0 auto;
  padding: 2.25rem 1.75rem 4rem;
}
main:focus { outline: none; }

/* Type: serif headings, as in LifeSkills. */
h1, h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
}
h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
h2 { font-size: 1.625rem; line-height: 1.3; margin: 0 0 0.75rem; }
h3 { font-size: 1.0625rem; line-height: 1.45; margin: 0 0 0.375rem; }
p { line-height: 1.65; }

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--eyebrow);
}

.page-head { margin-bottom: 1.75rem; }
.page-head p { margin: 0; color: var(--muted); }
.section { margin-bottom: 2.75rem; }
.section > p { color: var(--muted); max-width: 46rem; }
.muted { color: var(--muted); font-weight: 400; }

/* Panels */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
}
.card > p { color: var(--muted); }
.narrow { max-width: 30rem; margin: 5vh auto 2rem; }

.stack { display: grid; gap: 1.125rem; margin-top: 1.5rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.875rem; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

input[type="email"], input[type="password"], input[type="text"], select {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-control);
  padding: 0.6875rem 0.75rem;
  min-height: 2.75rem;
  width: 100%;
}
select { width: auto; padding-right: 2rem; }

/* Buttons: green primary, white outlined secondary, quiet sage. */
button, .button, .button-secondary, .button-quiet {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--green);
  border-radius: var(--radius-control);
  padding: 0.6875rem 1.25rem;
  min-height: 2.75rem;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
button:hover, .button:hover {
  background: var(--green-strong);
  border-color: var(--green-strong);
  color: #fff;
}
.button-secondary, button.button-secondary {
  background: var(--surface);
  border-color: var(--outline);
  color: var(--green);
}
.button-secondary:hover, button.button-secondary:hover {
  background: var(--sage);
  border-color: var(--green);
  color: var(--green-strong);
}
.button-quiet, button.button-quiet {
  background: var(--quiet);
  border-color: var(--quiet);
  color: var(--quiet-text);
}
.button-quiet:hover, button.button-quiet:hover {
  background: var(--quiet-hover);
  border-color: var(--quiet-hover);
  color: var(--ink);
}
.button-small, button.button-small {
  padding: 0.375rem 0.875rem;
  min-height: 2.25rem;
  font-size: 0.8125rem;
}
.stack > button { justify-self: start; min-width: 10rem; }

.alert {
  background: var(--alert-bg);
  color: var(--alert-text);
  border-radius: var(--radius-control);
  padding: 0.875rem 1rem;
}
.card > p.alert { color: var(--alert-text); }
.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 1.25rem 1.5rem;
  color: var(--muted);
}
.card .notice { background: var(--sage); border-color: var(--sage); color: var(--ink); }

/* Dashboard tiles and demo tiles */
.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.25rem;
}
.tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.tile h2 { font-size: 1.5rem; margin: 0; }
.tile h2 a, .tile h3 a { color: var(--ink); text-decoration: none; }
.tile h2 a:hover, .tile h3 a:hover { color: var(--green); text-decoration: underline; }
.tile p { margin: 0; color: var(--muted); }
.tile-links {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.125rem;
}
.tile-links a {
  display: inline-block;
  padding: 0.375rem 0;
  font-weight: 600;
  text-decoration: none;
}
.tile-links a::after { content: " →" / ""; }
.tile-links a:hover { text-decoration: underline; }

/* Tables (administration) */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
}
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.875rem;
}
th, td {
  text-align: left;
  vertical-align: middle;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--line);
}
thead th {
  background: #f7f8f4;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  vertical-align: bottom;
}
tbody th { font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }
.matrix .cell form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.plain { list-style: none; margin: 0; padding: 0; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
  overflow-wrap: anywhere;
}
.error-text { color: var(--alert-text); }

.status, .tag {
  display: inline-block;
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.status-on { background: var(--ok-bg); color: var(--ok-text); }
.status-off { background: var(--off-bg); color: var(--off-text); }

.htmx-request button { opacity: 0.6; cursor: progress; }

/* Under ".page-head p { margin: 0 }", so it needs at least that specificity. */
.page-head .page-links { margin-top: 0.5rem; }
.page-links a { font-weight: 600; font-size: 0.9375rem; }

/* Public landing page: the LifeSkills home page layout. */
.hero {
  max-width: 50rem;
  padding: 1.5rem 0 2.5rem;
}
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0.25rem 0 1rem;
  overflow-wrap: anywhere;
}
.lead {
  font-size: 1.375rem;
  line-height: 1.45;
  color: #38675a;
  margin: 0 0 1rem;
  max-width: 42rem;
}
.hero-intro {
  max-width: 40rem;
  margin: 0 0 1.75rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.hero .actions .button, .hero .actions .button-secondary { min-width: 11rem; }
.audiences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.audience {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.audience h2 { margin: 0; }
.audience p { margin: 0; }
.audience > p:first-of-type { color: var(--muted); }
.audience-end { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.module-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.module-list li {
  background: #f7f8f3;
  border-left: 3px solid #b2c4a7;
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  padding: 0.75rem 1rem;
}
.module-list h3 { font-size: 1.0625rem; margin: 0; }
.module-list p { color: var(--muted); font-size: 0.9375rem; }
#try > h2 { font-size: 2rem; }
.ai-notice {
  background: var(--caution-bg);
  border: 1px solid var(--caution-line);
  border-radius: var(--radius-small);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0 1.75rem;
  max-width: 57.5rem;
}
.ai-notice h3 { font-size: 1rem; margin: 0 0 0.5rem; color: var(--caution-text); }
.ai-notice ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; }
.ai-notice li { line-height: 1.55; }
.tag-citizen { background: var(--ok-bg); color: var(--ok-text); }
.tag-staff { background: #fff1d7; color: #785c23; }
.demo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  font-size: 0.8125rem;
}
.demo-meta .demo-module { color: var(--muted); }
.tile h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.375rem; }
/* The whole demo tile follows its link. */
.demo h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.demo:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px rgba(39, 70, 56, 0.06); }
.demo:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.demo h3 a:focus-visible { outline: none; }
.tile .tile-go { margin-top: auto; padding-top: 0.25rem; font-size: 1.25rem; color: var(--green); }

@media (max-width: 47.5rem) {
  .bar-fallback { padding: 0.5rem 1rem; gap: 0.25rem 1rem; }
  .bar-fallback ul { margin-left: 0; gap: 0.125rem 1rem; }
  main { padding: 1.5rem 1rem 3rem; }
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.375rem; }
  .card { padding: 1.5rem 1.25rem; border-radius: 16px; }
  .narrow { margin-top: 1rem; }
  .hero { padding: 0.5rem 0 1.75rem; }
  .hero h1 { font-size: 2.25rem; }
  .lead { font-size: 1.1875rem; }
  .hero .actions > * { flex: 1 1 100%; }
  .audiences { padding-top: 1.5rem; gap: 1rem; }
  .audience { padding: 1.25rem; border-radius: 16px; }
  .tile { padding: 1.25rem; border-radius: 16px; }
  .ai-notice { padding: 1rem 1.125rem; }
  th, td { padding: 0.75rem; }
  .stack > button { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  button, .button, .button-secondary, .button-quiet { transition: none; }
}
/* Modular Ergon: common introductions, compact workspaces, contextual help. */
main{max-width:1248px;padding:38px 32px 60px;margin:auto}h1,h2{letter-spacing:-.04em}.platform-hero{max-width:none;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:48px;margin:18px 0 42px}.platform-hero .hero-copy h1{font-size:clamp(36px,4.4vw,60px);line-height:1.1;max-width:630px}.platform-hero .hero-intro{font-size:17px;max-width:550px}.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:23px}.catalog-heading h2{margin:0}.catalog-heading a{font-size:15px;display:inline-flex;align-items:center;min-height:44px}.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:20px}.tool-card{display:flex;flex-direction:column;align-items:flex-start;background:white;border:1px solid var(--line);border-radius:14px;padding:26px;min-width:0}.tool-card h3{font:28px var(--serif);letter-spacing:-.03em;margin:16px 0 12px}.tool-card>p:not(.tool-status):not(.tool-audiences){font-size:15px;color:var(--muted);line-height:1.7}.tool-audiences{display:flex;flex-wrap:wrap;gap:6px;margin:0}.tool-audiences .tag{font-size:12px}.tool-mark{width:43px;height:43px;display:inline-flex;align-items:center;justify-content:center;background:var(--sage);color:#436b55;border-radius:11px;font:23px var(--serif);margin-bottom:15px}.tool-status{display:inline-block;border-radius:5px;font-size:12px;background:var(--sage);color:#365841;padding:4px 8px;margin:0}.future-status{color:#526875;background:#edf0f1}.tool-about{font-size:15px;margin-top:auto;padding:10px 0;font-weight:600}.future-tools{margin-top:38px}.future-grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}.future-card{background:#f1f2ed}.future-card .tool-mark{background:#e4e9e0}.future-card h3{font-size:24px}.future-card>p:not(.tool-status){font-size:15px}.audiences{margin-top:34px}.audience{padding:24px;border:1px solid var(--line);background:white;border-radius:14px}.help-audiences{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}.help-audiences>section{padding:25px;background:var(--sage);border-radius:13px}.help-audiences p,.help-audiences li{font-size:15px}.module-intro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;background:white;border:1px solid var(--line);border-radius:14px;padding:32px}.module-intro-grid h2{font:17px var(--sans);font-weight:600;margin:16px 0 10px}.module-intro-grid p{font-size:15px;line-height:1.75;color:var(--muted)}.module-intro-grid+*,.help-personal-access+*,.help-demo-section+.actions{margin-top:24px}.help-staff-signin,.help-developers{margin-top:28px;font-size:14px}.intro-number{font:32px var(--serif);color:#6b8b70}.workspace-help{border:1px dashed #bdc9c0;border-radius:12px;padding:23px 26px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:30px}.workspace-help h2{font-size:23px;margin-bottom:7px}.workspace-help p{font-size:15px;margin:0;color:var(--muted)}.module-entry-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:20px 0 10px}.tile{padding:26px}.tile h2{font-size:30px}.tiles{gap:22px}.page-head h1{font-size:42px}.page-head>p{max-width:840px}.module-list h3{font-size:18px}.section{margin-top:34px}.stack{gap:17px}table{font-size:14px}th{font-size:12px}td,th{padding:14px 16px}button,.button,.button-secondary{font-size:14px;min-height:44px}
@media(max-width:760px){main{padding:28px 20px 42px}.platform-hero{grid-template-columns:1fr;gap:20px;margin-top:0}.platform-hero .hero-copy h1{font-size:41px}.platform-hero .hero-intro{font-size:15px}.catalog-heading{align-items:flex-start;flex-direction:column;gap:12px}.tool-grid,.future-grid{grid-template-columns:1fr;gap:15px}.tool-card{padding:23px}.help-audiences,.module-intro-grid{grid-template-columns:1fr;gap:18px}.module-intro-grid{padding:26px}.module-intro-grid article+article{border-top:1px solid var(--line);padding-top:20px}.workspace-help{align-items:flex-start;flex-direction:column}.page-head h1{font-size:34px}.tile{padding:24px}.module-entry-actions{gap:15px}.audiences{gap:18px}}

/* A readable developer walkthrough: simple flow first, implementation on demand. */
.developer-guide{max-width:1000px}.module-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;padding:0;margin:30px 0}.module-flow li{border-left:3px solid var(--green);padding:12px 18px;background:var(--sage)}.module-flow strong,.module-flow span{display:block}.module-flow span{font-size:13px;color:var(--muted)}.developer-guide pre{padding:20px;background:#eaece6;border-radius:10px;overflow-x:auto;max-width:100%;font-size:13px;line-height:1.7}.developer-guide code{overflow-wrap:anywhere}.developer-guide pre code{overflow-wrap:normal}.developer-steps{padding-left:24px}.developer-steps>li{padding:10px 0 18px 12px}.developer-steps h3{margin:0 0 10px}.developer-guide summary{cursor:pointer;padding:12px 0;color:var(--green)}
@media(max-width:760px){.module-flow{grid-template-columns:1fr;gap:10px}.developer-guide pre{padding:14px;font-size:12px}}

/* Product direction is distinct from installed tools and personal progress. */
.journey-map {
  min-width: 0;
  padding: 30px;
  background: #eef2e9;
  border: 1px solid #d5dfce;
  border-radius: 20px;
}
.journey-map > .eyebrow { margin: 0 0 10px; }
.journey-map h2 { margin: 0 0 24px; font-size: 30px; }
.journey-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.journey-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; position: relative; padding-bottom: 22px; }
.journey-steps li:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 42px; bottom: 0; width: 1px; background: #c5d2bd; }
.journey-number { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: white; border: 1px solid #ced9c7; color: #43634d; font-size: 12px; font-variant-numeric: tabular-nums; }
.journey-steps h3 { margin: 1px 0 5px; font-size: 16px; font-weight: 600; }
.journey-steps p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.journey-counsellor { margin: 0; padding-top: 18px; border-top: 1px solid #ced9c7; color: #355740; font-size: 14px; }
.journey-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 47.5rem) {
  .journey-map { padding: 23px; }
  .journey-map h2 { font-size: 26px; }
}

/* Help explains the next action for each role before listing tools. */
.help-role-steps{padding-inline-start:22px;line-height:1.7;font-size:15px}.help-role-steps li{padding-inline-start:5px;margin:12px 0}.help-audiences>section>.button-secondary{margin-top:12px}.help-demo-section{padding:24px 28px;border:1px solid var(--line);border-radius:12px;background:white}.help-demo-section h2,.help-personal-access h2{font-size:25px}.help-demo-section>p,.help-personal-access>p{max-width:850px;font-size:15px;line-height:1.7}.help-demo-links{padding-inline-start:20px;line-height:1.6}.help-demo-links li{margin:15px 0}.help-demo-links a{font-weight:600}.help-demo-links p{font-size:15px;margin:7px 0;color:var(--muted)}details.workspace-help{display:block}details.workspace-help summary{cursor:pointer;font-weight:600}details.workspace-help p{margin:12px 0}.help-personal-access{margin-top:26px}.help-personal-access+section{margin-top:24px}
@media(max-width:760px){.help-demo-section{padding:20px}.help-role-steps li{margin:10px 0}}

.home-tasks{padding:24px;border:1px solid var(--line,#d6dfda);background:white;border-radius:12px;margin:24px 0 32px}.home-task-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.home-task-heading h2{margin:0 0 8px}.home-citizen-search{margin:20px 0}.home-citizen-search>div{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.home-citizen-search input{flex:1;min-width:180px}.home-recent{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-recent a{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #d6dfda;border-radius:8px;text-decoration:none}.home-recent a>span:last-child{margin-left:auto}.home-tools-heading{font-size:24px}.help-task-links{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.help-task-links>a{padding:12px 16px;border:1px solid #d6dfda;border-radius:8px}.help-role-steps{line-height:1.6}.help-role-steps>li{margin:12px 0}@media(max-width:600px){.home-tasks{padding:18px}.home-recent{grid-template-columns:1fr}.home-citizen-search>div>a{width:100%}}

.home-citizen-search input{min-height:46px;padding:10px 13px;border:1px solid #7f9187;border-radius:6px;font:inherit;color:#18313a;background:#fff}.home-citizen-search label{display:block;font-weight:700;margin-bottom:8px}