/* ── UNIVERSAL SEARCH ─────────────────────────────────────────
   Kate, 29 Sep 2026: one search bar for the whole dashboard, with suggestions
   popping up as you type. Pages, team, branches and periods. search.js builds it.

   Desktop: a search-bar-shaped button in the masthead. Pressing it (or / or
   Ctrl+K from anywhere) opens the panel right on top of it, so the bar looks like
   it came alive, with the suggestions dropping below.
   Phone (under 760px): since 6 Oct 2026 the same bar on its own row (below). */

.gs-trig{display:inline-flex;align-items:center;gap:9px;min-height:44px;width:230px;padding:0 14px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:22px;
  font:inherit;font-size:13.5px;letter-spacing:.02em;cursor:pointer;text-align:left}
.gs-trig svg{flex-shrink:0}
.gs-trig .gs-trig-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-trig kbd{font:inherit;font-size:11px;border:1px solid var(--border);border-radius:5px;padding:0 6px;
  color:var(--muted2);line-height:18px}
@media(hover:hover){.gs-trig:hover{color:var(--text);border-color:var(--text)}}
.topbar.stuck .gs-trig{min-height:34px}
@media(max-width:1100px){.gs-trig{width:180px}}

.gs-scrim{position:fixed;inset:0;z-index:300;background:transparent}
.gs-scrim[hidden],.gs-panel[hidden]{display:none}

/* Kate, 6 Oct 2026: "as intuitive as the hub", on every screen. Team Home's look:
   the bar is a 44px pill, results drop below in one list, each row a small label
   (where it lives), the name in bold with the typed letters marked, one line more.
   No group headings, icons or key hints; the page behind is not dimmed. */
.gs-panel{position:fixed;z-index:301;width:480px;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;gap:8px;background:none;border:0}
.gs-head{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;
  background:var(--surface);border:1px solid var(--text);border-radius:999px;
  box-shadow:0 0 0 3px rgba(153,246,228,.45)}
.gs-head svg{flex-shrink:0;color:var(--muted)}
.gs-in{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);
  font:inherit;font-size:15px;padding:0}
.gs-in::placeholder{color:var(--muted2)}
.gs-in::-webkit-search-cancel-button{display:none}
.gs-x{border:0;background:transparent;color:var(--muted);font:inherit;cursor:pointer;
  font-size:18px;padding:0 8px;min-width:36px;min-height:36px}

