/* Shell (v2.48.0): header with growing plant, display toggle, main navigation,
   contextual help, plant context path and quick navigation. Structure and
   controls are unchanged; this layer only defines their appearance. */

/* ---- Header -------------------------------------------------------------- */
.topbar{position:relative;isolation:isolate;overflow:visible;background:var(--pk-header-bg);color:var(--pk-header-text);padding:30px max(24px,calc((100% - 1180px)/2));min-height:122px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07)}
.topbar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pk-header-glow);pointer-events:none}
.topbar>*{position:relative;z-index:1}
.topbar h1{font-family:var(--pk-font-display);font-optical-sizing:auto;font-weight:620;font-size:32px;line-height:1.08;letter-spacing:-.012em;color:var(--pk-header-text);text-wrap:balance}
.topbar p{color:var(--pk-header-muted);font-size:15px;line-height:1.4;margin-top:7px}
.topbar .version{display:inline-block;margin-left:8px;padding:3px 8px;border:1px solid rgba(255,255,255,.16);border-radius:var(--pk-radius-pill);background:rgba(255,255,255,.1);color:var(--pk-header-muted);font-family:var(--pk-font-sans);font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.3;opacity:1;vertical-align:.32em}
.topbar .back{display:inline-flex;align-items:center;gap:6px;min-height:28px;margin-bottom:4px;color:var(--pk-header-muted);font-size:14px;font-weight:600;text-decoration:none;border-radius:6px}
.topbar .back:hover{color:var(--pk-header-text);text-decoration:underline}
.topbar-actions{gap:8px}
.topbar .topbar-action{gap:7px;border:1px solid var(--pk-header-action-border);border-radius:11px;background:var(--pk-header-action-bg);color:var(--pk-header-text);-webkit-text-fill-color:var(--pk-header-text);font-weight:600;letter-spacing:.005em;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
.topbar .topbar-action:hover{background:var(--pk-header-action-hover);border-color:rgba(255,255,255,.34)}
.topbar .topbar-action:active{transform:translateY(1px)}
.topbar .topbar-action .ui-icon,.topbar .topbar-action .weather-icon{opacity:.95}
.topbar .fyta-refresh-status{color:var(--pk-header-muted);opacity:1;font-size:13px}
.topbar .topbar-session-role{color:var(--pk-header-muted)}
.topbar .topbar-session-label{color:var(--pk-header-text)}
.theme-toggle .theme-toggle-icon{inline-size:1.1em;block-size:1.1em}
.theme-toggle .theme-toggle-label{min-width:3.4em;text-align:left}

/* ---- Growing plant ------------------------------------------------------- */
/* An absolutely positioned SVG is not stretched by top/bottom: size it from the
   header height and let the viewBox ratio set the width. */
.topbar>.pk-garden{position:absolute;z-index:0;right:max(0px,calc((100% - 1180px)/2 - 168px));bottom:-3px;height:min(calc(100% - 6px),168px);width:auto;aspect-ratio:240/150;pointer-events:none;overflow:visible}
.pk-garden-soil{fill:rgba(255,255,255,.07)}
.pk-garden-stem{fill:none;stroke:var(--pk-garden-stem);stroke-width:2.7;stroke-linecap:round}
.pk-garden-blade{fill:none;stroke:var(--pk-garden-leaf-2);stroke-width:2.4;stroke-linecap:round;opacity:.72}
.pk-garden-leaf{fill:var(--pk-garden-leaf)}
.pk-garden-leaf-alt{fill:var(--pk-garden-leaf-2)}
.pk-garden-rib{fill:none;stroke:rgba(255,255,255,.38);stroke-width:.9;stroke-linecap:round}
.pk-garden-bloom{fill:var(--pk-garden-bloom)}
.pk-garden-stem,.pk-garden-blade{stroke-dasharray:1;stroke-dashoffset:0;animation:pk-garden-draw 1.5s var(--pk-ease) .15s both}
.pk-garden-blade{animation-duration:1.15s;animation-delay:.75s}
.pk-garden-blade+.pk-garden-blade{animation-delay:.9s}
.pk-garden-blade+.pk-garden-blade+.pk-garden-blade{animation-delay:1.05s}
.pk-garden-sprout .pk-garden-stem{animation-duration:.9s;animation-delay:.35s}
.pk-garden-leaf,.pk-garden-rib,.pk-garden-bloom{transform-box:fill-box;animation:pk-garden-unfold .85s cubic-bezier(.34,1.45,.64,1) both}
.pk-garden-leaf-left{transform-origin:100% 100%}
.pk-garden-leaf-right{transform-origin:0% 100%}
.pk-garden-bloom{transform-origin:50% 50%;animation-duration:.7s}
.pk-garden-grow-1{animation-delay:.6s}.pk-garden-grow-2{animation-delay:.85s}.pk-garden-grow-3{animation-delay:1.08s}
.pk-garden-grow-4{animation-delay:1.28s}.pk-garden-grow-5{animation-delay:1.48s}.pk-garden-grow-6{animation-delay:1.85s}
.pk-garden-sprout .pk-garden-grow-1{animation-delay:1.05s}.pk-garden-sprout .pk-garden-grow-2{animation-delay:1.2s}
.pk-garden-plant{transform-box:fill-box;transform-origin:50% 100%;animation:pk-garden-sway 7.5s ease-in-out 2.7s 3 alternate both}
.pk-garden-sprout{animation-duration:6.2s;animation-delay:2.3s}
.pk-garden-grass{animation-duration:5.4s;animation-delay:2s}
:root[data-garden-grown] :is(.pk-garden-stem,.pk-garden-blade,.pk-garden-leaf,.pk-garden-rib,.pk-garden-bloom){animation:none}
:root[data-garden-grown] .pk-garden-plant{animation-delay:.4s}
@keyframes pk-garden-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pk-garden-unfold{from{transform:scale(.001) rotate(-16deg)}to{transform:none}}
@keyframes pk-garden-sway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.3deg)}}
@media (prefers-reduced-motion:reduce){.pk-garden,.pk-garden *{animation:none!important}}
@media print{.pk-garden{visibility:hidden}}

