/* ==========================================================================
   Resilience Hub Health — Smart Library (Phase 3)
   Hand-authored presentation layer. Reuses the existing brand tokens (color
   values, type choices) already established in the print delivery packages'
   design system, adapted to a responsive screen layout instead of print/mm
   units — the visual language stays the same product, a new surface.

   Structure mirrors app.js exactly: HOME (search + category tiles) ->
   CATEGORY (real taxonomy entries) -> RESULT (start here / next step /
   related / cross-category). No routing logic lives here — only presentation.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800&family=Fraunces:wght@500;600;700&display=swap');

:root{
  --paper:        #FAF7F1;
  --paper-deep:   #F3EEE4;
  --ink:          #21242C;
  --ink-soft:     #5B6270;
  --ink-faint:    #9298A3;
  --line:         #E4DECF;
  --line-strong:  #C9C0AC;
  --white:        #FFFFFF;

  --harbor-900:   #123C39;
  --harbor-700:   #1F5C57;
  --harbor-500:   #2C7A73;
  --harbor-200:   #CFE3E0;
  --harbor-100:   #E7F1EF;

  /* "teal" is the presentation-color alias app.js assigns to the
     anxiety-stress category — same family as the brand harbor teal. */
  --teal-700: var(--harbor-700);
  --teal-500: var(--harbor-500);
  --teal-100: var(--harbor-100);

  --amber-700:    #A6631F; --amber-500:#C77D2E; --amber-100:#F4E6D3;
  --plum-700:     #453969; --plum-500: #5B4B8A; --plum-100: #E7E2F2;
  --rose-700:     #8C4640; --rose-500: #B85C55; --rose-100: #F3E1DE;
  --clay-700:     #7C332A; --clay-500: #A6473C; --clay-100: #F3E0DD;
  --sage-700:     #4E6640; --sage-500: #6E8B5D; --sage-100: #E7EEE0;
  --slate-700:    #33495A; --slate-500:#46647A; --slate-100:#E2E8ED;
  --sky-700:      #2B5C8C; --sky-500:  #3E7AB0; --sky-100:  #DCE8F2;
  --berry-700:    #7A2F5C; --berry-500:#9E4179; --berry-100:#F2E0EC;
  --moss-700:     #5A5A2E; --moss-500: #7A7A45; --moss-100:  #ECEAD8;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(33,36,44,.04), 0 8px 24px rgba(33,36,44,.05);
  --shadow-primary: 0 12px 32px rgba(18,60,57,.18);
  --focus-ring: 0 0 0 3px rgba(44,122,115,.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Noto Sans Arabic','Tahoma',sans-serif; line-height:1.75;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:760px; margin:0 auto; padding:32px 24px 72px; }

img{ max-width:100%; }

/* ---- accessibility utilities ---------------------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

a, button{ font-family:inherit; }

:focus{ outline:none; }
:focus-visible{
  outline:2.5px solid var(--harbor-500); outline-offset:2px; border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---- brand header ----------------------------------------------------- */
.brand{ display:flex; align-items:center; gap:12px; margin-bottom:32px; }
.brand .mark{
  width:34px; height:34px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, var(--harbor-500), var(--harbor-900));
}
.brand .name{ font-weight:800; font-size:14.5px; color:var(--harbor-700); letter-spacing:.1px; }
.brand .sub{ font-size:11.5px; color:var(--ink-faint); }

/* ---- headings / lede --------------------------------------------------- */
h1.page-title{
  font-family:'Fraunces','Noto Sans Arabic',serif; font-weight:600;
  font-size:clamp(27px,4.4vw,38px); line-height:1.24; margin:4px 0 10px; color:var(--ink);
  text-wrap:balance;
}
p.lede{ font-size:15.5px; color:var(--ink-soft); max-width:52ch; margin:0 0 28px; }

h2.section-heading{
  font-size:13px; font-weight:800; color:var(--ink-soft); margin:0 0 16px;
}

/* ---- search box --------------------------------------------------------- */
.search-box{ position:relative; margin-bottom:8px; }
.search-icon{
  position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--ink-faint); pointer-events:none;
}
#searchInput{
  width:100%; font-family:inherit; font-size:15.5px; color:var(--ink);
  background:var(--white); border:1.5px solid var(--line-strong); border-radius:var(--radius-pill);
  padding:15px 18px; padding-inline-start:46px;
  box-shadow:var(--shadow-card);
}
#searchInput::placeholder{ color:var(--ink-faint); }
#searchInput:focus-visible{ border-color:var(--harbor-500); box-shadow:var(--focus-ring); outline:none; }

#searchResults{ min-height:0; }
#searchResults:not(:empty){ margin-bottom:8px; }

.search-empty{
  background:var(--paper-deep); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:18px 20px; margin:18px 0 30px;
}
.search-empty p{ margin:0 0 8px; font-size:14px; color:var(--ink-soft); }
.search-empty p:last-child{ margin-bottom:0; }
.search-empty a{ color:var(--harbor-700); font-weight:700; text-decoration:underline; text-underline-offset:2px; }

