/* Family Garden: a simple bar across the top instead of FWC Manager's sidebar; everything else is styles.css. */
body { margin: 0; }
.gtop { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--header, var(--bg)); border-bottom: 1px solid var(--line); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); }
.gtop .spacer { flex: 1; }
.gtop-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.gtop-name img { width: 26px; height: 26px; border-radius: 6px; }
.gtop-year { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
main#view, main { margin: 0 auto !important; max-width: 2400px !important; padding: 18px max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important; }
.g-signin { max-width: 380px; margin: 8vh auto; display: grid; gap: 10px; }
.g-signin form { display: grid; gap: 12px; } .g-signin label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.g-tablewrap { overflow-x: auto; }
.g-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.g-table th { text-align: left; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; padding: 6px 8px; white-space: nowrap; }
.g-table td { padding: 8px; border-top: 1px solid var(--line); vertical-align: top; } .g-table .num { text-align: right; }
.g-table tr.click { cursor: pointer; } .g-table tr.click:hover td { background: var(--hover); }
@media (max-width: 640px) { .gtop-name span { display: none; } }
.gtop-garden { max-width: 220px; font-weight: 600; }
.g-gardens { display: grid; gap: 8px; margin: 12px 0; }
.g-gardenrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.g-gardenrow .muted { font-size: 12px; }
@media (max-width: 640px) { .g-gardenrow { grid-template-columns: minmax(0, 1fr) auto; } .g-gardenrow .muted { grid-column: 1 / -1; } .gtop-garden { max-width: 150px; } }