.gs-list{overflow-y:auto;padding:6px;overscroll-behavior:contain;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.06)}
.gs-grp{padding:8px 12px 4px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.gs-row{display:block;padding:10px 12px;border-radius:8px;cursor:pointer}
.gs-row.on{background:var(--surface2)}
.gs-g,.gs-t,.gs-s{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-g{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.gs-t{font-weight:600;font-size:15px;color:var(--text);line-height:1.35}
.gs-t mark{background:#FDE9A8;color:inherit;border-radius:3px;padding:0 1px}
[data-theme="dark"] .gs-t mark{background:rgba(238,243,199,.28)}
.gs-s{font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:1px}
.gs-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gs-act{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:14px;
  font:inherit;font-size:12px;padding:0 12px;min-height:30px;cursor:pointer;white-space:nowrap}
@media(hover:hover){.gs-act:hover{color:var(--text);border-color:var(--text)}}
.gs-empty{padding:14px 12px;font-size:14px;color:var(--muted)}

body.gs-open{overflow:hidden}

/* ── PHONE ── the bar gets its own full-width row under the logo (search.js moves
   it there), like Team Home's; the panel opens on top of it, not as a sheet. */
@media(max-width:760px){
  .gs-trig{order:9;display:flex;width:100%;margin:8px 0 2px;color:var(--muted)}
  .gs-trig kbd{display:none}
  /* 16px or iOS zooms the page on focus. */
  .gs-in{font-size:16px}
  .gs-row{padding:11px 12px}
  .gs-row.on{background:transparent}
  .gs-row:active{background:var(--surface2)}
  .gs-act{min-height:36px;font-size:12.5px;padding:0 14px;border-radius:18px}
}

/* Kate, 8 Oct 2026: "parang google lang". Enter opens a page of results: a title, where
   it lives, and a line of text with the typed words marked, like a search engine. The
   dropdown ends with the way in. */
.gs-more{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 2px;
  padding:10px 12px;border-top:1px solid var(--border);font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer}
.gs-more kbd{font:inherit;font-size:11px;font-weight:500;border:1px solid var(--border);border-radius:5px;
  padding:0 6px;color:var(--muted2);line-height:18px}
@media(hover:hover){.gs-more:hover{background:var(--surface2);border-radius:8px}}

.gs-serp{position:fixed;inset:0;z-index:302;overflow-y:auto;background:var(--bg);color:var(--text);
  overscroll-behavior:contain}
.gs-serp[hidden]{display:none}
.gs-serp-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;
  max-width:820px;margin:0 auto;padding:12px 24px 8px;background:var(--bg)}
.gs-serp-bar{flex:1;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;
  background:var(--surface);border:1px solid var(--text);border-radius:999px;box-shadow:0 0 0 3px rgba(153,246,228,.45)}
.gs-serp-bar svg{flex-shrink:0;color:var(--muted)}
.gs-serp-in{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:15px;padding:0}
.gs-serp-in::-webkit-search-cancel-button{display:none}
.gs-serp-home{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;
  font:inherit;font-size:13px;font-weight:600;padding:0 14px;min-height:36px;text-decoration:none;white-space:nowrap}
@media(hover:hover){.gs-serp-home:hover{border-color:var(--text)}}
.gs-back{position:fixed;left:16px;bottom:16px;z-index:303;display:flex;align-items:center;max-width:calc(100vw - 32px);
  border:1px solid var(--text);background:var(--text);color:var(--bg);border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.gs-back-go,.gs-back-x{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.gs-back-go{font-size:13.5px;font-weight:600;padding:0 6px 0 18px;min-height:42px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-back-x{font-size:20px;line-height:1;padding:0 14px 0 8px;min-height:42px;opacity:.7}
/* The masthead's lockup: the TARA ROSE image with the mint rule, SALONS as text sized off its width. */
.gs-serp-logo{flex-shrink:0;width:124px;display:flex;flex-direction:column;align-items:center;container-type:inline-size;text-decoration:none}
.gs-serp-logo img{display:block;width:100%;height:auto;aspect-ratio:2321/396}
.gs-serp-word{display:block;margin-top:max(4.2cqw,4px);font:500 max(7.4cqw,7.5px)/1 'Inter',sans-serif;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.gs-serp-close{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;
  font:inherit;font-size:13px;font-weight:600;padding:0 14px;min-height:34px;cursor:pointer;white-space:nowrap;flex-shrink:0}
@media(hover:hover){.gs-serp-close:hover{border-color:var(--text)}}
.gs-serp-body{max-width:820px;margin:0 auto;padding:4px 24px 80px}
.gs-filters{padding:6px 0 10px;border-bottom:1px solid var(--border)}
.gs-filters[hidden]{display:none}
.gs-chips,.gs-pchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.gs-chips:empty,.gs-pchips:empty{display:none}
.gs-pchips{margin-top:8px}
.gs-pl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-right:2px}
.gs-pchip{min-height:30px;font-size:12.5px}
.gs-chip{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;
  font:inherit;font-size:13px;padding:0 14px;min-height:34px;cursor:pointer}
.gs-chip span{margin-left:4px;color:var(--muted2);font-size:12px}
.gs-chip.on{background:var(--text);border-color:var(--text);color:var(--bg)}
.gs-chip.on span{color:inherit;opacity:.7}
@media(hover:hover){.gs-chip:not(.on):hover{color:var(--text);border-color:var(--text)}}
.gs-sumrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 8px}
.gs-serp-sum{font-size:13px;color:var(--muted);min-width:0}
.gs-tips-btn{flex-shrink:0;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;
  font:inherit;font-size:12.5px;padding:0 14px;min-height:32px;cursor:pointer}
@media(hover:hover){.gs-tips-btn:hover{color:var(--text);border-color:var(--text)}}
.gs-tips{margin:0 0 14px;padding:14px 18px 6px;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-size:13.5px;line-height:1.55;color:var(--muted)}
.gs-tips[hidden]{display:none}
.gs-tips-h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:6px}
.gs-tips ul{list-style:none;margin:0;padding:0}
.gs-tips li{padding:7px 0;border-top:1px solid var(--border)}
.gs-tips li:first-child{border-top:0}
.gs-tips b{color:var(--text);font-weight:600}
.gs-tips code{font:inherit;font-weight:600;color:var(--text)}
.gs-tips kbd{font:inherit;font-size:11.5px;padding:1px 6px;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--text)}
.gs-exs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.gs-ex{border:1px dashed var(--border);background:var(--bg);color:var(--text);border-radius:999px;font:inherit;font-size:12.5px;padding:3px 12px;cursor:pointer;text-align:left}
@media(hover:hover){.gs-ex:hover{border-style:solid;border-color:var(--text)}}
.gs-ans{margin:2px 0 14px;padding:16px 18px;border:1px solid var(--border);border-left:4px solid var(--accent,#2dd4bf);border-radius:12px;background:var(--surface)}
.gs-ans[hidden]{display:none}
.gs-ans-k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.gs-ans-t{margin-top:4px;font-size:21px;font-weight:600;color:var(--text)}
.gs-ans-s{margin-top:6px;max-width:660px;font-size:15px;line-height:1.55;color:var(--muted)}
.gs-ans-go{margin-top:12px;border:1px solid var(--text);background:var(--text);color:var(--bg);border-radius:999px;font:inherit;font-size:13px;padding:0 16px;min-height:36px;cursor:pointer}
.gs-r-more{margin-top:4px;font-size:12.5px;color:var(--muted2)}
.gs-res{padding:14px 0 6px}
.gs-r{display:block;text-decoration:none;color:inherit}
.gs-r-g{display:block;font-size:12.5px;color:var(--muted2);letter-spacing:.02em}
.gs-r-t{display:block;margin-top:2px;font-size:19px;font-weight:600;line-height:1.3;color:var(--text)}
@media(hover:hover){.gs-r:hover .gs-r-t{text-decoration:underline}}
.gs-r-t mark,.gs-r-s mark{background:#FDE9A8;color:inherit;border-radius:3px;padding:0 1px}
[data-theme="dark"] .gs-r-t mark,[data-theme="dark"] .gs-r-s mark{background:rgba(238,243,199,.28)}
.gs-r-s{margin-top:4px;max-width:680px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.gs-serp .gs-empty{padding:24px 0;line-height:1.6}
.gs-serp .gs-empty code{font:inherit;font-weight:600;color:var(--text)}
@media(max-width:760px){
  .gs-serp-top{padding:12px 16px 8px;gap:10px}
  .gs-serp-body{padding:2px 16px 80px}
  .gs-more kbd{display:none}
  .gs-serp-home span{display:none}
  .gs-serp-home{padding:0 13px}
  .gs-r-t{font-size:17px}
  .gs-pchips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .gs-pchip,.gs-pl{flex-shrink:0;white-space:nowrap}
  .gs-sumrow{align-items:flex-start}
  /* Kate, 8 Oct 2026: "not a bit optimised". On a phone the first result has to be near the top:
     the bar, the home button and Back are 44px taps that fit on one row (Back no longer wraps and
     pushes the row off the screen), the freshness line is one line, the filter chips are one
     swipeable row each, and the Ledger / Phorest line under every result (the line near the top says it) is gone. */
  .gs-serp-top{padding:10px 16px 6px}
  .gs-serp-bar{height:44px;min-width:0}
  .gs-serp-home{min-width:44px;min-height:44px;justify-content:center;padding:0;flex-shrink:0}
  .gs-serp-close{min-height:44px;padding:0 14px}
  .gs-fresh{padding-top:6px;font-size:11.5px;gap:2px 12px}
  .gs-fresh-k,.gs-fresh-pt{display:none}
  .gs-sumrow{padding:8px 0 6px}
  .gs-chips,.gs-pchips{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gs-chips::-webkit-scrollbar,.gs-pchips::-webkit-scrollbar{display:none}
  .gs-chip{flex-shrink:0;white-space:nowrap}
  .gs-pchips{margin-top:6px}
  .gs-r-feed-std{display:none}
  .gs-res{padding:12px 0 4px}
}

.gs-related{margin:18px 0 8px;padding:16px 18px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.gs-related-h{font-size:17px;font-weight:600;color:var(--text);margin-bottom:12px}
.gs-related-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gs-rel{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;border-radius:10px;background:var(--bg);color:var(--text);
  font:inherit;font-size:14.5px;text-align:left;padding:12px 14px;min-height:46px;cursor:pointer}
.gs-rel svg{order:2;flex-shrink:0;color:var(--muted2)}
.gs-rel span{min-width:0}
@media(hover:hover){.gs-rel:hover{outline:1px solid var(--text)}}
.gs-pager{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:28px;padding-top:8px}
.gs-pager:empty{display:none}
.gs-wordmark{position:relative;padding-top:12px;font-size:18px;font-weight:500;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--text);line-height:1.1;white-space:nowrap}
.gs-wordmark::before{content:'';position:absolute;top:0;left:50%;width:44px;height:2px;margin-left:-22px;background:var(--accent,#2dd4bf)}
.gs-pages{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px}
.gs-pg{border:0;background:transparent;color:var(--accent-lavender,#7c6cf0);font:inherit;font-size:15px;padding:6px 10px;min-width:34px;cursor:pointer;border-radius:8px}
.gs-pg.on{color:var(--text);font-weight:700;cursor:default}
.gs-pg-n{font-weight:600;padding:6px 12px}
.gs-pg-dots{color:var(--muted2);padding:0 4px}
@media(hover:hover){.gs-pg:not(.on):hover{background:var(--surface)}}
@media(max-width:760px){
  .gs-serp-logo{display:none}
  .gs-serp-in{font-size:16px}
  .gs-related-g{grid-template-columns:1fr}
  .gs-wordmark{font-size:15px}
}

.gs-fresh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:10px 0 0;font-size:12.5px;color:var(--muted2)}
.gs-fresh:empty{display:none}
.gs-fresh b{color:var(--muted);font-weight:600}
.gs-fresh-k{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
.gs-fresh .stale,.gs-fresh .stale b{color:var(--bad,#d9644a)}

.gs-r-upd{margin-top:4px;font-size:12.5px;color:var(--muted2)}
.gs-r-upd b{color:var(--muted);font-weight:600}
.gs-r-upd .stale,.gs-r-upd .stale b{color:var(--bad,#d9644a)}

/* The mic takes room in the results bar on a phone (Kate, 18 Oct 2026): tighter padding and gap, a 36px mic, so what is typed keeps its width. */
@media(max-width:560px){
  .gs-serp-bar{gap:6px;padding:0 6px 0 12px}
  .gs-serp-bar .trs-mic{width:36px;height:36px;margin:0}
}