.search-results{ margin:22px 0 6px; }

/* ---- problem picker list ------------------------------------------------ */
.problem-list{ display:flex; flex-direction:column; gap:9px; }
.problem-row{
  display:flex; align-items:center; gap:13px; width:100%; text-align:start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:15px 17px; font-size:14.5px; color:var(--ink); cursor:pointer;
  font-family:inherit; line-height:1.55; min-height:52px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.problem-row:hover{ border-color:var(--harbor-500); box-shadow:0 2px 10px rgba(31,92,87,.09); }
.problem-row:active{ transform:scale(.996); }
.problem-row.emphasized{
  border-color:var(--harbor-700); border-width:1.5px; background:var(--harbor-100);
  box-shadow:0 3px 14px rgba(31,92,87,.12);
}
.problem-row .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.problem-row .txt{ flex:1; }
.problem-row .chev{ flex:none; color:var(--ink-faint); font-size:17px; }

.tier-label{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:var(--ink-faint); margin:26px 0 11px;
}
.tier-label:first-child{ margin-top:0; }

/* ---- category tiles (home browse) --------------------------------------- */
#browseSection{ margin-top:6px; }
.tile-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:26px;
}
.tile{
  display:flex; flex-direction:column; align-items:start; gap:6px; text-align:start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:17px 16px; cursor:pointer; font-family:inherit; min-height:88px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.tile:hover{ border-color:var(--harbor-500); box-shadow:0 3px 14px rgba(31,92,87,.09); transform:translateY(-1px); }
.tile:active{ transform:translateY(0) scale(.997); }
.tile-dot{ width:10px; height:10px; border-radius:50%; }
.tile-label{ font-weight:700; font-size:14px; color:var(--ink); line-height:1.4; }
.tile-count{ font-size:11.5px; color:var(--ink-faint); }

.all-areas{ margin-bottom:30px; }
.all-areas summary{
  cursor:pointer; list-style:none; font-size:13px; font-weight:700; color:var(--harbor-700);
  padding:11px 4px; display:flex; align-items:center; gap:6px; user-select:none;
  border-top:1px solid var(--line);
}
.all-areas summary::-webkit-details-marker{ display:none; }
.all-areas summary::before{
  content:"›"; display:inline-block; font-size:15px; transition:transform .15s ease;
  transform:rotate(90deg);
}
.all-areas[open] summary::before{ transform:rotate(-90deg); }
.all-areas .problem-list{ margin-top:14px; }

/* ---- breadcrumb ---------------------------------------------------------- */
.breadcrumb{
  font-size:12.5px; color:var(--ink-faint); margin-bottom:22px; display:flex; align-items:center; gap:6px;
}
.breadcrumb a{ color:var(--harbor-700); font-weight:700; text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb [aria-current]{ color:var(--ink-soft); }

/* ---- "you said" recap ---------------------------------------------------- */
.you-said{ margin-bottom:20px; }
.you-said-text{
  font-family:'Fraunces','Noto Sans Arabic',serif; font-style:italic; font-weight:500;
  font-size:17px; color:var(--ink); margin:2px 0 0; line-height:1.5;
}

/* ---- shared small labels -------------------------------------------------- */
.section-label{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:var(--ink-faint); margin:0 0 12px;
}

.category-tag{
  display:inline-block; font-size:11px; font-weight:700; padding:4px 12px;
  border-radius:var(--radius-pill); margin-bottom:14px; border:1px solid;
}

.clarify-note{
  background:var(--paper-deep); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:17px 19px; font-size:14.5px; color:var(--ink-soft); margin-bottom:22px; line-height:1.7;
}

/* ---- primary card — visually dominant, per the product requirement -------- */
.primary-card{
  color:var(--white); border-radius:var(--radius-lg);
  padding:30px 26px; margin-bottom:30px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-primary);
}
.primary-card .eyebrow{
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.9px;
  color:rgba(255,255,255,.78); margin-bottom:10px;
}
.primary-card h1{
  font-family:'Fraunces',serif; font-weight:600; font-size:clamp(22px,3.6vw,28px);
  margin:0 0 12px; line-height:1.3; text-wrap:balance;
}
.primary-card p{ font-size:14.5px; color:var(--white); opacity:.94; margin:0 0 22px; max-width:54ch; line-height:1.7; }
.primary-card .open-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--white); color:var(--harbor-700);
  border:none; border-radius:var(--radius-pill); padding:13px 26px; font-weight:800; font-size:14px;
  cursor:pointer; font-family:inherit; min-height:46px; transition:transform .1s ease, box-shadow .15s ease;
}
.primary-card .open-btn:hover{ box-shadow:0 4px 16px rgba(0,0,0,.18); }
.primary-card .open-btn:active{ transform:scale(.98); }