/* ---- Main navigation ----------------------------------------------------- */
main{margin-top:26px}
.app-nav{position:relative;gap:4px;padding:6px;margin:0 0 18px;border:1px solid var(--pk-border);border-radius:16px;background:var(--pk-surface);box-shadow:var(--pk-shadow-1)}
.app-nav a{min-height:38px;padding:0 14px;border-radius:11px;color:var(--pk-text-2);font-size:13.5px;font-weight:600;transition:background-color .15s ease,color .15s ease}
.app-nav a:hover{background:var(--pk-surface-3);color:var(--pk-text)}
.app-nav a.active{background:var(--pk-brand-strong);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.12)}
.app-nav a span{background:var(--pk-surface-4);color:var(--pk-text-muted);font-weight:700}
.app-nav a.active span{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:760px){
  .app-nav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-right:30px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .app-nav::-webkit-scrollbar{display:none}
  .app-nav a{flex:0 0 auto;scroll-snap-align:center;min-height:40px;padding:0 13px}
}
.candidate-workspace-strip{border-radius:var(--pk-radius)}

/* ---- Contextual help: one recognisable help chip ------------------------- */
.page-help{gap:8px;margin:0 0 16px}
.help-context{gap:7px;min-height:34px;padding:4px 12px 4px 7px;border:1px solid var(--pk-border);border-radius:var(--pk-radius-pill);background:var(--pk-surface);color:var(--pk-brand-text);font-size:13.5px;font-weight:600;line-height:1.3;text-decoration:none;box-shadow:var(--pk-shadow-1);transition:background-color .15s ease,border-color .15s ease}
.help-context::before{content:"?";display:inline-grid;place-items:center;flex:0 0 19px;width:19px;height:19px;border-radius:50%;background:var(--pk-brand-soft);color:var(--pk-brand-text);font-size:12px;font-weight:800;line-height:1}
.help-context:hover{background:var(--pk-surface-3);border-color:var(--pk-border-strong);color:var(--pk-brand-text)}
/* Help links that already carry the help icon keep exactly one icon. */
.help-context:has(>svg)::before,.settings-help::before{content:none}
.help-context>svg{color:var(--pk-brand-text)}
.daily-care-card .help-context{font-size:12.5px}
@media (max-width:760px){.help-context{min-height:40px}}

/* ---- Plant context path --------------------------------------------------- */
.context-path{gap:6px 10px;padding:8px 12px;border:1px solid var(--pk-border);border-radius:var(--pk-radius);background:var(--pk-surface);box-shadow:var(--pk-shadow-1);font-size:13px}
.context-path a{display:inline-flex;align-items:center;min-height:28px;padding:0 6px;border-radius:7px;color:var(--pk-brand-text)}
.context-path a:hover{background:var(--pk-surface-3)}
.context-path>span:not(.context-path-spacer){color:var(--pk-text-faint)}
.context-path strong{color:var(--pk-text)}

/* ---- Quick navigation ----------------------------------------------------- */
.global-return-nav{border:1px solid var(--pk-border);border-radius:14px;background:var(--pk-surface-raised);box-shadow:var(--pk-shadow-2);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
.global-return-nav a,.global-return-nav button{color:var(--pk-brand-text);border-radius:9px;min-height:32px}
.global-return-nav a:hover,.global-return-nav button:hover{background:var(--pk-surface-3)}
.global-return-home,.global-return-top{border-left:1px solid var(--pk-border)!important}

/* ---- Mobile shell -------------------------------------------------------- */
@media (max-width:650px){
  .topbar{padding:20px 16px 18px;min-height:0;gap:14px}
  .topbar h1{font-size:26px}
  .topbar p{font-size:14px;margin-top:5px}
  .topbar-actions{gap:6px}
  .topbar .topbar-action{padding:8px 10px;font-size:13px}
  .topbar>.pk-garden{right:-14px;bottom:-4px;width:150px;height:94px;opacity:.75}
  main{margin-top:18px;padding:0 14px}
}
/* Wide headers: the title block wraps before the action group does. */
@media (min-width:1100px){.topbar>div:first-child{flex:1 1 auto;min-width:0}.topbar-actions{flex:0 0 auto}}