/* ============================================================
   Shape language (UI-40/41, Tray 2026-10-04). Loaded last.
   Phone, web and the Mac app share one shape: every button, search
   bar, single-line field, chip and segmented control is a pill
   (--radius-control), and every icon-only button is a circle. Cards,
   menus and multi-line text keep a soft box (--radius-box,
   --radius-lg). The tokens live at the top of styles.css; the
   component rules elsewhere read them. This file holds the shared
   pieces that have no older home: the one search bar, the text-area
   exception and the phone's round menu button.
   ============================================================ */

/* Multi-line text keeps a soft box, not a pill. */
:root textarea:is(.dialog-input, .workspace-input, .input),
:root :is(.field, .form-actions, .cc-dialog) textarea { border-radius: var(--radius-box); }

/* Any single-line field or select no other rule shapes is a pill too
   (zero specificity, so component rules still decide their own). */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden], [type=image]), select) { border-radius: var(--radius-control); }

/* ---- The one search bar --------------------------------------
   The phone menu's search pill, everywhere: Library, Agents, Plugins,
   People, workflows, routines, dialogs. Either a wrapper
   (<label class="search-field">icon<input></label>) or a bare
   <input class="search-field">. */
.search-field {
  display: flex; align-items: center; gap: 10px; min-width: 0; height: var(--search-h); padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--raise); color: var(--ink-3);
  box-shadow: none; cursor: text; }
.search-field > svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.search-field input {
  flex: 1; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; box-shadow: none; color: var(--ink); font: inherit; font-size: var(--text-md); }
input.search-field { width: 100%; color: var(--ink); font: inherit; font-size: var(--text-md); outline: 0; }
input.search-field::placeholder, .search-field input::placeholder { color: var(--ink-3); opacity: 1; }
.search-field:focus-within, input.search-field:focus { border-color: var(--line-3); outline: 2px solid var(--ink-3); outline-offset: 2px; box-shadow: none; }
.search-field input:focus, .search-field input:focus-visible { outline: 0; box-shadow: none; }
.search-field input::-webkit-search-decoration { -webkit-appearance: none; }

/* ---- Phones: the menu button is a 44pt circle on every page ---- */
@media (max-width: 760px) {
  .menu-btn { width: var(--tap-min); height: var(--tap-min); min-width: var(--tap-min); border-radius: 50%; }
  .menu-btn svg { width: 18px; height: 18px; }
}
.menu-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }