/* ============================================================
   shared.css
   What teams, loop and the log-in share beyond app.css: the teams/loop
   switch in the header, the segmented choice made of radio buttons, the feedback pop-up, and the log-out button
   inside the profile menu.
   ============================================================ */
/* the accent for pages without teams' theme.js (which sets it inline): the
   same values as config.js: ACCENTS, so tints built from it match teams */
:root{ --accent:#985635; }
:root.cool{ --accent:#1758AB; }
:root.dark{ --accent:#E08D65; }
:root.dark.cool{ --accent:#75A6EC; }

.product-nav{ display:inline-flex; gap:2px; padding:4px; border-radius:var(--r-btn); background:var(--off-area); }
.product-nav a{ display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:var(--r-link); font-weight:600; color:var(--ink-900); transition:background var(--dur-control) var(--ease-breath); }
.product-nav a:hover{ background:color-mix(in srgb, var(--off-area) 60%, var(--card)); }
.product-nav a[aria-current="page"]{ background:var(--card); }

.feedback-text{ height:auto; min-height:160px; padding:14px 16px; resize:vertical; line-height:1.5; }
#feedbackDialog .dialog{ position:fixed; }

/* segmented choice from radio buttons: 46px track, the chosen option a white pill */
.seg{ display:flex; gap:2px; height:46px; padding:4px; border-radius:var(--r-btn); background:var(--off-area); }
.seg label{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 8px; border-radius:var(--r-link); font-weight:600; color:var(--ink-900); cursor:pointer; white-space:nowrap; transition:background var(--dur-control) var(--ease-breath); }
.seg label:hover{ background:rgba(255,255,255,0.5); }
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label:has(input:checked){ background:var(--card); }
.seg label:has(input:focus-visible){ outline:3px solid color-mix(in srgb, var(--cta) 35%, transparent); outline-offset:1px; }

.menu-form{ margin:0; }
.menu-form .menu-item{ font:inherit; font-weight:600; cursor:pointer; }

@media (max-width: 900px){
  .product-nav a{ padding:0 12px; }
}