/* ============================================================
   ShootCal shared UI — canonical component "shells" shared by
   shootcal.com (the app + marketing) and galleries.shootcal.com.

   The idea: the SHAPE of a component (button, checkbox, chip …) is
   defined once, here, in terms of abstract --sc-* tokens. Each app
   maps those tokens to ITS OWN palette and @imports this file, so
   the two products feel like one family while each keeps its own
   accent — ShootCal coral, Galleries monochrome.

   To share: this file is the ONLY copy (master in the shootcal-web
   repo, served from the shootcal.com docroot). Galleries keeps NO
   local copy — its app.css @imports the absolute shootcal.com URL
   cross-origin. Each app's stylesheet must (1) @import this file at
   the top and (2) remap the --sc-* tokens in its own :root.
   ============================================================ */

/* Default token values (overridden by each app's :root). */
:root {
  --sc-accent:        #c9742f;
  --sc-on-accent:     #fff;
  --sc-ink:           #211e1a;
  --sc-ink-soft:      #6f665b;
  --sc-line:          #e6ddd0;
  --sc-surface:       #ffffff;
  --sc-surface-2:     #f4efe8;
  --sc-radius:        10px;
  --sc-radius-lg:     12px;
  --sc-btn2-bg:       #ffffff;
  --sc-btn2-border:   var(--sc-line);
  --sc-btn2-bg-hover: var(--sc-surface-2);
  --sc-btn2-blur:     none;
  --sc-btn2-shadow:   0 1px 2px rgba(70, 90, 120, .08);
  --sc-accent-glow:   rgba(230, 116, 64, .30);
  --sc-focus:         rgba(236, 138, 92, .5);
  /* Authenticated action system. Product styles may tune these values, but
     should keep the semantic roles and states intact. The cool graphite is
     deliberately softer than near-black; secondary actions use a translucent
     neutral material with an opaque Safari/no-blur fallback. */
  --sc-action-primary-bg: linear-gradient(180deg, #485563, #35404b);
  --sc-action-primary-bg-hover: linear-gradient(180deg, #414d59, #2e3741);
  --sc-action-primary-bg-active: linear-gradient(180deg, #35404b, #2b333c);
  --sc-action-primary-text: #fff;
  --sc-action-primary-border: rgba(30, 39, 48, .72);
  --sc-action-primary-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 2px 4px rgba(37,47,58,.10), 0 7px 18px rgba(37,47,58,.18);
  --sc-action-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 6px rgba(37,47,58,.12), 0 10px 24px rgba(37,47,58,.21);
  --sc-action-secondary-bg: rgba(248, 250, 252, .70);
  --sc-action-secondary-bg-hover: rgba(255, 255, 255, .94);
  --sc-action-secondary-bg-active: rgba(230, 235, 240, .90);
  --sc-action-secondary-fallback: #f4f6f8;
  --sc-action-secondary-text: #303a45;
  --sc-action-secondary-border: rgba(91, 104, 118, .28);
  --sc-action-secondary-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 1px 2px rgba(42,50,62,.05), 0 5px 15px rgba(42,50,62,.08);
  --sc-action-focus: #526b84;
  --sc-action-danger-bg: rgba(158, 48, 42, .10);
  --sc-action-danger-bg-hover: rgba(158, 48, 42, .16);
  --sc-action-danger-text: #982f2a;
  --sc-action-danger-border: rgba(152, 47, 42, .42);
  --sc-action-danger-strong-bg: linear-gradient(180deg, #b74740, #922c27);
  --sc-action-danger-strong-bg-hover: linear-gradient(180deg, #a83d37, #7f241f);
  --sc-action-disabled-bg: #dce1e6;
  --sc-action-disabled-text: #6a7480;
  --sc-action-disabled-border: #c8ced5;
  --sc-action-blur: blur(12px) saturate(145%);
  /* Liquid-glass material — shared vocabulary, tinted per app. The inset
     specular highlight makes a control's top edge catch light like real
     glass; the blur/saturate gives frosted vibrancy on translucent surfaces. */
  --sc-glass-hi:      inset 0 1px 0 rgba(255, 255, 255, .5);
  --sc-glass-blur:    blur(16px) saturate(170%);
  /* Form fields */
  --sc-field-bg:      var(--sc-surface);
  --sc-field-border:  var(--sc-line);
  --sc-field-radius:  10px;
  --sc-field-pad:     11px 13px;
  --sc-field-ring:    rgba(230, 116, 64, .20);
  /* Native select behavior with one cross-product visual indicator. The SVG
     is decorative; the real <select> keeps its platform picker, keyboard,
     screen-reader, and touch behavior. */
  --sc-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2367727f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9.5 5 5 5-5'/%3E%3C/svg%3E");
  --sc-select-chevron-size: 14px;
  --sc-select-chevron-inset: 13px;
  --sc-select-padding-end: 38px;
  /* Cards / panels + glass menus */
  --sc-card-bg:       var(--sc-surface);
  --sc-card-border:   var(--sc-line);
  --sc-card-radius:   16px;
  --sc-card-pad:      24px 22px;
  --sc-card-shadow:   0 1px 2px rgba(20, 25, 32, .04), 0 6px 18px rgba(20, 25, 32, .06);
  --sc-form-section-gap: 18px;
  --sc-menu-bg:       rgba(255, 255, 255, .82);
  --sc-menu-border:   var(--sc-line);
  --sc-menu-shadow:   0 12px 38px rgba(8, 10, 14, .16);
  /* Segmented control (pill-in-track): one vocabulary for every
     Month|Agenda|Tasks-style switcher. Sizes stay per-use; the track,
     pill, and states share these. */
  --sc-seg-track:     rgba(0, 0, 0, .05);
  --sc-seg-ink:       var(--sc-ink-soft);
  --sc-seg-pill-bg:   var(--sc-surface);
  --sc-seg-pill-ink:  var(--sc-ink);
  --sc-seg-pill-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ---- Buttons ------------------------------------------------
   New authenticated forms should use `.sc-action` plus a semantic variant
   (`.sc-action--primary`, `.sc-action--secondary`, or `.sc-action--danger`).
   Use `.btn` + a variant (.primary / .secondary / .danger) and
   optionally a size (.lg / .sm). `.ct-btn` (+ .p / .s / .d,
   .ct-btn-lg) are kept as aliases so existing markup keeps working. */
.sc-action, .btn, .ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: 11px 18px; border: 0; border-radius: var(--sc-radius);
  font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.15;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease,
    border-color .15s ease, color .15s ease, opacity .15s ease;
}
.sc-action { min-height: 44px; }
.sc-action:disabled, .sc-action[aria-disabled="true"],
.btn:disabled, .btn[aria-disabled="true"],
.ct-btn:disabled, .ct-btn[aria-disabled="true"] { cursor: not-allowed; }
.btn.lg, .ct-btn-lg { padding: 14px 32px; font-size: 1.05rem; border-radius: var(--sc-radius-lg); }
.btn.sm, .ct-btn-sm { padding: 8px 13px; font-size: .875rem; }

.sc-action--primary, .btn.primary, .ct-btn.p {
  background: var(--sc-action-primary-bg); color: var(--sc-action-primary-text);
  border: 1px solid var(--sc-action-primary-border);
  box-shadow: var(--sc-action-primary-shadow);
}
.sc-action--primary:hover, .btn.primary:hover, .ct-btn.p:hover {
  background: var(--sc-action-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--sc-action-primary-shadow-hover);
}
.sc-action--primary:active, .btn.primary:active, .ct-btn.p:active {
  background: var(--sc-action-primary-bg-active); transform: translateY(0);
  box-shadow: var(--sc-glass-hi), 0 1px 3px rgba(37,47,58,.14);
}
.btn.primary.is-saved, .ct-btn.p.is-saved {
  background: #3aa55a; box-shadow: var(--sc-glass-hi), 0 1px 2px rgba(70, 90, 120, .10), 0 5px 16px rgba(58, 165, 90, .32);
}
.sc-action--secondary, .btn.secondary, .ct-btn.s {
  background: var(--sc-action-secondary-bg); color: var(--sc-action-secondary-text);
  border: 1px solid var(--sc-action-secondary-border);
  -webkit-backdrop-filter: var(--sc-action-blur); backdrop-filter: var(--sc-action-blur);
  box-shadow: var(--sc-action-secondary-shadow);
}
.sc-action--secondary:hover, .btn.secondary:hover, .ct-btn.s:hover {
  background: var(--sc-action-secondary-bg-hover); transform: translateY(-1px);
}
.sc-action--secondary:active, .btn.secondary:active, .ct-btn.s:active {
  background: var(--sc-action-secondary-bg-active); transform: translateY(0);
  box-shadow: var(--sc-glass-hi), 0 1px 3px rgba(42,50,62,.08);
}
.sc-action--danger, .btn.danger, .ct-btn.d {
  background: var(--sc-action-danger-bg); color: var(--sc-action-danger-text);
  border: 1px solid var(--sc-action-danger-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 7px rgba(117,34,30,.08);
}
.sc-action--danger:hover, .btn.danger:hover, .ct-btn.d:hover {
  background: var(--sc-action-danger-bg-hover); transform: translateY(-1px);
}
.sc-action--danger.sc-action--strong,
.btn.primary.danger, .ct-btn.p.d {
  background: var(--sc-action-danger-strong-bg); color: #fff;
  border-color: rgba(105,25,22,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 16px rgba(117,34,30,.20);
}
.sc-action--danger.sc-action--strong:hover,
.btn.primary.danger:hover, .ct-btn.p.d:hover {
  background: var(--sc-action-danger-strong-bg-hover);
}
.sc-action:focus-visible, .btn:focus-visible, .ct-btn:focus-visible {
  outline: 3px solid var(--sc-action-focus); outline-offset: 2px;
}
.sc-action:is(:disabled,[aria-disabled="true"]),
.btn:is(:disabled,[aria-disabled="true"]),
.ct-btn:is(:disabled,[aria-disabled="true"]) {
  opacity: 1; color: var(--sc-action-disabled-text);
  background: var(--sc-action-disabled-bg); border-color: var(--sc-action-disabled-border);
  box-shadow: none; transform: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sc-action:is(.is-loading,[aria-busy="true"]),
.btn:is(.is-loading,[aria-busy="true"]),
.ct-btn:is(.is-loading,[aria-busy="true"]) { cursor: progress; opacity: .78; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sc-action--secondary, .btn.secondary, .ct-btn.s {
    background: var(--sc-action-secondary-fallback);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-action, .btn, .ct-btn { transition: none; }
}

/* ---- Checkbox ----------------------------------------------
   Bare native checkboxes vary heavily across browsers, so every
   non-MUI checkbox gets one clean, shared style. */
input[type="checkbox"]:not(.sc-mui-native-input) {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  /* min floors: with appearance:none a stray width:auto/0 rule collapses the
     box to a sliver (bit us on galleries admin) — the floor makes that
     impossible while still allowing intentional 15-17px custom sizes. */
  width: 18px; height: 18px; min-width: 14px; min-height: 14px; margin: 0; padding: 0;
  border: 1.5px solid var(--sc-line); border-radius: 5px;
  background-color: var(--sc-surface);
  background-repeat: no-repeat; background-position: center;
  display: inline-block; vertical-align: middle; flex-shrink: 0; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
input[type="checkbox"]:not(.sc-mui-native-input):checked {
  background-color: var(--sc-accent); border-color: var(--sc-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 12px;
}
input[type="checkbox"]:not(.sc-mui-native-input):focus-visible {
  outline: 2px solid var(--sc-focus); outline-offset: 2px;
}
/* The display:inline-block above outranks the UA's [hidden]{display:none},
   so placeholder checkboxes rendered with the hidden attribute were showing
   as blank squares. !important because the restyle selector's :not() chain
   out-specifies any plain attribute guard; hidden must always mean hidden. */
input[type="checkbox"][hidden] { display: none !important; }

/* ---- Form fields --------------------------------------------
   Shared shell for text-ish inputs, textareas and selects. Element-
   level (low specificity) so an app's own class-based form rules can
   still override where a specific layout needs it; converging those
   rules onto the --sc-field-* tokens is what actually unifies the look.
   `.sc-field` is an explicit opt-in with the same shell. */
.sc-field,
input[type="text"]:not(.sc-mui-native-input), input[type="email"]:not(.sc-mui-native-input),
input[type="tel"]:not(.sc-mui-native-input), input[type="number"]:not(.sc-mui-native-input),
input[type="password"]:not(.sc-mui-native-input), input[type="search"]:not(.sc-mui-native-input),
input[type="url"]:not(.sc-mui-native-input), input[type="date"]:not(.sc-mui-native-input),
input[type="time"]:not(.sc-mui-native-input), input[type="datetime-local"]:not(.sc-mui-native-input),
input[type="month"]:not(.sc-mui-native-input), textarea:not(.sc-mui-native-input),
select:not(.sc-mui-native-input) {
  font: inherit; color: var(--sc-ink); box-sizing: border-box;
  padding: var(--sc-field-pad); background: var(--sc-field-bg);
  border: 1px solid var(--sc-field-border); border-radius: var(--sc-field-radius);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.sc-field { width: 100%; }
:where(.sc-field, input[type="text"]:not(.sc-mui-native-input),
  input[type="email"]:not(.sc-mui-native-input), input[type="tel"]:not(.sc-mui-native-input),
  input[type="number"]:not(.sc-mui-native-input), input[type="password"]:not(.sc-mui-native-input),
  input[type="search"]:not(.sc-mui-native-input), input[type="url"]:not(.sc-mui-native-input),
  input[type="date"]:not(.sc-mui-native-input), input[type="time"]:not(.sc-mui-native-input),
  input[type="datetime-local"]:not(.sc-mui-native-input), input[type="month"]:not(.sc-mui-native-input),
  textarea:not(.sc-mui-native-input), select:not(.sc-mui-native-input)):focus-visible {
  outline: none; border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px var(--sc-field-ring);
}

/* ---- Form composition ---------------------------------------
   Opt-in layout shared by substantial editors. Product-specific
   classes still own behavior and color; these primitives keep
   section rhythm, labels, controls, and action rows consistent. */
.sc-form {
  width: 100%; max-width: 980px; margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--sc-form-section-gap);
}
.sc-form > .sc-form-card {
  margin: 0; padding: 15px 18px;
  background: var(--card-solid, var(--sc-card-bg));
  border: 1px solid var(--line, var(--sc-card-border));
  border-radius: 14px;
  box-shadow: var(--shadow-sm, var(--sc-card-shadow));
}
.sc-form > .sc-form-card > h3,
.sc-form-section-head h3 {
  margin: 0 0 13px;
  color: var(--ink-soft, var(--sc-ink-soft));
  font-size: .7rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .06em; text-transform: uppercase;
}
.sc-form-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 13px;
}
.sc-form-section-head h3 { margin-bottom: 0; }
.sc-form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 16px;
}
/* Keep adjacent full-width field blocks and grids visually distinct without
   changing the compact rhythm inside grids, filters, checkbox rows, or toolbars. */
.sc-form-card > .sc-form-field + .sc-form-grid,
.sc-form-card > .sc-form-grid + .sc-form-field,
.sc-form-card > .sc-form-field + .sc-form-field {
  margin-top: 13px;
}
.sc-form-field {
  display: flex; flex-direction: column; gap: 0;
  min-width: 0; margin: 0;
  color: var(--ink, var(--sc-ink)); font-size: 1rem; font-weight: 400;
}
.sc-form-field > span:first-child,
.sc-form-field > label:first-child {
  margin: 0 0 5px;
  color: var(--ink-soft, var(--sc-ink-soft));
  font-size: .8rem; font-weight: 500; line-height: 1.35;
}
.sc-form-field input,
.sc-form-field select,
.sc-form-field textarea {
  width: 100%; min-width: 0; min-height: 44px;
  font-size: 1rem; font-weight: 400; line-height: 1.35;
}
/* Explicit utility for select controls outside the authenticated app shells.
   The app and Galleries styles apply this same contract to their form areas. */
.sc-select-control:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: var(--sc-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--sc-select-chevron-inset) center;
  background-size: var(--sc-select-chevron-size);
  padding-inline-end: var(--sc-select-padding-end);
}
.sc-form-field textarea { resize: vertical; line-height: 1.5; }
.sc-form-wide { grid-column: 1 / -1; }
.sc-form-toolbar,
.sc-form-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.sc-form-actions { margin-block-start: 13px; }
.sc-form-actions.sc-form-actions-flush { margin-block-start: 0; }
.inv-checkout-example-actions { margin-block-end: 13px; }
.sc-form-toolbar > button,
.sc-form-toolbar > .btn,
.sc-form-toolbar > .ct-btn,
.sc-form-actions > button,
.sc-form-actions > .btn,
.sc-form-actions > .ct-btn { min-height: 44px; }

@media (max-width: 650px) {
  .sc-form-page-head { flex-wrap: wrap; }
  .sc-form-page-head > h2 { flex: 1 1 auto; min-width: 0; }
  .sc-form-page-head > .sc-form-toolbar {
    order: 3; flex: 1 0 100%; margin: 0;
  }
  .sc-form-page-head > .sc-form-toolbar > button,
  .sc-form-page-head > .sc-form-toolbar > .btn,
  .sc-form-page-head > .sc-form-toolbar > .ct-btn {
    flex: 1 1 auto; min-width: 0;
  }
  .sc-form > .sc-form-card { padding: 16px 14px; }
  .sc-form-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-form-wide { grid-column: 1; }
  .sc-form-actions > button,
  .sc-form-actions > .btn,
  .sc-form-actions > .ct-btn {
    flex: 1 1 100%; min-height: 44px;
  }
}

/* ---- Cards / panels + glass menus ---------------------------
   Opt-in shells (`.sc-card`, `.sc-menu`) so a card or dropdown looks
   the same on both products, colored per app. `.sc-menu` is the
   frosted liquid-glass surface for floating menus/popovers. */
.sc-card {
  background: var(--sc-card-bg); border: 1px solid var(--sc-card-border);
  border-radius: var(--sc-card-radius); padding: var(--sc-card-pad);
  box-shadow: var(--sc-card-shadow);
}
.sc-menu {
  background: var(--sc-menu-bg); border: 1px solid var(--sc-menu-border);
  border-radius: 14px; padding: 6px;
  -webkit-backdrop-filter: var(--sc-glass-blur); backdrop-filter: var(--sc-glass-blur);
  box-shadow: var(--sc-glass-hi), var(--sc-menu-shadow);
}
.sc-menu > * {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 9px; background: none;
  font: inherit; color: var(--sc-ink); text-align: left; cursor: pointer;
}
.sc-menu > *:hover { background: var(--sc-surface-2); }