{"version":3,"file":"view.css","mappings":";;;AAIE;EACE;EACA;EACA;AAHJ;AAQE;EACE;AANJ;AASE;EACE,QCwGM;AD/GV;AAUE;EACE,QCsGM;AD9GV;AAWE;EACE,SCoGM;AD7GV;AAYE;EACE,SCkGM;AD5GV;AAaE;EACE,SCgGO;AD3GX;AAcE;EACE,SC6FO;ADzGX;AAeE;EACE,SC2FO;ADxGX;AAiBE;EACE;AAfJ;AAkBE;EACE;AAhBJ;AAmBE;EACE;EACA;AAjBJ,C;;;;AElCE;EACE;EACA;EACA;EACA;AAHJ;AAME;EACE;AAJJ;AAOE;EACE,QDyGM;AC9GV;AAQE;EACE,QDuGM;AC7GV;AASE;EACE,SDqGM;AC5GV;AAUE;EACE,SDmGM;AC3GV;AAWE;EACE,SDiGO;AC1GX;AAYE;EACE,SD8FO;ACxGX;AAaE;EACE,SD4FO;ACvGX;AAgBE;EACE;EACA;EACA;AAdJ;AAiBE;EACE;AAfJ;AAkBE;EACE;AAhBJ;AAmBE;EACE;EACA;AAjBJ;AAsBE;EACE;EACA;AApBJ;AAuBE;EACE;AArBJ;AAyBE;EACE;IACE;EAvBJ;AACF,C","sources":["webpack://servv-plugin/./src/Components/Containers/BlockStack.module.scss","webpack://servv-plugin/./src/styles/_tokens.scss","webpack://servv-plugin/./src/Components/Containers/InlineStack.module.scss"],"sourcesContent":["@use \"../../styles/tokens\" as t;\n@use \"../../styles/mixins\" as m;\n\n@include m.scoped {\n  .stack {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  // Gap scale. The numeric names mirror the spacing steps the call sites have\n  // always used, so `gap={4}` keeps meaning 16px.\n  .gap0 {\n    gap: 0;\n  }\n\n  .gap1 {\n    gap: t.$space-2; // 4\n  }\n\n  .gap2 {\n    gap: t.$space-4; // 8\n  }\n\n  .gap3 {\n    gap: t.$space-6; // 12\n  }\n\n  .gap4 {\n    gap: t.$space-8; // 16\n  }\n\n  .gap5 {\n    gap: t.$space-10; // 20\n  }\n\n  .gap6 {\n    gap: t.$space-12; // 24\n  }\n\n  .gap8 {\n    gap: t.$space-16; // 32\n  }\n\n  // Fills an equal share of a row of sibling cards.\n  .cards {\n    flex: 1 1 0;\n  }\n\n  .clickable {\n    cursor: pointer;\n  }\n\n  .disabled {\n    filter: grayscale(1);\n    opacity: 0.6;\n  }\n}\n","// ---------------------------------------------------------------------------\n// WPSE design tokens — single source of truth for the admin UI.\n// Values come from the \"Servv Admin Unified v2\" design export: a soft-UI\n// (neumorphic) system on a white canvas with a violet brand ramp.\n//\n// Usage from a component module:\n//   @use \"../../styles/tokens\" as t;\n//   .button { border-radius: t.$radius-lg; color: t.$text-strong; }\n// ---------------------------------------------------------------------------\n\n// --- Brand -----------------------------------------------------------------\n$primary: #6436c9;\n$primary-strong: #4d2aa3;\n$primary-grad-from: #7b4fdb;\n$primary-grad-to: #5730b4;\n$primary-surface: #eae2fb; // tinted chip / icon tile background\n$primary-border: #d7c8f7;\n$primary-border-strong: #c3a8f3; // focus border\n$primary-border-soft: #dfd6f3;\n$primary-ring: rgba(234, 226, 251, 0.85); // focus halo\n\n// --- Text ------------------------------------------------------------------\n$text: #151b2b; // headings, primary copy\n$text-strong: #39415a; // control labels, button faces\n$text-secondary: #414b63; // body copy\n$text-soft: #5b6680; // meta, captions\n$text-placeholder: #8e97ab;\n$text-on-primary: #ffffff;\n\n// --- Surfaces --------------------------------------------------------------\n$surface: #ffffff;\n$canvas: var(--servv-admin-canvas, #ffffff);\n$hover-surface: var(--servv-hover-surface, #fafbfd);\n$hover-border: var(--servv-hover-border, #c3a8f3);\n$surface-subtle: #fafbfd; // table row hover\n$surface-raised-tint: #fcfdfe;\n\n// --- Borders ---------------------------------------------------------------\n$border: #edf1f7; // cards, dividers\n$border-soft: #eff2f8; // secondary buttons\n$border-field: #e8edf5; // inputs, selects, textareas\n$border-hairline: rgba(21, 27, 43, 0.09); // segmented tracks, inner rules\n\n// --- Neumorphic shadow pigments -------------------------------------------\n$shade: #dce2ec; // dark side\n$shade-strong: #d4dbe8; // dark side, lifted states\n$light: #fbfcfe; // light side\n$light-alt: #fcfdfe;\n\n// --- Status ----------------------------------------------------------------\n$success: #17b26a;\n$success-strong: #079455;\n$success-surface: #ecfdf3;\n$success-border: #abefc6;\n$success-text: #067647;\n\n$warning: #f79009;\n$warning-strong: #dc6803;\n$warning-surface: #fffaeb;\n$warning-border: #fedf89;\n$warning-text: #b54708;\n\n$danger: #f04438;\n$danger-strong: #d92d20;\n$danger-grad-from: #e8554a;\n$danger-grad-to: #c12b1f;\n$danger-surface: #fef3f2;\n$danger-border: #fecdca;\n$danger-border-strong: #fda29b;\n$danger-text: #b42318;\n$danger-shade: #f1dbd9; // inset pigment on an errored field\n$danger-ring: rgba(254, 243, 242, 0.9);\n\n$info: #175cd3;\n$info-surface: #eff8ff;\n$info-border: #b2ddff;\n\n// --- WordPress admin chrome (sidebar / adminbar adjacency) -----------------\n$wp-chrome: #1d2327;\n$wp-chrome-deep: #15191c;\n$wp-chrome-line: #2c3338;\n$wp-chrome-text: #c3c4c7;\n$wp-chrome-muted: #a7aaad;\n\n// --- Typography ------------------------------------------------------------\n$font-sans: \"Plus Jakarta Sans\", system-ui, -apple-system, \"Segoe UI\", sans-serif;\n\n$text-11: 11px;\n$text-12: 12px;\n$text-13: 13px;\n$text-14: 14px;\n$text-15: 15px;\n$text-16: 16px;\n$text-18: 18px;\n$text-20: 20px;\n$text-24: 24px;\n$text-32: 32px;\n\n$leading-11: 16px;\n$leading-12: 18px;\n$leading-13: 19px;\n$leading-14: 20px;\n$leading-15: 23px;\n$leading-16: 24px;\n$leading-18: 24px;\n$leading-20: 28px;\n$leading-24: 32px;\n$leading-32: 40px;\n\n$weight-regular: 400;\n$weight-medium: 500;\n$weight-semibold: 600;\n$weight-bold: 700;\n$weight-extrabold: 800;\n\n$tracking-tight: -0.03em;\n$tracking-wide: 0.08em;\n$tracking-wider: 0.1em;\n\n// --- Spacing ---------------------------------------------------------------\n$space-1: 2px;\n$space-2: 4px;\n$space-3: 6px;\n$space-4: 8px;\n$space-5: 10px;\n$space-6: 12px;\n$space-7: 14px;\n$space-8: 16px;\n$space-9: 18px;\n$space-10: 20px;\n$space-12: 24px;\n$space-14: 28px;\n$space-16: 32px;\n\n// --- Radii -----------------------------------------------------------------\n$radius-sm: 7px;\n$radius-md: 9px;\n$radius-lg: 12px; // buttons, fields\n$radius-xl: 14px;\n$radius-2xl: 18px; // cards, modals\n$radius-pill: 99px;\n\n// --- Control heights -------------------------------------------------------\n$control-xs: 28px;\n$control-sm: 34px;\n$control-md: 38px;\n$control-lg: 40px;\n$control-xl: 46px;\n\n// --- Segmented control geometry --------------------------------------------\n// A segmented track is a box around chips, so its numbers are derived, not\n// picked: the radius has to clear the inner chip by the gutter (outer = inner\n// + padding) or the chip's corner pokes through, and the chip's height has to\n// leave room for the gutter and the 1px border so the whole track ends up the\n// same $control-lg as the buttons beside it in a toolbar.\n$segment-gutter: 3px; // track padding\n$radius-segment: 10px; // the chip itself\n$radius-segment-track: $radius-segment + $segment-gutter; // 13px\n$control-segment: $control-lg - 2 * $segment-gutter - 2px; // 32px\n\n// --- Elevation (soft-UI pairs) --------------------------------------------\n$shadow-raised-sm: 3px 3px 7px $shade, -2px -2px 5px $light;\n$shadow-raised-chip: 4px 4px 9px $shade, -2px -2px 6px $light; // chips, tabs\n$shadow-chip-pressed: inset 4px 4px 9px $primary-border-soft,\n  inset -2px -2px 6px $light; // a selected (pressed) brand chip\n$shadow-raised: 5px 5px 12px $shade, -2px -2px 8px $light;\n$shadow-raised-hover: 7px 7px 16px $shade, -3px -3px 10px $light;\n$shadow-raised-active: 4px 4px 10px $shade, -2px -2px 7px $light;\n// A filled button sits at exactly the same elevation as a raised white one —\n// only the inner gloss tells them apart — so a toolbar of mixed controls reads\n// as one row. Derived from the raised pair so the two can never drift.\n$shadow-brand: $shadow-raised, inset 0 1px 0 rgba(255, 255, 255, 0.2);\n$shadow-brand-hover: $shadow-raised-hover,\n  inset 0 1px 0 rgba(255, 255, 255, 0.24);\n$shadow-danger: $shadow-raised, inset 0 1px 0 rgba(255, 255, 255, 0.18);\n$shadow-card: 9px 9px 22px $shade, -4px -4px 12px $light;\n$shadow-card-hover: 14px 14px 30px $shade-strong, -6px -6px 16px $light;\n$shadow-modal: 18px 18px 44px $shade-strong, -6px -6px 18px rgba($light, 0.25);\n$shadow-field: inset 4px 4px 9px $shade, inset -2px -2px 6px $light;\n$shadow-field-focus: inset 4px 4px 10px $shade, inset -2px -2px 7px $light;\n$shadow-well: inset 6px 6px 14px $shade, inset -3px -3px 9px $light;\n$shadow-track: inset 2px 2px 4px $shade, inset -1px -1px 3px $light-alt;\n$shadow-popover: 0 12px 32px rgba(16, 24, 40, 0.14);\n$shadow-row-hover: inset 0 0 0 1px $border;\n\n// --- Motion ----------------------------------------------------------------\n$ease: cubic-bezier(0.22, 1, 0.36, 1);\n$ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n$duration-fast: 0.18s;\n$duration: 0.22s;\n$duration-slow: 0.42s;\n\n// --- Layers ----------------------------------------------------------------\n// The admin chrome WordPress paints around us: #adminmenuback 9990,\n// #adminmenuwrap 9999, the collapse button 10000, #wpadminbar 99999.\n// An overlay has to clear the menu while staying under the admin bar.\n$z-sticky: 20;\n$z-dropdown: 40;\n$z-overlay: 10001;\n","@use \"../../styles/tokens\" as t;\n@use \"../../styles/mixins\" as m;\n\n@include m.scoped {\n  .stack {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    min-width: 0;\n  }\n\n  .gap0 {\n    gap: 0;\n  }\n\n  .gap1 {\n    gap: t.$space-2;\n  }\n\n  .gap2 {\n    gap: t.$space-4;\n  }\n\n  .gap3 {\n    gap: t.$space-6;\n  }\n\n  .gap4 {\n    gap: t.$space-8;\n  }\n\n  .gap5 {\n    gap: t.$space-10;\n  }\n\n  .gap6 {\n    gap: t.$space-12;\n  }\n\n  .gap8 {\n    gap: t.$space-16;\n  }\n\n  // --- Alignment ---------------------------------------------------------\n\n  .left {\n    width: 100%;\n    flex-grow: 1;\n    justify-content: flex-start;\n  }\n\n  .right {\n    justify-content: flex-end;\n  }\n\n  .center {\n    justify-content: center;\n  }\n\n  .between {\n    width: 100%;\n    justify-content: space-between;\n  }\n\n  // --- Modifiers ---------------------------------------------------------\n\n  .cards {\n    flex: 1 1 0;\n    align-items: baseline;\n  }\n\n  .wrap {\n    flex-wrap: wrap;\n  }\n\n  // The reference wraps action rows rather than letting them overflow.\n  @media (max-width: 735px) {\n    .stack {\n      flex-wrap: wrap;\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}