/* Shared by the Django site and Vue app. These tokens also apply to teleported sheets. */
:root {
  --ui-canvas: #f5f5f3;
  --ui-surface: #fcfcfb;
  --ui-inset: #f1f1ef;
  --ui-raised: #f8f8f6;
  --ui-focus-inner: #77776f;
  --ui-focus-outer: #2929231f;
  --ui-weight-offset: 0;
  --ui-ease: cubic-bezier(.215,.61,.355,1);
}
:root, body.woven-site.studio-site {
  font-weight: calc(400 - var(--ui-weight-offset));
  font-variant-numeric: tabular-nums;
}
body { font-weight: calc(400 - var(--ui-weight-offset)); }
:where(h1, h2, h3, h4, h5, h6, b, strong) { font-weight: calc(700 - var(--ui-weight-offset)); }
:where(p, li, dd, label, .message-body) { text-wrap: pretty; }
:is(.app-shell, .woven-site.studio-site) svg { vertical-align: -.125em; }
:is(.app-shell, .woven-site.studio-site) :is(input, button, select, textarea, table, time) { font-variant-numeric: tabular-nums; }
/* Page atmosphere belongs to woven.css/mobile-woven.css; polish only the controls. */

/* Remove decorative card borders only. Component fills, transparency, elevation,
   and shared palette tokens belong to their original stylesheets. */
:is(.app-shell, .woven-site.studio-site) :is(
  .panel, .request-card, .manage-card, .shop-card, .product-card, .material-card,
  .article-card, .rewards-card, .personal-info-card, .settings-card, .account-card,
  .conversation-row, .menu-row, .workspace-sidebar, .wm-filter-panel, .wm-results,
  .wm-supply-row, .wm-shop-card, .wm-request-card, .woven-feature-card,
  .woven-category-card, .woven-menu-panel, .woven-account-panel,
  .auth-intro, .skeleton-card
) {
  border-color: transparent;
}
:is(.app-shell, .woven-site.studio-site) :is(.empty, .empty-state, .wm-empty, .woven-account, .woven-nav > a, .wm-category-choices > a) { border-color: transparent; }
.woven-site.studio-site :is(.woven-request-box, .woven-home-paths > a, .woven-category-links > a) {
  border-color: transparent;
}
.woven-site.studio-site #home-request { border-radius: 0; padding: 8px 4px; }
:is(.app-shell, .woven-site.studio-site) :is(.page-header, .home-header, .site-header) {
  border-color: transparent;
}
:is(.app-shell, .woven-site.studio-site) :is(.secondary, .btn-outline) {
  border-color: transparent;
  background: var(--ui-inset);
}
:is(.app-shell, .woven-site.studio-site) :is(.search-bar, .wm-search-bar) {
  border-color: transparent;
  background: var(--ui-inset);
}
/* Existing page/embedded calculator rules have ID selectors and !important focus rings.
   Keep this narrowly limited to editable fields; keyboard links retain their focus indicator. */
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), select, textarea) {
  border-color: transparent !important;
  background-color: var(--ui-inset) !important;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea):is(:focus, :focus-visible) {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--ui-focus-inner), 0 0 0 4px var(--ui-focus-outer) !important;
}
:is(input, select, textarea)[aria-invalid=true] { --ui-focus-inner: #ad4b30; --ui-focus-outer: #ad4b3026; }

/* These fields share a surface with their toolbar; focus belongs to the shell. */
.woven-site.studio-site :is(#home-request, .business-chat .chat-input-form textarea, .business-search input),
.woven-site.studio-site :is(#home-request, .business-chat .chat-input-form textarea, .business-search input):is(:focus, :focus-visible) {
  background-color: transparent !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
body.woven-site.studio-site .woven-request-box {
  border: 1px solid #dfe2d8;
  border-radius: 20px;
  background: #fbfcf8e8;
  box-shadow: 0 2px 8px #35442b05;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.woven-site.studio-site .woven-request-box:hover { background: #fbfcf8e8; border-color: #d4dacf; }
body.woven-site.studio-site .woven-request-box:focus-within {
  background: #fbfcf8e8;
  border-color: #aeb9a7;
  box-shadow: 0 0 0 2px #68715d0d;
}

.ui-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ui-ease), visibility 240ms; visibility: hidden; }
.ui-collapse.is-open { grid-template-rows: 1fr; visibility: visible; }
.ui-collapse > div { min-height: 0; overflow: hidden; }
.ui-collapse .filter-panel { margin-block: 12px; }
/* Native details retain keyboard/no-JS behavior. Supporting engines animate both directions. */
.wm-filter-presets::details-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms var(--ui-ease), content-visibility 240ms allow-discrete;
}
.wm-filter-presets[open]::details-content { grid-template-rows: 1fr; }
.ui-details-body { min-height: 0; overflow: hidden; }
/* Character rendering contract for text-stream consumers; --char-index is chunk-local. */
.stream-character { animation: ui-character-in 90ms var(--ui-ease) both; animation-delay: calc(var(--char-index, 0) * 30ms); }
@keyframes ui-character-in { from { filter: blur(6px); opacity: 0; } to { filter: blur(0); opacity: 1; } }

button[data-copied] { position: relative; }
button[data-copied]::after {
  content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: inherit; background: var(--ui-surface); color: var(--green, #52694a);
  font-size: 1.1em; pointer-events: none;
  animation: ui-copy-fade 2500ms both;
}
@keyframes ui-copy-fade { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
button[data-copied][data-copy-phase=b]::after { animation-name: ui-copy-fade-repeat; }
@keyframes ui-copy-fade-repeat { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Dark surfaces currently used by the community video feed. */
:is(.community-shell:has(.video-mode), .video-mode, .community-header, .community-bottom-nav, .community-video-search, [data-theme=dark]) {
  --ui-weight-offset: 40;
  --ui-canvas: #0b0b0a;
  --ui-surface: #151515;
  --ui-raised: #1a1a19;
  --ui-inset: #20201e;
  --ui-focus-inner: #a0a099;
  --ui-focus-outer: #fcfcfb26;
  font-weight: calc(400 - var(--ui-weight-offset));
}
.video-product-card { --ui-weight-offset: 0; font-weight: 400; }
.community-bottom-nav > .selected { font-weight: calc(700 - var(--ui-weight-offset)); }
.video-mode .primary { font-weight: calc(600 - var(--ui-weight-offset)); }
@media (prefers-reduced-motion: reduce) {
  .ui-collapse, .wm-filter-presets::details-content { transition: none; }
  button[data-copied][data-copy-phase]::after { animation: none; }
  .stream-character { animation: none; filter: none; }
}