/* ---- "who may find this useful" tags --------------------------------------- */
.tag-list{
  list-style:none; margin:0 0 30px; padding:0; display:flex; flex-wrap:wrap; gap:9px;
}
.tag-list li{
  font-size:12.5px; color:var(--harbor-700); background:var(--harbor-100);
  border:1px solid var(--harbor-200); border-radius:var(--radius-pill); padding:7px 14px;
  line-height:1.4;
}

/* ---- next-step card --------------------------------------------------------- */
.next-card{
  background:var(--white); border:1.5px solid var(--harbor-500); border-radius:var(--radius-md);
  padding:17px 19px; margin-bottom:8px; display:flex; align-items:center; gap:15px;
  box-shadow:var(--shadow-card);
}
.next-card .icon{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--harbor-100);
  display:flex; align-items:center; justify-content:center; color:var(--harbor-700); font-weight:800; font-size:16px;
}
.next-card .body{ flex:1; min-width:0; }
.next-card .eyebrow{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:var(--harbor-500); margin-bottom:4px;
}
.next-card .title{ font-weight:700; font-size:15.5px; color:var(--ink); }
.next-card button{
  flex:none; background:none; border:1.5px solid var(--harbor-500); color:var(--harbor-700);
  border-radius:var(--radius-pill); padding:9px 18px; font-size:12.5px; font-weight:700;
  cursor:pointer; font-family:inherit; min-height:40px; transition:background .15s ease;
}
.next-card button:hover{ background:var(--harbor-100); }

.leaf-note{
  background:var(--sage-100); border:1px solid var(--sage-500); color:var(--sage-700);
  border-radius:var(--radius-md); padding:16px 18px; margin-bottom:8px; font-size:14px; line-height:1.7;
}

section + section{ margin-top:8px; }
section[aria-labelledby]{ margin-bottom:8px; }
section[aria-labelledby="relatedLabel"], section[aria-labelledby="crossLabel"]{ margin-bottom:8px; }
section[aria-labelledby="nextLabel"]{ margin-bottom:30px; }
section[aria-labelledby="relatedLabel"]{ margin-bottom:30px; }
section[aria-labelledby="crossLabel"]{ margin-bottom:30px; }
section[aria-labelledby="whoForLabel"]{ margin-bottom:6px; }

/* ---- related / cross-category rows ------------------------------------------ */
.related-group{ display:flex; flex-direction:column; gap:9px; }
.related-row{
  display:flex; align-items:center; gap:13px; width:100%; text-align:start;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; cursor:pointer; font-family:inherit; min-height:56px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.related-row:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-card); }
.related-row .swatch{ flex:none; width:6px; align-self:stretch; border-radius:4px; min-height:32px; }
.related-row .body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.related-row .title{ font-weight:700; font-size:13.5px; color:var(--ink); }
.related-row .why{
  font-size:12px; color:var(--ink-soft); font-style:italic; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.related-row .cat{ flex:none; font-size:10.5px; color:var(--ink-faint); padding-inline-start:8px; }

.empty-note{ font-size:13px; color:var(--ink-faint); font-style:italic; padding:2px 0 0; margin:0; }

/* ---- result-level navigation -------------------------------------------------- */
.result-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:8px; padding-top:20px; border-top:1px solid var(--line);
}
.back-btn{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none;
  color:var(--harbor-700); font-weight:700; font-size:13.5px; cursor:pointer;
  padding:10px 2px; font-family:inherit; text-decoration:none; min-height:40px;
}
.back-btn:hover{ text-decoration:underline; }
.start-over-btn{
  display:inline-flex; align-items:center; color:var(--ink-soft); font-size:13px; font-weight:700;
  text-decoration:none; padding:10px 4px; min-height:40px; border-radius:6px;
}
.start-over-btn:hover{ color:var(--harbor-700); text-decoration:underline; }

/* ---- footer disclaimer -------------------------------------------------------- */
footer.disclaimer{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-faint); line-height:1.7; max-width:60ch;
}

/* ---- responsive: tablet (~768px) ------------------------------------------------ */
@media (min-width:600px){
  .tile-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---- responsive: desktop (~1440px) ---------------------------------------------- */
@media (min-width:1024px){
  .wrap{ max-width:820px; padding-top:56px; }
  .primary-card{ padding:38px 40px; }
  .tile{ padding:20px 18px; }
}

/* ---- responsive: phone (~390px and below) ---------------------------------------- */
@media (max-width:480px){
  .wrap{ padding:22px 16px 56px; }
  .primary-card{ padding:24px 20px; }
  .tile-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .tile{ padding:15px 14px; min-height:80px; }
  .result-nav{ flex-wrap:wrap; }
  .related-row .why{ max-width:34vw; }
}

@media (max-width:360px){
  .tile-grid{ grid-template-columns:1fr; }
}