/* input(5513,15): run-time error CSS1019: Unexpected token, found 'selector(' input(5513,41): run-time error CSS1025: Expected comma or open brace, found ')' */ @charset "UTF-8"; :root { color-scheme: light dark; --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --page-bg: #faf6ef; --surface-bg: #fff; --surface-raised: rgb(253.25, 251.85, 249.4); --canvas-worktop: #b8bec3; --canvas-worktop-edge: rgba(35, 61, 77, 0.18); --canvas-control-bg: #f4f7f9; --canvas-control-fg: #233d4d; --canvas-control-border: rgba(35, 61, 77, 0.35); --canvas-ink: #1d2b36; --canvas-ink-muted: #465661; --canvas-ink-danger: #8d3b3b; --markup-1: #e5383b; --markup-2: #ffd60a; --chrome-bg: #233d4d; --chrome-submenu-bg: rgb(54.125, 94.3321428571, 119.075); --chrome-fg: #fbeee2; --chrome-fg-muted: #dbe6ec; --chrome-a-fg: #fff; --chrome-hover-wash: rgba(255, 255, 255, 0.1); --chrome-field-bg: rgba(255, 255, 255, 0.92); --chrome-field-focus-bg: #fff; --chrome-field-fg: #233d4d; --chrome-field-placeholder: rgba(35, 61, 77, 0.5); --text-fg: #444; --ink: #233d4d; --accent-pill-fg: #141b21; --type-recipe-accent: #fcca46; --type-ingredient-accent: #a1c181; --type-equipment-accent: #619b8a; --type-user-accent: #9b7fa6; --current-plan-accent: #619b8a; --current-plan-glow: rgba(97, 155, 138, 0.18); --current-plan-wash: rgba(97, 155, 138, 0.12); --current-plan-wash-strong: rgba(97, 155, 138, 0.22); --text-muted: #526675; --text-faint: #8092a0; --text-disabled: #a3aeb6; --link-fg: #233d4d; --link-hover-fg: rgb(66.875, 116.5535714286, 147.125); --accent: #fe7f2d; --accent-fg: #233d4d; --hairline: rgba(35, 61, 77, 0.12); --hairline-soft: rgba(35, 61, 77, 0.08); --hairline-faint: rgba(35, 61, 77, 0.06); --wash-faint: rgba(35, 61, 77, 0.03); --wash-soft: rgba(35, 61, 77, 0.04); --wash: rgba(35, 61, 77, 0.05); --wash-mid: rgba(35, 61, 77, 0.06); --wash-strong: rgba(35, 61, 77, 0.08); --field-bg: #faf6ef; --field-fg: #233d4d; --field-border: rgba(35, 61, 77, 0.16); --field-border-hover: rgba(35, 61, 77, 0.3); --field-focus-bg: #fff; --field-disabled-bg: rgba(35, 61, 77, 0.05); --field-disabled-fg: #a3aeb6; --field-disabled-border: rgba(35, 61, 77, 0.1); --danger-fg: #b3261e; --ok-fg: #1b6b43; --warn-fg: #8a5a00; --danger-contrast-fg: #fff; --err-field-bg: #ffa8a8; --err-input-bg: #ffc9c9; --err-input-fg: #444; --err-input-border: #ff7070; --err-message-bg: #ffa8a8; --err-message-fg: #444; --pending-tag-bg: rgba(252, 202, 70, 0.3); --pending-tag-fg: #7a5300; --pending-tag-border: rgba(252, 202, 70, 0.75); --shadow-dropdown: 0 6px 24px rgba(0, 0, 0, 0.2); --shadow-toggle-active: 0 1px 3px rgba(35, 61, 77, 0.25); --backdrop: rgba(10, 17, 22, 0.55); --material-copper: #b87333; --material-stainless: #c8ccd0; --material-glass: #cfe3e8; --material-silicone: #e6e2dc; --material-plastic: #dfe3e6; --pill-active-bg: var(--selected-bg); --pill-active-fg: var(--selected-fg); --accent-hover: rgb(253.8549763033, 108.4369668246, 14.5450236967); --accent-active: rgb(246.8246445498, 97.5545023697, 1.1753554502); --accent-ink: rgb(25.4375, 44.3339285714, 55.9625); --accent-disabled: rgba(254, 127, 45, 0.35); --toolbar-btn-bg: rgba(97, 155, 138, 0.1); --toolbar-btn-fg: rgb(65.5904761905, 104.8095238095, 93.3142857143); --toolbar-btn-border: #619b8a; --toolbar-btn-hover-bg: rgb(65.5904761905, 104.8095238095, 93.3142857143); --toolbar-btn-hover-fg: #fff; --selected-bg: #233d4d; --selected-fg: #fff; --selected-border: #233d4d; --danger-btn-bg: var(--surface-bg); --danger-btn-fg: var(--danger-fg); --danger-btn-border: rgba(179, 38, 30, 0.4); --danger-btn-hover-bg: var(--danger-fg); --danger-btn-hover-fg: var(--danger-contrast-fg); --danger-btn-ring: rgba(179, 38, 30, 0.3); --focus-ring: rgb(65.5904761905, 104.8095238095, 93.3142857143); --notice-bg: #fcca46; --notice-fg: #233d4d; --star-fill: #fcca46; --progress-current: #619b8a; --progress-done: #a1c181; --progress-in-progress: #fcca46; --progress-done-ink: rgb(122.75, 164.5372340426, 80.9627659574); --chrome-navy-bg: #233d4d; --chrome-navy-fg: #fff; --chrome-navy-fg-muted: rgba(255, 255, 255, 0.82); --chrome-accent: #fcca46; --chrome-accent-fg: #233d4d; --chrome-accent-border: rgba(252, 202, 70, 0.55); --lineage-1: #233d4d; --lineage-2: #fcca46; --lineage-3: #a1c181; --lineage-4: #8e6fce; --lineage-5: #d1638a; --lineage-6: #4a90c4; --changed-wash: rgba(97, 155, 138, 0.22); --changed-wash-hover: rgba(97, 155, 138, 0.3); --type-pill-bg: rgba(97, 155, 138, 0.25); --ok-wash: rgba(161, 193, 129, 0.2); --danger-wash: rgba(179, 38, 30, 0.12); --shadow-modal: 0 20px 50px rgba(10, 17, 22, 0.35); --shadow-drawer: -20px 0 50px rgba(10, 17, 22, 0.25); --shadow-popover: 0 12px 28px rgba(10, 17, 22, 0.18); --shadow-menu: 0 6px 18px rgba(0, 0, 0, 0.12); --shadow-alert: 0 0 50px rgba(0, 0, 0, 0.5); --shadow-dropdown-wide: 0px 0px 40px -5px rgba(0, 0, 0, 0.75); --shadow-sidebar-inset: inset 10px 0 12px -10px rgba(10, 17, 22, 0.3); --scrim-nav: rgba(10, 17, 22, 0.45); --button-border: rgba(27, 31, 35, 0.15); --button-border-hover: rgba(27, 31, 35, 0.1); --shadow-button: rgba(27, 31, 35, 0.1) 0 1px 0; --shadow-button-inset: rgba(35, 61, 77, 0.2) 0 1px 0 inset; --chart-1: rgb(253.8066350711, 102.2492890995, 4.3933649289); --chart-2: rgb(73.4428571429, 117.3571428571, 104.4857142857); --chart-3: rgb(156.2659574468, 114.0319148936, 2.5340425532); --chart-4: rgb(97.25, 130.3563829787, 64.1436170213); --chart-5: #233d4d; --tasting-colour-1: rgb(77.369047619, 123.630952381, 110.0714285714); --tasting-colour-2: rgb(77.369047619, 114.0595238095, 123.630952381); --tasting-colour-3: rgb(77.369047619, 90.9285714286, 123.630952381); --tasting-colour-4: rgb(86.9404761905, 77.369047619, 123.630952381); --tasting-colour-5: rgb(110.0714285714, 77.369047619, 123.630952381); --tasting-colour-6: rgb(123.630952381, 77.369047619, 114.0595238095); --tasting-colour-7: rgb(123.630952381, 77.369047619, 90.9285714286); --tasting-colour-8: rgb(123.630952381, 86.9404761905, 77.369047619); --tasting-colour-9: rgb(123.630952381, 110.0714285714, 77.369047619); --tasting-colour-10: rgb(114.0595238095, 123.630952381, 77.369047619); --tasting-colour-11: rgb(90.9285714286, 123.630952381, 77.369047619); --tasting-colour-12: rgb(77.369047619, 123.630952381, 86.9404761905); --tasting-share-1: var(--danger-fg); --tasting-share-2: color-mix(in srgb, var(--danger-fg), var(--warn-fg)); --tasting-share-3: var(--warn-fg); --tasting-share-4: color-mix(in srgb, var(--warn-fg), var(--ok-fg)); --tasting-share-5: var(--ok-fg); --tasting-share-none: var(--text-muted); } @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --page-bg: #141b21; --surface-bg: #1c262e; --surface-raised: #222e37; --surface-nested: #222e37; --canvas-worktop: #2b353e; --canvas-worktop-edge: rgba(255, 255, 255, 0.16); --canvas-control-bg: #f4f7f9; --canvas-control-fg: #233d4d; --canvas-control-border: rgba(35, 61, 77, 0.35); --canvas-ink: #eef3f6; --canvas-ink-muted: #9fb0bd; --canvas-ink-danger: #ff6b6b; --chrome-bg: #1a2632; --chrome-submenu-bg: #22303d; --chrome-fg: #eef3f6; --chrome-fg-muted: #b9c7d1; --chrome-a-fg: #fff; --chrome-hover-wash: rgba(255, 255, 255, 0.12); --chrome-field-bg: rgba(255, 255, 255, 0.1); --chrome-field-focus-bg: rgba(255, 255, 255, 0.16); --chrome-field-fg: #eef3f6; --chrome-field-placeholder: rgba(238, 243, 246, 0.55); --text-fg: #d6dee4; --ink: #e6edf2; --text-muted: #9fb0bd; --text-faint: #7d8fa0; --text-disabled: #5d6b77; --link-fg: #9dc7e0; --link-hover-fg: #c6dfee; --accent: #fe7f2d; --accent-fg: #1d2a33; --hairline: rgba(255, 255, 255, 0.14); --hairline-soft: rgba(255, 255, 255, 0.1); --hairline-faint: rgba(255, 255, 255, 0.08); --wash-faint: rgba(255, 255, 255, 0.03); --wash-soft: rgba(255, 255, 255, 0.05); --wash: rgba(255, 255, 255, 0.06); --wash-mid: rgba(255, 255, 255, 0.08); --wash-strong: rgba(255, 255, 255, 0.11); --field-bg: #16202a; --field-fg: #e6edf2; --field-border: rgba(255, 255, 255, 0.18); --field-border-hover: rgba(255, 255, 255, 0.32); --field-focus-bg: #1b2630; --field-disabled-bg: rgba(255, 255, 255, 0.05); --field-disabled-fg: #6c7a86; --field-disabled-border: rgba(255, 255, 255, 0.1); --danger-fg: #f08b83; --ok-fg: #57c08a; --warn-fg: #e0a94a; --danger-contrast-fg: #233d4d; --err-field-bg: rgba(240, 139, 131, 0.1); --err-input-bg: rgba(240, 139, 131, 0.16); --err-input-fg: #f6dedc; --err-input-border: rgba(240, 139, 131, 0.65); --err-message-bg: transparent; --err-message-fg: #f08b83; --pending-tag-bg: rgba(252, 202, 70, 0.16); --pending-tag-fg: #f4cf72; --pending-tag-border: rgba(252, 202, 70, 0.42); --shadow-dropdown: 0 6px 24px rgba(0, 0, 0, 0.55); --shadow-toggle-active: 0 1px 3px rgba(0, 0, 0, 0.5); --backdrop: rgba(0, 0, 0, 0.65); --chart-1: #fe7f2d; --chart-2: rgb(133.9523809524, 179.2476190476, 165.9714285714); --chart-3: #fcca46; --chart-4: #a1c181; --chart-5: #d6dee4; --tasting-colour-1: rgb(121.4047619048, 171.3952380952, 156.7428571429); --tasting-colour-2: rgb(121.4047619048, 161.0523809524, 171.3952380952); --tasting-colour-3: rgb(121.4047619048, 136.0571428571, 171.3952380952); --tasting-colour-4: rgb(131.7476190476, 121.4047619048, 171.3952380952); --tasting-colour-5: rgb(156.7428571429, 121.4047619048, 171.3952380952); --tasting-colour-6: rgb(171.3952380952, 121.4047619048, 161.0523809524); --tasting-colour-7: rgb(171.3952380952, 121.4047619048, 136.0571428571); --tasting-colour-8: rgb(171.3952380952, 131.7476190476, 121.4047619048); --tasting-colour-9: rgb(171.3952380952, 156.7428571429, 121.4047619048); --tasting-colour-10: rgb(161.0523809524, 171.3952380952, 121.4047619048); --tasting-colour-11: rgb(136.0571428571, 171.3952380952, 121.4047619048); --tasting-colour-12: rgb(121.4047619048, 171.3952380952, 131.7476190476); --tasting-share-1: var(--danger-fg); --tasting-share-2: color-mix(in srgb, var(--danger-fg), var(--warn-fg)); --tasting-share-3: var(--warn-fg); --tasting-share-4: color-mix(in srgb, var(--warn-fg), var(--ok-fg)); --tasting-share-5: var(--ok-fg); --tasting-share-none: var(--text-muted); --toolbar-btn-bg: rgba(97, 155, 138, 0.1); --toolbar-btn-fg: rgb(133.9523809524, 179.2476190476, 165.9714285714); --toolbar-btn-border: rgb(108.8571428571, 163.5428571429, 147.5142857143); --toolbar-btn-hover-bg: rgb(133.9523809524, 179.2476190476, 165.9714285714); --toolbar-btn-hover-fg: #141b21; --selected-bg: #8fb4cc; --selected-fg: #141b21; --selected-border: #8fb4cc; --danger-btn-border: rgba(240, 139, 131, 0.5); --danger-btn-ring: rgba(240, 139, 131, 0.3); --focus-ring: rgb(133.9523809524, 179.2476190476, 165.9714285714); --progress-current: #619b8a; --progress-done: #a1c181; --progress-in-progress: #fcca46; --progress-done-ink: rgb(122.75, 164.5372340426, 80.9627659574); --lineage-1: #8fb4cc; --ok-wash: rgba(87, 192, 131, 0.16); --danger-wash: rgba(240, 139, 131, 0.16); --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.7); --shadow-drawer: -20px 0 50px rgba(0, 0, 0, 0.6); --shadow-popover: 0 12px 28px rgba(0, 0, 0, 0.6); --shadow-menu: 0 6px 18px rgba(0, 0, 0, 0.5); --shadow-alert: 0 0 50px rgba(0, 0, 0, 0.8); --shadow-dropdown-wide: 0px 0px 40px -5px rgba(0, 0, 0, 0.9); --shadow-sidebar-inset: inset 10px 0 12px -10px rgba(0, 0, 0, 0.6); --scrim-nav: rgba(0, 0, 0, 0.6); --button-border: rgba(255, 255, 255, 0.18); --button-border-hover: rgba(255, 255, 255, 0.28); --shadow-button: rgba(0, 0, 0, 0.4) 0 1px 0; --shadow-button-inset: rgba(0, 0, 0, 0.5) 0 1px 0 inset; } } :root.theme-dark { color-scheme: dark; --page-bg: #141b21; --surface-bg: #1c262e; --surface-raised: #222e37; --surface-nested: #222e37; --canvas-worktop: #2b353e; --canvas-worktop-edge: rgba(255, 255, 255, 0.16); --canvas-control-bg: #f4f7f9; --canvas-control-fg: #233d4d; --canvas-control-border: rgba(35, 61, 77, 0.35); --canvas-ink: #eef3f6; --canvas-ink-muted: #9fb0bd; --canvas-ink-danger: #ff6b6b; --chrome-bg: #1a2632; --chrome-submenu-bg: #22303d; --chrome-fg: #eef3f6; --chrome-fg-muted: #b9c7d1; --chrome-a-fg: #fff; --chrome-hover-wash: rgba(255, 255, 255, 0.12); --chrome-field-bg: rgba(255, 255, 255, 0.1); --chrome-field-focus-bg: rgba(255, 255, 255, 0.16); --chrome-field-fg: #eef3f6; --chrome-field-placeholder: rgba(238, 243, 246, 0.55); --text-fg: #d6dee4; --ink: #e6edf2; --text-muted: #9fb0bd; --text-faint: #7d8fa0; --text-disabled: #5d6b77; --link-fg: #9dc7e0; --link-hover-fg: #c6dfee; --accent: #fe7f2d; --accent-fg: #1d2a33; --hairline: rgba(255, 255, 255, 0.14); --hairline-soft: rgba(255, 255, 255, 0.1); --hairline-faint: rgba(255, 255, 255, 0.08); --wash-faint: rgba(255, 255, 255, 0.03); --wash-soft: rgba(255, 255, 255, 0.05); --wash: rgba(255, 255, 255, 0.06); --wash-mid: rgba(255, 255, 255, 0.08); --wash-strong: rgba(255, 255, 255, 0.11); --field-bg: #16202a; --field-fg: #e6edf2; --field-border: rgba(255, 255, 255, 0.18); --field-border-hover: rgba(255, 255, 255, 0.32); --field-focus-bg: #1b2630; --field-disabled-bg: rgba(255, 255, 255, 0.05); --field-disabled-fg: #6c7a86; --field-disabled-border: rgba(255, 255, 255, 0.1); --danger-fg: #f08b83; --ok-fg: #57c08a; --warn-fg: #e0a94a; --danger-contrast-fg: #233d4d; --err-field-bg: rgba(240, 139, 131, 0.1); --err-input-bg: rgba(240, 139, 131, 0.16); --err-input-fg: #f6dedc; --err-input-border: rgba(240, 139, 131, 0.65); --err-message-bg: transparent; --err-message-fg: #f08b83; --pending-tag-bg: rgba(252, 202, 70, 0.16); --pending-tag-fg: #f4cf72; --pending-tag-border: rgba(252, 202, 70, 0.42); --shadow-dropdown: 0 6px 24px rgba(0, 0, 0, 0.55); --shadow-toggle-active: 0 1px 3px rgba(0, 0, 0, 0.5); --backdrop: rgba(0, 0, 0, 0.65); --chart-1: #fe7f2d; --chart-2: rgb(133.9523809524, 179.2476190476, 165.9714285714); --chart-3: #fcca46; --chart-4: #a1c181; --chart-5: #d6dee4; --tasting-colour-1: rgb(121.4047619048, 171.3952380952, 156.7428571429); --tasting-colour-2: rgb(121.4047619048, 161.0523809524, 171.3952380952); --tasting-colour-3: rgb(121.4047619048, 136.0571428571, 171.3952380952); --tasting-colour-4: rgb(131.7476190476, 121.4047619048, 171.3952380952); --tasting-colour-5: rgb(156.7428571429, 121.4047619048, 171.3952380952); --tasting-colour-6: rgb(171.3952380952, 121.4047619048, 161.0523809524); --tasting-colour-7: rgb(171.3952380952, 121.4047619048, 136.0571428571); --tasting-colour-8: rgb(171.3952380952, 131.7476190476, 121.4047619048); --tasting-colour-9: rgb(171.3952380952, 156.7428571429, 121.4047619048); --tasting-colour-10: rgb(161.0523809524, 171.3952380952, 121.4047619048); --tasting-colour-11: rgb(136.0571428571, 171.3952380952, 121.4047619048); --tasting-colour-12: rgb(121.4047619048, 171.3952380952, 131.7476190476); --tasting-share-1: var(--danger-fg); --tasting-share-2: color-mix(in srgb, var(--danger-fg), var(--warn-fg)); --tasting-share-3: var(--warn-fg); --tasting-share-4: color-mix(in srgb, var(--warn-fg), var(--ok-fg)); --tasting-share-5: var(--ok-fg); --tasting-share-none: var(--text-muted); --toolbar-btn-bg: rgba(97, 155, 138, 0.1); --toolbar-btn-fg: rgb(133.9523809524, 179.2476190476, 165.9714285714); --toolbar-btn-border: rgb(108.8571428571, 163.5428571429, 147.5142857143); --toolbar-btn-hover-bg: rgb(133.9523809524, 179.2476190476, 165.9714285714); --toolbar-btn-hover-fg: #141b21; --selected-bg: #8fb4cc; --selected-fg: #141b21; --selected-border: #8fb4cc; --danger-btn-border: rgba(240, 139, 131, 0.5); --danger-btn-ring: rgba(240, 139, 131, 0.3); --focus-ring: rgb(133.9523809524, 179.2476190476, 165.9714285714); --progress-current: #619b8a; --progress-done: #a1c181; --progress-in-progress: #fcca46; --progress-done-ink: rgb(122.75, 164.5372340426, 80.9627659574); --lineage-1: #8fb4cc; --ok-wash: rgba(87, 192, 131, 0.16); --danger-wash: rgba(240, 139, 131, 0.16); --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.7); --shadow-drawer: -20px 0 50px rgba(0, 0, 0, 0.6); --shadow-popover: 0 12px 28px rgba(0, 0, 0, 0.6); --shadow-menu: 0 6px 18px rgba(0, 0, 0, 0.5); --shadow-alert: 0 0 50px rgba(0, 0, 0, 0.8); --shadow-dropdown-wide: 0px 0px 40px -5px rgba(0, 0, 0, 0.9); --shadow-sidebar-inset: inset 10px 0 12px -10px rgba(0, 0, 0, 0.6); --scrim-nav: rgba(0, 0, 0, 0.6); --button-border: rgba(255, 255, 255, 0.18); --button-border-hover: rgba(255, 255, 255, 0.28); --shadow-button: rgba(0, 0, 0, 0.4) 0 1px 0; --shadow-button-inset: rgba(0, 0, 0, 0.5) 0 1px 0 inset; } :root.theme-light { color-scheme: light; --page-bg: #faf6ef; --surface-bg: #fff; --surface-raised: rgb(253.25, 251.85, 249.4); --canvas-worktop: #b8bec3; --canvas-worktop-edge: rgba(35, 61, 77, 0.18); --canvas-control-bg: #f4f7f9; --canvas-control-fg: #233d4d; --canvas-control-border: rgba(35, 61, 77, 0.35); --canvas-ink: #1d2b36; --canvas-ink-muted: #465661; --canvas-ink-danger: #8d3b3b; --chrome-bg: #233d4d; --chrome-submenu-bg: rgb(54.125, 94.3321428571, 119.075); --chrome-fg: #fbeee2; --chrome-fg-muted: #dbe6ec; --chrome-a-fg: #fff; --chrome-hover-wash: rgba(255, 255, 255, 0.1); --chrome-field-bg: rgba(255, 255, 255, 0.92); --chrome-field-focus-bg: #fff; --chrome-field-fg: #233d4d; --chrome-field-placeholder: rgba(35, 61, 77, 0.5); --text-fg: #444; --ink: #233d4d; --text-muted: #526675; --text-faint: #8092a0; --text-disabled: #a3aeb6; --link-fg: #233d4d; --link-hover-fg: rgb(66.875, 116.5535714286, 147.125); --accent: #fe7f2d; --accent-fg: #233d4d; --hairline: rgba(35, 61, 77, 0.12); --hairline-soft: rgba(35, 61, 77, 0.08); --hairline-faint: rgba(35, 61, 77, 0.06); --wash-faint: rgba(35, 61, 77, 0.03); --wash-soft: rgba(35, 61, 77, 0.04); --wash: rgba(35, 61, 77, 0.05); --wash-mid: rgba(35, 61, 77, 0.06); --wash-strong: rgba(35, 61, 77, 0.08); --field-bg: #faf6ef; --field-fg: #233d4d; --field-border: rgba(35, 61, 77, 0.16); --field-border-hover: rgba(35, 61, 77, 0.3); --field-focus-bg: #fff; --field-disabled-bg: rgba(35, 61, 77, 0.05); --field-disabled-fg: #a3aeb6; --field-disabled-border: rgba(35, 61, 77, 0.1); --danger-fg: #b3261e; --ok-fg: #1b6b43; --warn-fg: #8a5a00; --danger-contrast-fg: #fff; --err-field-bg: #ffa8a8; --err-input-bg: #ffc9c9; --err-input-fg: #444; --err-input-border: #ff7070; --err-message-bg: #ffa8a8; --err-message-fg: #444; --pending-tag-bg: rgba(252, 202, 70, 0.3); --pending-tag-fg: #7a5300; --pending-tag-border: rgba(252, 202, 70, 0.75); --shadow-dropdown: 0 6px 24px rgba(0, 0, 0, 0.2); --shadow-toggle-active: 0 1px 3px rgba(35, 61, 77, 0.25); --backdrop: rgba(10, 17, 22, 0.55); --chart-1: rgb(253.8066350711, 102.2492890995, 4.3933649289); --chart-2: rgb(73.4428571429, 117.3571428571, 104.4857142857); --chart-3: rgb(156.2659574468, 114.0319148936, 2.5340425532); --chart-4: rgb(97.25, 130.3563829787, 64.1436170213); --chart-5: #233d4d; --tasting-colour-1: rgb(77.369047619, 123.630952381, 110.0714285714); --tasting-colour-2: rgb(77.369047619, 114.0595238095, 123.630952381); --tasting-colour-3: rgb(77.369047619, 90.9285714286, 123.630952381); --tasting-colour-4: rgb(86.9404761905, 77.369047619, 123.630952381); --tasting-colour-5: rgb(110.0714285714, 77.369047619, 123.630952381); --tasting-colour-6: rgb(123.630952381, 77.369047619, 114.0595238095); --tasting-colour-7: rgb(123.630952381, 77.369047619, 90.9285714286); --tasting-colour-8: rgb(123.630952381, 86.9404761905, 77.369047619); --tasting-colour-9: rgb(123.630952381, 110.0714285714, 77.369047619); --tasting-colour-10: rgb(114.0595238095, 123.630952381, 77.369047619); --tasting-colour-11: rgb(90.9285714286, 123.630952381, 77.369047619); --tasting-colour-12: rgb(77.369047619, 123.630952381, 86.9404761905); --tasting-share-1: var(--danger-fg); --tasting-share-2: color-mix(in srgb, var(--danger-fg), var(--warn-fg)); --tasting-share-3: var(--warn-fg); --tasting-share-4: color-mix(in srgb, var(--warn-fg), var(--ok-fg)); --tasting-share-5: var(--ok-fg); --tasting-share-none: var(--text-muted); --accent-hover: rgb(253.8549763033, 108.4369668246, 14.5450236967); --accent-active: rgb(246.8246445498, 97.5545023697, 1.1753554502); --accent-ink: rgb(25.4375, 44.3339285714, 55.9625); --accent-disabled: rgba(254, 127, 45, 0.35); --toolbar-btn-bg: rgba(97, 155, 138, 0.1); --toolbar-btn-fg: rgb(65.5904761905, 104.8095238095, 93.3142857143); --toolbar-btn-border: #619b8a; --toolbar-btn-hover-bg: rgb(65.5904761905, 104.8095238095, 93.3142857143); --toolbar-btn-hover-fg: #fff; --selected-bg: #233d4d; --selected-fg: #fff; --selected-border: #233d4d; --danger-btn-bg: var(--surface-bg); --danger-btn-fg: var(--danger-fg); --danger-btn-border: rgba(179, 38, 30, 0.4); --danger-btn-hover-bg: var(--danger-fg); --danger-btn-hover-fg: var(--danger-contrast-fg); --danger-btn-ring: rgba(179, 38, 30, 0.3); --focus-ring: rgb(65.5904761905, 104.8095238095, 93.3142857143); --notice-bg: #fcca46; --notice-fg: #233d4d; --star-fill: #fcca46; --progress-current: #619b8a; --progress-done: #a1c181; --progress-in-progress: #fcca46; --progress-done-ink: rgb(122.75, 164.5372340426, 80.9627659574); --chrome-navy-bg: #233d4d; --chrome-navy-fg: #fff; --chrome-navy-fg-muted: rgba(255, 255, 255, 0.82); --chrome-accent: #fcca46; --chrome-accent-fg: #233d4d; --chrome-accent-border: rgba(252, 202, 70, 0.55); --lineage-1: #233d4d; --lineage-2: #fcca46; --lineage-3: #a1c181; --lineage-4: #8e6fce; --lineage-5: #d1638a; --lineage-6: #4a90c4; --changed-wash: rgba(97, 155, 138, 0.22); --changed-wash-hover: rgba(97, 155, 138, 0.3); --type-pill-bg: rgba(97, 155, 138, 0.25); --ok-wash: rgba(161, 193, 129, 0.2); --danger-wash: rgba(179, 38, 30, 0.12); --shadow-modal: 0 20px 50px rgba(10, 17, 22, 0.35); --shadow-drawer: -20px 0 50px rgba(10, 17, 22, 0.25); --shadow-popover: 0 12px 28px rgba(10, 17, 22, 0.18); --shadow-menu: 0 6px 18px rgba(0, 0, 0, 0.12); --shadow-alert: 0 0 50px rgba(0, 0, 0, 0.5); --shadow-dropdown-wide: 0px 0px 40px -5px rgba(0, 0, 0, 0.75); --shadow-sidebar-inset: inset 10px 0 12px -10px rgba(10, 17, 22, 0.3); --scrim-nav: rgba(10, 17, 22, 0.45); --button-border: rgba(27, 31, 35, 0.15); --button-border-hover: rgba(27, 31, 35, 0.1); --shadow-button: rgba(27, 31, 35, 0.1) 0 1px 0; --shadow-button-inset: rgba(35, 61, 77, 0.2) 0 1px 0 inset; } @media print { :root, :root:not(.theme-light), :root.theme-dark, :root.theme-light { color-scheme: light; --page-bg: #fff; --surface-bg: #fff; --surface-raised: #fff; --chrome-bg: #fff; --chrome-submenu-bg: #fff; --chrome-fg: #000; --chrome-fg-muted: #333; --chrome-a-fg: #000; --chrome-hover-wash: transparent; --chrome-field-bg: #fff; --chrome-field-focus-bg: #fff; --chrome-field-fg: #000; --chrome-field-placeholder: #666; --text-fg: #000; --ink: #000; --text-muted: #333; --text-faint: #555; --text-disabled: #777; --link-fg: #000; --link-hover-fg: #000; --accent: #fe7f2d; --accent-fg: #000; --hairline: rgba(0, 0, 0, 0.3); --hairline-soft: rgba(0, 0, 0, 0.2); --hairline-faint: rgba(0, 0, 0, 0.15); --wash-faint: transparent; --wash-soft: transparent; --wash: transparent; --wash-mid: transparent; --wash-strong: rgba(0, 0, 0, 0.06); --field-bg: #fff; --field-fg: #000; --field-border: rgba(0, 0, 0, 0.4); --field-border-hover: rgba(0, 0, 0, 0.4); --field-focus-bg: #fff; --field-disabled-bg: #f2f2f2; --field-disabled-fg: #666; --field-disabled-border: rgba(0, 0, 0, 0.2); --danger-fg: #000; --shadow-dropdown: none; --shadow-toggle-active: none; --toolbar-btn-bg: transparent; --toolbar-btn-fg: #000; --toolbar-btn-border: #000; --toolbar-btn-hover-bg: transparent; --toolbar-btn-hover-fg: #000; --selected-bg: #000; --selected-fg: #fff; --selected-border: #000; --danger-btn-bg: #fff; --danger-btn-fg: #000; --danger-btn-border: #000; --danger-btn-hover-bg: #fff; --danger-btn-hover-fg: #000; --danger-btn-ring: transparent; --focus-ring: #000; --progress-current: #000; --progress-done: #000; --progress-in-progress: #000; --progress-done-ink: #000; --notice-bg: #fff; --notice-fg: #000; --lineage-1: #000; --shadow-modal: none; --shadow-drawer: none; --shadow-popover: none; --shadow-menu: none; --shadow-alert: none; --shadow-dropdown-wide: none; --shadow-sidebar-inset: none; --scrim-nav: rgba(10, 17, 22, 0.45); --shadow-button: transparent 0 0 0; --shadow-button-inset: transparent 0 0 0 inset; --ok-wash: transparent; --danger-wash: transparent; --changed-wash: transparent; --changed-wash-hover: transparent; --type-pill-bg: transparent; --button-border: rgba(0, 0, 0, 0.4); --button-border-hover: rgba(0, 0, 0, 0.4); --tasting-colour-1: rgb(77.369047619, 123.630952381, 110.0714285714); --tasting-colour-2: rgb(77.369047619, 114.0595238095, 123.630952381); --tasting-colour-3: rgb(77.369047619, 90.9285714286, 123.630952381); --tasting-colour-4: rgb(86.9404761905, 77.369047619, 123.630952381); --tasting-colour-5: rgb(110.0714285714, 77.369047619, 123.630952381); --tasting-colour-6: rgb(123.630952381, 77.369047619, 114.0595238095); --tasting-colour-7: rgb(123.630952381, 77.369047619, 90.9285714286); --tasting-colour-8: rgb(123.630952381, 86.9404761905, 77.369047619); --tasting-colour-9: rgb(123.630952381, 110.0714285714, 77.369047619); --tasting-colour-10: rgb(114.0595238095, 123.630952381, 77.369047619); --tasting-colour-11: rgb(90.9285714286, 123.630952381, 77.369047619); --tasting-colour-12: rgb(77.369047619, 123.630952381, 86.9404761905); --tasting-share-1: #b3261e; --tasting-share-2: color-mix(in srgb, #b3261e, #8a5a00); --tasting-share-3: #8a5a00; --tasting-share-4: color-mix(in srgb, #8a5a00, #1b6b43); --tasting-share-5: #1b6b43; --tasting-share-none: var(--text-muted); } } /*! csstools-normalize v9.0.1 | github.com/csstools/normalize.css */ /* Document * ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { font-size: 75%; line-height: 1.4; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections * ========================================================================== */ /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0 0 0.67em; } /* Grouping content * ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * Add the correct display in IE. */ main { display: block; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * Add the correct text decoration in Edge, IE, Opera, and Safari. */ abbr[title] { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: max(10px, 80%); } /* Embedded content * ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms * ========================================================================== */ /** * Remove the margin in Safari. */ button, input, select { margin: 0; } /** * 1. Show the overflow in IE. * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. */ button { overflow: visible; /* 1 */ text-transform: none; /* 2 */ } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Show the overflow in Edge and IE. */ input { overflow: visible; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in Edge and IE. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the inheritance of text transform in Firefox. */ select { text-transform: none; } /** * 1. Remove the margin in Firefox and Safari. * 2. Remove the default vertical scrollbar in IE. */ textarea { margin: 0; /* 1 */ overflow: auto; /* 2 */ } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { outline: 1px dotted ButtonText; } /* Interactive * ========================================================================== */ /* * Add the correct display in Edge and IE. */ details { display: block; } /* * Add the correct styles in Edge, IE, and Safari. */ /* Vendor normalize, untouched on purpose - nothing in the site uses . */ dialog { background-color: white; border: solid; color: black; display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } dialog:not([open]) { display: none; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting * ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* User interaction * ========================================================================== */ /** * Add the correct display in IE 10-. */ /** * The hidden attribute always wins. The browser's own [hidden] rule is only a default, so any * author rule that sets display (.field-element and .text-display, to name two) beats it and the * element stays in view; scripts here toggle the attribute (.hidden = ...) to show and hide. * !important is what makes it win over rules of higher specificity and ones inside media queries * (.fieldset .field-element). hidden="until-found" is not used anywhere in the app. */ [hidden] { display: none !important; } .fa { font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); } .fa, .fa-classic, .fa-sharp, .fas, .fa-solid, .far, .fa-regular, .fab, .fa-brands { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; } .fas, .fa-classic, .fa-solid, .far, .fa-regular { font-family: "Font Awesome 6 Free"; } .fab, .fa-brands { font-family: "Font Awesome 6 Brands"; } .fa-1x { font-size: 1em; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-6x { font-size: 6em; } .fa-7x { font-size: 7em; } .fa-8x { font-size: 8em; } .fa-9x { font-size: 9em; } .fa-10x { font-size: 10em; } .fa-2xs { font-size: 0.625em; line-height: 0.1em; vertical-align: 0.225em; } .fa-xs { font-size: 0.75em; line-height: 0.0833333337em; vertical-align: 0.125em; } .fa-sm { font-size: 0.875em; line-height: 0.0714285718em; vertical-align: 0.0535714295em; } .fa-lg { font-size: 1.25em; line-height: 0.05em; vertical-align: -0.075em; } .fa-xl { font-size: 1.5em; line-height: 0.0416666682em; vertical-align: -0.125em; } .fa-2xl { font-size: 2em; line-height: 0.03125em; vertical-align: -0.1875em; } .fa-fw { text-align: center; width: 1.25em; } .fa-ul { list-style-type: none; margin-left: var(--fa-li-margin, 2.5em); padding-left: 0; } .fa-ul > li { position: relative; } .fa-li { left: calc(var(--fa-li-width, 2em) * -1); position: absolute; text-align: center; width: var(--fa-li-width, 2em); line-height: inherit; } .fa-border { border-color: var(--fa-border-color, #eee); border-radius: var(--fa-border-radius, 0.1em); border-style: var(--fa-border-style, solid); border-width: var(--fa-border-width, 0.08em); padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); } .fa-pull-left { float: left; margin-right: var(--fa-pull-margin, 0.3em); } .fa-pull-right { float: right; margin-left: var(--fa-pull-margin, 0.3em); } .fa-beat { animation-name: fa-beat; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, ease-in-out); } .fa-bounce { animation-name: fa-bounce; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); } .fa-fade { animation-name: fa-fade; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); } .fa-beat-fade { animation-name: fa-beat-fade; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); } .fa-flip { animation-name: fa-flip; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, ease-in-out); } .fa-shake { animation-name: fa-shake; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, linear); } .fa-spin { animation-name: fa-spin; animation-delay: var(--fa-animation-delay, 0s); animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 2s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, linear); } .fa-spin-reverse { --fa-animation-direction: reverse; } .fa-pulse, .fa-spin-pulse { animation-name: fa-spin; animation-direction: var(--fa-animation-direction, normal); animation-duration: var(--fa-animation-duration, 1s); animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-timing-function: var(--fa-animation-timing, steps(8)); } @media (prefers-reduced-motion: reduce) { .fa-beat, .fa-bounce, .fa-fade, .fa-beat-fade, .fa-flip, .fa-pulse, .fa-shake, .fa-spin, .fa-spin-pulse { animation-delay: -1ms; animation-duration: 1ms; animation-iteration-count: 1; transition-delay: 0s; transition-duration: 0s; } } @keyframes fa-beat { 0%, 90% { transform: scale(1); } 45% { transform: scale(var(--fa-beat-scale, 1.25)); } } @keyframes fa-bounce { 0% { transform: scale(1, 1) translateY(0); } 10% { transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); } 30% { transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); } 50% { transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); } 57% { transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); } 64% { transform: scale(1, 1) translateY(0); } 100% { transform: scale(1, 1) translateY(0); } } @keyframes fa-fade { 50% { opacity: var(--fa-fade-opacity, 0.4); } } @keyframes fa-beat-fade { 0%, 100% { opacity: var(--fa-beat-fade-opacity, 0.4); transform: scale(1); } 50% { opacity: 1; transform: scale(var(--fa-beat-fade-scale, 1.125)); } } @keyframes fa-flip { 50% { transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } } @keyframes fa-shake { 0% { transform: rotate(-15deg); } 4% { transform: rotate(15deg); } 8%, 24% { transform: rotate(-18deg); } 12%, 28% { transform: rotate(18deg); } 16% { transform: rotate(-22deg); } 20% { transform: rotate(22deg); } 32% { transform: rotate(-12deg); } 36% { transform: rotate(12deg); } 40%, 100% { transform: rotate(0deg); } } @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fa-rotate-90 { transform: rotate(90deg); } .fa-rotate-180 { transform: rotate(180deg); } .fa-rotate-270 { transform: rotate(270deg); } .fa-flip-horizontal { transform: scale(-1, 1); } .fa-flip-vertical { transform: scale(1, -1); } .fa-flip-both, .fa-flip-horizontal.fa-flip-vertical { transform: scale(-1, -1); } .fa-rotate-by { transform: rotate(var(--fa-rotate-angle, none)); } .fa-stack { display: inline-block; height: 2em; line-height: 2em; position: relative; vertical-align: middle; width: 2.5em; } .fa-stack-1x, .fa-stack-2x { left: 0; position: absolute; text-align: center; width: 100%; z-index: var(--fa-stack-z-index, auto); } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: var(--fa-inverse, #fff); } .sr-only, .fa-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .sr-only-focusable:not(:focus), .fa-sr-only-focusable:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /*! * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2023 Fonticons, Inc. */ :root, :host { --fa-style-family-classic: 'Font Awesome 6 Free'; --fa-font-regular: normal 400 1em/1 'Font Awesome 6 Free'; } @font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/fontawesome/fa-regular-400.woff2?v=3tHjVm2mNueh84hQ_AAp95xDuio") format("woff2"), url("../fonts/fontawesome/fa-regular-400.ttf?v=3tHjVm2mNueh84hQ_AAp95xDuio") format("truetype"); } .far, .fa-regular { font-weight: 400; } /*! * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2023 Fonticons, Inc. */ :root, :host { --fa-style-family-classic: 'Font Awesome 6 Free'; --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; } @font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: block; src: url("../fonts/fontawesome/fa-solid-900.woff2?v=3tHjVm2mNueh84hQ_AAp95xDuio") format("woff2"), url("../fonts/fontawesome/fa-solid-900.ttf?v=3tHjVm2mNueh84hQ_AAp95xDuio") format("truetype"); } .fas, .fa-solid { font-weight: 900; } :root, :host { --fa-style-family-brands: 'Font Awesome 6 Brands'; --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; } @font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/fontawesome/fa-brands-400.woff2?v=3tHjVm2mNueh84hQ_AAp95xDuio") format("woff2"), url("../fonts/fontawesome/fa-brands-400.ttf?v=3tHjVm2mNueh84hQ_AAp95xDuio") format("truetype"); } .fab, .fa-brands { font-weight: 400; } .fa-angle-left::before { content: "\f104"; } .fa-angle-right::before { content: "\f105"; } .fa-angles-left::before { content: "\f100"; } .fa-angles-right::before { content: "\f101"; } .fa-arrow-down::before { content: "\f063"; } .fa-arrow-left::before { content: "\f060"; } .fa-arrow-right::before { content: "\f061"; } .fa-arrow-right-arrow-left::before { content: "\f0ec"; } .fa-arrow-up::before { content: "\f062"; } .fa-arrow-up-from-bracket::before { content: "\e09a"; } .fa-arrows-rotate::before { content: "\f021"; } .fa-arrows-split-up-and-left::before { content: "\e4bc"; } .fa-arrows-up-down-left-right::before { content: "\f047"; } .fa-award::before { content: "\f559"; } .fa-ban::before { content: "\f05e"; } .fa-bars::before { content: "\f0c9"; } .fa-basket-shopping::before { content: "\f291"; } .fa-bell::before { content: "\f0f3"; } .fa-blender::before { content: "\f517"; } .fa-book::before { content: "\f02d"; } .fa-book-bookmark::before { content: "\e0bb"; } .fa-box::before { content: "\f466"; } .fa-box-archive::before { content: "\f187"; } .fa-boxes-stacked::before { content: "\f468"; } .fa-bug::before { content: "\f188"; } .fa-building::before { content: "\f1ad"; } .fa-calculator::before { content: "\f1ec"; } .fa-caret-right::before { content: "\f0da"; } .fa-chalkboard-user::before { content: "\f51c"; } .fa-champagne-glasses::before { content: "\f79f"; } .fa-chart-column::before { content: "\e0e3"; } .fa-chart-line::before { content: "\f201"; } .fa-check::before { content: "\f00c"; } .fa-chevron-down::before { content: "\f078"; } .fa-chevron-left::before { content: "\f053"; } .fa-chevron-right::before { content: "\f054"; } .fa-chevron-up::before { content: "\f077"; } .fa-circle-check::before { content: "\f058"; } .fa-circle-exclamation::before { content: "\f06a"; } .fa-circle-info::before { content: "\f05a"; } .fa-circle-nodes::before { content: "\e4e2"; } .fa-circle-play::before { content: "\f144"; } .fa-circle-question::before { content: "\f059"; } .fa-circle-xmark::before { content: "\f057"; } .fa-clipboard-list::before { content: "\f46d"; } .fa-clock::before { content: "\f017"; } .fa-clock-rotate-left::before { content: "\f1da"; } .fa-code-branch::before { content: "\f126"; } .fa-code-commit::before { content: "\f386"; } .fa-code-compare::before { content: "\e13a"; } .fa-code-merge::before { content: "\f387"; } .fa-comments::before { content: "\f086"; } .fa-copy::before { content: "\f0c5"; } .fa-credit-card::before { content: "\f09d"; } .fa-crosshairs::before { content: "\f05b"; } .fa-crown::before { content: "\f521"; } .fa-cube::before { content: "\f1b2"; } .fa-cubes-stacked::before { content: "\e4e6"; } .fa-database::before { content: "\f1c0"; } .fa-desktop::before { content: "\f390"; } .fa-discord:before { content: "\f392"; } .fa-display::before { content: "\e163"; } .fa-download::before { content: "\f019"; } .fa-droplet::before { content: "\f043"; } .fa-earth-americas::before { content: "\f57d"; } .fa-ellipsis::before { content: "\f141"; } .fa-envelope::before { content: "\f0e0"; } .fa-eraser::before { content: "\f12d"; } .fa-exclamation::before { content: "\!"; } .fa-expand::before { content: "\f065"; } .fa-eye::before { content: "\f06e"; } .fa-eye-slash::before { content: "\f070"; } .fa-facebook:before { content: "\f09a"; } .fa-file-import::before { content: "\f56f"; } .fa-file-invoice-dollar::before { content: "\f571"; } .fa-file-lines::before { content: "\f15c"; } .fa-filter::before { content: "\f0b0"; } .fa-flag::before { content: "\f024"; } .fa-flag-checkered::before { content: "\f11e"; } .fa-flask::before { content: "\f0c3"; } .fa-flask-vial::before { content: "\e4f3"; } .fa-folder::before { content: "\f07b"; } .fa-gears::before { content: "\f085"; } .fa-gem::before { content: "\f3a5"; } .fa-github:before { content: "\f09b"; } .fa-glass-water::before { content: "\e4f4"; } .fa-globe::before { content: "\f0ac"; } .fa-graduation-cap::before { content: "\f19d"; } .fa-grip-vertical::before { content: "\f58e"; } .fa-hand-holding-heart::before { content: "\f4be"; } .fa-hourglass-half::before { content: "\f252"; } .fa-icons::before { content: "\f86d"; } .fa-image::before { content: "\f03e"; } .fa-images::before { content: "\f302"; } .fa-inbox::before { content: "\f01c"; } .fa-instagram:before { content: "\f16d"; } .fa-jar::before { content: "\e516"; } .fa-key::before { content: "\f084"; } .fa-kitchen-set::before { content: "\e51a"; } .fa-layer-group::before { content: "\f5fd"; } .fa-link::before { content: "\f0c1"; } .fa-linkedin:before { content: "\f08c"; } .fa-list::before { content: "\f03a"; } .fa-list-ol::before { content: "\f0cb"; } .fa-list-ul::before { content: "\f0ca"; } .fa-location-dot::before { content: "\f3c5"; } .fa-lock::before { content: "\f023"; } .fa-magnifying-glass::before { content: "\f002"; } .fa-magnifying-glass-minus::before { content: "\f010"; } .fa-magnifying-glass-plus::before { content: "\f00e"; } .fa-mastodon:before { content: "\f4f6"; } .fa-medal::before { content: "\f5a2"; } .fa-microchip::before { content: "\f2db"; } .fa-minus::before { content: "\f068"; } .fa-minus-square::before { content: "\f146"; } .fa-money-bill-transfer::before { content: "\e528"; } .fa-money-check-dollar::before { content: "\f53d"; } .fa-moon::before { content: "\f186"; } .fa-newspaper::before { content: "\f1ea"; } .fa-object-group::before { content: "\f247"; } .fa-patreon:before { content: "\f3d9"; } .fa-pause::before { content: "\f04c"; } .fa-pen::before { content: "\f304"; } .fa-pen-to-square::before { content: "\f044"; } .fa-percent::before { content: "\%"; } .fa-phone::before { content: "\f095"; } .fa-pinterest:before { content: "\f0d2"; } .fa-play::before { content: "\f04b"; } .fa-plug-circle-xmark::before { content: "\e560"; } .fa-plus::before { content: "\+"; } .fa-plus-square::before { content: "\f0fe"; } .fa-print::before { content: "\f02f"; } .fa-qrcode::before { content: "\f029"; } .fa-rectangle-list::before { content: "\f022"; } .fa-reddit:before { content: "\f1a1"; } .fa-refresh::before { content: "\f021"; } .fa-repeat::before { content: "\f363"; } .fa-right-from-bracket::before { content: "\f2f5"; } .fa-right-to-bracket::before { content: "\f2f6"; } .fa-rocket::before { content: "\f135"; } .fa-rotate::before { content: "\f2f1"; } .fa-rotate-left::before { content: "\f2ea"; } .fa-rotate-right::before { content: "\f2f9"; } .fa-ruler::before { content: "\f545"; } .fa-satellite-dish::before { content: "\f7c0"; } .fa-scale-balanced::before { content: "\f24e"; } .fa-screwdriver-wrench::before { content: "\f7d9"; } .fa-share::before { content: "\f064"; } .fa-share-nodes::before { content: "\f1e0"; } .fa-shop::before { content: "\f54f"; } .fa-signature::before { content: "\f5b7"; } .fa-sitemap::before { content: "\f0e8"; } .fa-sliders::before { content: "\f1de"; } .fa-snapchat:before { content: "\f2ab"; } .fa-sort-down::before { content: "\f0dd"; } .fa-soundcloud:before { content: "\f1be"; } .fa-spinner::before { content: "\f110"; } .fa-spoon::before { content: "\f2e5"; } .fa-spotify:before { content: "\f1bc"; } .fa-square::before { content: "\f0c8"; } .fa-star::before { content: "\f005"; } .fa-star-half-stroke::before { content: "\f5c0"; } .fa-store::before { content: "\f54e"; } .fa-sun::before { content: "\f185"; } .fa-table-cells::before { content: "\f00a"; } .fa-table-columns::before { content: "\f0db"; } .fa-tag::before { content: "\f02b"; } .fa-tags::before { content: "\f02c"; } .fa-temperature-arrow-down::before { content: "\e03f"; } .fa-temperature-arrow-up::before { content: "\e040"; } .fa-temperature-half::before { content: "\f2c9"; } .fa-threads:before { content: "\e618"; } .fa-tiktok:before { content: "\e07b"; } .fa-times-circle::before { content: "\f057"; } .fa-toggle-off::before { content: "\f204"; } .fa-toggle-on::before { content: "\f205"; } .fa-toolbox::before { content: "\f552"; } .fa-tower-broadcast::before { content: "\f519"; } .fa-trash::before { content: "\f1f8"; } .fa-trash-can::before { content: "\f2ed"; } .fa-tree::before { content: "\f1bb"; } .fa-triangle-exclamation::before { content: "\f071"; } .fa-twitch:before { content: "\f1e8"; } .fa-untappd:before { content: "\f405"; } .fa-user::before { content: "\f007"; } .fa-user-check::before { content: "\f4fc"; } .fa-user-group::before { content: "\f500"; } .fa-user-lock::before { content: "\f502"; } .fa-user-plus::before { content: "\f234"; } .fa-user-tie::before { content: "\f508"; } .fa-users::before { content: "\f0c0"; } .fa-vial::before { content: "\f492"; } .fa-video::before { content: "\f03d"; } .fa-vimeo:before { content: "\f40a"; } .fa-warehouse::before { content: "\f494"; } .fa-whatsapp:before { content: "\f232"; } .fa-wheat-awn::before { content: "\e2cd"; } .fa-wine-bottle::before { content: "\f72f"; } .fa-wine-glass::before { content: "\f4e3"; } .fa-wrench::before { content: "\f0ad"; } .fa-x-twitter:before { content: "\e61b"; } .fa-xmark::before { content: "\f00d"; } .fa-youtube:before { content: "\f167"; } @font-face { font-family: "Calistoga"; src: url("/fonts/calistoga/Calistoga-Regular.ttf"); } @font-face { font-family: "Lato"; src: url("/fonts/lato/Lato-Regular.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: "Lato"; src: url("/fonts/lato/Lato-Italic.ttf"); font-weight: normal; font-style: italic; } @font-face { font-family: "Lato"; src: url("/fonts/lato/Lato-Bold.ttf"); font-weight: bold; font-style: normal; } @font-face { font-family: "Lato"; src: url("/fonts/lato/Lato-BoldItalic.ttf"); font-weight: bold; font-style: italic; } @font-face { font-family: "Lato"; src: url("/fonts/lato/Lato-Light.ttf"); font-weight: lighter; font-style: normal; } @font-face { font-family: "Lato"; src: url("/fonts/lato/Lato-Black.ttf"); font-weight: 900; font-style: normal; } @font-face { font-family: "Lato"; src: url("/fonts/lato/Lato-LightItalic.ttf"); font-weight: lighter; font-style: italic; } * { font-family: Lato, otallatin, arial, helvetica, sans-serif; } body { color: var(--text-fg); background: var(--page-bg); } a { color: var(--link-fg); border-bottom: 2px solid var(--link-fg); text-decoration: none; } a:hover { color: var(--link-hover-fg); border-bottom: 2px solid var(--link-hover-fg); } .indent { padding-left: 18px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .centered { text-align: center; } .hidden { display: none !important; } @media print { .no-print { display: none !important; } } .is-deleted { text-decoration: line-through; } .summary-info { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); font-size: max(10px, 0.75rem); color: var(--text-faint); } .summary-info div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 6px; } .summary-info span { display: inline-flex; align-items: center; gap: 6px; } .summary-info span:not(:first-child)::before { content: "·"; color: var(--text-faint); } .summary-info a { color: var(--text-muted); font-weight: 700; text-decoration: none; } .summary-info a:hover { color: var(--link-hover-fg); } .text-muted-note { color: var(--text-muted); } .trace-id-link { cursor: pointer; text-decoration: underline; } .removal-notice { color: var(--text-muted); font-size: max(10px, 0.85rem); margin-left: 0.5rem; } .link-gap-note { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.75rem; font-size: max(10px, 0.75rem); line-height: 1.4; color: var(--warn-fg); } .link-gap-note a { color: var(--warn-fg); text-decoration: underline; white-space: nowrap; } .small-text { font-size: max(10px, 0.6rem); } .debug-button { display: none; } body.has-debug .debug-button { padding: 3px 3px; line-height: 5px; border-radius: 2px; display: inline-block; } body.has-debug .page-debug { font-size: max(10px, 0.6rem); position: absolute; position-area: bottom span-right; box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.42); } body.has-debug .debug-helper { border: 1px solid rgba(0, 0, 0, 0); } body.has-debug .debug-helper:hover { border-color: red; background: rgba(255, 0, 0, 0.1); } body, html { margin: 0; padding: 0; height: 100%; background: var(--page-bg); overscroll-behavior-y: none; } * { box-sizing: border-box; } .grid-container { display: grid; grid-template-columns: 0 1fr; grid-template-rows: calc(60px + var(--safe-top)) auto 1fr; gap: 0px 0px; width: 100%; height: 100%; transition: grid-template-columns 0.2s ease; } .grid-header { grid-area: 1/1/2/3; background: var(--chrome-bg); } .grid-content { grid-area: 3/2/4/3; background: var(--page-bg); padding: 16px calc(16px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left)); overflow-y: scroll; overscroll-behavior-y: contain; transition: box-shadow 0.2s ease; } .grid-menu { grid-area: 2/1/4/2; background: var(--chrome-bg); position: fixed; top: calc(60px + var(--safe-top)); left: 0; bottom: 0; width: 208px; padding-left: var(--safe-left); padding-bottom: var(--safe-bottom); z-index: 60; transform: translateX(-100%); transition: transform 0.2s ease; } .grid-menu-backdrop { display: none; position: fixed; top: calc(60px + var(--safe-top)); left: 0; right: 0; bottom: 0; background: var(--scrim-nav); z-index: 55; } html.sidebar-open .grid-content { box-shadow: var(--shadow-sidebar-inset); } html.sidebar-open .grid-menu { transform: translateX(0); } html.sidebar-open .grid-menu-backdrop { display: block; } @media (min-width: 769px) { .grid-container { grid-template-columns: 208px 1fr; } .grid-menu { transform: translateX(0); } .grid-menu-backdrop, html.sidebar-open .grid-menu-backdrop { display: none; } .grid-content { padding: 24px calc(28px + var(--safe-right)) calc(36px + var(--safe-bottom)) 28px; box-shadow: var(--shadow-sidebar-inset); } html.sidebar-closed .grid-container { grid-template-columns: 0 1fr; } html.sidebar-closed .grid-menu { transform: translateX(-100%); } html.sidebar-closed .grid-content { box-shadow: none; padding-left: calc(28px + var(--safe-left)); } html.sidebar-closed .grid-sub-menu { padding-left: calc(28px + var(--safe-left)); } } .h1-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 10px; font-family: Lato, otallatin, arial, helvetica, sans-serif; font-size: max(10px, 0.6875rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; vertical-align: middle; white-space: nowrap; opacity: 0.65; } .grid-sub-menu { grid-area: 2/2/3/3; background: var(--chrome-submenu-bg); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px calc(16px + var(--safe-right)) 12px calc(16px + var(--safe-left)); } .grid-sub-menu h1 { margin: 0; font-family: "Calistoga", Georgia, serif; font-weight: 400; font-size: 1.1875rem; color: var(--chrome-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-sub-menu .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .grid-sub-menu .breadcrumbs li { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .grid-sub-menu .breadcrumbs a { color: var(--chrome-fg-muted); font-size: max(10px, 0.75rem); border-bottom: 0; } .grid-sub-menu .breadcrumbs a:hover { color: var(--chrome-fg); border-bottom: 0; } .grid-sub-menu .breadcrumbs span { color: var(--chrome-fg); font-size: max(10px, 0.75rem); font-weight: 700; } .grid-sub-menu .breadcrumbs .breadcrumb-separator { font-size: max(10px, 0.5625rem); color: var(--chrome-fg-muted); opacity: 0.5; } @media (min-width: 769px) { .grid-sub-menu { padding: 18px calc(28px + var(--safe-right)) 18px 28px; } .grid-sub-menu h1 { font-size: 1.375rem; } .grid-sub-menu .breadcrumbs a, .grid-sub-menu .breadcrumbs span { font-size: max(10px, 0.8125rem); } } header.grid-header { display: flex; align-items: center; gap: 14px; padding: var(--safe-top) calc(18px + var(--safe-right)) 0 calc(18px + var(--safe-left)); } header.grid-header a { color: var(--chrome-a-fg); } .grid-header-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--chrome-fg); font-size: 1rem; cursor: pointer; } .grid-header-toggle:hover { background: var(--chrome-hover-wash); } .grid-header-brand { display: flex; align-items: center; font-family: "Calistoga", Georgia, serif; font-size: 1.3125rem; letter-spacing: 0.5px; color: var(--chrome-a-fg); text-decoration: none; border-bottom: 0; } .grid-header-brand:hover { color: var(--chrome-a-fg); border-bottom: 0; } .grid-header-spacer { flex: 1 1 auto; } .grid-header-search { display: flex; align-items: center; flex: 0 1 420px; position: relative; } .grid-header-search-icon { position: absolute; left: 12px; font-size: max(10px, 0.8125rem); color: var(--chrome-field-placeholder); pointer-events: none; } .grid-header-search input.grid-header-search-input { width: 100%; min-width: 0; padding: 8px 12px 8px 34px; border-radius: 20px; border: 0; background: var(--chrome-field-bg); color: var(--chrome-field-fg); font-size: 1rem; line-height: normal; box-shadow: none; } .grid-header-search input.grid-header-search-input::placeholder { color: var(--chrome-field-placeholder); } .grid-header-search input.grid-header-search-input:focus { background: var(--chrome-field-focus-bg); outline: 2px solid var(--focus-ring); outline-offset: 1px; } .grid-header-search-scope { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border-radius: 20px; border: 1px solid var(--chrome-field-fg); background: transparent; color: var(--chrome-field-fg); font-size: max(10px, 0.8125rem); line-height: 1.4; cursor: pointer; } .grid-header-search-scope[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-pill-fg); } .grid-header-search-scope:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .grid-header-search:has(.grid-header-search-scope:not([hidden])) input.grid-header-search-input { padding-right: 9.5rem; } @media (max-width: 480px) { .grid-header-search-scope { max-width: 5rem; } .grid-header-search:has(.grid-header-search-scope:not([hidden])) input.grid-header-search-input { padding-right: 5.5rem; } .grid-header-search:has(input.grid-header-search-input:focus) .grid-header-search-scope { display: none; } .grid-header-search:has(.grid-header-search-scope:not([hidden])) input.grid-header-search-input:focus { padding-right: 12px; } } .grid-header-refresh { display: none; } html.is-standalone .grid-header-refresh { display: inline-flex; } @media (max-width: 769px) { html.is-standalone header.grid-header { gap: 8px; } } .grid-header-toggle:focus-visible { outline: 2px solid var(--chrome-a-fg); outline-offset: 2px; } .grid-header-notifications { position: relative; } .grid-header-notification-toggle { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--chrome-fg); font-size: 1rem; cursor: pointer; } .grid-header-notification-toggle:hover { background: var(--chrome-hover-wash); } .grid-header-notification-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger-fg); color: var(--danger-contrast-fg); font-size: max(10px, 0.625rem); line-height: 16px; text-align: center; } .grid-header-notification-badge.hidden { display: none; } .grid-header-notification-dropdown { position: absolute; top: 46px; right: 0; width: 340px; max-width: calc(100vw - 24px); max-height: 420px; display: flex; flex-direction: column; background: var(--surface-bg); color: var(--ink); border-radius: 8px; box-shadow: var(--shadow-dropdown); overflow: hidden; z-index: 50; } .grid-header-notification-dropdown.hidden { display: none; } .grid-header-notification-dropdown-header { padding: 12px 14px; font-weight: 600; border-bottom: 1px solid var(--hairline-soft); } .grid-header-notification-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .grid-header-timer-section { flex: 0 0 auto; border-bottom: 1px solid var(--hairline-soft); } .grid-header-timer-list { max-height: 160px; overflow-y: auto; } .grid-header-notifications a.grid-header-timer-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline-faint); font-size: max(10px, 0.8125rem); color: var(--ink); text-decoration: none; } .grid-header-notifications a.grid-header-timer-item:hover { background: var(--wash-soft); color: var(--ink); } .grid-header-timer-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grid-header-timer-item-countdown { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; } .grid-header-notification-empty { padding: 20px 14px; color: var(--text-muted); font-size: max(10px, 0.8125rem); text-align: center; } .grid-header-notifications a.grid-header-notification-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--hairline-faint); font-size: max(10px, 0.8125rem); color: var(--ink); text-decoration: none; } .grid-header-notifications a.grid-header-notification-item:hover { background: var(--wash-soft); border-bottom: 1px solid var(--hairline-faint); color: var(--ink); } .grid-header-notifications a.grid-header-notification-item.is-unread { background: var(--wash-faint); font-weight: 600; } .grid-header-notification-item-date { display: block; margin-top: 2px; font-size: max(10px, 0.6875rem); font-weight: 400; color: var(--text-muted); } .grid-header-notifications a.grid-header-notification-settings-link { display: block; flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid var(--hairline-soft); font-size: max(10px, 0.75rem); text-align: center; color: var(--ink); } .grid-header-notifications a.grid-header-notification-settings-link:hover { background: var(--wash-soft); color: var(--ink); } .columns, columns { display: flex; flex-flow: row; } .columns .column, .columns column, columns .column, columns column { padding: 0px 6px; width: 100%; margin: 0px; vertical-align: top; } .columns .column:first-child, .columns column:first-child, columns .column:first-child, columns column:first-child { padding-left: 0; } .columns .column:last-child, .columns column:last-child, columns .column:last-child, columns column:last-child { padding-right: 0; } .columns .column.minimal, .columns column.minimal, columns .column.minimal, columns column.minimal { width: auto; text-align: center; } .columns.min-width .column, .columns.min-width column, columns.min-width .column, columns.min-width column { width: unset; } @media (max-width: 768px) { .columns, columns { flex-wrap: wrap; } .columns .column, .columns column, columns .column, columns column { padding-left: 0; padding-right: 0; } } * { margin-top: 0; } .padding-1 { padding: 6px; } .padding-2 { padding: 12px; } p { margin-bottom: 12px; } ul { margin-bottom: 12px; padding-inline-start: 18px; } ul.breadcrumbs { list-style: none; margin: 0; padding: 0; } ul.breadcrumbs li { list-style: none; margin: 0; padding: 0; display: inline-block; } .break-anywhere { overflow-wrap: anywhere; word-break: break-word; } .instructions-text { white-space: pre-wrap; overflow-wrap: anywhere; } .flash { animation: flash-highlight 0.6s ease-out; } @keyframes flash-highlight { from { background-color: var(--accent); color: var(--accent-fg); } to { background-color: transparent; } } .fact-list { list-style: none; margin: 0; padding: 0; } .fact-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--hairline-faint); } .fact-list li:last-child { border-bottom: 0; } .fact-label { color: var(--text-muted); font-size: max(10px, 0.8125rem); } .fact-value { font-weight: 600; text-align: right; word-break: break-word; } .note-muted { color: var(--text-muted); font-size: max(10px, 0.9em); margin: 8px 0 0; } .inline-form { display: inline; margin-left: 0.5rem; } batch-display, batch-make { display: block; position: relative; min-height: 40px; } batch-display[aria-busy=true]::before, batch-make[aria-busy=true]::before { content: ""; position: absolute; top: 8px; right: 8px; z-index: 1; width: 20px; height: 20px; border: 3px solid var(--text-muted); border-top-color: transparent; border-radius: 50%; animation: busy-appear 0s 0.25s both, busy-spin 0.8s linear infinite; } @keyframes busy-appear { from { visibility: hidden; } to { visibility: visible; } } @keyframes busy-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { batch-display[aria-busy=true]::before, batch-make[aria-busy=true]::before { animation: busy-appear 0s 0.25s both; } } details, .panel { background: var(--surface-bg); border: 1px solid var(--hairline); border-radius: 10px; margin-bottom: 18px; overflow: hidden; } .panel { padding: 20px; } details summary { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--wash-faint); font-family: "Calistoga", Georgia, serif; font-weight: 400; font-size: 1.0625rem; color: var(--ink); cursor: pointer; list-style: none; } details summary::-webkit-details-marker { display: none; } details summary:hover { background: var(--wash); } details summary::after { content: ""; flex: 0 0 auto; margin-left: auto; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%235c7180' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; transition: transform 0.15s ease; } details[open] summary { border-bottom: 1px solid var(--hairline-soft); } details[open] summary::after { transform: rotate(180deg); } details > *:not(summary) { padding: 20px; } details > .fieldset { padding: 20px; } .fieldset + details { margin-top: 18px; } .element-change { background: var(--changed-wash); } .element-change:hover { background: var(--changed-wash-hover); } itemselector, categoryselector { display: inline-block; } .fieldset { border: 0; padding: 0; margin: 0; min-width: 0; /* .field-group { .sel-multi-controls { display: none; } .field-element:last-child { .sel-multi-controls { display: block; } } }*/ } @media (min-width: 769px) { .fieldset.skinny > ul > li label, .fieldset.skinny div.field-element label { width: 133.3333333333px; font-weight: unset; } .fieldset.skinny > ul > li > div, .fieldset.skinny div.field-element > div { width: calc(100% - 133.3333333333px); } } .fieldset > ul { margin: 0px; padding: 0px; } .fieldset .field-separator { border-top: 1px solid var(--hairline); margin: 12px 0; } .fieldset .field-element { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; margin-bottom: 16px; width: 100%; } .fieldset .field-element .multi-key-remove { display: inline-block; } .fieldset .field-element h4 { margin-bottom: 0; } .fieldset .field-element label, .fieldset .field-element .field-label { font-weight: bold; overflow-x: clip; display: inline-block; padding: 0; line-height: 1.3; width: auto; font-size: max(10px, 80%); } .fieldset .field-element label > div, .fieldset .field-element .field-label > div { line-height: 100%; padding-left: 6px; } .fieldset .field-element > div { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .fieldset .field-element > div input:not([type=checkbox]):not([type=radio]):not([type=number]):not([type=date]), .fieldset .field-element > div select { flex: 1 1 200px; min-width: 0; max-width: 400px; box-sizing: border-box; } .fieldset .field-element > div input[type=date] { flex: 0 1 auto; width: auto; min-width: 7.5em; max-width: 100%; box-sizing: border-box; } .fieldset .field-element > div input[type=number] { flex: 0 1 auto; width: 110px; max-width: 110px; box-sizing: border-box; } .fieldset .field-element > div input[type=number] + select { flex: 0 1 auto; width: auto; min-width: 0; max-width: 80px; } .fieldset .field-element > div textarea { flex: 1 1 200px; min-width: 0; max-width: 100%; box-sizing: border-box; } .fieldset .field-element > div itemselector, .fieldset .field-element > div categoryselector { display: block; width: 100%; } .fieldset .field-element > div itemselector a, .fieldset .field-element > div categoryselector a { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 160px; padding: 8px 10px; font-size: max(10px, 0.8125rem); line-height: 1.3; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-fg); box-shadow: none; text-decoration: none; } .fieldset .field-element > div itemselector a::after, .fieldset .field-element > div categoryselector a::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2L6.5 5L3.5 8' stroke='%238092a0' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; } .fieldset .field-element > div itemselector a:hover, .fieldset .field-element > div categoryselector a:hover { border-color: var(--field-border-hover); color: var(--field-fg); } .fieldset .field-element > div itemselector a:focus-visible, .fieldset .field-element > div categoryselector a:focus-visible { outline: none; border-color: var(--focus-ring); background: var(--field-focus-bg); } .fieldset .field-element > div itemselector { flex: 1 1 200px; min-width: 0; max-width: 400px; } .fieldset .field-element > div .select-combine { flex: 1 1 200px; min-width: 0; } .fieldset .field-element > div .select-combine input.sel-unit-helper-amount, .fieldset .field-element > div .select-combine select.sel-unit-helper-unit { flex: 0 1 auto; } .fieldset .field-element > div .helper { font-style: italic; font-size: max(10px, 0.8125rem); padding: 3px 0 3px 8px; border-left: 2px solid var(--hairline); height: unset; flex: 0 0 100%; box-sizing: border-box; } .fieldset .field-element > div .checkbox-display { padding: 0; display: flex; align-items: center; height: unset; padding-top: 8px; } .fieldset .field-element > div .checkbox-display .checkbox-display-note { font-size: max(10px, 80%); color: var(--text-muted); } .fieldset .field-element > div .checkbox-display input[type=checkbox], .fieldset .field-element > div .checkbox-display input[type=radio] { width: 18px; height: 18px; vertical-align: middle; } .fieldset .field-element > div .checkbox-display label, .fieldset .field-element > div .checkbox-display .field-label { padding-top: 0; padding-bottom: 0; font-weight: normal; } .fieldset .field-element > div .key-inline-add { padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--hairline-soft); font-size: max(10px, 90%); } .fieldset .field-element > div .key-inline-add a { color: var(--link-fg); } .fieldset .field-element > div .key-inline-add a:hover { color: var(--link-hover-fg); } .fieldset .field-element > div .key-inline-add a i { padding-right: 6px; } .fieldset .field-element > div .field-validation-error { display: none; } .fieldset .field-element > div div[data-lastpass-icon-root=true] { display: none !important; } .fieldset .field-element input[type=checkbox] { line-height: 32px; height: 32px; width: 18px; } .fieldset .field-element.form-element-error { background: var(--err-field-bg); box-sizing: border-box; padding: 8px; margin: -8px -8px 8px; width: calc(100% + 16px); border-radius: 8px; } .fieldset .field-element.form-element-error input, .fieldset .field-element.form-element-error select, .fieldset .field-element.form-element-error textarea { background: var(--err-input-bg); color: var(--err-input-fg); border-color: var(--err-input-border); } .fieldset .field-element.form-element-error .field-validation-error { display: block; flex: 0 0 100%; font-weight: bold; padding: 6px; border-radius: 8px; color: var(--err-message-fg); background: var(--err-message-bg); } .fieldset .field-controls { padding-left: 0; } @media (min-width: 769px) { .fieldset .field-element { flex-direction: row; align-items: flex-start; gap: 0; } .fieldset .field-element label, .fieldset .field-element .field-label { flex: 0 0 auto; padding: 8px 6px 0 0; width: 200px; } .fieldset .field-element > div { flex: 1 1 auto; width: calc(100% - 200px); } .fieldset .field-controls { padding-left: 206px; } } .optional-flag, .key-display-control { display: inline-block; vertical-align: top; } .text-display { display: inline-block; padding: 6px 0; font-size: 1rem; line-height: 1.2; color: var(--ink); } .text-display itemselector, .text-display categoryselector { display: block; width: 100%; } .text-display itemselector a, .text-display categoryselector a { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 160px; padding: 8px 10px; font-size: max(10px, 0.8125rem); line-height: 1.3; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-fg); box-shadow: none; text-decoration: none; } .text-display itemselector a::after, .text-display categoryselector a::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2L6.5 5L3.5 8' stroke='%238092a0' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; } .text-display itemselector a:hover, .text-display categoryselector a:hover { border-color: var(--field-border-hover); color: var(--field-fg); } .text-display itemselector a:focus-visible, .text-display categoryselector a:focus-visible { outline: none; border-color: var(--focus-ring); background: var(--field-focus-bg); } .save-error { color: var(--danger-fg); padding: 12px 0; } input:not([type=submit]), select, textarea { padding: 6px; font-size: 1rem; line-height: 1.2; border-radius: 8px; background: var(--field-bg); color: var(--field-fg); border: 1px Solid var(--field-border); min-width: 200px; box-shadow: none; } input:not([type=submit]):disabled, select:disabled, textarea:disabled { background: var(--field-disabled-bg); color: var(--field-disabled-fg); border-color: var(--field-disabled-border); } input:not([type=submit])[type=file], select[type=file], textarea[type=file] { padding: 0; border: 0; background: unset; border-radius: unset; box-shadow: unset; } input:not([type=submit])[type=number], select[type=number], textarea[type=number] { min-width: 90px; } input:not([type=submit]).min-width, select.min-width, textarea.min-width { width: unset; } input:not([type=submit])[type=checkbox], input:not([type=submit])[type=radio], select[type=checkbox], select[type=radio], textarea[type=checkbox], textarea[type=radio] { box-shadow: unset; min-width: unset; } input:not([type=submit])[type=color], select[type=color], textarea[type=color] { padding: 0; height: 30px; width: 30px; } input:not([type=submit])[type=number], input:not([type=submit])[type=time], select[type=number], select[type=time], textarea[type=number], textarea[type=time] { width: 100px; } input:not([type=submit])[type=week], select[type=week], textarea[type=week] { width: 150px; } input:not([type=submit]):not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):active, select:not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):active, textarea:not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):active { background: var(--field-bg); color: var(--field-fg); border: 1px Solid var(--focus-ring); } input:not([type=submit]):not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):hover, select:not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):hover, textarea:not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):hover { background: var(--field-bg); color: var(--field-fg); border: 1px Solid var(--field-border-hover); } input:not([type=submit]):not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):focus, select:not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):focus, textarea:not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):focus { outline: none; border-color: var(--focus-ring); background: var(--field-focus-bg); } input:not([type=submit]):not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):disabled, select:not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):disabled, textarea:not([type=file]):not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not(:disabled):disabled { opacity: 0.7; } select { padding: 5px 6px; } .select-combine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .select-combine input.sel-unit-helper-amount { width: 110px; min-width: 0; } .select-combine span.sel-unit-helper-amount { display: inline-flex; align-items: center; padding: 6px 2px; font-size: 1rem; line-height: 1.2; font-weight: 700; color: var(--ink); } .select-combine select.sel-unit-helper-unit { width: auto; min-width: 0; max-width: 160px; } .field-element[data-key-type=TimePeriod] .select-combine input.sel-unit-helper-amount { width: 55px; } .field-element[data-key-type=TimePeriod] .select-combine select.sel-unit-helper-unit { width: 150px; max-width: 320px; } textarea { width: 400px; height: 60px; } .select-combine input.sel-unit-helper-amount[readonly] { border-color: transparent; background: transparent; box-shadow: none; padding-left: 2px; font-weight: 700; color: var(--ink); cursor: default; } .select-combine input.sel-unit-helper-amount[readonly]:hover, .select-combine input.sel-unit-helper-amount[readonly]:focus { border-color: transparent; box-shadow: none; outline: none; } @media (pointer: coarse) { input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; } } .field-element.choice-selector-field .choice-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; min-width: 0; position: relative; position: relative; } .field-element.choice-selector-field .choice-pills input { position: absolute; opacity: 0; width: 1px; height: 1px; } .field-element.choice-selector-field .choice-pills input:checked + label { background: var(--pill-active-bg); border-color: var(--pill-active-bg); color: var(--pill-active-fg); } .field-element.choice-selector-field .choice-pills input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .field-element.choice-selector-field .choice-pills label { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; width: auto; min-height: 40px; padding: 6px 14px; border: 2px solid var(--hairline); border-radius: 8px; background: var(--surface-raised); color: var(--text-fg); font-weight: 600; font-size: max(10px, 0.85em); line-height: 1.2; cursor: pointer; text-align: center; } .field-element.choice-selector-field .choice-selector { display: none; flex: 1 1 100%; min-width: 0; } .field-element.choice-selector-field:has(.choice-pills input[data-shows-selector=true]:checked) .choice-selector, .field-element.choice-selector-field[data-choice-hidden=true] .choice-selector { display: block; } .field-element.choice-selector-field[data-choice-hidden=true] .choice-pills { display: none; } @media (pointer: coarse) { .field-element.choice-selector-field .choice-pills label { min-height: 48px; } } .radio-tile-group { position: relative; display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; } .radio-tile-group label { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; border: 2px solid var(--hairline); border-radius: 8px; background: var(--surface-raised); color: var(--text-fg); font-weight: 600; line-height: 1.2; cursor: pointer; } .radio-tile-group { position: relative; } .radio-tile-group input { position: absolute; opacity: 0; width: 1px; height: 1px; } .radio-tile-group input:checked + label { background: var(--pill-active-bg); border-color: var(--pill-active-bg); color: var(--pill-active-fg); } .radio-tile-group input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .fieldset .field-element .radio-tile-group label { width: auto; flex: none; max-width: 100%; padding: 6px 12px; } .radio-tile-group input:disabled + label { opacity: 0.6; cursor: not-allowed; } .helper { font-style: italic; font-size: max(10px, 0.8125rem); color: var(--text-muted); } #alert_overlay { display: block; } #alert_buttons, #alert_buttons .button-row { margin-bottom: 0; } .alert-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1100; } .alert-container .alert-inner { background: var(--surface-raised); color: var(--text-fg); border: 1px solid var(--hairline); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px; box-shadow: var(--shadow-alert); max-width: 80%; } .alert-container .alert-inner h1 { margin: 0; margin-bottom: 18px; font-size: 1.125rem; } .alert-inputs { padding: 12px 0; text-align: center; } .alert-spam { margin-top: 12px; } .alert-text { overflow-wrap: anywhere; } .button-row { margin: 30px 0; } .button-row.standalone { margin: 0 0 12px; } .button-row.button-row-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .button-row.button-row-flex form { display: contents; } .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } @media (max-width: 640px) { .row-actions { margin-left: 0; width: 100%; } } .button, button, input[type=submit], input[type=button], input::file-selector-button { appearance: none; background-color: var(--accent); border: 1px solid var(--button-border); border-radius: 6px; box-shadow: var(--shadow-button); box-sizing: border-box; color: var(--accent-fg); cursor: pointer; display: inline-block; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; padding: 6px 16px; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; white-space: nowrap; word-wrap: break-word; } .button:focus:not(:focus-visible):not(.focus-visible), button:focus:not(:focus-visible):not(.focus-visible), input[type=submit]:focus:not(:focus-visible):not(.focus-visible), input[type=button]:focus:not(:focus-visible):not(.focus-visible), input::file-selector-button:focus:not(:focus-visible):not(.focus-visible) { box-shadow: none; outline: none; } .button:hover, button:hover, input[type=submit]:hover, input[type=button]:hover, input::file-selector-button:hover { background-color: var(--accent-hover); text-decoration: none; transition-duration: 0.1s; } .button:focus, button:focus, input[type=submit]:focus, input[type=button]:focus, input::file-selector-button:focus { box-shadow: var(--focus-ring) 0 0 0 2px; outline: none; } .button:active, button:active, input[type=submit]:active, input[type=button]:active, input::file-selector-button:active { background-color: var(--accent-active); box-shadow: var(--shadow-button-inset); transition: none 0s; } :where(a).button:hover { border: 1px solid var(--button-border); color: var(--accent-fg); } .button:disabled, .button.disabled, button:disabled, button.disabled, input[type=submit]:disabled, input[type=submit].disabled, input[type=button]:disabled, input[type=button].disabled { background-color: var(--accent-disabled); border-color: var(--button-border-hover); color: var(--text-disabled); cursor: default; } input:disabled::file-selector-button { background-color: var(--accent-disabled); border-color: var(--button-border-hover); color: var(--text-disabled); cursor: default; } button[data-submit-busy], input[data-submit-busy], .button[data-submit-busy] { cursor: progress; } a[data-submit-busy], [role=button][data-submit-busy] { cursor: progress; opacity: 0.55; pointer-events: none; } .button.secondary, button.secondary, input.secondary[type=submit], input.secondary[type=button], input.secondary::file-selector-button { background-color: var(--surface-bg); border: 1px solid var(--hairline); box-shadow: none; color: var(--ink); font-weight: 500; transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); } .button.secondary:hover, button.secondary:hover, input.secondary[type=submit]:hover, input.secondary[type=button]:hover, input.secondary::file-selector-button:hover { background-color: var(--surface-raised); } .button.secondary:active, button.secondary:active, input.secondary[type=submit]:active, input.secondary[type=button]:active, input.secondary::file-selector-button:active { background-color: var(--wash-mid); box-shadow: none; } .button.secondary:focus, button.secondary:focus, input.secondary[type=submit]:focus, input.secondary[type=button]:focus, input.secondary::file-selector-button:focus { outline: 1px transparent; } .button.secondary:before, .button.secondary:-webkit-details-marker, button.secondary:before, button.secondary:-webkit-details-marker, input.secondary[type=submit]:before, input.secondary[type=submit]:-webkit-details-marker, input.secondary[type=button]:before, input.secondary[type=button]:-webkit-details-marker, input.secondary::file-selector-button:before, input.secondary::file-selector-button:-webkit-details-marker { display: none; } .button.secondary:disabled, .button.secondary.disabled, button.secondary:disabled, button.secondary.disabled, input.secondary[type=submit]:disabled, input.secondary[type=submit].disabled, input.secondary[type=button]:disabled, input.secondary[type=button].disabled { background-color: var(--surface-bg); border-color: var(--hairline); color: var(--text-disabled); } input.secondary:disabled::file-selector-button { background-color: var(--surface-bg); border-color: var(--hairline); color: var(--text-disabled); } .button.danger, button.danger, input.danger[type=submit], input.danger[type=button] { background-color: var(--danger-btn-bg); border: 1px solid var(--danger-btn-border); box-shadow: none; color: var(--danger-btn-fg); font-weight: 600; } .button.danger:hover, button.danger:hover, input.danger[type=submit]:hover, input.danger[type=button]:hover { background-color: var(--danger-btn-hover-bg); border-color: var(--danger-btn-hover-bg); color: var(--danger-btn-hover-fg); } .button.danger:focus, button.danger:focus, input.danger[type=submit]:focus, input.danger[type=button]:focus { box-shadow: var(--danger-btn-ring) 0 0 0 3px; } .button.danger:active, button.danger:active, input.danger[type=submit]:active, input.danger[type=button]:active { background-color: var(--danger-btn-hover-bg); border-color: var(--danger-btn-hover-bg); color: var(--danger-btn-hover-fg); filter: brightness(0.92); box-shadow: none; } .button.danger:disabled, .button.danger.disabled, button.danger:disabled, button.danger.disabled, input.danger[type=submit]:disabled, input.danger[type=submit].disabled, input.danger[type=button]:disabled, input.danger[type=button].disabled { background-color: var(--danger-btn-bg); border-color: var(--danger-btn-border); color: var(--danger-btn-fg); filter: none; opacity: 0.5; } /* .button, button, input[type=submit], input[type=button], input::file-selector-button { display: inline-block; font-size: $default-distance * 3; font-weight: bold; line-height: $default-distance * 4; padding: $default-distance * 1 $default-distance * 4; border-radius: $form-border-radius; color: $butt-fg; background: $butt-bg; border: 1px solid $butt-border; &:hover { color: $butt-hover-fg; background: $butt-hover-bg; border-color: $butt-hover-border; cursor: pointer; } &:active { color: $butt-active-fg; background: $butt-active-bg; border-color: $butt-active-border; } &:disabled { opacity: 0.7; } }*/ .dropdown { display: none; position: absolute; box-shadow: var(--shadow-dropdown-wide); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--hairline); padding: 6px; } .dropdown.show { display: inline-block; } .loading { display: block; text-align: center; } .loading svg { top: 50%; position: absolute; margin-top: -100px; left: 50%; margin-left: -100px; } .loading-close { right: 12px; top: 12px; position: absolute; } .loading-close a { text-decoration: none; border: 0; display: inline-block; } key-display.is-loading { display: block; position: relative; min-height: 36px; } key-display.is-loading > :not(.key-display-loading) { opacity: 0.4; pointer-events: none; } key-display.is-loading > .key-display-loading { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 1; font-size: 1.125rem; color: var(--text-faint); } .page-messages { padding: 0 0 18px; } .page-messages ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .page-messages li { display: flex; align-items: flex-start; gap: 12px; list-style: none; padding: 12px 16px; margin: 0; border: 1px solid transparent; border-left-width: 4px; border-radius: 10px; font-size: 0.875rem; line-height: 1.4; } .page-messages li.message-error { background: rgba(179, 38, 30, 0.08); border-color: rgba(179, 38, 30, 0.2); border-left-color: #b3261e; color: #b3261e; } .page-messages li.message-error path { color: #b3261e; } .page-messages li.message-success { background: rgba(161, 193, 129, 0.14); border-color: rgba(104.9, 140.6106382979, 69.1893617021, 0.2); border-left-color: rgb(104.9, 140.6106382979, 69.1893617021); color: rgb(104.9, 140.6106382979, 69.1893617021); } .page-messages li.message-success path { color: rgb(104.9, 140.6106382979, 69.1893617021); } .page-messages li.message-info { background: rgba(97, 155, 138, 0.12); border-color: rgba(73.4428571429, 117.3571428571, 104.4857142857, 0.2); border-left-color: rgb(73.4428571429, 117.3571428571, 104.4857142857); color: rgb(73.4428571429, 117.3571428571, 104.4857142857); } .page-messages li.message-info path { color: rgb(73.4428571429, 117.3571428571, 104.4857142857); } .page-messages li svg, .page-messages li i { flex: 0 0 auto; margin-top: 1px; min-width: 15px; text-align: center; } .page-messages li ul { display: block; gap: 0; margin: 6px 0 0 0; padding-left: 20px; list-style: disc; } .page-messages li ul li { display: list-item; align-items: initial; gap: 0; padding: 2px 0; margin: 0; border: 0; border-radius: 0; background: none; font-size: max(10px, 0.8125rem); } .upgrade-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0 0; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--chrome-accent-border); background: var(--chrome-navy-bg); color: var(--chrome-navy-fg); } .upgrade-prompt .upgrade-prompt-body { display: flex; align-items: center; gap: 12px; } .upgrade-prompt .upgrade-prompt-icon { font-size: 1.375rem; color: var(--chrome-accent); flex: 0 0 auto; } .upgrade-prompt strong { display: block; font-size: 0.9375rem; } .upgrade-prompt p { margin: 2px 0 0 0; font-size: max(10px, 0.8125rem); color: var(--chrome-navy-fg-muted); } .upgrade-prompt .upgrade-prompt-action { flex: 0 0 auto; background: var(--chrome-accent); border-color: var(--chrome-accent); color: var(--chrome-accent-fg); font-weight: 600; } .grid-menu { display: flex; flex-direction: column; padding: 20px 12px; overflow-y: auto; } .grid-menu h3 { padding: 6px; font-size: 0.875rem; text-align: center; } .grid-menu .grid-menu-icon { flex: 0 0 auto; width: 1.25em; } .grid-menu > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .grid-menu > ul > li { display: block; list-style: none; margin: 0; padding: 0; } .grid-menu > ul > li > a { display: block; border-radius: 8px; color: #dbe6ec; text-decoration: none; border: 0; } .grid-menu > ul > li > a > span { display: flex; align-items: center; gap: 12px; padding: 8px 12px; } .grid-menu > ul > li > a > span span:not(.menu-pending-badge) { display: block; font-size: 0.9375rem; } .grid-menu > ul > li > a > span:has(.menu-pending-badge:not(.hidden)) span:not(.menu-pending-badge) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .grid-menu > ul > li > a:hover { background: var(--chrome-hover-wash); color: #fbeee2; } .grid-menu > ul > li.current > a { background: rgba(97, 155, 138, 0.32); color: #fbeee2; font-weight: 700; } .grid-menu > ul > li.current > a:hover { background: rgba(97, 155, 138, 0.32); } .grid-menu > ul > li > ul { list-style: none; margin: 2px 0 4px 14px; padding: 0; border-left: 1px solid var(--chrome-hover-wash); display: flex; flex-direction: column; gap: 2px; } .grid-menu > ul > li > ul.hidden { display: none; } .grid-menu > ul > li > ul li { display: block; list-style: none; margin: 0; padding: 0; } .grid-menu > ul > li > ul li.menu-group-heading { margin-top: 8px; } .grid-menu > ul > li > ul li.menu-group-heading:first-child { margin-top: 0; } .grid-menu > ul > li > ul li.menu-group-heading h3 { padding: 4px 12px 2px; margin: 0; font-size: max(10px, 0.6875rem); font-weight: 700; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; color: var(--chrome-fg-muted); } .grid-menu > ul > li > ul li a { display: block; color: #dbe6ec; text-decoration: none; border: 0; } .grid-menu > ul > li > ul li a > span { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 4px 0 4px; } @media (pointer: coarse) { .grid-menu > ul > li > ul li a > span { min-height: 36px; box-sizing: border-box; } } .grid-menu > ul > li > ul li a > span { border-radius: 8px; } .grid-menu > ul > li > ul li a > span span:not(.menu-pending-badge) { display: block; font-size: 0.875rem; } .grid-menu > ul > li > ul li a > span:has(.menu-pending-badge:not(.hidden)) span:not(.menu-pending-badge) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .grid-menu > ul > li > ul li a:hover > span { background: var(--chrome-hover-wash); color: #fbeee2; } .grid-menu > ul > li > ul li.current > a { color: #fbeee2; font-weight: 700; } .grid-menu > ul > li > ul li.current > a > span { background: rgba(97, 155, 138, 0.18); } .grid-menu > ul > li > ul li.current > a:hover > span { background: rgba(97, 155, 138, 0.18); } .grid-menu a.grid-menu-upgrade { margin-top: auto; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 0.9375rem; font-weight: 700; text-decoration: none; } .grid-menu a.grid-menu-upgrade:hover, .grid-menu a.grid-menu-upgrade:focus-visible { background: var(--accent); color: var(--accent-ink); border: 0; filter: brightness(1.08); } .grid-menu a.grid-menu-upgrade + .grid-menu-account { margin-top: 0; } .grid-menu .grid-menu-account { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--chrome-hover-wash); } .grid-menu .grid-menu-account-link { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 6px; border-radius: 8px; color: #fbeee2; text-decoration: none; border: 0; background: transparent; cursor: pointer; } .grid-menu .grid-menu-account-link:hover { background: var(--chrome-hover-wash); color: #fbeee2; } .grid-menu .grid-menu-account-link:is(button) { background: none; font: inherit; text-align: left; } .grid-menu .grid-menu-signout { display: contents; } .grid-menu .grid-menu-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #fe7f2d; color: var(--accent-pill-fg); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: max(10px, 0.8125rem); } .grid-menu .grid-menu-account-name { font-size: max(10px, 0.8125rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-menu .grid-menu-account-logout { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: #dbe6ec; border: 0; } .grid-menu .grid-menu-account-logout:hover { background: var(--chrome-hover-wash); color: #fbeee2; } .grid-menu .grid-menu-account-logout[hidden] { display: none; } .grid-menu .grid-menu-footer { padding: 10px 6px 2px 6px; font-size: max(10px, 0.6875rem); color: #dbe6ec; } .grid-menu .grid-menu-footer a { color: #dbe6ec; border-bottom: 0; white-space: nowrap; } .grid-menu .grid-menu-footer a:hover { color: #fbeee2; border-bottom: 0; } .grid-menu .menu-count { margin-left: 2px; font-size: inherit; font-weight: 400; opacity: 0.7; } dialog { opacity: 0; scale: 0.8; transition: opacity 400ms ease, scale 400ms ease, display 400ms allow-discrete, overlay 400ms allow-discrete; } dialog[open] { opacity: 1; scale: 1; } @starting-style { dialog[open] { opacity: 0; scale: 0.8; } } @media (prefers-reduced-motion: reduce) { dialog { transition-duration: 0ms; } } .modal-holder { background: var(--backdrop); position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 1000; } .modal-holder.show { display: block; } .modal-holder#pnlPageLoading { z-index: 1100; } .modal-holder#pnlPageLoading .modal-content { height: 100%; width: 100%; position: absolute; top: 0; bottom: 0; } .modal-holder .modal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .modal-holder .modal.is-loading .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-holder .modal-inner { background: var(--surface-bg); color: var(--text-fg); border-radius: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: var(--shadow-modal); max-width: 80%; max-height: 80%; min-width: 590px; overflow: hidden; display: flex; flex-direction: column; } .modal-holder .modal-inner > .modal-header, .modal-holder .modal-inner > .modal-footer { flex: 0 0 auto; } .modal-holder .modal-inner > .modal-content { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .modal-holder .modal-inner.sidebar-modal { top: 0; bottom: 0; right: 0; left: unset; max-height: unset; transform: unset; max-width: 590px; border-radius: 0; box-shadow: var(--shadow-drawer); display: grid; grid-template-columns: 1fr; grid-template-rows: min-content 1fr min-content; gap: 0px 0px; grid-template-areas: "modal-header" "modal-content" "modal-footer"; } .modal-holder .modal-inner.sidebar-modal .modal-header { grid-area: modal-header; } .modal-holder .modal-inner.sidebar-modal .modal-content { grid-area: modal-content; } .modal-holder .modal-inner.sidebar-modal .modal-footer { grid-area: modal-footer; } .modal-holder .modal-inner .modal-footer { background: var(--surface-bg); padding: 16px 20px; border-top: 1px solid var(--hairline); } .modal-holder .modal-inner .modal-footer .paging { padding-top: 0; } .modal-holder .modal-inner .modal-footer .modal-footer-report { display: flex; justify-content: flex-end; } .modal-holder .modal-inner .modal-footer * + .modal-footer-report { margin-top: 8px; } .modal-holder .modal-inner .modal-footer a.modal-report { font-size: max(10px, 0.75rem); line-height: 1.2; color: var(--text-muted); text-decoration: none; } .modal-holder .modal-inner .modal-footer a.modal-report:hover, .modal-holder .modal-inner .modal-footer a.modal-report:focus-visible { color: var(--link-hover-fg); text-decoration: underline; } .modal-holder .modal-inner .modal-footer a.modal-report:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .modal-holder .modal-inner .modal-header { background: var(--chrome-navy-bg); padding: 12px 16px; position: relative; display: flex; align-items: center; gap: 8px; } .modal-holder .modal-inner .modal-header .header { flex: 1 1 auto; min-width: 0; text-align: center; } .modal-holder .modal-inner .modal-header .header h3 { margin: 0; font-family: "Calistoga", Georgia, serif; font-weight: 400; font-size: 1.125rem; color: #fbeee2; overflow-wrap: anywhere; } .modal-holder .modal-inner .modal-header .close { flex: 0 0 36px; display: flex; justify-content: flex-end; } .modal-holder .modal-inner .modal-header .close.back-arrow { justify-content: flex-start; } .modal-holder .modal-inner .modal-header .close a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; margin: 0; line-height: 1; font-size: 1.25rem; color: var(--chrome-fg); background: var(--chrome-hover-wash); text-decoration: none; border: 0; } .modal-holder .modal-inner .modal-header .close a:hover { background: var(--chrome-submenu-bg); color: var(--chrome-fg); } .modal-holder .modal-inner .modal-header .close a:focus-visible { outline: 2px solid var(--chrome-fg); outline-offset: 2px; } @media (pointer: coarse) { .modal-holder .modal-inner .modal-header .close { flex-basis: 44px; } .modal-holder .modal-inner .modal-header .close a { width: 44px; height: 44px; } } .modal-holder .modal-inner > .loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .modal-holder .modal-inner.wide-modal { min-width: 80%; } @media (max-width: 769px) { .modal-holder .modal-inner { inset: 0; transform: none; min-width: 0; width: 100%; max-width: 100%; max-height: 100%; border-radius: 0; } .modal-holder .modal-inner.sidebar-modal { max-width: 100%; box-shadow: none; } .modal-holder .modal-inner.wide-modal { min-width: 0; } .modal-holder .modal-inner > .modal-header { padding-top: calc(16px + var(--safe-top)); padding-right: calc(20px + var(--safe-right)); padding-left: calc(20px + var(--safe-left)); } .modal-holder .modal-inner > .modal-content { padding-right: var(--safe-right); padding-left: var(--safe-left); } .modal-holder .modal-inner > .modal-content:last-child { padding-bottom: var(--safe-bottom); } .modal-holder .modal-inner > .modal-footer { padding-bottom: calc(16px + var(--safe-bottom)); padding-right: calc(20px + var(--safe-right)); padding-left: calc(20px + var(--safe-left)); } } .modal-holder .modal-inner.sidebar-modal > .modal-header { padding-top: calc(16px + var(--safe-top)); padding-right: calc(20px + var(--safe-right)); } .modal-holder .modal-inner.sidebar-modal > .modal-content { padding-right: var(--safe-right); } .modal-holder .modal-inner.sidebar-modal > .modal-content:last-child { padding-bottom: var(--safe-bottom); } .modal-holder .modal-inner.sidebar-modal > .modal-footer { padding-bottom: calc(16px + var(--safe-bottom)); padding-right: calc(20px + var(--safe-right)); } .pac-container, .modal-holder { z-index: 1000; } .toolbar { background: var(--surface-raised); color: var(--text-fg); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; } .toolbar ul { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; list-style: none; margin: 0; padding: 0; } .toolbar ul li { display: flex; list-style: none; margin: 0; padding: 0; } .toolbar ul li.checkbox-display { text-align: center; } .toolbar li:not(:has(> label)) > a, .toolbar li:not(:has(> label)) > button, .toolbar li:not(:has(> label)) > form > button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 8px; background: var(--toolbar-btn-bg); color: var(--toolbar-btn-fg); font-weight: 700; font-size: max(10px, 0.8125rem); line-height: 1.25rem; border: 1px solid var(--toolbar-btn-border); box-shadow: none; text-decoration: none; cursor: pointer; } .toolbar li:not(:has(> label)) > a:hover, .toolbar li:not(:has(> label)) > button:hover, .toolbar li:not(:has(> label)) > form > button:hover { background: var(--toolbar-btn-hover-bg); border-color: var(--toolbar-btn-hover-bg); color: var(--toolbar-btn-hover-fg); } .toolbar li:not(:has(> label)) > a:disabled, .toolbar li:not(:has(> label)) > a.disabled, .toolbar li:not(:has(> label)) > button:disabled, .toolbar li:not(:has(> label)) > button.disabled, .toolbar li:not(:has(> label)) > form > button:disabled, .toolbar li:not(:has(> label)) > form > button.disabled { background: var(--toolbar-btn-bg); border-color: var(--toolbar-btn-border); color: var(--toolbar-btn-fg); opacity: 0.5; cursor: default; } .toolbar li:not(:has(> label)) > a:focus, .toolbar li:not(:has(> label)) > button:focus, .toolbar li:not(:has(> label)) > form > button:focus { box-shadow: none; } .toolbar li:not(:has(> label)) > a:focus-visible, .toolbar li:not(:has(> label)) > button:focus-visible, .toolbar li:not(:has(> label)) > form > button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .toolbar li:not(:has(> label)) > a svg, .toolbar li:not(:has(> label)) > a i, .toolbar li:not(:has(> label)) > button svg, .toolbar li:not(:has(> label)) > button i, .toolbar li:not(:has(> label)) > form > button svg, .toolbar li:not(:has(> label)) > form > button i { font-size: max(10px, 0.75rem); } .toolbar li:not(:has(> label)) > a.secondary, .toolbar li:not(:has(> label)) > button.secondary, .toolbar li:not(:has(> label)) > form > button.secondary { background: var(--surface-bg); border-color: var(--hairline); color: var(--ink); font-weight: 500; } .toolbar li:not(:has(> label)) > a.secondary:hover, .toolbar li:not(:has(> label)) > button.secondary:hover, .toolbar li:not(:has(> label)) > form > button.secondary:hover { background: var(--surface-raised); border-color: var(--field-border-hover); color: var(--ink); } .toolbar li:not(:has(> label)) > a.secondary:disabled, .toolbar li:not(:has(> label)) > a.secondary.disabled, .toolbar li:not(:has(> label)) > button.secondary:disabled, .toolbar li:not(:has(> label)) > button.secondary.disabled, .toolbar li:not(:has(> label)) > form > button.secondary:disabled, .toolbar li:not(:has(> label)) > form > button.secondary.disabled { background: var(--surface-bg); border-color: var(--hairline); color: var(--text-disabled); opacity: 1; } .toolbar li:not(:has(> label)) > a.danger, .toolbar li:not(:has(> label)) > button.danger, .toolbar li:not(:has(> label)) > form > button.danger { background-color: var(--danger-btn-bg); border: 1px solid var(--danger-btn-border); box-shadow: none; color: var(--danger-btn-fg); font-weight: 600; } .toolbar li:not(:has(> label)) > a.danger:hover, .toolbar li:not(:has(> label)) > button.danger:hover, .toolbar li:not(:has(> label)) > form > button.danger:hover { background-color: var(--danger-btn-hover-bg); border-color: var(--danger-btn-hover-bg); color: var(--danger-btn-hover-fg); } .toolbar li:not(:has(> label)) > a.danger:focus, .toolbar li:not(:has(> label)) > button.danger:focus, .toolbar li:not(:has(> label)) > form > button.danger:focus { box-shadow: var(--danger-btn-ring) 0 0 0 3px; } .toolbar li:not(:has(> label)) > a.danger:active, .toolbar li:not(:has(> label)) > button.danger:active, .toolbar li:not(:has(> label)) > form > button.danger:active { background-color: var(--danger-btn-hover-bg); border-color: var(--danger-btn-hover-bg); color: var(--danger-btn-hover-fg); filter: brightness(0.92); box-shadow: none; } .toolbar li:not(:has(> label)) > a.danger:disabled, .toolbar li:not(:has(> label)) > a.danger.disabled, .toolbar li:not(:has(> label)) > button.danger:disabled, .toolbar li:not(:has(> label)) > button.danger.disabled, .toolbar li:not(:has(> label)) > form > button.danger:disabled, .toolbar li:not(:has(> label)) > form > button.danger.disabled { background-color: var(--danger-btn-bg); border-color: var(--danger-btn-border); color: var(--danger-btn-fg); filter: none; opacity: 0.5; } .toolbar li:has(> label) { flex-direction: column; align-items: flex-start; gap: 6px; } .toolbar li:has(> label) label { margin: 0; font-size: max(10px, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .toolbar li:has(> label) > div { display: flex; } .toolbar input:not([type=submit]):not([type=checkbox]):not([type=radio]), .toolbar select { min-width: 0; padding: 8px 10px; font-size: 1rem; line-height: 1.3; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-fg); box-shadow: none; } .toolbar input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: var(--selected-bg); cursor: pointer; } .toolbar input[type=submit], .toolbar input[type=button] { padding: 8px 17px; border-radius: 8px; border: 1px solid var(--toolbar-btn-border); background: var(--toolbar-btn-bg); color: var(--toolbar-btn-fg); font-weight: 700; font-size: max(10px, 0.8125rem); line-height: unset; box-shadow: none; cursor: pointer; } .toolbar input[type=submit]:hover, .toolbar input[type=button]:hover { background: var(--toolbar-btn-hover-bg); border-color: var(--toolbar-btn-hover-bg); color: var(--toolbar-btn-hover-fg); } .toolbar input[type=submit]:disabled, .toolbar input[type=submit].disabled, .toolbar input[type=button]:disabled, .toolbar input[type=button].disabled { background: var(--toolbar-btn-bg); border-color: var(--toolbar-btn-border); color: var(--toolbar-btn-fg); opacity: 0.5; cursor: default; } .toolbar input[type=submit].secondary, .toolbar input[type=button].secondary { background: var(--surface-bg); border-color: var(--hairline); color: var(--ink); font-weight: 500; } .toolbar input[type=submit].secondary:hover, .toolbar input[type=button].secondary:hover { background: var(--surface-raised); border-color: var(--field-border-hover); color: var(--ink); } .toolbar input[type=submit].secondary:disabled, .toolbar input[type=submit].secondary.disabled, .toolbar input[type=button].secondary:disabled, .toolbar input[type=button].secondary.disabled { background: var(--surface-bg); border-color: var(--hairline); color: var(--text-disabled); opacity: 1; } .toolbar input[type=submit].danger, .toolbar input[type=button].danger { background-color: var(--danger-btn-bg); border: 1px solid var(--danger-btn-border); box-shadow: none; color: var(--danger-btn-fg); font-weight: 600; } .toolbar input[type=submit].danger:hover, .toolbar input[type=button].danger:hover { background-color: var(--danger-btn-hover-bg); border-color: var(--danger-btn-hover-bg); color: var(--danger-btn-hover-fg); } .toolbar input[type=submit].danger:focus, .toolbar input[type=button].danger:focus { box-shadow: var(--danger-btn-ring) 0 0 0 3px; } .toolbar input[type=submit].danger:active, .toolbar input[type=button].danger:active { background-color: var(--danger-btn-hover-bg); border-color: var(--danger-btn-hover-bg); color: var(--danger-btn-hover-fg); filter: brightness(0.92); box-shadow: none; } .toolbar input[type=submit].danger:disabled, .toolbar input[type=submit].danger.disabled, .toolbar input[type=button].danger:disabled, .toolbar input[type=button].danger.disabled { background-color: var(--danger-btn-bg); border-color: var(--danger-btn-border); color: var(--danger-btn-fg); filter: none; opacity: 0.5; } .toolbar li.batch-started-note { align-items: center; gap: 6px; color: var(--text-muted); font-size: max(10px, 0.8125rem); } .page-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "actions filter view" "category category category" "panel panel panel" "summary summary summary"; align-items: center; column-gap: 10px; row-gap: 0; --toolbar-row-gap: 12px; background: var(--surface-raised); color: var(--text-fg); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; } .page-toolbar-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; } .page-toolbar-actions > li { display: flex; margin: 0; padding: 0; } .page-toolbar-extra { align-items: center; gap: 8px; } .page-toolbar-note { align-items: center; color: var(--text-muted); font-size: max(10px, 0.8125rem); } .page-toolbar .toolbar-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--toolbar-btn-border); background: var(--toolbar-btn-bg); color: var(--toolbar-btn-fg); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; text-decoration: none; box-shadow: none; cursor: pointer; } .page-toolbar .toolbar-action:hover { background: var(--toolbar-btn-hover-bg); border-color: var(--toolbar-btn-hover-bg); color: var(--toolbar-btn-hover-fg); } .page-toolbar .toolbar-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .page-toolbar .toolbar-action.is-primary { background: var(--toolbar-btn-hover-bg); border-color: var(--toolbar-btn-hover-bg); color: var(--toolbar-btn-hover-fg); font-weight: 600; } .page-toolbar .toolbar-action.is-primary:hover:not(:disabled) { filter: brightness(1.12); } .page-toolbar .toolbar-action.danger { background-color: var(--danger-btn-bg); border: 1px solid var(--danger-btn-border); box-shadow: none; color: var(--danger-btn-fg); font-weight: 600; } .page-toolbar .toolbar-action.danger:hover { background-color: var(--danger-btn-hover-bg); border-color: var(--danger-btn-hover-bg); color: var(--danger-btn-hover-fg); } .page-toolbar .toolbar-action.danger:focus { box-shadow: var(--danger-btn-ring) 0 0 0 3px; } .page-toolbar .toolbar-action.danger:active { background-color: var(--danger-btn-hover-bg); border-color: var(--danger-btn-hover-bg); color: var(--danger-btn-hover-fg); filter: brightness(0.92); box-shadow: none; } .page-toolbar .toolbar-action.danger:disabled, .page-toolbar .toolbar-action.danger.disabled { background-color: var(--danger-btn-bg); border-color: var(--danger-btn-border); color: var(--danger-btn-fg); filter: none; opacity: 0.5; } .page-toolbar .toolbar-action:disabled { background: var(--toolbar-btn-bg); color: var(--toolbar-btn-fg); opacity: 0.5; cursor: default; } .page-toolbar details { background: none; border: 0; border-radius: 0; margin: 0; overflow: visible; } .page-toolbar details > summary { font-family: inherit; } .page-toolbar details > summary::after { content: none; } .toolbar-more { position: relative; } .toolbar-more > summary { list-style: none; } .toolbar-more > summary::-webkit-details-marker { display: none; } .toolbar-more[open] > summary { background: var(--toolbar-btn-hover-bg); color: var(--toolbar-btn-hover-fg); } .toolbar-more-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: flex; flex-direction: column; gap: 6px; min-width: 200px; margin: 0; padding: 8px; list-style: none; background: var(--surface-bg); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--shadow-menu); } .toolbar-more-list > li { display: flex; margin: 0; } .toolbar-more-list > li > a, .toolbar-more-list > li > form, .toolbar-more-list > li > form > button { width: 100%; } .toolbar-more-list > li .toolbar-action { justify-content: flex-start; } .page-toolbar .is-phone-only { display: none; } .page-toolbar-filter { display: contents; grid-area: filter; } .page-toolbar-filter::details-content { display: contents; } .page-toolbar-filter:not([open]) > .page-toolbar-panel { display: none; } .page-toolbar-filter-toggle { grid-area: filter; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--toolbar-btn-border); background: var(--toolbar-btn-bg); color: var(--toolbar-btn-fg); font-size: 0.875rem; cursor: pointer; list-style: none; white-space: nowrap; } .page-toolbar-filter-toggle::-webkit-details-marker { display: none; } .page-toolbar-filter-toggle:hover { background: var(--toolbar-btn-hover-bg); border-color: var(--toolbar-btn-hover-bg); color: var(--toolbar-btn-hover-fg); } .page-toolbar-filter-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .page-toolbar .page-toolbar-filter > .page-toolbar-filter-toggle { border: 1px solid var(--toolbar-btn-border); } .page-toolbar .page-toolbar-filter > .page-toolbar-filter-toggle:hover, .page-toolbar .page-toolbar-filter[open] > .page-toolbar-filter-toggle { border-color: var(--toolbar-btn-hover-bg); } .page-toolbar-filter[open] > .page-toolbar-filter-toggle { background: var(--toolbar-btn-hover-bg); color: var(--toolbar-btn-hover-fg); } .page-toolbar-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--toolbar-btn-hover-bg); color: var(--toolbar-btn-hover-fg); font-size: max(10px, 0.75rem); font-weight: 700; } .page-toolbar-filter[open] .page-toolbar-count { background: var(--toolbar-btn-hover-fg); color: var(--toolbar-btn-hover-bg); } .page-toolbar-filter-toggle:hover .page-toolbar-count { background: var(--toolbar-btn-hover-fg); color: var(--toolbar-btn-hover-bg); } .page-toolbar-panel { grid-area: panel; margin-top: var(--toolbar-row-gap); display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--wash-mid); border: 1px solid var(--hairline); border-radius: 8px; } .page-toolbar-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: end; } .page-toolbar-fields .page-toolbar-sort { grid-column: span 2; } @media (max-width: 1279px) { .page-toolbar-fields .filter-field-authuserlocationselector { grid-column-start: 1; } } @media (min-width: 1280px) { .page-toolbar-fields { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .page-toolbar-fields .filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .page-toolbar-fields .filter-field > label { margin: 0; font-size: max(10px, 0.8125rem); color: var(--text-muted); } .page-toolbar-fields input:not([type=checkbox]):not([type=radio]), .page-toolbar-fields select { width: 100%; min-width: 0; box-sizing: border-box; } .page-toolbar-fields .filter-field-checkbox { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 6px; } .page-toolbar-sort-controls { display: flex; gap: 6px; } .page-toolbar-sort-controls select:first-of-type { flex: 1 1 auto; } .page-toolbar-sort-controls select + select { flex: 0 0 auto; width: auto; } .page-toolbar-panel-buttons { justify-content: flex-end; align-items: center; margin: 0; } .page-toolbar-apply { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 0 16px; min-height: 38px; font-weight: 600; } .page-toolbar-apply:hover { background: var(--accent-hover); } .page-toolbar-view { grid-area: view; display: flex; align-items: center; } .page-toolbar-category { grid-area: category; margin-top: var(--toolbar-row-gap); min-width: 0; padding-top: 10px; border-top: 1px solid var(--hairline-soft); } .page-toolbar-category .category-selector { margin: 0; padding: 0; border: 0; background: none; } .page-toolbar-category .search-type-toggle { margin: 0; } html:not(.js) .page-toolbar-category:not(:has(.category-selector, .search-type-toggle)) { display: none; } .category-child-toggle-item { align-items: center; gap: 6px; margin-left: 4px; } .category-child-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--field-border); border-radius: 6px; background: var(--surface-bg); color: var(--ink); box-shadow: none; cursor: pointer; } .category-child-toggle[hidden] { display: none; } .category-child-toggle[aria-expanded=true] svg, .category-child-toggle[aria-expanded=true] i { transform: rotate(180deg); } .category-child-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .category-child-count { font-size: max(10px, 0.75rem); color: var(--text-muted); } .child-categories.is-child-hidden { display: none; } html:not(.js) .child-categories.is-child-hidden { display: block; } html:not(.js) .category-child-toggle-item, html:not(.js) .category-child-toggle { display: none; } .page-toolbar-summary { grid-area: summary; margin: var(--toolbar-row-gap) 0 0; font-size: max(10px, 0.8125rem); color: var(--text-muted); } .page-toolbar-summary strong { color: var(--text-fg); } .page-toolbar-summary .page-toolbar-clear-all { margin-left: 8px; } @media (max-width: 640px) { .page-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "actions actions" "filter view" "category category" "panel panel" "summary summary"; padding: 12px; --toolbar-row-gap: 10px; } .page-toolbar-actions { flex-wrap: nowrap; } .page-toolbar-actions > .page-toolbar-primary { flex: 1 1 auto; min-width: 0; } .page-toolbar-actions > .page-toolbar-primary > a, .page-toolbar-actions > .page-toolbar-primary > form, .page-toolbar-actions > .page-toolbar-primary > form > button { width: 100%; } .page-toolbar-actions:has(> .page-toolbar-extra) { flex-wrap: wrap; } .page-toolbar-extra { flex: 1 1 100%; min-width: 0; } .page-toolbar-extra > div { flex: 1 1 auto; min-width: 0; } .page-toolbar-extra select { width: 100%; min-width: 0; } .page-toolbar .toolbar-action, .page-toolbar-filter-toggle { min-height: 44px; } .page-toolbar-filter-toggle { justify-content: center; } .page-toolbar .page-toolbar-inline { display: none; } .page-toolbar-actions ~ .page-toolbar-view, .page-toolbar-actions ~ .page-toolbar-filter > .page-toolbar-filter-toggle { margin-top: var(--toolbar-row-gap); } .page-toolbar .is-phone-only { display: flex; } .toolbar-more-list { left: auto; right: 0; } .page-toolbar-fields { grid-template-columns: minmax(0, 1fr); } .page-toolbar-fields .page-toolbar-sort, .page-toolbar-fields .filter-field-authuserlocationselector { grid-column: auto; } .category-child-toggle { width: 36px; height: 36px; } } @supports not selector(::details-content) { .page-toolbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "actions view" "filter filter" "category category" "summary summary"; } .page-toolbar-filter { display: block; min-width: 0; } .page-toolbar:has(> .page-toolbar-actions, > .page-toolbar-view) > .page-toolbar-filter { margin-top: var(--toolbar-row-gap); } .page-toolbar-actions ~ .page-toolbar-view, .page-toolbar-actions ~ .page-toolbar-filter > .page-toolbar-filter-toggle { margin-top: 0; } .page-toolbar-filter-toggle { width: fit-content; } .page-toolbar-panel { margin-top: 12px; } } @media print { .page-toolbar-actions, .page-toolbar-filter-toggle, .page-toolbar-view, .category-child-toggle { display: none; } } .paging { padding-top: 18px; display: flex; align-items: center; gap: 4px; } .paging ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .paging ul li { list-style: none; margin: 0; padding: 0; display: inline-block; } .paging a, .paging span { display: inline-flex; align-items: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; font-size: max(10px, 0.8125rem); font-weight: 700; text-align: center; justify-content: center; border: 1px solid transparent; } .paging a { color: var(--text-fg); text-decoration: none; border-color: var(--field-border); } .paging a:hover { border-color: var(--field-border-hover); background: var(--wash-mid); } .paging span { color: var(--text-faint); } .paging li > span:not(:empty):not(:has(i)):not(:has(svg)), .paging > span:not(:empty):not(:has(i)):not(:has(svg)) { background: var(--selected-bg); border-color: var(--selected-border); color: var(--selected-fg); } #gmp-map { height: 300px; } .tag-holder { margin-bottom: 6px; } .tag-holder .tag { display: inline-block; border: 1px solid var(--hairline); border-radius: 16px; } .tag-holder .tag a { display: inline-block; padding: 3px 6px; font-size: max(10px, 80%); text-decoration: none; border-bottom: 0; } tag-holder { display: block; margin: 12px 0; } tag-holder > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } tag-holder > div > div:first-child { font-size: max(10px, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } tag-holder ul { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0; } tag-holder li { list-style: none; margin: 0; padding: 0; } tag-holder li.tag-item { display: inline-flex; align-items: stretch; border-radius: 20px; border: 1px solid var(--hairline); background: #faf6ef; overflow: hidden; } tag-holder li.tag-item a { display: inline-flex; align-items: center; border: 0; color: var(--ink); font-size: max(10px, 0.8125rem); font-weight: 700; text-decoration: none; } tag-holder li.tag-item a:first-child { padding: 6px 12px; } tag-holder li.tag-item a:first-child:hover { color: var(--link-hover-fg); } tag-holder li.tag-item a:nth-child(2) { padding: 6px 10px; border-left: 1px solid var(--hairline); color: var(--text-faint); font-size: max(10px, 0.6875rem); } tag-holder li.tag-item a:nth-child(2):hover { background: var(--danger-wash); color: var(--danger-fg); } tag-holder a[id^=newTag_] { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--field-border-hover); color: var(--text-faint); font-size: max(10px, 0.75rem); } tag-holder a[id^=newTag_]:hover { border-color: var(--link-fg); border-style: solid; color: var(--link-fg); } .ingredient-cell { width: 400px; } .amount-cell { /*width: 100px;*/ } ol.recipe-steps li > div { display: inline-block; vertical-align: top; } ol.recipe-steps li > div:first-child { width: 60px; } ol.recipe-steps li > div:first-child a { margin-left: 6px; } ol.recipe-steps li > div:first-child a:first-child { margin-left: 0; } ol.recipe-steps li > div h5 { margin-bottom: 6px; } table { width: 100%; border-collapse: collapse; background: var(--surface-bg); border: 1px solid var(--hairline); font-size: max(10px, 0.8125rem); margin-bottom: 12px; } table th, table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--hairline-soft); } table th { background: var(--wash-soft); color: var(--text-muted); font-size: max(10px, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--hairline); } table tr:last-child td { border-bottom: 0; } table tr:not(:has(th)):hover td { background: var(--wash-faint); } table svg.fa-circle-xmark path { color: var(--danger-fg); } table svg.fa-circle-check path { color: var(--ok-fg); } table tbody tr:first-child .sel-move-step-up { display: none; } table tr:last-child .sel-move-step-down { display: none; } table.compact th, table.compact td { padding: 6px 8px; border-bottom: 1px solid var(--hairline-faint); } table.compact th { border-bottom: 1px solid var(--hairline); } .table-scroll { overflow-x: auto; } .stock-usage-table .numeric, .tasting-rating-table .numeric { text-align: right; white-space: nowrap; } .stock-usage-table tfoot td, .tasting-rating-table tfoot td { border-bottom: 0; border-top: 1px solid var(--hairline); } .stock-usage-table .container-fill-event-deleted td, .tasting-rating-table .container-fill-event-deleted td { opacity: 0.6; } tabs { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-bottom: 1px solid var(--hairline); } tabs tab, tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 4px; margin: 0 16px -1px 0; cursor: pointer; color: var(--text-muted); font-size: max(10px, 0.8125rem); font-weight: 700; border: 0; border-bottom: 2px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } tabs tab:last-child, tabs a:last-child { margin-right: 0; } tabs tab:hover, tabs a:hover { color: var(--ink); border: 0; border-bottom: 2px solid transparent; } tabs tab.selected, tabs a.selected { color: var(--ink); border-bottom: 2px solid var(--selected-border); } tabs tab.disabled, tabs tab[aria-disabled=true], tabs a.disabled, tabs a[aria-disabled=true] { color: var(--text-muted); opacity: 0.55; cursor: not-allowed; } tabs tab.disabled:hover, tabs tab[aria-disabled=true]:hover, tabs a.disabled:hover, tabs a[aria-disabled=true]:hover { color: var(--text-muted); } .tab-panel { margin-top: 14px; padding: 14px 18px; background: var(--surface-bg); color: var(--text-fg); border: 1px solid var(--hairline); border-radius: 10px; } .tab-panel details, .tab-panel .panel { background: var(--surface-nested, var(--surface-bg)); } .tab-panel .tab-section:not(:first-child) { margin-top: 24px; } :where(.tab-panel) :is(h2, h3):where(:not(:first-child, td *, th *, summary *, .toolbar *, .modal-inner *, dialog *)), :where(.tab-panel) :is(form, .fieldset, section):where(:not(td *, th *, .toolbar *, .modal-inner *, dialog *)) + :is(form, .fieldset, section) { margin-top: 24px; } .dropdown.autocomplete { margin: 0; padding: 0; width: 300px; background-color: var(--surface-raised); z-index: 1000; color: var(--text-fg); border: 1px solid var(--field-border); border-radius: 0; box-shadow: var(--shadow-popover); } .dropdown.autocomplete .toolbar { margin-bottom: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--hairline); padding: 12px 14px; background: none; } .dropdown.autocomplete .toolbar ul { flex-wrap: nowrap; align-items: flex-end; } .dropdown.autocomplete .toolbar li:has(> label) { flex: 1 1 auto; min-width: 0; } .dropdown.autocomplete .toolbar li:has(> label) label { font-size: max(10px, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .dropdown.autocomplete .toolbar li:has(> label) input { width: 100%; } .dropdown.autocomplete .toolbar li:not(:has(> label)) > a { flex: 0 0 auto; width: 28px; height: calc(1.3rem + 18px); padding: 0; justify-content: center; border-radius: 6px; background: none; color: var(--text-muted); } .dropdown.autocomplete .toolbar li:not(:has(> label)) > a i { font-size: max(10px, 0.8125rem); } .dropdown.autocomplete .toolbar li:not(:has(> label)) > a:hover { background: var(--wash-mid); color: var(--ink); } .dropdown.autocomplete > ul { max-height: 260px; overflow-y: auto; padding: 6px; margin: 0; list-style: none; } .dropdown.autocomplete > ul li { display: block; list-style: none; margin: 0; padding: 0; } .dropdown.autocomplete > ul a { display: block; padding: 8px 10px; border-radius: 0; border-bottom: 0; color: var(--ink); font-size: max(10px, 0.8125rem); text-decoration: none; } .dropdown.autocomplete > ul a:hover { background: var(--wash-mid); } .dropdown.autocomplete > ul a.new-tag { font-weight: 700; color: var(--link-fg); } .dropdown.autocomplete > ul a.new-tag:hover { background: var(--wash-mid); } .category-selector { position: relative; background: var(--surface-raised); color: var(--text-fg); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; } .category-selector .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .category-selector .breadcrumbs li { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .category-selector .breadcrumbs a { display: inline-block; padding: 3px 7px; border-radius: 6px; border: 0; color: var(--text-fg); font-size: 0.875rem; } .category-selector .breadcrumbs a:hover { background: var(--wash-mid); color: var(--link-hover-fg); } .category-selector .breadcrumbs li:first-child a { font-weight: 700; color: var(--ink); } .category-selector .breadcrumbs span { padding: 3px 7px; font-size: 0.875rem; font-weight: 700; color: var(--ink); } .category-selector .breadcrumbs .breadcrumb-separator { font-size: max(10px, 0.625rem); color: var(--text-disabled); } .category-selector .child-categories { position: relative; } .category-selector .child-categories ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .category-selector .child-categories li { list-style: none; margin: 0; padding: 0; } .category-selector .child-categories a { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 20px; border: 1px solid var(--hairline); background: var(--field-bg); color: var(--ink); font-size: max(10px, 0.8125rem); font-weight: 700; } .category-selector .child-categories a:hover { background: var(--wash-mid); border-color: var(--field-border-hover); color: var(--link-hover-fg); } .category-selector .child-categories a:hover .category-count { background: var(--selected-bg); color: var(--selected-fg); } .category-selector .child-categories .category-icon { font-size: max(10px, 0.75rem); color: var(--text-faint); } .category-selector .child-categories .category-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--wash-strong); color: var(--ink); font-size: max(10px, 0.6875rem); font-weight: 900; } .category-selector .child-categories li.is-deleted a { color: var(--text-disabled); border-style: dashed; } .category-selector .child-categories li.is-deleted a .category-name { text-decoration: line-through; } .category-selector .child-categories li.is-deleted a:hover { color: var(--text-disabled); border-color: var(--hairline); background: var(--field-bg); } .category-selector .child-categories li.is-deleted a:hover .category-count { background: var(--wash-strong); color: var(--ink); } .category-selector .breadcrumbs:has(+ .child-categories) { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline-soft); } .category-tree { list-style: none; margin: 0; padding: 0; overflow-wrap: anywhere; } .category-tree ul { list-style: none; margin: 0 0 0 0.6rem; padding: 0 0 0 1.1rem; } .category-tree li { position: relative; margin: 0; padding: 0.2rem 0; line-height: 1.4; color: var(--ink); } .category-tree ul > li::before { content: ""; position: absolute; left: -1.1rem; top: 0; bottom: 0; border-left: 1px solid var(--text-faint); } .category-tree ul > li:last-child::before { bottom: auto; height: 0.95rem; } .category-tree ul > li::after { content: ""; position: absolute; left: -1.1rem; top: 0.95rem; width: 0.8rem; border-top: 1px solid var(--text-faint); } .category-tree a.category-tree-name { color: var(--ink); text-decoration: none; } .category-tree a.category-tree-name:hover { color: var(--link-hover-fg); text-decoration: underline; } .category-tree .category-tree-branch > a.category-tree-name, .category-tree .category-tree-branch > details > summary > a.category-tree-name { font-weight: 700; } .category-tree .category-tree-leaf > a.category-tree-name { font-weight: 400; } .category-tree .category-tree-count { display: inline-block; margin-left: 0.35rem; padding: 0 0.45rem; border: 1px solid var(--hairline); border-radius: 999px; background: var(--wash-mid); color: var(--text-muted); font-size: max(10px, 0.7rem); font-weight: 700; vertical-align: 0.1em; } .category-tree .category-tree-types { margin-left: 0.35rem; color: var(--text-muted); font-size: max(10px, 0.85rem); } .category-tree .category-tree-group-chip { display: inline-block; margin-left: 0.35rem; padding: 0 0.5rem; border: 1px solid var(--link-fg); border-radius: 999px; color: var(--link-fg); font-size: max(10px, 0.7rem); font-weight: 600; vertical-align: 0.1em; text-decoration: none; } .category-tree .category-tree-group-chip:hover { background: var(--wash-mid); } .category-group-flag { color: var(--text-muted); font-size: max(10px, 0.85rem); } .category-group-key-warning { margin: 0.75rem 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--warn-fg); color: var(--warn-fg); font-size: max(10px, 0.85rem); line-height: 1.4; } .category-group-key-warning p { margin: 0.25rem 0; } .category-group-key-warning ul { margin: 0.25rem 0; padding-left: 1.2rem; } .category-tree-fold > summary { position: relative; display: block; list-style: none; padding-left: 1.2rem; cursor: pointer; } .category-tree-fold > summary::-webkit-details-marker { display: none; } .category-tree-fold > summary::marker { content: ""; } .category-tree-fold > summary::before { content: ""; position: absolute; left: 0.35rem; top: 0.45em; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform 0.15s ease; } .category-tree-fold > summary:hover::before { border-color: var(--link-hover-fg); } .category-tree-fold > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .category-tree-fold[open] > summary::before { transform: rotate(45deg); } .category-tree-roots > li.category-tree-leaf { padding-left: 1.2rem; } .category-tree-controls { margin-bottom: 0.5rem; } .category-tree-roots > li { padding: 0.5rem 0; border-top: 1px solid var(--hairline); } .category-tree-roots > li:first-child { border-top: 0; } .item-card-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .item-card { display: flex; flex-direction: column; height: 300px; background: var(--surface-bg); border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--ink); } .item-card:hover { border-color: var(--link-fg); } .item-card.is-deleted { border-style: dashed; } .item-card-image { height: 110px; flex: 0 0 auto; background: var(--wash); color: var(--text-faint); display: flex; align-items: center; justify-content: center; overflow: hidden; } .item-card-image.has-thumbnail { background: var(--canvas-worktop); padding: 6px; } .item-card-thumbnail { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .item-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 14px 16px; } .item-card-category { flex: 0 0 auto; display: inline-flex; align-items: center; background: var(--wash-strong); color: var(--ink); font-size: max(10px, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 20px; margin-bottom: 9px; align-self: flex-start; } .item-card-category-row { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; } .item-card-category-row .item-card-category { margin-bottom: 0; } .item-card-version { font-family: Lato, otallatin, arial, helvetica, sans-serif; font-size: max(10px, 0.6875rem); font-weight: 700; color: var(--text-faint); white-space: nowrap; } .item-card-name { flex: 0 0 auto; font-family: "Calistoga", Georgia, serif; font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-card-name.is-deleted { color: var(--text-disabled); text-decoration: line-through; } .item-card-stats { flex: 0 0 auto; font-size: max(10px, 0.75rem); color: var(--text-muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-card-stats.is-deleted { color: var(--text-disabled); } .item-card-description { flex: 0 0 auto; font-size: max(10px, 0.75rem); color: var(--text-muted); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .item-card-amount { flex: 0 0 auto; margin-top: 10px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; } .item-card-amount-value { font-family: "Calistoga", Georgia, serif; font-size: 1.25rem; color: var(--ink); } .item-card-amount-sources { font-size: max(10px, 0.6875rem); color: var(--text-faint); margin-left: 2px; } .item-card-amount-line { flex-basis: 100%; margin-left: 0; } .item-card-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline-soft); } .item-card-avatar { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: var(--selected-bg); color: var(--selected-fg); display: flex; align-items: center; justify-content: center; font-size: max(10px, 0.5625rem); font-weight: 900; } .item-card-avatar.is-deleted { background: var(--text-disabled); color: var(--surface-bg); } .item-card-meta { font-size: max(10px, 0.6875rem); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-card-compact-list { display: flex; flex-direction: column; gap: 8px; } .item-card-compact { display: flex; align-items: center; gap: 14px; background: var(--surface-bg); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 16px; text-decoration: none; color: var(--ink); } .item-card-compact:hover { border-color: var(--link-fg); } .item-card-compact.is-deleted { border-style: dashed; } .item-card-compact-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; background: var(--wash); color: var(--text-faint); display: flex; align-items: center; justify-content: center; overflow: hidden; } .item-card-compact-icon.has-thumbnail { background: var(--canvas-worktop); padding: 3px; } .item-card-compact-body { flex: 1 1 auto; min-width: 0; } .item-card-compact-title-row { display: flex; align-items: center; gap: 8px; } .item-card-compact-name { font-family: "Calistoga", Georgia, serif; font-size: 0.9375rem; } .item-card-compact-name.is-deleted { color: var(--text-disabled); text-decoration: line-through; } .item-card-compact-category { display: inline-flex; background: var(--wash-strong); color: var(--ink); font-size: max(10px, 0.625rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 20px; flex: 0 0 auto; } .item-card-compact-meta { font-size: max(10px, 0.75rem); color: var(--text-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-card-compact-meta.is-deleted { color: var(--text-disabled); } .ri-group { margin-bottom: 22px; } .ri-group:last-child { margin-bottom: 0; } .ri-group > div.fieldset { padding-left: 12px; } .ri-group-title { margin: 4px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); font-family: "Calistoga", Georgia, serif; font-size: 1.125rem; font-weight: 400; color: var(--ink); } .fieldset .field-element.batch-ing-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; } .fieldset .field-element.batch-ing-row > label { flex: 1 1 12rem; width: auto; min-width: 0; padding: 0; } .fieldset .field-element.batch-ing-row > div { flex: 0 1 auto; width: auto; max-width: 100%; } @media (max-width: 640px) { .fieldset .field-element.batch-ing-row { flex-direction: column; align-items: stretch; gap: 4px; } .fieldset .field-element.batch-ing-row > label { flex: 0 0 auto; } .fieldset .field-element.batch-ing-row > div { width: 100%; } } .ri-card-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .ri-card { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--surface-bg); border: 1px solid var(--hairline); border-radius: 8px; } .ri-card.is-deleted { border-style: dashed; } .ri-row-clickable { cursor: pointer; } .ri-row-list { display: flex; flex-direction: column; gap: 6px; } .ri-step-with-children { display: flex; flex-direction: column; gap: 6px; } .ri-row-list-nested { margin-left: 20px; padding-left: 12px; border-left: 2px solid var(--hairline); } .ri-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 6px 12px; background: var(--surface-bg); border: 1px solid var(--hairline); border-radius: 8px; } .ri-row.is-deleted { border-style: dashed; } .ri-row .ri-name-block { flex: 1 1 160px; min-width: 0; } .ri-row .ri-amount { flex: 0 0 auto; } .ri-row .ri-keys { flex: 1 1 100%; order: 3; } .ri-name { display: block; font-family: "Calistoga", Georgia, serif; font-size: max(10px, 0.8125rem); line-height: 1.3; color: var(--ink); text-decoration: none; border-bottom: 0; } .ri-name:hover { color: var(--link-hover-fg); border-bottom: 0; } .ri-name.is-deleted { color: var(--text-disabled); text-decoration: line-through; } .ri-nickname { font-size: max(10px, 0.6875rem); color: var(--text-faint); } .ri-amount { display: flex; align-items: center; gap: 4px; } .ri-amount .sel-unit-helper-amount { font-family: "Calistoga", Georgia, serif; font-size: max(10px, 0.8125rem); color: var(--ink); } .ri-amount select.sel-unit-helper-unit { min-width: 80px; padding: 2px 5px; font-size: max(10px, 0.6875rem); line-height: 1.3; border-radius: 5px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--ink); box-shadow: none; } .ri-percentages { margin-top: 10px; overflow-x: auto; } .ri-percentages table { margin-bottom: 0; } .ri-percentages th, .ri-percentages td { padding: 6px 12px; vertical-align: middle; } .ri-percentages .ri-percentage { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .ri-percentages .ri-no-weight { color: var(--text-muted); font-style: italic; } .ri-percentages tfoot td { font-weight: 700; border-top: 1px solid var(--hairline); } .ri-gravity { margin-top: 16px; } .ri-gravity .ri-gravity-figures { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 8px; } .ri-gravity .ri-gravity-figures dt { font-size: max(10px, 0.6875rem); color: var(--text-faint); } .ri-gravity .ri-gravity-figures dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } .ri-gravity .ri-gravity-source { display: block; font-weight: 400; font-size: max(10px, 0.6875rem); color: var(--text-faint); } .ri-gravity .ri-gravity-figures dd.ri-gravity-missing { font-weight: 400; font-style: italic; color: var(--text-muted); max-width: 30ch; } .ri-gravity .ri-gravity-hops { margin-top: 10px; } .ri-gravity .ri-gravity-note { margin: 6px 0 0; color: var(--text-faint); font-size: max(10px, 0.75rem); } .ri-gravity .ri-gravity-leftout { margin: 2px 0 0; padding-left: 18px; font-size: max(10px, 0.75rem); } .ri-gravity .ri-gravity-leftout .ri-no-weight { color: var(--text-muted); font-style: italic; } .ri-keys { font-size: max(10px, 0.625rem); color: var(--text-faint); } .ri-keys div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ri-name-row { display: flex; align-items: center; gap: 8px; } .ri-thumbnail { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; background: var(--surface-bg); border: 1px solid var(--hairline); } .ri-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 4px; border: 1px solid var(--hairline); color: var(--text-muted); } .ri-step-number { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: var(--chrome-navy-bg); color: var(--chrome-navy-fg); font-size: max(10px, 0.625rem); font-weight: 900; } .ri-description { font-size: max(10px, 0.75rem); color: var(--text-muted); line-height: 1.4; } .ri-description b { color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-color: var(--text-faint); text-decoration-thickness: 1px; text-underline-offset: 2px; } .ri-row .ri-description { flex: 1 1 100%; order: 3; } .ri-name-block .ri-description { margin-top: 2px; } .ri-name-block.ri-step-head { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; } .ri-name-block.ri-step-head > .ri-step-icon, .ri-name-block.ri-step-head > .ri-thumbnail { grid-row: 1/span 2; grid-column: 1; align-self: start; width: 40px; height: 40px; } .ri-name-block.ri-step-head > .ri-step-icon { font-size: 1.125rem; } .ri-name-block.ri-step-head > .ri-name { grid-column: 2; grid-row: 1; } .ri-name-block.ri-step-head > .ri-description { grid-column: 2; grid-row: 2; } .ri-name-block.ri-step-head.ri-step-head-no-desc > .ri-step-icon, .ri-name-block.ri-step-head.ri-step-head-no-desc > .ri-thumbnail { grid-row: 1; } .ri-name-block.ri-step-head.ri-step-head-no-desc > .ri-name { align-self: center; } .ri-drag-handle { display: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; color: var(--text-faint); cursor: grab; touch-action: none; user-select: none; } .ri-drag-handle:hover { background: var(--wash-mid); color: var(--ink); } .ri-drag-handle:focus-visible { outline: 2px solid var(--focus-ring); } @media (min-width: 641px) { .ri-move .ri-drag-handle { display: inline-flex; } .ri-move .ri-drag-handle ~ a { display: none; } } .ri-row.is-dragging { position: relative; z-index: 2; cursor: grabbing; box-shadow: 0 0 0 3px var(--wash-strong); } .ri-child-groups { display: flex; flex-wrap: wrap; gap: 4px; } .ri-child-groups span { display: inline-flex; background: var(--wash-strong); color: var(--ink); font-size: max(10px, 0.625rem); font-weight: 700; padding: 2px 8px; border-radius: 20px; } .ri-row .ri-child-groups { flex: 1 1 100%; order: 4; } .ri-move { display: flex; flex: 0 0 auto; gap: 2px; order: -1; } .ri-move a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border-bottom: 0; color: var(--text-faint); text-decoration: none; } .ri-move a:hover { background: var(--wash-mid); border-bottom: 0; color: var(--ink); } .ri-move a.is-disabled { color: var(--text-disabled); cursor: default; pointer-events: none; } .ri-move a.is-disabled:hover { background: none; } .ri-edit { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; margin-left: auto; border-radius: 6px; border-bottom: 0; color: var(--text-faint); text-decoration: none; } .ri-edit:hover { background: var(--wash-mid); border-bottom: 0; color: var(--ink); } .ri-row .ri-edit { margin-left: 0; } .ri-ident { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } .ri-ident > .ri-thumbnail { width: 36px; height: 36px; } .ri-ident-text { flex: 1 1 auto; min-width: 0; } .ri-name-row > .ri-name { min-width: 0; } .ri-row-list .ri-row, .ri-card-grid-list .ri-card { transition: transform 0.25s ease; } .list-card-style-toggle { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px; border-radius: 10px; background: var(--wash-mid); } .list-card-style-toggle button { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; border: 0; border-radius: 7px; background: none; box-shadow: none; color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .list-card-style-toggle button .list-card-style-icon { font-size: max(10px, 0.8125rem); } .list-card-style-toggle button:hover { background: var(--wash-strong); color: var(--ink); } .list-card-style-toggle button.is-active { background: var(--selected-bg); color: var(--selected-fg); box-shadow: var(--shadow-toggle-active); } .list-card-style-toggle button.is-active:hover { background: var(--selected-bg); color: var(--selected-fg); } .stock-cost-partial { color: var(--warn-fg); } .stock-unit-cost { margin-left: 6px; color: var(--text-muted); white-space: nowrap; } .brand-location-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .brand-location-card { display: flex; gap: 12px; padding: 14px 16px; background: var(--surface-bg); border: 1px solid var(--hairline); border-radius: 10px; color: var(--ink); } .brand-location-card.is-deleted { border-style: dashed; } .brand-location-card-image { flex: 0 0 auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--wash); color: var(--text-faint); overflow: hidden; } .brand-location-card-image.has-thumbnail { background: var(--canvas-worktop); padding: 4px; } .brand-location-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .brand-location-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .brand-location-card-name { font-weight: 600; color: var(--ink); text-decoration: none; } .brand-location-card-name:hover { color: var(--link-hover-fg); text-decoration: underline; } .brand-location-card-name.is-deleted { text-decoration: line-through; } .brand-location-card-badges { display: flex; flex-wrap: wrap; gap: 6px; } .brand-location-badge { padding: 2px 8px; border-radius: 999px; background: var(--wash-mid); color: var(--text-muted); font-size: max(10px, 0.6875rem); line-height: 1.6; white-space: nowrap; } .brand-location-card-details { display: flex; flex-direction: column; gap: 4px; font-size: max(10px, 0.8125rem); } .brand-location-detail { display: flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; } .brand-location-detail i { flex: 0 0 auto; width: 14px; margin-top: 3px; color: var(--text-faint); font-size: max(10px, 0.75rem); text-align: center; } .brand-location-detail a { color: var(--link-fg); } .brand-location-detail.is-muted { color: var(--text-muted); font-style: italic; } .artwork-preview { display: flex; align-items: center; justify-content: center; max-width: 420px; padding: 12px; margin: 12px 0; background: var(--surface-bg); border: 1px solid var(--hairline); border-radius: 8px; } .artwork-preview svg { width: 100%; height: auto; max-height: 420px; } .artwork-preview[data-material=copper] { color: var(--material-copper); } .artwork-preview[data-material=stainless] { color: var(--material-stainless); } .artwork-preview[data-material=glass] { color: var(--material-glass); } .artwork-preview[data-material=silicone] { color: var(--material-silicone); } .artwork-preview[data-material=plastic] { color: var(--material-plastic); } .artwork-material-switcher button { text-transform: capitalize; } .artwork-review-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; } .artwork-review-facts dt { font-weight: 700; color: var(--text-muted); } .artwork-review-facts dd { margin: 0; } .ri-type-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--wash-strong); color: var(--text-muted); font-size: max(10px, 0.625rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .fieldset .field-element > div.ri-unit-field { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .ri-accepts .ri-accepts-title { margin: 0 0 6px 0; } .ri-accepts .ri-accepts-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 12px 0; padding: 0; } .ri-accepts .ri-accepts-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--wash-strong); color: var(--text-fg); } .ri-accepts .ri-accepts-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; } .ri-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0; color: var(--text-muted); } .ri-nudge[hidden] { display: none; } @media (max-width: 640px) { .ri-nudge { flex-direction: column; align-items: stretch; } } .field-element .ri-unit-choice[hidden] { display: none; } .fieldset .field-element[hidden] { display: none; } .field-element .ri-unit-choice { display: flex; flex-wrap: wrap; gap: 8px 20px; } .field-element .ri-unit-choice label { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0; cursor: pointer; } .search-type-toggle { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 12px; list-style: none; } .search-type-toggle a { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--field-border); background: var(--surface-raised); color: var(--ink); font-size: max(10px, 0.8125rem); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--field-border); } .search-type-toggle a:hover { border-color: var(--field-border-hover); } .search-type-toggle a.is-active { color: var(--selected-fg); background: var(--selected-bg); border-color: transparent; } .search-type-toggle a.type-recipe.is-active { background: var(--type-recipe-accent); color: var(--accent-pill-fg); } .search-type-toggle a.type-ingredient.is-active { background: var(--type-ingredient-accent); color: var(--accent-pill-fg); } .search-type-toggle a.type-equipment.is-active { background: var(--type-equipment-accent); color: var(--accent-pill-fg); } .search-type-toggle a.type-user.is-active { background: var(--type-user-accent); color: var(--accent-pill-fg); } .search-type-toggle a.type-inventory.is-active { background: var(--type-ingredient-accent); color: var(--accent-pill-fg); } .search-result-card { border-left: 4px solid transparent; } .search-result-card .item-card-image i { font-size: 28px; } .search-result-card.type-recipe { border-left-color: var(--type-recipe-accent); } .search-result-card.type-ingredient { border-left-color: var(--type-ingredient-accent); } .search-result-card.type-equipment { border-left-color: var(--type-equipment-accent); } .search-result-card.type-user { border-left-color: var(--type-user-accent); } .search-result-card.type-inventory { border-left-color: var(--type-ingredient-accent); } .editor-element { display: block; position: absolute; z-index: 100; width: 200px; } .editor-element.connection { position: absolute; z-index: 2; color: var(--canvas-ink-muted); } .editor-element.connection.approved { color: var(--canvas-ink); } .editor-element.connection.deleted { color: var(--canvas-ink-danger); opacity: 0.85; } .editor-element.connection .display-element { position: absolute; left: 0; top: 50%; width: 100%; height: 100%; min-height: 22px; transform: translateY(-50%); cursor: move; background: transparent; border: 0; z-index: 2; } .editor-element.connection:not(.has-angle) .display-element { background: var(--wash-strong); border: 1px solid var(--hairline); } .editor-element.connection.has-angle .display-element::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed currentColor; transform: translateY(-50%); } .editor-element.connection.has-angle.approved .display-element::before { border-top-style: solid; border-top-width: 3px; } .editor-element.connection.has-angle.deleted .display-element::before { border-top-style: dotted; } .editor-element.connection.has-angle::before, .editor-element.connection.has-angle::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; pointer-events: none; } .editor-element.connection.has-angle::before { left: 0; } .editor-element.connection.has-angle::after { left: 100%; } .editor-element.connection .connector-art { position: absolute; left: 0; width: 100%; height: 16px; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 1; } .editor-element.connection .connector-art.is-outward { bottom: 100%; top: auto; } .editor-element.connection .connector-art.is-inward { top: 100%; bottom: auto; } .editor-element.connection .flow-element { position: absolute; left: 50%; top: 50%; width: 32px; height: 14px; margin-top: -7px; transform: rotate(-90deg); transform-origin: 0 50%; pointer-events: none; z-index: 3; line-height: 14px; font-size: 14px; text-align: right; } .editor-element.connection .flow-element::before { content: ""; position: absolute; left: 0; right: 9px; top: 50%; border-top: 2px solid currentColor; transform: translateY(-50%); } .editor-element.connection .flow-element.is-in { transform: rotate(90deg); } .editor-display { display: block; height: 700px; position: relative; border: 1px solid var(--canvas-worktop-edge); overflow: scroll; border-radius: 6px; box-shadow: inset 0 0 20px var(--canvas-worktop-edge); background-color: var(--canvas-worktop); background-image: radial-gradient(var(--hairline) 1px, transparent 0); background-size: 20px 20px; } .editor-display svg.connector { position: absolute; } .editor-display .connector-control { height: 20px; width: 20px; border: 1px solid var(--canvas-control-border); position: absolute; background: var(--canvas-control-bg); color: var(--canvas-control-fg); padding: 3px; border-radius: 5px; display: inline-block; } .editor-display .connector-control.rotate-element { right: -25px; top: -23.3333333333px; cursor: grab; } .editor-display .connector-control.view-element { left: -25px; top: 50%; margin-top: -10px; cursor: pointer; } .editor-display .connector-control svg { float: left; } .editor-display .display-element { display: block; width: 100%; height: 100%; } .editor-display .connection.is-rotating .rotate-element { cursor: grabbing; } .editor-display .rotate-readout { position: absolute; left: 50%; top: 50%; padding: 2px 6px; border: 1px solid var(--hairline); border-radius: 3px; background: var(--surface-raised); color: var(--ink); font-size: 11px; line-height: 1.4; white-space: nowrap; box-shadow: var(--shadow-toggle-active); pointer-events: none; z-index: 10; } .editor-display .rotate-readout.is-snapping { border-color: var(--accent); } .editor-menu { position: absolute; top: 10px; left: 10px; display: inline-block; z-index: 100; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--hairline); } .editor-menu ul { margin: 0; padding: 0; } .editor-menu ul li { list-style: none; margin: 0; padding: 0; display: inline-block; } .editor-menu ul li a { padding: 12px; display: inline-block; border-bottom: 0; text-align: center; } .editor-menu ul li a span { display: block; font-size: max(10px, 60%); } .editor-menu ul li button { padding: 12px; display: inline-block; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; font: inherit; text-align: center; cursor: pointer; } .editor-menu ul li button:hover { background: var(--wash-mid); color: inherit; } ul.dropdown-list { list-style: none; margin: 0; padding: 0; } ul.dropdown-list li { list-style: none; margin: 0; padding: 0; } ul.dropdown-list li a { display: block; padding: 6px; border-bottom: 0; } ul.dropdown-list li a svg { margin-right: 6px; } ul.dropdown-list li:hover { background: var(--wash-soft); } .insert-candidate-picker { padding: 6px; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 6px; } .insert-candidate-picker .step-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 9px 6px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface-raised); border-bottom: 1px solid var(--hairline); color: var(--text-fg); text-decoration: none; transition: border-color 0.12s ease, background-color 0.12s ease; } .insert-candidate-picker .step-card:hover, .insert-candidate-picker .step-card:focus-visible { border-color: var(--link-fg); background: var(--wash-soft); color: var(--text-fg); } .insert-candidate-picker .step-card-icon { font-size: 1.75rem; color: var(--accent); } .insert-candidate-picker .step-card-heading { font-weight: 600; } .insert-candidate-picker .step-card-blurb { font-size: max(10px, 85%); color: var(--text-muted); text-wrap: balance; } .insert-candidate-picker .step-card-disabled { cursor: not-allowed; background: var(--wash-faint); border-style: dashed; padding-top: 2.25rem; } .insert-candidate-picker .step-card-disabled .step-card-icon, .insert-candidate-picker .step-card-disabled .step-card-heading, .insert-candidate-picker .step-card-disabled .step-card-blurb { color: var(--text-muted); } .insert-candidate-picker .step-card-disabled:hover, .insert-candidate-picker .step-card-disabled:focus-visible { border-color: var(--hairline); background: var(--wash-faint); } .insert-candidate-picker .step-card-banner { position: absolute; top: 0; left: 0; right: 0; padding: 0.2rem 0.4rem; border-top-left-radius: 8px; border-top-right-radius: 8px; background: var(--wash-strong); color: var(--text-muted); font-size: max(10px, 70%); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; } .insert-candidate-picker .step-card-selector { display: none; } .editor-display[data-editor-type=kit] { overflow: hidden; } .editor-display[data-editor-type=kit].is-pannable { cursor: grab; } .editor-display[data-editor-type=kit].is-panning { cursor: grabbing; } .kit-world { transform-origin: 0 0; width: 0; height: 0; } .kit-join-line { position: absolute; height: 0; border-top: 2px dashed var(--accent); opacity: 0.8; pointer-events: none; } .kit-piece { background-repeat: no-repeat; background-size: 100% 100%; outline: 1px solid transparent; } .kit-piece:hover { outline-color: var(--hairline); } .kit-piece.no-artwork { outline: 1px dashed var(--hairline); background-color: var(--wash-soft); border-radius: 6px; } .kit-piece.unavailable { filter: grayscale(1) opacity(0.55); outline: 1px dashed var(--warn-fg); } .kit-piece.unavailable::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, transparent 0 7px, var(--hairline) 7px 9px); } .kit-piece .kit-piece-control { position: absolute; width: 22px; height: 22px; padding: 3px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface-raised); color: var(--text-fg); text-align: center; line-height: 1; opacity: 0; transition: opacity 0.12s ease-in-out; z-index: 2; } .kit-piece:hover .kit-piece-control, .kit-piece .kit-piece-control:focus { opacity: 1; } .kit-piece .kit-remove { top: -11px; left: -11px; color: var(--danger-fg); opacity: 1; } .kit-piece.doomed { outline: 3px solid var(--danger-fg); opacity: 0.5; } .kit-piece.doomed::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--danger-fg) 6px 8px); opacity: 0.45; } .kit-port-add { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); z-index: 3; cursor: pointer; } .kit-port-add:hover, .kit-port-add:focus { box-shadow: 0 0 0 4px var(--wash-strong); } .kit-piece-selector .kit-candidate-group { padding: 12px 4px 4px 4px; font-size: max(10px, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .kit-piece-selector .kit-candidate-thumb { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 6px; background-color: var(--wash-mid); background-repeat: no-repeat; background-position: center; background-size: contain; } .kit-piece-selector .kit-candidate-thumb.is-empty { border: 1px dashed var(--hairline); } .kit-piece-selector .kit-picker-source-action { padding: 14px 4px 4px 4px; border-top: 1px solid var(--hairline-soft); margin-top: 12px; } .kit-piece-selector .kit-picker-source-action:empty { display: none; } .kit-piece-selector .kit-picker-source { display: inline-flex; align-items: center; gap: 8px; font-size: max(10px, 0.8125rem); font-weight: 600; } .editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; } .editor-toolbar > label { margin: 0; } .editor-toolbar select { min-width: 0; max-width: 100%; } .sel-add-kit-piece { display: inline-flex; align-items: center; gap: 8px; font-size: max(10px, 0.8125rem); font-weight: 600; white-space: nowrap; } .kit-port { position: absolute; border-radius: 6px; border: 1px solid var(--hairline); background: var(--wash-mid); z-index: 1; } .kit-port:hover { border-color: var(--accent); } .kit-port::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 24px; min-height: 24px; } .kit-port.joined { background: var(--wash-strong); border-style: double; border-width: 3px; cursor: pointer; } .kit-port.candidate { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent); animation: kit-port-pulse 1.1s ease-in-out infinite; } @keyframes kit-port-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent); } 50% { box-shadow: 0 0 0 7px var(--accent); } } @media (prefers-reduced-motion: reduce) { .kit-port.candidate { animation: none; box-shadow: 0 0 0 5px var(--accent); } } .kit-piece[data-material=copper] { color: var(--material-copper); } .kit-piece[data-material=stainless] { color: var(--material-stainless); } .kit-piece[data-material=glass] { color: var(--material-glass); } .kit-piece[data-material=silicone] { color: var(--material-silicone); } .kit-piece[data-material=plastic] { color: var(--material-plastic); } .kit-piece-artwork { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .batch-tree-canvas { display: block; position: relative; height: 700px; border: 1px solid var(--hairline); border-radius: 6px; overflow: scroll; background-color: var(--surface-raised); } .batch-tree-svg-canvas { position: absolute; left: 0; top: 0; min-height: 100%; min-width: 100%; background-image: radial-gradient(var(--hairline) 1px, transparent 0); background-size: 20px 20px; } svg.batch-tree-connector { position: absolute; } svg.batch-tree-connector path { fill: none; stroke: var(--text-faint); stroke-width: 1.5px; } .batch-tree-menu { position: absolute; top: 10px; left: 10px; z-index: 100; background: var(--surface-raised); color: var(--text-fg); border-radius: 6px; box-shadow: var(--shadow-toggle-active); } .batch-tree-menu ul { margin: 0; padding: 0; } .batch-tree-menu ul li { list-style: none; margin: 0; padding: 0; display: inline-block; } .batch-tree-menu ul li a { padding: 6px; display: inline-block; border-bottom: 0; text-align: center; color: var(--ink); } .batch-tree-menu ul li a span { display: block; font-size: max(10px, 60%); } .batch-tree-menu ul li a:hover { color: var(--link-hover-fg); } .batch-tree-node { position: relative; display: block; background: var(--surface-raised); color: var(--text-fg); border-radius: 8px; box-shadow: var(--shadow-toggle-active); border-left: 4px solid var(--hairline); padding: 6px 9px; font-family: inherit; text-align: left; position: absolute; width: 220px; z-index: 10; } .batch-tree-node.batch-tree-node--recipe { border-left-color: var(--progress-current); } .batch-tree-node.batch-tree-node--adjuster { border-left-color: var(--ink); } .batch-tree-node.batch-tree-node--measurement { border-left-color: var(--progress-in-progress); } .batch-tree-node.batch-tree-node--output { border-left-color: var(--progress-done); width: 200px; } .batch-tree-node.batch-tree-node--start { width: 180px; border-left: 2px dashed var(--hairline); box-shadow: none; text-align: center; } .batch-tree-node.batch-tree-node--start a, .batch-tree-node.batch-tree-node--start itemselector { display: inline-block; border-bottom: 0; } .batch-tree-node-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; } .batch-tree-node-header--with-delete { padding-right: 32px; } .batch-tree-node-label { display: block; font-size: max(10px, 0.625rem); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); } .batch-tree-node--recipe .batch-tree-node-label { color: var(--toolbar-btn-fg); } .batch-tree-node--adjuster .batch-tree-node-label { color: var(--ink); } .batch-tree-node--measurement .batch-tree-node-label { color: var(--warn-fg); } .batch-tree-node--output .batch-tree-node-label { color: var(--ok-fg); } .batch-tree-node-name { display: block; font-size: max(10px, 0.8125rem); font-weight: 600; color: var(--ink); margin-top: 2px; } .batch-tree-node-edit-link { font-size: max(10px, 0.6875rem); color: var(--link-fg); text-decoration: none; white-space: nowrap; flex-shrink: 0; border-bottom: 0; } .batch-tree-node-edit-link:hover { text-decoration: underline; } .batch-tree-node-delete { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border: none; background: none; color: var(--text-faint); font-size: max(10px, 0.75rem); line-height: 1; cursor: pointer; } .batch-tree-node-delete:hover { color: var(--ink); } .batch-tree-node-chips { list-style: none; margin: 3px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .batch-tree-node-chip { font-size: max(10px, 0.625rem); background: var(--wash-strong); color: var(--text-fg); padding: 2px 6px; border-radius: 10px; } .batch-tree-node-add { display: block; width: 100%; margin-top: 3px; padding: 3px; border: 1px dashed var(--hairline); border-radius: 6px; background: none; color: var(--link-fg); font-size: max(10px, 0.6875rem); text-align: center; cursor: pointer; } .batch-tree-node-add:hover { background: var(--wash-mid); } .batch-tree-node-choose { display: block; font-size: max(10px, 0.6875rem); color: var(--warn-fg); text-decoration: underline; border-bottom: 0; } .batch-tree-node-jars { display: inline-block; margin-top: 4px; font-size: max(10px, 0.75rem); color: var(--link-fg); text-decoration: underline; border-bottom: 0; } .batch-tree-node-warning { margin: 2px 0 0 0; font-size: max(10px, 0.6875rem); line-height: 1.3; color: var(--warn-fg); white-space: normal; } .batch-tree-node-warning a { color: var(--warn-fg); text-decoration: underline; border-bottom: 0; } .batch-tree-node-note { margin: 2px 0 0 0; font-size: max(10px, 0.6875rem); line-height: 1.3; color: var(--text-muted); white-space: normal; } .batch-make-layout { display: flex; gap: 12px; align-items: flex-start; } .batch-make-layout .batch-make-tree-details { flex: 1 1 0; min-width: 0; } .batch-make-layout .batch-make-tree-details > summary { display: none; } .batch-make-layout .batch-make-tree-pane { min-width: 0; overflow-x: auto; border: 1px solid var(--hairline); border-radius: 6px; padding: 12px; background: var(--surface-raised); } .batch-make-layout .batch-make-steps-pane { flex: 2 1 0; min-width: 0; border: 1px solid var(--hairline); border-radius: 6px; padding: 12px; background: var(--surface-raised); } @media (max-width: 900px) { .batch-make-layout { flex-direction: column; } .batch-make-layout .batch-make-tree-details, .batch-make-layout .batch-make-steps-pane { flex: 1 1 auto; width: 100%; } .batch-make-layout .batch-make-steps-pane { order: -1; } } @media (max-width: 640px) { .batch-make-layout .batch-make-tree-details > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: bold; } .batch-make-layout .batch-make-step-actions button { min-height: 44px; flex: 1 1 0; } .batch-make-layout .batch-make-step-actions .sel-make-complete-step, .batch-make-layout .batch-make-step-actions .sel-make-complete-module { flex: 1 1 100%; } .batch-make-layout .batch-make-timer-actions { flex: 1 1 100%; } .batch-make-layout .batch-make-timer-actions button { flex: 1 1 0; min-height: 44px; } } .batch-make-card { border: 1px solid var(--hairline); position: relative; display: block; background: var(--surface-raised); color: var(--text-fg); border-radius: 8px; box-shadow: var(--shadow-toggle-active); border-left: 4px solid var(--progress-current); padding: 6px 9px; font-family: inherit; text-align: left; padding: 9px 12px; margin-bottom: 6px; } .batch-make-card.batch-make-complete { border-left-color: var(--progress-done); } ul.batch-make-tree-root, ul.batch-make-tree-children { list-style: none; margin: 0; padding: 0; } ul.batch-make-tree-root .batch-make-tree-node, ul.batch-make-tree-children .batch-make-tree-node { position: relative; } ul.batch-make-tree-children.branching { padding-left: 24px; } .batch-make-tree-box { border: 2px solid transparent; position: relative; display: block; background: var(--surface-raised); color: var(--text-fg); border-radius: 8px; box-shadow: var(--shadow-toggle-active); border-left: 4px solid var(--hairline); padding: 6px 9px; font-family: inherit; text-align: left; display: inline-flex; align-items: center; gap: 6px; margin: 3px 0; font-size: max(10px, 90%); font-weight: normal; white-space: normal; color: var(--text-fg); box-shadow: var(--shadow-toggle-active); } .batch-make-tree-box:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .batch-make-tree-box.state-current { border-left-color: var(--progress-current); } .batch-make-tree-box.state-completed { border-left-color: var(--progress-done); } .batch-make-tree-box.active { border-top-color: var(--ink); border-right-color: var(--ink); border-bottom-color: var(--ink); } .batch-make-tree-box.clickable { cursor: pointer; } .batch-make-tree-box.clickable:hover { filter: brightness(0.97); } .batch-make-tree-box:not(.clickable) { cursor: default; } .batch-make-tree-box-text { display: flex; flex-direction: column; line-height: 1.25; } .batch-make-tree-subtext { font-size: max(10px, 80%); opacity: 0.75; } .batch-make-tree-amount { display: inline-block; padding: 3px 6px; margin: 3px 0; border-radius: 6px; font-size: max(10px, 80%); font-weight: bold; background: var(--surface-raised); color: var(--text-fg); border: 1px dashed var(--text-faint); } .batch-make-tree-amount.current, .batch-make-tree-amount.completed, .batch-make-tree-amount.in-progress { border-style: solid; background: var(--surface-raised); } .batch-make-tree-amount.current { border-color: var(--progress-current); } .batch-make-tree-amount.completed { border-color: var(--progress-done); } .batch-make-tree-amount.in-progress { border-color: var(--progress-in-progress); } ol.batch-make-step-list { padding-left: 12px; } ol.batch-make-step-list li { padding: 3px 0; } .batch-make-loop-title { font-weight: normal; } .batch-make-loop-step.is-pending > .batch-make-loop-title { color: var(--text-muted); } .batch-make-loop-step.is-pending > .batch-make-loop-title b { font-weight: normal; color: inherit; } .batch-make-loop-pass { font-weight: normal; color: var(--text-muted); } .batch-make-loop-met { margin-bottom: 3px; padding: 3px; border-left: 3px solid var(--ok-fg); background: var(--wash-soft); color: var(--text-fg); } .batch-make-loop-met i { color: var(--ok-fg); } ol.batch-make-loop-body { margin-top: 3px; border-left: 2px solid var(--hairline); } .batch-make-step-done { position: relative; color: var(--text-fg); } .batch-make-step-done b { font-weight: normal; color: inherit; } .batch-make-step-done i.fa-check { color: var(--progress-done-ink); } .batch-make-step-head > .batch-make-step-text { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; } .batch-make-step-head > .ri-step-icon { position: relative; } .batch-make-step-head > .ri-step-icon .batch-make-step-tick { position: absolute; right: -4px; bottom: -4px; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--hairline); font-size: 9px; } .batch-make-step-pending { color: var(--text-muted); } .batch-make-step-pending b { font-weight: normal; color: inherit; } .batch-make-step-done.is-minor, .batch-make-step-pending.is-minor { color: var(--text-muted); font-size: max(10px, 0.9em); } .batch-make-step-done.is-minor i.fa-check, .batch-make-step-pending.is-minor i.fa-check { color: var(--text-muted); } .batch-make-step-also { margin: 3px 0 0; font-size: max(10px, 0.9em); font-weight: normal; color: var(--text-muted); } .batch-make-step-current, ol.batch-make-step-list li.batch-make-step-current { background: var(--wash-mid); border-left: 4px solid var(--progress-current); border-radius: 0 6px 6px 0; padding: 6px 9px; margin: 3px 0; font-weight: bold; } .batch-make-step-current .batch-make-step-description, ol.batch-make-step-list li.batch-make-step-current .batch-make-step-description { margin-bottom: 6px; font-weight: normal; } .batch-make-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .batch-make-timer { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 6px 0; } .batch-make-timer .batch-make-timer-display { font-size: 150%; font-variant-numeric: tabular-nums; } .batch-make-timer .batch-make-timer-display.done { color: var(--warn-fg); } .batch-make-timer .batch-make-timer-actions { display: flex; gap: 6px; } .batch-make-timer-email { display: flex; align-items: center; flex-basis: 100%; gap: 3px; margin-top: 3px; font-size: max(10px, 90%); } .batch-make-timer-email input { margin: 0; } .batch-make-card-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 9px 0 0; } .batch-make-step-blocked-hint { display: block; margin-top: 3px; font-size: max(10px, 85%); color: var(--text-muted); } .sel-make-complete-step[aria-disabled=true], .sel-make-complete-module[aria-disabled=true] { opacity: 0.5; cursor: not-allowed; } .batch-make-module-summary { background: var(--wash-mid); border-left: 4px solid var(--progress-current); border-radius: 0 6px 6px 0; padding: 6px 9px; margin: 0 0 9px 0; } .batch-make-branch-picker { margin-top: 12px; } .batch-make-branch-picker p { font-weight: bold; margin-bottom: 6px; } .batch-make-branch-picker .batch-make-branch-picker-buttons { display: flex; flex-wrap: wrap; gap: 6px; } .batch-make-branch-picker button { flex: 0 0 auto; text-align: left; } .batch-make-readings { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--hairline); min-width: 0; } .batch-make-readings .batch-make-readings-panel { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .batch-make-readings .measurement-chart, .batch-make-readings svg { max-width: 100%; } .batch-make-readings .batch-make-readings-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .batch-make-readings .batch-make-readings-head h4 { margin: 0; } .batch-make-readings .batch-make-readings-head .batch-make-readings-latest { color: var(--text-muted); } .batch-make-readings .batch-make-readings-head .batch-make-readings-full { margin-left: auto; display: inline-flex; align-items: center; } @media (max-width: 640px) { .batch-make-readings .batch-make-readings-head .batch-make-readings-full { min-height: 44px; } } .batch-make-readings .batch-make-reading-latest { display: flex; flex-wrap: wrap; gap: 3px 9px; margin: 0; } .batch-make-readings .batch-make-step-actions { margin: 0; } .batch-make-store-choice p { margin: 0 0 6px 0; } .batch-make-store-choice .batch-make-store-choice-error { color: var(--danger-fg); } .batch-make-output-amount { margin: 9px 0; } .batch-make-output-amount label { display: block; margin-bottom: 3px; } .batch-make-output-amount .batch-make-output-amount-inputs .select-combine { flex-wrap: nowrap; } .batch-make-output-amount .batch-make-output-amount-inputs .select-combine input.sel-unit-helper-amount { flex: 1 1 auto; width: auto; min-width: 0; box-sizing: border-box; } .batch-make-output-amount .batch-make-output-amount-inputs .select-combine select.sel-unit-helper-unit { flex: 0 0 auto; max-width: 100%; } .batch-make-output-amount .field-hint { margin: 3px 0 0 0; } .batch-make-output-amount .batch-make-output-amount-error { margin: 3px 0 0 0; color: var(--danger-fg); } .batch-make-callout { background: var(--wash-mid); border-left: 4px solid var(--warn-fg); border-radius: 0 6px 6px 0; color: var(--text-fg); padding: 6px 9px; margin: 0 0 9px 0; } .key-steps-toggle { margin: 0 0 9px 0; } .key-steps-toggle button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-align: left; white-space: normal; } @media (max-width: 640px) { .key-steps-toggle button { width: 100%; justify-content: flex-start; } } .measurement-chart { margin-bottom: 12px; color: var(--text-fg); } .chart-series-1 { color: var(--chart-1); } .chart-series-2 { color: var(--chart-2); } .chart-series-3 { color: var(--chart-3); } .chart-series-4 { color: var(--chart-4); } .chart-series-5 { color: var(--chart-5); } .measurement-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 6px; padding: 0; list-style: none; } .measurement-chart-legend li { display: flex; align-items: baseline; gap: 3px; } .measurement-chart-legend strong { color: var(--text-fg); } .measurement-chart-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: currentColor; align-self: center; } .measurement-chart-body { display: flex; align-items: stretch; gap: 3px; } .measurement-chart-axes { display: flex; gap: 3px; flex: 0 0 auto; } .measurement-chart-axes:empty { display: none; } .measurement-chart-axis { display: flex; flex-direction: column; justify-content: space-between; height: 160px; padding: 0 3px; border-left: 2px solid currentColor; font-size: max(10px, 0.6875rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .measurement-chart-axes:last-child .measurement-chart-axis { border-left: none; border-right: 2px solid currentColor; text-align: right; } .measurement-chart-plot { display: block; flex: 1 1 auto; min-width: 0; height: 160px; background-color: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 6px; } .measurement-chart-og { color: var(--text-muted); } .measurement-chart-marker { color: var(--text-muted); } .measurement-chart-marker-list { margin: 3px 0 0; padding-left: 12px; } .measurement-chart-time { display: flex; justify-content: space-between; margin-top: 3px; } .measurement-chart-summary { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; color: var(--text-muted); } .measurement-chart-summary strong { color: var(--text-fg); } .measurement-chart-summary span:not(:last-child)::after { content: "·"; margin-left: 12px; color: var(--text-muted); } .filter-toggle-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--field-border); background: var(--surface-raised); color: var(--ink); font-weight: 700; font-size: max(10px, 0.8125rem); cursor: pointer; box-shadow: none; } .filter-toggle-button i { font-size: max(10px, 0.75rem); } .filter-toggle-button:hover { background-color: var(--wash-mid); border-color: var(--field-border-hover); box-shadow: none; } .filter-toggle-button.is-active { background: var(--selected-bg); border-color: var(--selected-border); color: var(--selected-fg); box-shadow: none; } .connector-menu .filters { border-bottom: 1px solid var(--hairline); padding-bottom: 6px; margin-bottom: 6px; } .connector-menu .filters label { display: inline-block; padding-right: 6px; } .connector-menu .filters input { font-size: 1rem; padding: 6px; line-height: unset; } .connector-menu .filters input[type=button] { font-size: 0.875rem; padding: 6px; line-height: unset; } .connector-menu .paging { border-top: 1px solid var(--hairline); padding-top: 6px; margin-top: 6px; } .connector-menu .paging span, .connector-menu .paging a { display: inline-block; } .connector-menu .paging span:first-child, .connector-menu .paging a:first-child { margin-right: 6px; } .item-selector { position: relative; } .item-selector .selector-search-row { display: flex; align-items: center; gap: 8px; padding: 14px 20px 0 20px; } .item-selector .selector-search-row input[type=search] { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-fg); font-size: 1rem; } .item-selector .selector-search-row input[type=search]:hover { border-color: var(--field-border-hover); } .item-selector .selector-search-row input[type=search]:focus { background: var(--field-focus-bg); border-color: var(--focus-ring); outline: none; } .item-selector .selector-search-row .selector-search-button { flex: 0 0 auto; min-width: 0; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--field-border); background: var(--surface-raised); color: var(--text-fg); font-weight: 700; font-size: max(10px, 0.8125rem); cursor: pointer; box-shadow: none; } .item-selector .selector-search-row .selector-search-button:hover { background-color: var(--wash-mid); border-color: var(--field-border-hover); box-shadow: none; } .item-selector .filter-toggle-row { padding: 12px 20px; display: flex; align-items: center; gap: 10px; } .item-selector .filter-toggle-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .item-selector .filter-toggle-actions:empty { display: none; } .item-selector .unselect-button { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--field-border-hover); background: var(--surface-raised); color: var(--text-fg); font-weight: 700; font-size: max(10px, 0.8125rem); cursor: pointer; } .item-selector .unselect-button:hover { border-color: var(--selected-border); background: var(--wash); } .item-selector .item-selector-filter .toolbar { display: none; } .item-selector .item-selector-filter.is-open .toolbar { display: block; } .item-selector .filter-summary { padding: 0 20px 12px 20px; font-size: max(10px, 0.8125rem); color: var(--text-muted); } .item-selector .filter-summary:empty { display: none; padding: 0; } .item-selector .filter-summary strong { color: var(--text-fg); } .item-selector .selector-summary { padding: 14px 20px 4px 20px; font-size: max(10px, 0.75rem); color: var(--text-muted); } .item-selector .category-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-left: -8px; } .item-selector .category-back-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border-radius: 8px; border: 1px solid var(--field-border-hover); background-color: var(--surface-raised); color: var(--text-fg); font-size: max(10px, 0.8125rem); font-weight: 700; line-height: 1; box-shadow: none; } .item-selector .category-back-button i, .item-selector .category-back-button svg { font-size: max(10px, 0.75rem); color: var(--text-muted); } .item-selector .category-back-button:hover { background-color: var(--wash-mid); border-color: var(--field-border-hover); box-shadow: none; } .item-selector .category-back-button:hover i, .item-selector .category-back-button:hover svg { color: var(--text-fg); } .item-selector .category-back-button:active { background-color: var(--wash-strong); box-shadow: none; } .item-selector .category-back-button:focus { box-shadow: none; } .item-selector .category-back-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .item-selector .category-crumbs { flex: 1 1 12rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; list-style: none; margin: 0; padding: 0; font-size: max(10px, 0.8125rem); } .item-selector .category-crumbs li { display: inline-flex; align-items: center; min-width: 0; list-style: none; margin: 0; padding: 0; } .item-selector .category-crumbs li + li::before { content: "›"; padding: 0 4px; color: var(--text-faint); } .item-selector .category-crumb { display: inline; padding: 4px 6px; border: 0; border-radius: 6px; background-color: transparent; color: var(--text-muted); font-size: max(10px, 0.8125rem); font-weight: 600; line-height: 1.3; text-align: left; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; white-space: normal; overflow-wrap: anywhere; box-shadow: none; } .item-selector .category-crumb:hover { background-color: var(--wash); color: var(--text-fg); text-decoration-color: currentColor; box-shadow: none; } .item-selector .category-crumb:active { background-color: var(--wash-mid); box-shadow: none; } .item-selector .category-crumb:focus { box-shadow: none; } .item-selector .category-crumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .item-selector .category-crumb-current { padding: 4px 6px; color: var(--text-fg); font-weight: 700; overflow-wrap: anywhere; } .item-selector .category-crumb-gap { padding: 4px 2px; color: var(--text-faint); } .item-selector .selector-groups { padding-bottom: 8px; } .item-selector .selector-group-heading { padding: 8px 20px 4px 20px; font-size: max(10px, 0.75rem); font-weight: 700; text-transform: uppercase; color: var(--text-muted); } .item-selector .selector-group-tag { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--hairline); border-radius: 999px; font-size: max(10px, 0.6875rem); font-weight: 700; color: var(--text-muted); white-space: nowrap; } .item-selector .search-results { min-height: 400px; position: relative; } .item-selector .search-results .loading { display: none; } .item-selector .search-results .loading > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-faint); } .item-selector .selector-list { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 4px 12px 12px 12px; margin: 0; list-style: none; } .item-selector .selector-list li { list-style: none; margin: 0; padding: 0; } .item-selector .selector-list li.selector-group-heading { padding: 6px 2px 2px 2px; border-bottom: 1px solid var(--hairline); font-size: max(10px, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .item-selector .selector-list a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface-raised); color: var(--text-fg); text-decoration: none; font-size: 0.875rem; } .item-selector .selector-list a .fa-plus { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--wash-mid); color: var(--text-muted); font-size: max(10px, 0.625rem); } .item-selector .selector-list a:hover { border-color: var(--link-fg); background: var(--wash-faint); } .item-selector .selector-list a:hover .fa-plus { background: var(--selected-bg); color: var(--selected-fg); } .item-selector .selector-list .selector-item-empty { color: var(--text-muted); font-style: italic; padding: 12px; cursor: default; } .item-selector .selector-list .selector-item-parent { display: grid; grid-template-columns: auto 1fr; gap: 0; align-items: stretch; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface-raised); overflow: hidden; } .item-selector .selector-list .selector-item-parent > a, .item-selector .selector-list .selector-item-parent > a:hover { border: 0; background: transparent; border-radius: 0; } .item-selector .selector-list .selector-item-parent:hover { border-color: var(--link-fg); background: var(--wash-faint); } .item-selector .selector-list .selector-item-parent > .selector-item-choose { align-items: center; justify-content: center; padding: 12px; border-right: 1px solid var(--hairline); } .item-selector .selector-list .selector-item-open { align-items: center; min-width: 0; } .item-selector .selector-list .selector-item-open .fa-folder { flex: 0 0 auto; color: var(--text-muted); } .item-selector .selector-list .selector-item-open .selector-item-chevron { flex: 0 0 auto; margin-left: auto; padding-left: 8px; color: var(--text-faint); font-size: max(10px, 0.75rem); } .item-selector .selector-list .selector-item-open span { min-width: 0; overflow-wrap: anywhere; } .item-selector .selector-list .selector-group-start { margin-top: 10px; } .item-selector .selector-list .selector-item.is-selected:not(.selector-item-parent) > a, .item-selector .selector-list .selector-item-parent.is-selected { border-color: var(--selected-border); background: var(--wash-soft); } .item-selector .selector-list .selector-item.is-selected .fa-check { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--selected-bg); color: var(--selected-fg); font-size: max(10px, 0.625rem); } .item-selector .selector-list .selector-item-body { min-width: 0; flex: 1 1 auto; } .item-selector .selector-list .selector-item-name { font-weight: 700; } .item-selector .selector-list .selector-item-version { margin-left: 6px; font-size: max(10px, 0.6875rem); font-weight: 700; color: var(--text-faint); white-space: nowrap; } .item-selector .selector-list .selector-item-description { margin-top: 4px; font-size: max(10px, 0.75rem); font-weight: 400; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .item-selector .selector-list .selector-item-thumb { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 8px; background: var(--wash); color: var(--text-faint); font-size: 1.125rem; display: flex; align-items: center; justify-content: center; overflow: hidden; } .item-selector .selector-list .selector-item-thumb.has-thumbnail { background: var(--canvas-worktop); padding: 3px; } .item-selector .selector-list .selector-item-thumb img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .item-selector .toolbar { margin-bottom: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--hairline-faint); padding: 16px 20px; } .item-selector .toolbar ul li label { display: block; line-height: 1.4; font-size: max(10px, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; } .item-selector .toolbar itemselector, .item-selector .toolbar categoryselector { display: block; width: 100%; } .item-selector .toolbar itemselector a, .item-selector .toolbar categoryselector a { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 160px; padding: 8px 10px; font-size: max(10px, 0.8125rem); line-height: 1.3; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-fg); box-shadow: none; text-decoration: none; } .item-selector .toolbar itemselector a::after, .item-selector .toolbar categoryselector a::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2L6.5 5L3.5 8' stroke='%238092a0' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; } .item-selector .toolbar itemselector a:hover, .item-selector .toolbar categoryselector a:hover { border-color: var(--field-border-hover); color: var(--field-fg); } .item-selector .toolbar itemselector a:focus-visible, .item-selector .toolbar categoryselector a:focus-visible { outline: none; border-color: var(--focus-ring); background: var(--field-focus-bg); } .create { padding: 0; } .create a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: max(10px, 0.8125rem); border: 1px solid var(--accent); text-decoration: none; white-space: nowrap; } .create a i { font-size: max(10px, 0.6875rem); } .create a:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .calculation-editor-trigger { white-space: nowrap; } .calc-editor { padding: 12px; box-sizing: border-box; } .calc-editor .calc-editor-input { width: 100%; box-sizing: border-box; min-height: 220px; resize: vertical; background: var(--field-bg); color: var(--field-fg); border: 1px solid var(--field-border); border-radius: 8px; box-shadow: none; font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size: 1rem; line-height: 1.65; padding: 12px; tab-size: 2; white-space: pre; } .calc-editor .calc-editor-helper, .calc-editor .calc-editor-enum-hint { margin-top: 12px; background: var(--wash); border: 1px solid var(--hairline); border-radius: 8px; box-sizing: border-box; overflow-y: auto; } .calc-editor .calc-editor-helper { height: 128px; padding: 9px 12px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .calc-editor .calc-editor-enum-hint { height: 52px; padding: 6px 9px; display: flex; flex-direction: column; justify-content: center; } .calc-editor .calc-editor-empty { color: var(--text-muted); font-size: max(10px, 0.8125rem); font-style: italic; } .calc-editor .calc-editor-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size: max(10px, 0.6875rem); color: var(--text-muted); padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px dashed var(--hairline); } .calc-editor .calc-editor-breadcrumb .crumb-sep { opacity: 0.5; } .calc-editor .calc-editor-breadcrumb .crumb.is-current { color: var(--ink); font-weight: 700; } .calc-editor .calc-editor-primary { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: max(10px, 0.8125rem); } .calc-editor .calc-editor-primary .fn-name { font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-weight: 700; color: var(--link-fg); } .calc-editor .calc-editor-primary .fn-arity { font-size: max(10px, 0.6875rem); color: var(--text-muted); font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; } .calc-editor .calc-editor-desc { font-size: max(10px, 0.75rem); color: var(--text-muted); line-height: 1.4; } .calc-editor .calc-editor-secondary { display: flex; align-items: baseline; gap: 9px; font-size: max(10px, 0.75rem); padding-top: 6px; margin-top: 2px; border-top: 1px dashed var(--hairline); } .calc-editor .calc-editor-secondary .param-name { font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-weight: 600; } .calc-editor .calc-editor-secondary .param-types { font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size: max(10px, 0.6875rem); color: var(--ink); background: var(--type-pill-bg); padding: 1px 6px; border-radius: 3px; } .calc-editor .calc-editor-hint-label { font-size: max(10px, 0.6875rem); color: var(--text-muted); margin-bottom: 6px; } .calc-editor .calc-editor-hint-label code { font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; background: var(--wash-strong); padding: 0 4px; border-radius: 3px; } .calc-editor .calc-editor-chips { display: flex; flex-wrap: wrap; gap: 5px; } .calc-editor .calc-editor-chip { font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size: max(10px, 0.6875rem); background: var(--surface-raised); border: 1px solid var(--hairline); color: var(--text-muted); padding: 2px 7px; border-radius: 999px; } .calc-editor .calc-editor-chip strong { color: var(--link-fg); font-weight: 700; } .calc-editor .calc-editor-errors { display: none; margin-top: 12px; padding: 6px 12px; border-radius: 8px; background: rgba(179, 38, 30, 0.08); color: #b3261e; font-size: max(10px, 0.75rem); } .calc-editor .calc-editor-errors.is-visible { display: block; } .calc-editor .calc-editor-errors ul { margin: 4px 0 0; padding-left: 18px; } .calc-editor-footer { display: flex; justify-content: flex-end; width: 100%; } file-upload, image-viewer { display: block; } div.images form { margin-bottom: 6px; } ul.images { padding: 0; margin: 0; } ul.images li { display: inline-block; margin-right: 6px; margin-bottom: 6px; } ul.images li > div a { width: 200px; height: 150px; display: inline-block; background-color: var(--wash-strong); background-repeat: no-repeat; background-position: center center; background-size: contain; border: 0; } ul.images li > div a:hover { border: 0; } .dragdrop-field { max-width: 200px; border: 1px dashed darkblue; text-align: center; padding: 18px; } .dragdrop-field.highlight { background: lightblue; } .image-main-choice { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: max(10px, 0.75rem); color: var(--text-muted); cursor: pointer; } .image-main-choice input[disabled] { cursor: wait; } .image-delete-row { margin-top: 6px; } .image-main-none { margin-top: 10px; } figure.image-large { margin: 0 0 6px; } figure.image-large img { display: block; max-width: 100%; height: auto; } figure.image-large figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--text-muted); overflow-wrap: anywhere; } .image-credit-choice { margin-bottom: 6px; } .image-credit-choice label { display: flex; align-items: center; gap: 6px; } .image-url-import .image-url-message { color: var(--danger-fg); margin: 0; } .version-map { display: flex; flex-direction: column; align-items: center; align-items: safe center; gap: 4px; overflow-x: auto; } .version-branch { display: flex; flex-direction: column; align-items: center; align-items: safe center; } .version-tree { display: flex; flex-direction: column; align-items: center; align-items: safe center; } .version-ancestor-more { font-size: max(10px, 0.75rem); color: var(--text-faint); font-style: italic; } .version-connector { color: var(--text-disabled); font-size: max(10px, 0.75rem); line-height: 1; padding: 2px 0; } .version-branch-row { display: flex; align-items: flex-start; justify-content: center; justify-content: safe center; gap: 24px; position: relative; padding-top: 14px; } .version-branch-row::before { content: ""; position: absolute; top: 0; left: calc(50% - (100% - 48px) / 2); right: calc(50% - (100% - 48px) / 2); height: 2px; background: var(--hairline); } .version-branch-col { display: flex; flex-direction: column; align-items: center; position: relative; } .version-branch-col::before { content: ""; width: 2px; height: 12px; background: var(--hairline); } .version-node { display: inline-flex; flex-direction: column; gap: 4px; background: var(--field-bg); border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 12px; min-width: 160px; } .version-node.is-viewing { border-color: var(--selected-border); box-shadow: 0 0 0 2px var(--changed-wash); } .version-node.is-deleted { opacity: 0.6; text-decoration: none; } .version-node.is-deleted .version-node-name { text-decoration: line-through; } .version-node-more { align-items: center; justify-content: center; background: transparent; border-style: dashed; } .version-node-more a { border-bottom: 0; font-size: max(10px, 0.8125rem); color: var(--text-faint); } .version-node-more a:hover { color: var(--ink); } .version-node-name { display: flex; align-items: baseline; gap: 6px; } .version-node-name .ri-thumbnail { align-self: center; } .version-node-name a { font-weight: 700; font-size: max(10px, 0.8125rem); border-bottom: 0; } .version-node-name a:hover { text-decoration: underline; } .version-node-name .version-node-current { font-weight: 700; font-size: max(10px, 0.8125rem); } .version-node-version { font-size: max(10px, 0.6875rem); color: var(--text-faint); font-weight: 700; white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; } .version-node-badges { display: flex; flex-wrap: wrap; gap: 4px; } .version-node-meta { font-size: max(10px, 0.6875rem); color: var(--text-faint); } .version-badge { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: max(10px, 0.625rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .version-badge-viewing { background: var(--selected-bg); color: var(--selected-fg); } .version-badge-clone { background: var(--wash-strong); color: var(--text-muted); } .version-badge-shared { background: var(--wash-strong); color: var(--text-muted); } .version-badge-published { background: var(--ok-wash); color: var(--ok-fg); } .version-badge-deleted { background: var(--danger-wash); color: var(--danger-fg); } .version-lineage-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .lineage-0 { background: var(--lineage-1); } .lineage-1 { background: var(--lineage-2); } .lineage-2 { background: var(--lineage-3); } .lineage-3 { background: var(--lineage-4); } .lineage-4 { background: var(--lineage-5); } .lineage-5 { background: var(--lineage-6); } .version-list { list-style: none; padding: 0; --version-indent-step: 14px; --version-list-bleed: 20px; margin: 0 calc(var(--version-list-bleed) * -1); } .version-list-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px var(--version-list-bleed); border-bottom: 1px solid var(--hairline-soft); transition: background-color 0.12s ease; } .version-list-row:last-child { border-bottom: 0; } .version-list-row:hover { background-color: var(--wash-mid); } .version-list-row.is-deleted { opacity: 0.6; text-decoration: none; } .version-list-row.is-deleted:hover { background-color: transparent; } .version-list-row.is-deleted .version-list-name { text-decoration: line-through; } .version-list-link { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 0; text-decoration: none; border-bottom: 0; } .version-list-link:hover { border-bottom: 0; } .version-list-label { font-size: max(10px, 0.75rem); font-weight: 700; color: var(--text-muted); white-space: nowrap; margin-left: calc(var(--depth, 0) * var(--version-indent-step)); width: calc((var(--version-label-chars, 6) + 3) * 1ch + max(var(--max-depth, 8) - var(--depth, 0), 0) * var(--version-indent-step)); flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; } .version-list-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .version-list-badges { display: flex; flex-wrap: wrap; gap: 4px; } .version-list-meta { font-size: max(10px, 0.75rem); color: var(--text-faint); margin-left: auto; white-space: nowrap; } .version-list-meta.is-wrapping { white-space: normal; flex: 1 1 100%; margin-left: 0; min-width: 0; } .share-link-list .version-list-row { border-bottom-color: var(--hairline); padding-block: 16px; } .version-list-row .button-row { margin: 0; } .share-link-row { flex-direction: column; align-items: stretch; gap: 10px; } .share-link-row .share-link-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .share-link-row .share-link-line form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .share-link-row .version-list-meta { margin-left: 0; } .share-link-text { flex: 1 1 12rem; min-width: 0; word-break: break-all; } @media (max-width: 640px) { .version-list { --version-indent-step: 8px; } .version-list-row { align-items: flex-start; gap: 4px 8px; padding-top: 12px; padding-bottom: 12px; } .version-list-link { flex: 1 1 100%; } .version-list-meta { margin-left: 0; } } .social-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .social-actions-spacer { flex-basis: 100%; height: 4px; } .social-actions-loading, .social-status-pending { color: var(--text-muted); font-size: max(10px, 0.8125rem); } .social-actions-links { margin: 12px 0 0; font-size: max(10px, 0.8125rem); } .comments-section .comment-thread { margin-top: 12px; } .comments-section > form textarea { width: 100%; min-height: 60px; } .comment { padding: 10px 0; border-bottom: 1px solid rgba(35, 61, 77, 0.16); } .comment .comment-replies > .comment:last-child { border-bottom: none; } .comment-meta { display: flex; align-items: baseline; gap: 8px; font-size: max(10px, 0.8125rem); } .comment-date { color: var(--text-muted); } .comment-edited { color: var(--text-faint); font-style: italic; } .comment-text { margin: 4px 0; white-space: pre-wrap; word-break: break-word; } .comment-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; font-size: max(10px, 0.8125rem); } .comment-actions details { background: none; border: none; border-radius: 0; margin-bottom: 0; overflow: visible; } .comment-actions details[open] { flex-basis: 100%; } .comment-actions details summary { display: inline; padding: 0; background: none; font-family: inherit; font-weight: inherit; font-size: inherit; color: #233d4d; cursor: pointer; list-style: none; } .comment-actions details summary::-webkit-details-marker { display: none; } .comment-actions details summary::after { content: none; } .comment-actions details summary:hover { text-decoration: underline; } .comment-actions details textarea { width: 100%; min-height: 50px; margin-top: 6px; } .comment-delete-form { display: inline; } .comment-replies { margin-left: 24px; margin-top: 8px; border-left: 2px solid rgba(35, 61, 77, 0.16); padding-left: 12px; } .recipe-rating-section { margin: 16px 0; padding: 12px 16px; background: var(--surface-raised); color: var(--text-fg); border-radius: 8px; } .recipe-rating-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .recipe-rating-summary-text { color: var(--text-fg); font-size: 0.875rem; } .star-display { color: var(--star-fill); font-size: 1rem; letter-spacing: 2px; } .item-card-rating { display: flex; align-items: center; gap: 4px; margin: 2px 0; } .item-card-rating .star-display { font-size: max(10px, 0.75rem); letter-spacing: 1px; } .item-card-rating-count { color: var(--text-fg); font-size: max(10px, 0.75rem); opacity: 0.7; } .favourite-star { appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); line-height: 0; cursor: pointer; } .favourite-star svg { fill: none; stroke: currentColor; } .favourite-star:hover { color: var(--star-fill); } .favourite-star:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .favourite-star[aria-pressed=true] { color: var(--star-fill); } .favourite-star[aria-pressed=true] svg { fill: currentColor; } .item-card, .item-card-compact { position: relative; } .favourite-star.is-on-card { position: absolute; top: 8px; right: 8px; background: var(--surface-bg); border: 1px solid var(--hairline); } .favourite-star.is-on-compact-card { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); } .item-card-compact:has(.favourite-star.is-on-compact-card) { padding-right: 48px; } .favourite-star.is-heading { margin-left: 6px; vertical-align: middle; } .favourite-star.is-heading svg { width: 22px; height: 22px; } .pricing-toggle { display: flex; gap: 4px; justify-content: center; } .pricing-toggle button { min-width: 120px; background: transparent; color: var(--ink); border: 1px solid var(--field-border-hover); box-shadow: none; } .pricing-toggle button:hover { background: var(--wash-mid); color: var(--ink); } .pricing-toggle button.is-selected, .pricing-toggle button.is-selected:hover { background: var(--selected-bg); color: var(--selected-fg); border-color: var(--selected-border); } .pricing-toggle-hint { text-align: center; margin-top: 8px; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; } .pricing-card { display: flex; flex-direction: column; gap: 12px; position: relative; } .pricing-card-name { margin: 0; color: var(--ink); } .pricing-card-description { margin: 0; color: var(--text-fg); flex: 1 1 auto; } .pricing-card-price { font-size: 1.75rem; color: var(--ink); } .pricing-period { font-size: 0.875rem; color: var(--text-fg); } .paddle-price-table th { color: var(--ink); } .paddle-price-table td { vertical-align: top; } .paddle-price-sub { color: var(--text-fg); opacity: 0.7; margin-left: 4px; } .paddle-price-detail td { padding-top: 0; font-size: max(10px, 0.75rem); color: var(--text-fg); } .paddle-price-problem { color: var(--danger-fg); } .pricing-card-current { border-color: var(--current-plan-accent); border-width: 2px; box-shadow: 0 0 0 3px var(--current-plan-glow); } .pricing-card-badge { position: absolute; top: -10px; right: 12px; background: var(--current-plan-accent); color: var(--accent-pill-fg); font-size: max(10px, 0.6875rem); font-weight: 600; padding: 3px 8px; border-radius: 10px; } .sel-paddle-subscribe[disabled] { opacity: 0.6; cursor: default; } .plan-features { width: 100%; border-collapse: collapse; } .plan-features th, .plan-features td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--hairline); } .plan-features thead th { border-bottom: 2px solid var(--field-border); } .plan-features tbody th { font-weight: 600; } .plan-features .plan-features-current { background: var(--current-plan-wash); } .plan-features thead .plan-features-current { background: var(--current-plan-wash-strong); } .privacy-policy .privacy-toc { columns: 2 16em; } .privacy-policy h2 { margin-top: 1.5em; } .privacy-policy .privacy-table th, .privacy-policy .privacy-table td { vertical-align: top; } .privacy-policy .privacy-table thead th { border-bottom: 2px solid var(--hairline); } .calc-intro p { margin-top: 0; } .calc-units { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; } .calc-units a { padding: 2px 8px; border: 1px solid var(--hairline); border-radius: 4px; color: var(--link-fg); } .calc-units a.is-selected { background: var(--selected-bg); border-color: var(--selected-border); color: var(--selected-fg); font-weight: bold; } .calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; } .calc-card { scroll-margin-top: 16px; min-width: 0; overflow-wrap: anywhere; } .calc-card h2 { margin-top: 0; color: var(--ink); } .calc-card input[type=text], .calc-card select { max-width: 100%; } .calc-card-intro { color: var(--text-muted); margin-top: 0; } .calc-result { margin-top: 12px; } .calc-result:empty { display: none; } .calc-answer { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; padding: 8px 12px; background: var(--wash); border-left: 3px solid var(--link-fg); border-radius: 4px; } .calc-answer dt { color: var(--text-muted); } .calc-answer dd { margin: 0; } .calc-figure { font-size: 1.25em; font-weight: bold; color: var(--ink); } .calc-sub { font-size: max(10px, 0.8em); font-weight: normal; color: var(--text-muted); } .calc-error { margin: 0; padding: 8px 12px; color: var(--err-message-fg); background: var(--err-message-bg); border-radius: 4px; } .calc-notes { margin-top: 16px; } .calc-notes h2 { margin-top: 0; color: var(--ink); } .calc-notes p:last-child { margin-bottom: 0; } @media (max-width: 480px) { .calc-answer { grid-template-columns: 1fr; } .calc-answer dd { margin-bottom: 4px; } } .admin-area-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; } .admin-area-list li { list-style: none; margin: 0; padding: 0; } .admin-area-list a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--field-bg); color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--hairline); text-decoration: none; } .admin-area-list a:hover { border-color: var(--field-border-hover); color: var(--link-hover-fg); background: var(--wash-mid); } .admin-area-list i { width: 20px; text-align: center; color: var(--text-faint); flex: 0 0 auto; } .admin-area-list a:hover i { color: var(--link-hover-fg); } .admin-area-group + .admin-area-group { margin-top: 24px; } .admin-area-group-heading { margin: 0 0 10px; font-size: max(10px, 0.8125rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .menu-pending-badge { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto; border-radius: 999px; background: var(--notice-bg); color: var(--notice-fg); font-size: max(10px, 0.6875rem); font-weight: 900; line-height: 1; white-space: nowrap; flex: 0 0 auto; } .grid-menu .menu-pending-badge { margin-left: 8px; } .admin-area-list .menu-pending-badge { margin-left: auto; } .item-card-name .menu-pending-badge { margin-left: 8px; vertical-align: middle; } .key-usage-panel .key-usage { margin: 0; font-size: max(10px, 0.8125rem); color: var(--text-muted); } .key-usage-panel .key-usage i { margin-right: 6px; } .key-usage-panel .key-usage strong { color: var(--text-fg); } .key-usage-panel .key-usage-none { color: var(--text-fg); } .key-usage-panel .key-usage-note { margin-top: 6px; font-size: max(10px, 0.75rem); color: var(--text-faint); } .review-filters { display: flex; flex-direction: column; gap: 10px; } .review-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .review-filter-label { min-width: 3.5rem; font-size: max(10px, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .review-chip { display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--hairline); border-radius: 20px; background: var(--field-bg); color: var(--ink); font-size: max(10px, 0.8125rem); font-weight: 700; border-bottom: 1px solid var(--hairline); text-decoration: none; } .review-chip:hover { border-color: var(--field-border-hover); color: var(--link-hover-fg); } .review-chip.is-current { background: var(--selected-bg); border-color: var(--selected-border); color: var(--selected-fg); } .review-chip.is-current:hover { color: var(--selected-fg); } .review-list { list-style: none; padding: 0; margin: 0 -20px; } .review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hairline-soft); list-style: none; } .review-row:last-child { border-bottom: 0; } .review-row:not(.is-pending) { opacity: 0.65; } .review-main { flex: 1 1 260px; min-width: 0; } .review-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; color: var(--ink); } .review-type { font-size: max(10px, 0.6875rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .review-meta { margin-top: 4px; font-size: max(10px, 0.75rem); color: var(--text-muted); } .review-reason { margin-top: 6px; font-size: max(10px, 0.8125rem); font-style: italic; color: var(--text-muted); } .review-reject-form, .review-duplicate-form { display: flex; align-items: center; gap: 6px; } .review-reject-form .field-element, .review-duplicate-form .field-element { margin: 0; width: auto; flex: 1 1 auto; } .review-reject-form input[type=text], .review-duplicate-form input[type=text] { min-width: 0; width: 170px; padding: 7px 10px; font-size: 1rem; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-fg); box-shadow: none; } .review-empty { margin: 0; color: var(--text-muted); } @media (max-width: 640px) { .review-reject-form input[type=text], .review-duplicate-form input[type=text] { flex: 1 1 auto; width: auto; } } .duplicate-list { list-style: none; margin: 0; padding: 0; } .duplicate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); } .duplicate-row:last-child { border-bottom: 0; } .duplicate-main { min-width: 0; } .duplicate-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; color: var(--ink); word-break: break-word; } .duplicate-meta { margin-top: 2px; font-size: max(10px, 0.75rem); color: var(--text-muted); } .duplicate-flag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--wash-mid); color: var(--text-muted); font-size: max(10px, 0.625rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .duplicate-flag.is-nearby { background: var(--pending-tag-bg); color: var(--pending-tag-fg); } .did-you-mean { border-color: var(--pending-tag-border); } .did-you-mean-continue { margin: 10px 0 0; font-size: max(10px, 0.8125rem); color: var(--text-muted); } @media (max-width: 640px) { .duplicate-row { flex-direction: column; align-items: flex-start; } } .submission-badge-change { background: var(--notice-bg); color: var(--notice-fg); } .submission-detail-meta { font-size: max(10px, 0.8125rem); color: var(--text-muted); } .submission-detail-actions { margin-top: 10px; font-size: max(10px, 0.8125rem); } .submission-detail-actions a, .submission-detail-actions a:visited { color: var(--link-fg); text-decoration: none; } .submission-detail-actions a:hover { color: var(--link-hover-fg); text-decoration: underline; } .submission-detail-actions i { margin-right: 6px; } .submission-detail-warning { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--pending-tag-border); border-radius: 8px; background: var(--pending-tag-bg); color: var(--pending-tag-fg); font-size: max(10px, 0.8125rem); font-weight: 600; } .change-table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; } .change-table th { color: var(--text-faint); white-space: nowrap; } .change-table td { vertical-align: top; } .change-table tr.is-stale td { background: var(--pending-tag-bg); } .change-table tr.is-unknown td { background: var(--wash-mid); color: var(--text-muted); } .change-table tr.is-stale + tr.change-decision-row td { background: var(--pending-tag-bg); border-top: 0; } .change-field { font-weight: 700; color: var(--ink); white-space: nowrap; } .change-value { min-width: 10rem; max-width: 22rem; word-break: break-word; white-space: pre-line; color: var(--text-fg); } .change-flag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--pending-tag-border); color: var(--pending-tag-fg); font-size: max(10px, 0.625rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .change-flag.is-unknown { background: var(--wash-strong); color: var(--text-muted); } .change-decision-row td { display: table-cell; } .change-decision-label { margin-right: 10px; font-size: max(10px, 0.75rem); font-weight: 700; color: var(--text-muted); } .change-decision { display: inline-flex; align-items: center; gap: 5px; margin-right: 16px; font-size: max(10px, 0.8125rem); color: var(--text-fg); cursor: pointer; } .change-decision input[type=radio] { margin: 0; } .submission-review-link { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--accent); border-bottom: 1px solid var(--accent); border-radius: 8px; color: var(--accent); font-size: max(10px, 0.8125rem); font-weight: 700; text-decoration: none; white-space: nowrap; } .submission-review-link:hover { background: var(--accent); color: var(--accent-fg); } .submission-history { width: 100%; border-collapse: collapse; font-size: max(10px, 0.8125rem); } .submission-history th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--hairline); color: var(--text-muted); font-weight: 600; } .submission-history td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; } .submission-history tr:last-child td { border-bottom: 0; } .submission-history tr.is-pending td { background: var(--pending-tag-bg); } .submission-history .submission-history-reason { margin-top: 4px; color: var(--text-muted); font-style: italic; } .submission-history .submission-history-link a, .submission-history .submission-history-link a:visited { color: var(--link-fg); } .submission-history .submission-history-link a:hover { color: var(--link-hover-fg); } .submission-status-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hairline); font-size: max(10px, 0.75rem); white-space: nowrap; } .submission-status-tag.is-pending { border-color: var(--pending-tag-border); background: var(--pending-tag-bg); color: var(--pending-tag-fg); font-weight: 600; } .approval-locked-notice { margin-top: 6px; font-size: max(10px, 0.8125rem); color: var(--text-muted); } .approval-locked-notice i { margin-right: 6px; } .approval-locked-notice a, .approval-locked-notice a:visited { color: var(--link-fg); } .approval-locked-notice a:hover { color: var(--link-hover-fg); } .sku-list { list-style: none; margin: 0; padding: 0; } .sku-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); } .sku-row:last-child { border-bottom: 0; } .sku-row.is-discontinued .review-name { color: var(--text-muted); } .sku-row.is-deleted { opacity: 0.6; } .sku-row.is-deleted .review-name { color: var(--text-muted); text-decoration: line-through; } .sku-row.is-deleted .submission-status-tag { text-decoration: none; } .approval-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--pending-tag-border); border-radius: 999px; background: var(--pending-tag-bg); color: var(--pending-tag-fg); font-size: max(10px, 0.6875rem); font-weight: 700; line-height: 1.5; white-space: nowrap; text-decoration: none; vertical-align: middle; } .approval-tag i { font-size: max(10px, 0.625rem); } .approval-tag.is-child { border-color: var(--hairline); background: var(--wash-mid); color: var(--text-muted); font-weight: 600; } .item-card .approval-tag { margin-top: 4px; align-self: flex-start; } .item-card-compact-title-row .approval-tag { flex: 0 0 auto; } .item-card-compact-title-row:has(.approval-tag) { flex-wrap: wrap; } .approval-tag.is-heading { padding: 3px 11px; font-size: max(10px, 0.75rem); } td .approval-tag { margin-left: 8px; } @media (max-width: 640px) { .approval-tag.is-child { white-space: normal; } } .award-img { display: inline-block; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--wash-mid); border: 1px solid var(--hairline); } .award-img.is-large { width: 96px; height: 96px; } .award-level { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--wash-soft); color: var(--text-fg); font-size: max(10px, 0.75rem); font-weight: 700; line-height: 1.5; white-space: nowrap; } .award-note { color: var(--text-muted); font-size: max(10px, 0.75rem); } .award-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .award-head .award-head-body { flex: 1 1 240px; min-width: 0; } .award-progress { display: block; width: 100%; max-width: 280px; height: 8px; margin-top: 4px; border-radius: 999px; background: var(--wash-mid); overflow: hidden; } .award-progress > span { display: block; height: 100%; background: var(--accent); } .award-progress-text { color: var(--text-muted); font-size: max(10px, 0.8125rem); } .award-levels { list-style: none; margin: 0; padding: 0; } .award-levels li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--hairline-soft); } .award-levels li.is-held .award-level { background: var(--selected-bg); border-color: var(--selected-border); color: var(--selected-fg); } .award-count { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; color: var(--accent); font-size: max(10px, 0.8125rem); line-height: 1; white-space: nowrap; vertical-align: middle; } .batch-equipment-list { list-style: none; margin: 0; padding: 0; } .batch-equipment-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); } .batch-equipment-row:last-child { border-bottom: 0; } .batch-equipment-main { min-width: 0; } .batch-equipment-label { font-weight: 700; color: var(--ink); } .batch-equipment-current { margin-top: 2px; font-size: max(10px, 0.8125rem); color: var(--text-fg); } .batch-equipment-current.is-empty { color: var(--text-faint); font-style: italic; } .batch-equipment-form { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .batch-equipment-form select { min-width: 12rem; width: 16rem; max-width: 100%; } .batch-equipment-none { flex: 0 0 auto; font-size: max(10px, 0.8125rem); color: var(--text-muted); text-align: right; } @media (max-width: 640px) { .batch-equipment-row { flex-direction: column; align-items: stretch; } .batch-equipment-none { text-align: left; } .batch-equipment-form select { flex: 1 1 auto; min-width: 0; } } .batch-ingredient-stock { font-size: max(10px, 0.8125rem); color: var(--text-muted); } .batch-ingredient-stock.is-ok { color: var(--ok-fg); } .batch-ingredient-stock.is-warn { color: var(--warn-fg); } .batch-ingredient-stock.is-error { color: var(--danger-fg); } .batch-equipment-row.needs-attention { border-left: 3px solid var(--warn-fg); padding-left: 10px; } .batch-ingredient-topup-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 10px; font-size: max(10px, 0.6875rem); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warn-fg); border: 1px solid var(--warn-fg); } .batch-cost-summary .batch-cost-total { font-size: 1.125rem; font-weight: 600; color: var(--text-fg); } .batch-cost-summary .batch-cost-partial { display: inline-block; margin-left: 8px; font-size: max(10px, 0.8125rem); color: var(--warn-fg); } .batch-cost-line { color: var(--text-muted); } .batch-ingredient-group-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 0 12px; border-bottom: 1px solid var(--hairline); } .batch-ingredient-group-footer .batch-ingredient-tally { font-size: max(10px, 0.8125rem); color: var(--text-muted); } .batch-ingredient-amount-unit { font-size: max(10px, 0.8125rem); color: var(--text-muted); } .batch-ingredient-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: start; } .batch-ingredient-controls { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .batch-ingredient-controls .batch-equipment-none { text-align: left; } .batch-ingredient-controls .button-row { margin: 0; } .batch-ingredient-field { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 6.5rem; align-items: center; gap: 8px; margin: 0; } .batch-ingredient-field itemselector, .batch-ingredient-field categoryselector { display: block; width: 100%; } .batch-ingredient-field itemselector a, .batch-ingredient-field categoryselector a { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 160px; padding: 8px 10px; font-size: max(10px, 0.8125rem); line-height: 1.3; border-radius: 8px; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--field-fg); box-shadow: none; text-decoration: none; } .batch-ingredient-field itemselector a::after, .batch-ingredient-field categoryselector a::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 2L6.5 5L3.5 8' stroke='%238092a0' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; } .batch-ingredient-field itemselector a:hover, .batch-ingredient-field categoryselector a:hover { border-color: var(--field-border-hover); color: var(--field-fg); } .batch-ingredient-field itemselector a:focus-visible, .batch-ingredient-field categoryselector a:focus-visible { outline: none; border-color: var(--focus-ring); background: var(--field-focus-bg); } .batch-ingredient-field > button { width: 100%; margin: 0; } .batch-ingredient-field-label { font-weight: bold; font-size: max(10px, 80%); line-height: 1.3; color: var(--ink); } .batch-ingredient-amount { display: flex; align-items: center; gap: 8px; min-width: 0; } .batch-ingredient-amount input[type=number] { width: 110px; max-width: 100%; box-sizing: border-box; } .batch-ingredient-field .batch-ingredient-amount-readonly { grid-column: 2/-1; padding: 8px 0; font-size: max(10px, 0.8125rem); } .button-row.batch-ingredient-actions { margin: 0; gap: 8px; padding-left: calc(7.5rem + 8px); } .button-row.batch-ingredient-actions:not(:has(*)) { display: none; } @media (max-width: 640px) { .batch-ingredient-row { grid-template-columns: minmax(0, 1fr); } .batch-ingredient-field { grid-template-columns: minmax(0, 1fr) auto; } .batch-ingredient-field .batch-ingredient-field-label, .batch-ingredient-field .batch-ingredient-amount-readonly { grid-column: 1/-1; } .batch-ingredient-field > button { width: auto; } .button-row.batch-ingredient-actions { padding-left: 0; } } .water-compare { font-size: max(10px, 0.8125rem); color: var(--text-muted); margin-top: 4px; border-collapse: collapse; } .water-compare th, .water-compare td { padding: 2px 10px 2px 0; text-align: left; font-weight: normal; } .water-compare th { text-transform: none; letter-spacing: normal; font-size: inherit; } .water-compare thead th { color: var(--text-muted); } .water-compare .is-different { color: var(--warn-fg); font-weight: 600; } .batch-undo-form .batch-undo-selectall { margin-bottom: 0.5rem; } .batch-undo-form .batch-undo-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--hairline); border-radius: 4px; padding: 0 0.75rem 0.5rem; margin-bottom: 1rem; } .batch-undo-form .batch-undo-heading { margin: 0.75rem 0 0.25rem; font-size: 0.875rem; color: var(--text-fg); } .batch-undo-form .batch-undo-rows { list-style: none; margin: 0; padding: 0; } .batch-undo-form .batch-undo-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; padding: 0.25rem 0; border-top: 1px solid var(--hairline-faint); } .batch-undo-form .batch-undo-row label { display: flex; flex-wrap: wrap; gap: 0 0.5rem; flex: 1; cursor: pointer; } .batch-undo-form .batch-undo-row.is-blocked { color: var(--text-muted); } .batch-undo-form .batch-undo-row.is-blocked label { cursor: default; } .batch-undo-form .batch-undo-name { font-weight: 600; } .batch-undo-form .batch-undo-detail { color: var(--text-muted); } .batch-undo-form .batch-undo-reason { flex-basis: 100%; margin-left: 1.75rem; font-size: max(10px, 0.8125rem); color: var(--warn-fg); } .batch-changes .batch-changes-intro { margin: 0 0 12px; } .batch-changes .batch-changes-empty { color: var(--ok-fg); font-weight: 600; padding: 6px 0; } .batch-changes .batch-changes-empty i { margin-right: 6px; } .batch-changes .batch-changes-section { margin-bottom: 18px; } .batch-changes .batch-changes-section h2, .batch-changes .batch-changes-section h3 { margin: 0 0 6px; } .batch-changes-table { color: var(--text-fg); } .batch-changes-table th { text-align: left; font-weight: 700; color: var(--text-muted); } .batch-changes-table td { vertical-align: top; overflow-wrap: anywhere; } .batch-changes-table .batch-changes-item { font-weight: 600; color: var(--ink); } .batch-changes-table .batch-changes-type { display: block; color: var(--text-muted); font-size: max(10px, 0.75rem); } .batch-changes-table .batch-changes-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; font-size: max(10px, 0.6875rem); font-weight: 700; background: var(--wash-soft); color: var(--text-fg); } .batch-changes-table .batch-changes-before { color: var(--text-muted); } .batch-changes-table tr.is-changed .batch-changes-after, .batch-changes-table tr.is-added .batch-changes-after { color: var(--warn-fg); font-weight: 600; } .batch-changes-table tr.is-added .batch-changes-tag { color: var(--ok-fg); } .batch-changes-table tr.is-removed .batch-changes-tag { color: var(--danger-fg); } .batch-changes-table tr.is-removed .batch-changes-before { text-decoration: line-through; } @media (max-width: 640px) { .batch-changes-table thead { display: none; } .batch-changes-table tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--hairline-faint); } .batch-changes-table td { display: block; border: 0; padding: 2px 0; } .batch-changes-table .batch-changes-before::before { content: "Before: "; color: var(--text-muted); } .batch-changes-table .batch-changes-after::before { content: "After: "; color: var(--text-muted); font-weight: 400; } } .batch-summary .batch-summary-section { margin-bottom: 18px; } .batch-summary .batch-summary-section h2 { margin: 0 0 6px; } .batch-summary .batch-summary-section h3 { margin: 0 0 6px; } .batch-summary .batch-summary-section h4 { margin: 6px 0 4px; } .batch-summary .batch-summary-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 6px; } .batch-summary .batch-summary-facts dt { color: var(--text-muted); font-weight: 600; } .batch-summary .batch-summary-facts dd { margin: 0; color: var(--text-fg); } .batch-summary .batch-summary-description { white-space: pre-line; margin: 0; } .batch-summary .batch-summary-scroll { overflow-x: auto; max-width: 100%; } .batch-summary .batch-summary-chart { margin-bottom: 12px; } .batch-summary .batch-summary-loaded { margin-top: 12px; } .batch-summary-table { color: var(--text-fg); } .batch-summary-table > thead > tr > th { text-align: left; font-weight: 700; color: var(--text-muted); white-space: nowrap; } .batch-summary-table > tbody > tr > td { vertical-align: top; overflow-wrap: break-word; } .batch-summary-table > tbody > tr.has-detail > td { border-bottom: none; } .batch-summary-table > tbody > tr.batch-summary-detail > td { padding-top: 0; } .batch-summary-table .batch-summary-name { font-weight: 600; color: var(--ink); } .batch-summary-table .batch-summary-note { display: block; color: var(--text-muted); font-size: max(10px, 0.75rem); } .batch-summary-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; } .batch-summary-footer { display: none; align-items: center; gap: 12px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--hairline); color: var(--text-muted); font-size: max(10px, 0.75rem); } .batch-summary-footer img { width: 24px; height: 24px; } .batch-summary-footer .batch-summary-wordmark { font-weight: 700; color: var(--ink); margin-right: auto; } @page { margin: 15mm 12mm; } @media print { body:has(#pnlBatch_Summary:not(.hidden)) .grid-header, body:has(#pnlBatch_Summary:not(.hidden)) .grid-menu-backdrop, body:has(#pnlBatch_Summary:not(.hidden)) .grid-menu, body:has(#pnlBatch_Summary:not(.hidden)) .grid-sub-menu, body:has(#pnlBatch_Summary:not(.hidden)) #popupHolder, body:has(#pnlBatch_Summary:not(.hidden)) #alert_overlay, body:has(#pnlBatch_Summary:not(.hidden)) #alert_container, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .grid-header, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .grid-menu-backdrop, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .grid-menu, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .grid-sub-menu, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) #popupHolder, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) #alert_overlay, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) #alert_container { display: none !important; } body:has(#pnlBatch_Summary:not(.hidden)) .grid-container, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .grid-container { display: block; } body:has(#pnlBatch_Summary:not(.hidden)) main.grid-content, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) main.grid-content { margin: 0; padding: 0; } body:has(#pnlBatch_Summary:not(.hidden)) main.grid-content *:not(:has(.batch-summary)):not(.batch-summary):not(.batch-summary *), body:not(:has(#pnlBatch_Summary)):has(.batch-summary) main.grid-content *:not(:has(.batch-summary)):not(.batch-summary):not(.batch-summary *) { display: none !important; } body:has(#pnlBatch_Summary:not(.hidden)) .tab-panel, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .tab-panel { padding: 0; border: none; box-shadow: none; } body:has(#pnlBatch_Summary:not(.hidden)) .batch-summary-footer, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .batch-summary-footer { display: flex; } body:has(#pnlBatch_Summary:not(.hidden)) .batch-summary-scroll, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .batch-summary-scroll { overflow: visible; } body:has(#pnlBatch_Summary:not(.hidden)) .batch-summary-section, body:has(#pnlBatch_Summary:not(.hidden)) .batch-summary-run, body:has(#pnlBatch_Summary:not(.hidden)) .batch-summary-chart, body:has(#pnlBatch_Summary:not(.hidden)) .batch-summary-table tr, body:has(#pnlBatch_Summary:not(.hidden)) .water-compare, body:has(#pnlBatch_Summary:not(.hidden)) .measurement-chart, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .batch-summary-section, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .batch-summary-run, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .batch-summary-chart, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .batch-summary-table tr, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .water-compare, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .measurement-chart { break-inside: avoid; } body:has(#pnlBatch_Summary:not(.hidden)) h2, body:has(#pnlBatch_Summary:not(.hidden)) h3, body:has(#pnlBatch_Summary:not(.hidden)) h4, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) h2, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) h3, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) h4 { break-after: avoid; } body:has(#pnlBatch_Summary:not(.hidden)) .batch-summary a, body:not(:has(#pnlBatch_Summary)):has(.batch-summary) .batch-summary a { color: inherit; text-decoration: none; } } .batch-label { display: inline-flex; align-items: center; gap: 16px; padding: 16px; border: 1px dashed var(--hairline); background: var(--surface-raised); color: var(--text-fg); max-width: 100%; } .batch-label .batch-label-qr { flex: 0 0 auto; width: 160px; height: 160px; } .batch-label .batch-label-qr svg { display: block; width: 100%; height: 100%; } .batch-label .batch-label-text { min-width: 0; } .batch-label .batch-label-number { font-size: 1.6em; font-weight: 700; } .batch-label .batch-label-name { font-size: 1.1em; overflow-wrap: anywhere; } .batch-label .batch-label-url { margin-top: 6px; font-size: max(10px, 0.8em); color: var(--text-muted); overflow-wrap: anywhere; } @media print { body:has(.batch-label) * { visibility: hidden; } body:has(.batch-label) .batch-label, body:has(.batch-label) .batch-label * { visibility: visible; } body:has(.batch-label) .batch-label { position: absolute; left: 0; top: 0; border: none; } } .jar-page { --jar-class-colour: var(--text-faint); } .jar-page .jar-class-1 { --jar-class-colour: var(--danger-fg); } .jar-page .jar-class-2 { --jar-class-colour: var(--warn-fg); } .jar-page .jar-class-3 { --jar-class-colour: var(--ok-fg); } .jar-page .jar-class-4 { --jar-class-colour: var(--text-muted); } .jar-totals { position: relative; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .jar-totals th, .jar-totals td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--hairline); } .jar-totals th:first-child, .jar-totals td:first-child { text-align: left; } .jar-totals tfoot td, .jar-totals tfoot th { font-weight: 700; border-top: 2px solid var(--hairline); } .jar-totals .jar-totals-empty { color: var(--text-faint); } .jar-badge { display: inline-block; padding: 2px 10px; border: 2px solid var(--jar-class-colour); border-radius: 999px; color: var(--text-fg); font-weight: 700; font-size: max(10px, 0.9em); white-space: nowrap; } .jar-class-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; } .jar-class-picker legend { padding: 0; margin-bottom: 4px; } .jar-class-picker label { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; border: 2px solid var(--jar-class-colour); border-radius: 8px; background: var(--surface-raised); color: var(--text-fg); font-weight: 700; cursor: pointer; text-align: center; } .jar-class-picker { position: relative; } .jar-class-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; } .jar-class-picker input:checked + label { background: var(--jar-class-colour); border-color: var(--jar-class-colour); color: var(--surface-raised); } .jar-class-picker input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .jar-add-form .jar-entry-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .jar-add-form input[type=text], .jar-add-form input[type=number], .jar-add-form input[type=datetime-local], .jar-add-form select { min-height: 48px; font-size: 1.1em; } .jar-add-form .jar-volume-field { grid-column: 1/-1; } .jar-add-form .jar-volume-input .select-combine { flex-wrap: nowrap; } .jar-add-form .jar-volume-input .select-combine input.sel-unit-helper-amount { flex: 1 1 auto; width: auto; min-width: 0; } .jar-add-form .jar-volume-input .select-combine select.sel-unit-helper-unit { flex: 0 0 auto; } .jar-add-form .button-row input[type=submit], .jar-add-form .button-row .secondary { min-height: 52px; min-width: 160px; font-size: 1.1em; } .jar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .jar-row { border: 1px solid var(--hairline); border-left: 6px solid var(--jar-class-colour); border-radius: 6px; padding: 10px 12px; background: var(--surface-raised); } .jar-row.is-selected { outline: 2px solid var(--selected-border); } .jar-row .jar-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; } .jar-row .jar-number { font-size: 1.3em; font-weight: 700; } .jar-row .jar-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; } .jar-row .jar-notes { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .jar-row .row-actions { gap: 6px; margin: 8px 0 0; } .jar-row .jar-class-forms { display: flex; flex-wrap: wrap; gap: 6px; } .jar-row .jar-class-forms form { margin: 0; } .jar-row .jar-class-button { min-height: 44px; min-width: 44px; padding: 6px 12px; border: 2px solid var(--jar-class-colour); border-radius: 8px; background: var(--surface-raised); color: var(--text-fg); font-weight: 600; cursor: pointer; } .jar-row .jar-class-button[aria-pressed=true] { background: var(--jar-class-colour); color: var(--surface-raised); } .jar-row .jar-row-links { display: flex; gap: 12px; margin-left: auto; } .jar-row .jar-row-links a, .jar-row .jar-row-links button { min-height: 44px; display: inline-flex; align-items: center; } .jar-row .jar-goes-into { color: var(--text-muted); font-weight: 600; } .jar-row .jar-destination-forms { flex-basis: 100%; align-items: center; } .jar-row .jar-destination-label { color: var(--text-muted); font-size: max(10px, 0.9em); margin-right: 4px; } .jar-row .jar-destination-button { border-color: var(--selected-border); } .jar-row .jar-destination-button[aria-pressed=true] { background: var(--selected-bg); color: var(--selected-fg); } .jar-out-of-date { border-left: 6px solid var(--warn-fg); } .jar-out-of-date p { margin: 0; } .jar-blend h3, .jar-blend h4 { margin: 20px 0 8px; } .jar-blend .jar-suggestions { border: 1px dashed var(--hairline); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; } .jar-blend .jar-suggestions p, .jar-blend .jar-suggestions ul { margin: 0 0 8px; } .jar-blend .jar-suggestions form { margin: 0; } .jar-blend .jar-class-destinations { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .jar-blend .jar-class-destination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .jar-blend .jar-class-destination label { flex: 1 1 200px; } .jar-blend .jar-class-destination select { flex: 1 1 180px; min-height: 48px; min-width: 0; } .jar-blend .jar-blend-button { min-height: 48px; min-width: 120px; font-size: 1.05em; } .jar-blend .jar-set-plan, .jar-blend .jar-yield { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .jar-blend .jar-set-line { border-left: 4px solid var(--hairline); padding: 4px 0 4px 10px; } .jar-blend .jar-set-line.jar-set-state-1 { border-left-color: var(--ok-fg); } .jar-blend .jar-set-line.jar-set-state-3, .jar-blend .jar-set-line.jar-set-state-4 { border-left-color: var(--warn-fg); } .jar-blend .jar-set-line.jar-set-state-5 { border-left-color: var(--danger-fg); } .jar-blend .jar-set-note { display: block; color: var(--text-muted); font-size: max(10px, 0.9em); } .jar-blend .jar-set-refused { color: var(--danger-fg); font-weight: 600; } .jar-blend .jar-set-confirm { border: 2px solid var(--warn-fg); border-radius: 6px; padding: 10px 12px; } .jar-blend .jar-set-confirm ul { margin: 0 0 8px 18px; } .jar-inline { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface-raised); } .jar-inline .jar-inline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .jar-inline .jar-inline-head h3, .jar-inline .jar-inline-head h4 { margin: 0; } .jar-inline .jar-inline-head .jar-inline-count { color: var(--text-muted); } .jar-inline .jar-inline-head .jar-inline-full { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; } .jar-inline .jar-inline-status { margin: 8px 0; font-weight: 600; color: var(--ok-fg); } .jar-inline .jar-inline-status.jar-inline-error { color: var(--danger-fg); } .jar-inline .jar-inline-form { margin: 8px 0 12px; } .jar-inline .jar-inline-form .button-row { margin-top: 12px; } .jar-inline .jar-inline-form .jar-inline-add-button { width: 100%; min-height: 56px; font-size: 1.15em; } .jar-inline .jar-inline-recent { margin-bottom: 12px; } .jar-inline .jar-inline-totals { margin-top: 4px; } .jar-device-note { color: var(--text-muted); font-size: max(10px, 0.9em); margin-top: 4px; } @media (max-width: 640px) { .jar-add-form .jar-entry-row { grid-template-columns: 1fr 1fr; } .jar-add-form .jar-volume-field { grid-column: 1/-1; } .jar-add-form .button-row input[type=submit], .jar-add-form .button-row .secondary { width: 100%; } .jar-add-form input, .jar-add-form select, .jar-add-form textarea { max-width: 100%; box-sizing: border-box; } .jar-class-picker { grid-template-columns: 1fr 1fr; } .jar-class-picker label { min-height: 56px; } .jar-inline { padding: 8px; } .jar-inline .jar-inline-totals { display: block; overflow-x: auto; } .jar-row .jar-class-forms { flex: 1 1 100%; } .jar-row .jar-class-forms form { flex: 1 1 auto; } .jar-row .jar-class-button { min-height: 48px; width: 100%; } } .jar-chart, .jar-cuts { --jar-class-colour: var(--text-faint); } .jar-chart .jar-class-1, .jar-cuts .jar-class-1 { --jar-class-colour: var(--danger-fg); } .jar-chart .jar-class-2, .jar-cuts .jar-class-2 { --jar-class-colour: var(--warn-fg); } .jar-chart .jar-class-3, .jar-cuts .jar-class-3 { --jar-class-colour: var(--ok-fg); } .jar-chart .jar-class-4, .jar-cuts .jar-class-4 { --jar-class-colour: var(--text-muted); } .jar-chart { margin: 8px 0 16px; color: var(--text-fg); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .jar-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; padding: 0; list-style: none; } .jar-chart-legend li { display: flex; align-items: center; gap: 6px; } .jar-chart-legend strong { color: var(--text-fg); } .jar-chart-key { display: inline-block; width: 22px; height: 12px; position: relative; } .jar-chart-key::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 2px solid currentColor; } .jar-chart-key::after { content: ""; position: absolute; left: 6px; top: 1px; width: 10px; height: 10px; background: currentColor; } .jar-chart-key-abv::after { border-radius: 50%; } .jar-chart-key-temp::before { border-top-style: dashed; } .jar-chart-key-temp::after { transform: rotate(45deg) scale(0.8); } .jar-chart-cell-key { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; font-size: max(10px, 0.6875rem); font-weight: 700; } .jar-chart-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 4px; row-gap: 0; } .jar-chart-axis { display: flex; flex-direction: column; justify-content: space-between; height: 160px; padding: 0 4px; border-right: 2px solid currentColor; font-size: max(10px, 0.6875rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .jar-chart-axis:empty { border-right: none; padding: 0; } .jar-chart-axis-right { border-right: none; border-left: 2px solid currentColor; text-align: left; } .jar-chart-axis-right:empty { border-left: none; } .jar-chart-plot-wrap { position: relative; height: 160px; background-color: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; } .jar-chart-plot { display: block; width: 100%; height: 100%; } .jar-chart-band { fill: var(--jar-class-colour); fill-opacity: 0.16; stroke: var(--jar-class-colour); stroke-opacity: 0.55; stroke-width: 1; vector-effect: non-scaling-stroke; } .jar-chart-dot { position: absolute; width: 10px; height: 10px; transform: translate(-50%, 50%); background: currentColor; border: 2px solid var(--surface-raised); box-sizing: content-box; margin: -2px; } .jar-chart-dot-abv { border-radius: 50%; } .jar-chart-dot-temp { transform: translate(-50%, 50%) rotate(45deg); } .jar-chart-cell, .jar-chart-cell-key { border: 1px solid var(--jar-class-colour); border-top-width: 4px; border-radius: 2px; color: var(--text-fg); background-color: var(--surface-raised); background-size: 8px 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .jar-chart-strip { position: relative; height: 36px; margin-top: 4px; } .jar-chart-cell { position: absolute; top: 0; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; font-size: max(10px, 0.625rem); line-height: 1.1; font-variant-numeric: tabular-nums; } .jar-chart-cell-code { font-weight: 700; } .jar-chart-cell-jars { color: var(--text-muted); } .jar-chart-cell.jar-class-1, .jar-chart-cell-key.jar-class-1, .jar-chart-class.jar-class-1 .jar-chart-cell-key { background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--jar-class-colour) 45%, transparent) 0 2px, transparent 2px 6px); } .jar-chart-cell.jar-class-2, .jar-chart-class.jar-class-2 .jar-chart-cell-key { background-image: radial-gradient(color-mix(in srgb, var(--jar-class-colour) 60%, transparent) 1.5px, transparent 2px); } .jar-chart-cell.jar-class-3, .jar-chart-class.jar-class-3 .jar-chart-cell-key { background-image: linear-gradient(color-mix(in srgb, var(--jar-class-colour) 35%, transparent), color-mix(in srgb, var(--jar-class-colour) 35%, transparent)); } .jar-chart-cell.jar-class-4, .jar-chart-class.jar-class-4 .jar-chart-cell-key { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--jar-class-colour) 45%, transparent) 0 2px, transparent 2px 6px); } .jar-chart-cell.jar-class-0, .jar-chart-class.jar-class-0 .jar-chart-cell-key { border-style: dashed; border-top-style: dashed; } .jar-chart-x { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; } .jar-cuts .jar-cuts-heading { margin: 0 0 6px; } .jar-cuts .jar-cuts-note { color: var(--text-muted); font-size: max(10px, 0.75rem); margin: 6px 0 0; } .jar-cuts .jar-cuts-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .jar-cuts .jar-cuts-class { white-space: nowrap; } .jar-cuts .jar-cuts-notes { white-space: pre-wrap; overflow-wrap: anywhere; } .jar-cuts .jar-cuts-yield { margin: 6px 0 0; padding-left: 18px; } .jar-cuts .jar-badge { display: inline-block; padding: 0 8px; border: 2px solid var(--jar-class-colour); border-radius: 999px; color: var(--text-fg); font-weight: 700; font-size: max(10px, 0.75rem); } .jar-cuts .jar-cuts-sub { margin: 12px 0 4px; font-size: 0.875rem; color: var(--text-muted); } @media print { .batch-summary-section.jar-cuts-section { break-inside: auto !important; } .jar-chart, .jar-cuts-totals, .jar-cuts-outputs { break-inside: avoid; } .jar-cuts-jars tr { break-inside: avoid; } .jar-cuts-jars thead { display: table-header-group; } } .sel-bulk-stock .bulk-heading, .sel-bulk-stock .bulk-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr) 48px; gap: 8px; align-items: start; } .sel-bulk-stock .bulk-heading { color: var(--text-muted); font-size: max(10px, 0.9em); margin: 12px 0 4px; } .sel-bulk-stock .bulk-row { padding: 6px 0; border-bottom: 1px solid var(--hairline); } .sel-bulk-stock .bulk-placeholder { color: var(--text-faint); } .sel-bulk-stock .bulk-cannot-add, .sel-bulk-stock .bulk-row-error { color: var(--danger-fg); } .sel-bulk-stock .bulk-row-errors { grid-column: 1/-1; } .sel-bulk-stock .bulk-row-errors .bulk-row-error { margin: 0; } .sel-bulk-stock .bulk-cell-remove { align-self: stretch; display: flex; align-items: center; justify-content: center; } .sel-bulk-stock .bulk-cell-remove button { min-width: 32px; min-height: 0; height: 100%; padding-block: 0; } @media (pointer: coarse) { .sel-bulk-stock .bulk-cell-remove button { min-width: 44px; min-height: 44px; } } @media (max-width: 640px) { .sel-bulk-stock .bulk-heading { display: none; } .sel-bulk-stock .bulk-row { grid-template-columns: minmax(0, 1fr) 48px; } .sel-bulk-stock .bulk-cell-ingredient, .sel-bulk-stock .bulk-cell-variation, .sel-bulk-stock .bulk-cell-amount, .sel-bulk-stock .bulk-cell-nickname { grid-column: 1; } .sel-bulk-stock .bulk-cell-remove { grid-column: 2; grid-row: 1; } } .owned-piece-count { flex-shrink: 0; font-size: max(10px, 0.75rem); color: var(--text-muted); white-space: nowrap; } .owned-piece-hero { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .owned-piece-hero-image { flex: 0 0 auto; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; background: var(--wash); color: var(--text-faint); } .owned-piece-hero-image.has-thumbnail { background: var(--canvas-worktop); padding: 6px; } .owned-piece-hero-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .owned-piece-hero-body { flex: 1 1 240px; min-width: 0; } .owned-piece-hero-body h2, .owned-piece-hero-body h3 { margin-top: 0; } .owned-piece-add-value { max-width: 140px; } .owned-piece-add-unit { margin-left: 8px; max-width: 180px; } .owned-kit-facts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: max(10px, 0.8125rem); color: var(--text-muted); } .owned-kit-facts strong { color: var(--text-fg); } .panel-warning { border-left: 4px solid var(--warn-fg); } .panel-warning h2, .panel-warning h3 { color: var(--warn-fg); } .optional-field-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin: 0 0 12px 0; } .optional-field-bar:empty { display: none; margin: 0; } .optional-field-bar .optional-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--wash); color: var(--ink); box-shadow: none; font-size: max(10px, 0.8125rem); font-weight: 600; line-height: 1.25rem; white-space: nowrap; cursor: pointer; } .optional-field-bar .optional-pill:hover { background: var(--wash-strong); border-color: var(--field-border-hover); box-shadow: none; } .optional-field-bar .optional-pill:focus { box-shadow: none; outline: none; } .optional-field-bar .optional-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .optional-field-bar .optional-pill.is-active { background: var(--pill-active-bg); border-color: var(--pill-active-bg); color: var(--pill-active-fg); } .optional-field-bar .optional-pill.is-active:hover { background: var(--pill-active-bg); border-color: var(--pill-active-bg); } .optional-field-bar .optional-pill.is-active:not(.is-locked) .optional-pill-icon { transform: rotate(45deg); } .optional-field-bar .optional-pill.is-locked { cursor: default; } .optional-field-bar .optional-pill .optional-pill-icon { font-size: max(10px, 0.6875rem); transition: transform 0.12s ease; } html.js .optional-field.is-collapsed { display: none; } html.js .field-group.optional-field .optional-flag { display: none; } .push-device { max-width: 640px; } .push-device h2, .push-device h3 { margin-top: 0; color: var(--ink); } .push-device .push-device-status { color: var(--text-fg); margin-bottom: 0; } .push-device .push-device-ios { color: var(--text-muted); } .push-device .push-device-ios ol { margin: 12px 0 0; padding-left: 24px; } .push-device .push-device-ios li { margin-bottom: 6px; } .push-device .push-device-actions { margin: 18px 0 0; } .push-device .push-device-actions:not(:has(button:not([hidden]))) { display: none; } .push-device button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .feature-settings { max-width: 720px; } .feature-settings fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; } .feature-settings legend { padding: 0; margin-bottom: 6px; font-weight: 700; color: var(--ink); } .feature-settings input[type=radio], .feature-settings input[type=checkbox] { flex: 0 0 auto; margin: 4px 0 0; } .feature-settings .feature-text { display: block; color: var(--text-muted); } .feature-settings .feature-note { display: block; margin-top: 2px; } .feature-mode-option { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; cursor: pointer; } .feature-mode-option strong { color: var(--ink); } .feature-row { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; border-top: 1px solid var(--hairline-soft); } .feature-row label { font-weight: 700; color: var(--ink); cursor: pointer; } .feature-row.is-plan-blocked label { color: var(--text-muted); cursor: default; } .feature-list:disabled .feature-row { opacity: 0.6; } .feature-list:disabled label { cursor: default; } .feature-list:enabled .feature-basic-note { display: none; } .filter-pill-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px 0; } .filter-pill-bar .filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--wash); color: var(--ink); box-shadow: none; font-size: max(10px, 0.8125rem); font-weight: 600; line-height: 1.25rem; white-space: nowrap; cursor: pointer; } .filter-pill-bar .filter-pill:hover { background: var(--wash-strong); border-color: var(--field-border-hover); box-shadow: none; } .filter-pill-bar .filter-pill:focus { box-shadow: none; outline: none; } .filter-pill-bar .filter-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .filter-pill-bar .filter-pill.is-active { background: var(--pill-active-bg); border-color: var(--pill-active-bg); color: var(--pill-active-fg); } .filter-pill-bar .filter-pill.is-active:hover { background: var(--pill-active-bg); border-color: var(--pill-active-bg); } html:not(.js) .filter-pill-bar { display: none; } .share-pill-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px 0; } .share-pill-bar form { margin: 0; } .share-pill-bar .share-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--wash); color: var(--ink); box-shadow: none; font-size: max(10px, 0.8125rem); font-weight: 600; line-height: 1.25rem; white-space: nowrap; cursor: pointer; } .share-pill-bar .share-pill:hover { background: var(--wash-strong); border-color: var(--field-border-hover); box-shadow: none; } .share-pill-bar .share-pill:focus { box-shadow: none; outline: none; } .share-pill-bar .share-pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .share-pill-bar .share-pill.is-active { background: var(--pill-active-bg); border-color: var(--pill-active-bg); color: var(--pill-active-fg); } .share-pill-bar .share-pill.is-active:hover { background: var(--pill-active-bg); border-color: var(--pill-active-bg); } .share-pill-bar .share-pill { min-height: 44px; padding: 6px 16px; } .share-pill-bar .share-pill-check { margin-right: 6px; } .sel-year-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .sel-year-list .year-list-chips { display: contents; } .sel-year-list .year-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--field-border); border-radius: 8px; background: var(--field-bg); color: var(--field-fg); } .sel-year-list input.year-list-new { width: 6em; } .place-search .place-search-control { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; max-width: 400px; box-sizing: border-box; padding: 0 6px; border: 1px solid var(--field-border); border-radius: 8px; background: var(--field-bg); color: var(--field-fg); } .place-search .place-search-control:hover { border-color: var(--field-border-hover); } .place-search .place-search-control:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; } .place-search .place-search-control .place-search-icon { flex: 0 0 auto; font-size: max(10px, 0.8125rem); color: var(--text-muted); pointer-events: none; } .place-search .place-search-control gmp-place-autocomplete { display: block; flex: 1 1 auto; min-width: 0; color-scheme: inherit; border: none; --gmp-mat-color-surface: var(--field-bg); --gmp-mat-color-on-surface: var(--field-fg); --gmp-mat-color-on-surface-variant: var(--field-fg); --gmp-mat-color-outline: transparent; --gmp-mat-color-outline-variant: transparent; } .place-search .helper, .place-search .place-search-status { flex: 1 0 100%; } .place-search .place-search-status { margin-top: 0.35rem; font-size: max(10px, 0.85rem); color: var(--text-muted); } .place-search .place-search-status:empty { display: none; margin-top: 0; } .private-field-notice { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; color: var(--text-muted); text-decoration: none; } .private-field-notice:hover { color: var(--link-hover-fg); } .private-field-notice:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } textarea ~ .private-field-notice { align-self: flex-start; } .private-field-selector { flex: 1 1 200px; max-width: 400px; min-width: 0; } dialog.private-field-dialog { position: fixed; inset: 0; margin: auto; padding: 0; width: min(480px, 100vw - 36px); max-height: calc(100vh - 36px); overflow-y: auto; box-sizing: border-box; background: var(--surface-bg); color: var(--text-fg); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-dropdown); } dialog.private-field-dialog::backdrop { background: var(--backdrop); } dialog.private-field-dialog .private-field-dialog-inner { padding: 24px; } dialog.private-field-dialog h2 { margin-top: 0; } dialog.private-field-dialog .button-row { margin: 18px 0 0; text-align: right; } .private-field-help p:last-child { margin-bottom: 0; } .select-filter-input { display: block; width: 100%; max-width: 400px; box-sizing: border-box; margin-bottom: 3px; padding: 3px 6px; border: 1px solid var(--field-border); border-radius: 8px; background: var(--field-bg); color: var(--field-fg); } .select-filter-input:hover { border-color: var(--field-border-hover); } .fieldset .field-element > div input.select-filter-input:not([type=checkbox]):not([type=radio]):not([type=number]):not([type=date]) { flex: 0 0 100%; max-width: 400px; margin-bottom: 0; } .video-embed { width: 100%; max-width: 640px; margin: 6px 0; aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; background: var(--chrome-submenu-bg); border: 1px solid var(--hairline); } .video-embed iframe { display: block; width: 100%; height: 100%; border: 0; } button.video-embed-play { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; padding: 6px; border: 1px solid transparent; border-radius: 0; background-color: var(--chrome-submenu-bg); background-image: none; box-shadow: none; color: var(--chrome-fg); font-size: 0.875rem; font-weight: normal; white-space: normal; cursor: pointer; transition: border-color 0.15s ease; } button.video-embed-play i { font-size: 2.5rem; transition: transform 0.15s ease; } button.video-embed-play:hover, button.video-embed-play:active { background-color: var(--chrome-submenu-bg); background-image: linear-gradient(var(--chrome-hover-wash), var(--chrome-hover-wash)); border-color: var(--chrome-fg-muted); color: var(--chrome-fg); } button.video-embed-play:hover i { transform: scale(1.1); } button.video-embed-play:focus { box-shadow: none; outline: none; } button.video-embed-play:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; } html.report-capturing, html.report-capturing * { cursor: progress !important; } [data-report-screenshot] { margin-top: 12px; } .report-screenshot-unavailable { margin: 0; } .report-screenshot { display: flex; flex-direction: column; gap: 6px; } .report-screenshot .field-hint { margin: 0; } .report-screenshot-include { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; } .report-screenshot-include input[type=checkbox] { width: 18px; height: 18px; margin: 0; } .report-screenshot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .report-screenshot-tools button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 4px 10px; } .report-screenshot-tools button[aria-pressed=true] { background-color: var(--selected-bg); border-color: var(--selected-border); color: var(--selected-fg); } .report-screenshot-tools button:disabled { background-color: var(--surface-bg); color: var(--text-disabled); opacity: 0.6; } .report-screenshot-swatch span { display: block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--hairline); } .report-screenshot-sep { width: 1px; align-self: stretch; background: var(--hairline); margin: 0 2px; } .report-screenshot-stage { position: relative; width: 100%; max-width: min(100%, 50vh * var(--shot-aspect, 1.6)); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; line-height: 0; background: var(--surface-raised); } .report-screenshot-image { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; pointer-events: none; } .report-screenshot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; } .report-screenshot.is-excluded .report-screenshot-stage { opacity: 0.4; } .report-screenshot.is-excluded .report-screenshot-canvas { cursor: default; touch-action: auto; } .problem-report-screenshot { display: block; width: fit-content; margin-top: 6px; line-height: 0; } .problem-report-screenshot img { display: block; max-width: 160px; max-height: 100px; border: 1px solid var(--hairline); border-radius: 4px; } .page-intro { max-width: 70ch; margin: 0 0 1rem; background: var(--surface-raised); border: 1px solid var(--hairline); border-left: 4px solid var(--link-fg); border-radius: 6px; color: var(--text-fg); } .page-intro > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 2.25rem; padding: 0.25rem 0.75rem; cursor: pointer; list-style: none; color: var(--text-muted); } .page-intro > summary::-webkit-details-marker { display: none; } .page-intro > summary:hover { color: var(--link-fg); } .page-intro > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .page-intro .page-intro-chevron { margin-left: auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; } .page-intro[open] .page-intro-chevron { transform: rotate(-135deg); } .page-intro .page-intro-body { padding: 0 0.75rem 0.5rem; } .page-intro .page-intro-body p { margin: 0 0 0.6rem; } .page-intro .page-intro-body .page-intro-edit { font-size: 0.85rem; margin-bottom: 0; } .page-intro-advanced:not([open]) { float: right; max-width: none; margin: 0 0 0.5rem 0.5rem; background: none; border: 0; border-radius: 50%; } .page-intro-advanced:not([open]) > summary { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; border-radius: 50%; } .page-intro-advanced:not([open]) .page-intro-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .page-intro-advanced:not([open]) .page-intro-chevron { display: none; } .page-intro-advanced[open] { clear: both; } .page-intro-basic .page-intro-mark { display: none; } .page-intro-mark { font-size: 1.4rem; line-height: 1; } .page-intro-preview { max-width: 70ch; padding: 0.5rem 0.75rem; background: var(--surface-raised); border: 1px solid var(--hairline); border-left: 4px solid var(--link-fg); border-radius: 6px; color: var(--text-fg); } .page-intro-preview p { margin: 0 0 0.6rem; } @media print { .page-intro { display: none; } } .email-preview { display: block; width: 100%; height: 760px; margin: 16px 0 0; border: 1px solid var(--hairline); border-radius: 10px; } .email-preview-heading { margin: 24px 0 0; font-weight: 700; color: var(--ink); } .email-preview-note { margin: 4px 0 0; color: var(--text-muted); font-size: max(10px, 0.9em); } .app-offline-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px calc(16px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(16px + var(--safe-left)); background: var(--chrome-bg); color: var(--chrome-fg); border-top: 2px solid var(--notice-bg); font-size: 0.875rem; line-height: 1.4; text-align: center; } .app-offline-banner i, .app-offline-banner svg { color: var(--notice-bg); flex: 0 0 auto; } .app-offline-banner[hidden] { display: none; } html.is-offline .grid-content { padding-bottom: calc(72px + var(--safe-bottom)); } .analytics-consent { position: fixed; left: calc(16px + var(--safe-left)); right: calc(16px + var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); z-index: 999; max-width: 30rem; margin: 0 0 0 auto; padding: 14px 16px; background: var(--surface-raised); color: var(--text-fg); border: 1px solid var(--field-border); border-radius: 8px; box-shadow: var(--shadow-dropdown); font-size: 0.875rem; line-height: 1.4; } .analytics-consent .analytics-consent-title { margin: 0 0 6px; font-size: 1rem; } .analytics-consent p { margin: 0; } .analytics-consent .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; } .analytics-consent .button-row button { margin: 0; } .analytics-consent[hidden] { display: none; } .tutorial-panel { position: fixed; left: var(--safe-left); right: var(--safe-right); bottom: 0; z-index: 998; display: flex; flex-direction: column; max-height: 60vh; padding-bottom: var(--safe-bottom); background: var(--surface-raised); color: var(--text-fg); border-top: 1px solid var(--field-border); border-radius: 8px 8px 0 0; box-shadow: var(--shadow-dropdown); font-size: 0.875rem; line-height: 1.4; } .tutorial-panel[hidden] { display: none; } .tutorial-panel .tutorial-panel-header { flex: 0 0 auto; } .tutorial-panel .tutorial-panel-toggle { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 16px; background: transparent; color: var(--text-fg); border: 0; text-align: left; cursor: pointer; } .tutorial-panel .tutorial-panel-heading { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 0 12px; min-width: 0; } .tutorial-panel .tutorial-panel-title { font-weight: 600; font-size: 0.9375rem; } .tutorial-panel .tutorial-panel-progress { color: var(--text-muted); } .tutorial-panel .tutorial-panel-chevron { flex: 0 0 auto; transition: transform 0.15s; } .tutorial-panel.is-collapsed .tutorial-panel-chevron { transform: rotate(180deg); } .tutorial-panel .tutorial-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 12px; } .tutorial-panel .tutorial-panel-body[hidden] { display: none; } .tutorial-panel p { margin: 0 0 6px; } .tutorial-panel p[hidden] { display: none; } .tutorial-panel .tutorial-panel-next[hidden], .tutorial-panel .tutorial-panel-end[hidden] { display: none; } .tutorial-panel .tutorial-panel-next-label { margin: 12px 0 8px; color: var(--text-muted); font-size: max(10px, 0.75rem); text-transform: uppercase; } .tutorial-panel .tutorial-panel-next-title { margin: 0 0 4px; font-weight: 600; } .tutorial-panel .tutorial-panel-steps { margin: 8px 0 0; padding-left: 1.4em; } .tutorial-panel .tutorial-panel-steps li { margin: 2px 0; color: var(--text-muted); } .tutorial-panel .tutorial-panel-steps li.is-done { text-decoration: line-through; } .tutorial-panel .tutorial-panel-steps li.is-next { color: var(--text-fg); font-weight: 600; } .tutorial-panel .tutorial-panel-steps[hidden] { display: none; } .tutorial-panel .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 0; } .tutorial-panel .button-row form { margin: 0; } .tutorial-panel .button-row form[hidden] { display: none; } .tutorial-panel .button-row button { margin: 0; } .tutorial-panel .tutorial-panel-help { margin: 10px 0 0; font-size: max(10px, 0.8125rem); } @media (min-width: 769px) { .tutorial-panel { left: auto; right: calc(16px + var(--safe-right)); bottom: calc(16px + var(--safe-bottom)); width: 22rem; max-height: calc(100vh - 120px); padding-bottom: 0; border: 1px solid var(--field-border); border-radius: 8px; } } html.has-tutorial-panel .grid-content { padding-bottom: calc(var(--tutorial-panel-space, 64px) + 8px); } html.is-offline.has-tutorial-panel .tutorial-panel { bottom: calc(48px + var(--safe-bottom)); padding-bottom: 0; } html.is-offline.has-tutorial-panel .grid-content { padding-bottom: calc(72px + var(--safe-bottom) + var(--tutorial-panel-space, 64px) + 8px); } @media (min-width: 769px) { html.is-offline.has-tutorial-panel .tutorial-panel { bottom: calc(60px + var(--safe-bottom)); } } .tutorial-panel .tutorial-panel-go { margin: 4px 0 0; } .tutorial-panel .tutorial-panel-video { margin: 4px 0 0; } .tutorial-video-caption { margin: 0 0 8px; } .tutorial-video-frame { display: block; width: 100%; aspect-ratio: 16/9; border: 0; } .tutorial-spotlight { outline: 3px solid var(--focus-ring); outline-offset: 3px; animation: tutorial-spotlight-pulse 1.6s ease-in-out infinite; } @keyframes tutorial-spotlight-pulse { 0%, 100% { outline-offset: 3px; } 50% { outline-offset: 6px; } } @media (prefers-reduced-motion: reduce) { .tutorial-spotlight { animation: none; } } .tutorial-splash .tutorial-splash-title { margin: 0 0 8px; font-weight: 600; } .tutorial-splash .tutorial-splash-line { margin: 0 0 8px; min-height: 1em; } .goal-list { margin: 0 0 12px; } .goal-list .goal-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .tasting-picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; } .tasting-picker legend { padding: 0; margin-bottom: 4px; } .tasting-picker label { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 6px 4px; border: 2px solid var(--hairline); border-radius: 8px; background: var(--surface-raised); color: var(--text-fg); font-weight: 600; font-size: max(10px, 0.85em); line-height: 1.2; cursor: pointer; text-align: center; overflow-wrap: anywhere; hyphens: auto; } .tasting-picker { position: relative; } .tasting-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tasting-picker input:checked + label { background: var(--pill-active-bg); border-color: var(--pill-active-bg); color: var(--pill-active-fg); } .tasting-picker input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .tasting-picker .tasting-picker-none { grid-column: 1/-1; min-height: 40px; font-weight: 400; color: var(--text-muted); } @media (scripting: enabled) { .tasting-picker input.is-none, .tasting-picker label.tasting-picker-none, .fieldset .field-element .tasting-picker label.tasting-picker-none { display: none; } } .fieldset .field-element.tasting-attribute[data-scale="1"], .fieldset .field-element.tasting-attribute[data-scale="3"], .fieldset .field-element.tasting-attribute[data-scale="4"], .fieldset .field-element.tasting-attribute[data-scale="5"] { flex-direction: column; gap: 6px; } .fieldset .field-element.tasting-attribute[data-scale="1"] > .helper, .fieldset .field-element.tasting-attribute[data-scale="1"] > .field-validation-error, .fieldset .field-element.tasting-attribute[data-scale="3"] > .helper, .fieldset .field-element.tasting-attribute[data-scale="3"] > .field-validation-error, .fieldset .field-element.tasting-attribute[data-scale="4"] > .helper, .fieldset .field-element.tasting-attribute[data-scale="4"] > .field-validation-error, .fieldset .field-element.tasting-attribute[data-scale="5"] > .helper, .fieldset .field-element.tasting-attribute[data-scale="5"] > .field-validation-error { width: auto; } .fieldset .field-element .tasting-picker label { display: flex; width: auto; flex: none; padding: 6px 4px; font-weight: 600; font-size: max(10px, 0.85em); line-height: 1.2; } .fieldset .field-element .tasting-wheel li.tasting-term > label { width: auto; flex: none; padding: 4px 8px; } .fieldset .field-element .tasting-wheel .tasting-term-levels label { display: inline-flex; width: auto; flex: none; padding: 2px 10px; font-size: max(10px, 0.85em); } .fieldset .tasting-location-check { display: none; } .fieldset:has(#tf-place-else:checked) .tasting-location-check { display: flex; } .fieldset .tasting-purchase .tasting-purchase-fields { display: none; } .fieldset .tasting-purchase:has(input[name="Purchase.Bought"]:checked) .tasting-purchase-fields, .fieldset .tasting-purchase.is-bought .tasting-purchase-fields { display: block; } .fieldset .tasting-purchase .tasting-purchase-inventory { display: none; } .fieldset:has(#ServedOption option[data-kind="2"]:checked) .tasting-purchase .tasting-purchase-inventory, .fieldset .tasting-purchase.is-pack .tasting-purchase-inventory { display: flex; } .fieldset .tasting-vintage .tasting-vintage-other { display: none; margin-top: 0.5em; } .fieldset .tasting-vintage.is-other .tasting-vintage-other, .fieldset .tasting-vintage:has(#VintageChoice option[value=other]:checked) .tasting-vintage-other { display: block; } .tasting-picker.tasting-picker-stars { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .tasting-picker.tasting-picker-stars legend { flex: 0 0 100%; } .tasting-picker.tasting-picker-stars input + label.tasting-star, .tasting-picker.tasting-picker-stars input:checked + label.tasting-star { min-width: 48px; min-height: 48px; padding: 0 2px; border: 0; border-radius: 8px; background: transparent; color: var(--text-disabled); font-size: 1.625rem; transition: color 0.1s ease-in-out; } .tasting-picker.tasting-picker-stars:has(input:not([value=""]):checked) label.tasting-star { color: var(--star-fill); } .tasting-picker.tasting-picker-stars:has(input:not([value=""]):checked) input:checked + label ~ label.tasting-star { color: var(--text-disabled); } .tasting-picker.tasting-picker-stars.tasting-picker-stars.tasting-picker-stars:has(label.tasting-star:hover) label.tasting-star { color: var(--star-fill); } .tasting-picker.tasting-picker-stars.tasting-picker-stars.tasting-picker-stars:has(label.tasting-star:hover) label.tasting-star:hover ~ label.tasting-star { color: var(--text-disabled); } .tasting-picker.tasting-picker-stars .tasting-picker-none { grid-column: auto; margin-left: 12px; min-height: 40px; padding: 4px 12px; } .tasting-form tabs a.has-error, .tasting-form-preview tabs a.has-error { color: var(--text-fg); } .tasting-form tabs a.has-error i, .tasting-form-preview tabs a.has-error i { color: var(--danger-fg); } .tasting-form .tab-panel, .tasting-form-preview .tab-panel { position: relative; } @media (scripting: none) { .tasting-form .tab-panel.hidden, .tasting-form-preview .tab-panel.hidden { display: block !important; } .tasting-form tabs, .tasting-form-preview tabs, .tasting-form [data-tasting-next], .tasting-form-preview [data-tasting-next] { display: none !important; } } .tasting-colour-1 { --tasting-colour: var(--tasting-colour-1); } .tasting-colour-2 { --tasting-colour: var(--tasting-colour-2); } .tasting-colour-3 { --tasting-colour: var(--tasting-colour-3); } .tasting-colour-4 { --tasting-colour: var(--tasting-colour-4); } .tasting-colour-5 { --tasting-colour: var(--tasting-colour-5); } .tasting-colour-6 { --tasting-colour: var(--tasting-colour-6); } .tasting-colour-7 { --tasting-colour: var(--tasting-colour-7); } .tasting-colour-8 { --tasting-colour: var(--tasting-colour-8); } .tasting-colour-9 { --tasting-colour: var(--tasting-colour-9); } .tasting-colour-10 { --tasting-colour: var(--tasting-colour-10); } .tasting-colour-11 { --tasting-colour: var(--tasting-colour-11); } .tasting-colour-12 { --tasting-colour: var(--tasting-colour-12); } .tasting-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; } .tasting-chip { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; min-height: 32px; padding: 4px 12px; border: 2px solid var(--tasting-colour, var(--text-faint)); border-radius: 999px; background: var(--surface-raised); color: var(--text-fg); font-size: max(10px, 0.9em); font-weight: 600; line-height: 1.2; } .tasting-chip.is-fault { border-style: dashed; } .tasting-chip-level { font-weight: 400; color: var(--text-muted); } .tasting-chips-label, .tasting-chips-none, .tasting-wheel-nomatch { color: var(--text-muted); font-size: max(10px, 0.9em); } .tasting-wheel { border: 0; padding: 0; margin: 0; min-width: 0; } .tasting-wheel legend { padding: 0; margin-bottom: 4px; } .tasting-wheel ul { list-style: none; margin: 0; padding: 0; } .tasting-wheel li.tasting-term { margin: 4px 0; border-left: 6px solid var(--tasting-colour, var(--hairline)); } .tasting-wheel li.tasting-term > label { display: inline-block; padding: 4px 8px; } .tasting-wheel li.tasting-term ul { margin-left: 16px; } .tasting-wheel li.tasting-term.is-fault > label { text-decoration: underline dashed; } .tasting-wheel .tasting-term-levels { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; position: relative; } .tasting-wheel .tasting-term-levels input { position: absolute; opacity: 0; width: 1px; height: 1px; } .tasting-wheel .tasting-term-levels input:checked + label { background: var(--pill-active-bg); border-color: var(--pill-active-bg); color: var(--pill-active-fg); } .tasting-wheel .tasting-term-levels input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .tasting-wheel .tasting-term-levels label { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 2px 10px; border: 2px solid var(--hairline); border-radius: 999px; background: var(--surface-raised); color: var(--text-fg); font-size: max(10px, 0.85em); cursor: pointer; } .tasting-wheel.is-enhanced > ul { display: none; } .tasting-wheel .tasting-wheel-search { width: 100%; box-sizing: border-box; min-height: 44px; margin-bottom: 8px; } .tasting-wheel .tasting-wheel-nav, .tasting-wheel .tasting-wheel-common { display: flex; flex-wrap: wrap; gap: 8px; } .tasting-wheel .tasting-wheel-common { align-items: center; margin-bottom: 8px; } .tasting-wheel .tasting-wheel-common + .tasting-wheel-search { margin-top: 16px; } .tasting-wheel .tasting-wheel-nav .tasting-wheel-back { gap: 6px; min-height: 48px; padding: 6px 16px; border-color: var(--hairline); cursor: pointer; white-space: normal; } .tasting-wheel .tasting-wheel-nav .tasting-wheel-back, .tasting-wheel .tasting-wheel-nav .tasting-wheel-back:focus { box-shadow: none; } .tasting-wheel .tasting-wheel-nav .tasting-wheel-back:hover, .tasting-wheel .tasting-wheel-nav .tasting-wheel-back:active { background-color: var(--surface-bg); box-shadow: none; } .tasting-wheel .tasting-wheel-nav .tasting-wheel-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .tasting-wheel .tasting-chip-nav { min-height: 48px; padding: 6px 16px; cursor: pointer; white-space: normal; text-align: left; } .tasting-wheel .tasting-chip-nav.has-children::after { content: "›"; font-size: 1.4em; line-height: 1; } .tasting-wheel .tasting-chip-nav, .tasting-wheel .tasting-chip-nav:focus { box-shadow: none; } .tasting-wheel .tasting-chip-nav:hover, .tasting-wheel .tasting-chip-nav:active { background-color: var(--surface-bg); box-shadow: none; } .tasting-wheel .tasting-chip-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .tasting-wheel .tasting-chip-nav.is-ticked, .tasting-wheel .tasting-chip-nav.is-ticked:hover, .tasting-wheel .tasting-chip-nav.is-ticked:active { background-color: var(--pill-active-bg); color: var(--pill-active-fg); } .tasting-wheel .tasting-chip-remove { min-width: 44px; min-height: 44px; margin: -8px -10px -8px 0; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--text-fg); font-size: 1.4em; line-height: 1; } .tasting-wheel .tasting-chip-remove:hover, .tasting-wheel .tasting-chip-remove:active, .tasting-wheel .tasting-chip-remove:focus { background-color: transparent; box-shadow: none; } .tasting-wheel .tasting-chip-remove:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .tasting-wheel .tasting-chips .tasting-chip { flex-wrap: wrap; } .tasting-text { white-space: pre-wrap; overflow-wrap: anywhere; } .tasting-radar { max-width: 588px; margin: 0 auto; color: var(--text-fg); } .tasting-radar svg { display: block; width: 100%; height: auto; } .tasting-radar-timeline .tasting-radar-date { margin: 3px 0 0; text-align: center; color: var(--text-muted); } .tasting-radar-timeline .tasting-radar-current { transition: none; } .tasting-radar-timeline .tasting-radar-ghost.is-current { stroke-opacity: 0; } .tasting-radar-timeline .tasting-radar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 420px; margin: 6px auto; } .tasting-radar-timeline .tasting-radar-controls[hidden] { display: none; } .tasting-radar-timeline .tasting-radar-slider { flex: 1 1 160px; min-width: 0; accent-color: var(--chart-1); } .tasting-radar-timeline .tasting-radar-table { margin-top: 6px; } .tasting-radar-timeline .tasting-radar-table summary { cursor: pointer; } @media print { .tasting-radar-timeline .tasting-radar-controls { display: none; } } .tasting-list .tasting-list-photo { width: 44px; padding-inline-end: 0; } .tasting-list-thumb { display: block; width: 36px; height: 36px; object-fit: cover; border-radius: 4px; background: var(--canvas-worktop); } .tasting-list tr.is-deleted { color: var(--text-muted); text-decoration: line-through; } @media (max-width: 640px) { .tasting-picker { gap: 4px; } .tasting-picker label { min-height: 56px; padding: 4px 2px; } .tasting-picker.tasting-picker-stars { gap: 0; } .tasting-picker.tasting-picker-stars input + label.tasting-star, .tasting-picker.tasting-picker-stars input:checked + label.tasting-star { min-width: 56px; min-height: 56px; } .fieldset .field-element .tasting-picker label { padding: 4px 2px; } .tasting-wheel .tasting-chip-nav { min-height: 56px; flex: 1 1 calc(50% - 8px); } .tasting-wheel .tasting-wheel-search { min-height: 48px; } .tasting-wheel .tasting-term-levels { display: flex; margin: 4px 0 4px 8px; } } .tasting-timeline { --tl-label: 150px; max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--hairline); border-radius: 4px; background: var(--surface-raised); } .tasting-timeline .tl-body { position: relative; display: inline-block; min-width: 100%; } .tasting-timeline .tl-row { display: flex; align-items: stretch; min-height: 28px; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); } .tasting-timeline summary.tl-row { cursor: pointer; } .tasting-timeline summary.tl-row::-webkit-details-marker { display: none; } .tasting-timeline summary.tl-row .tl-label::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 700; } .tasting-timeline details[open] > summary.tl-row .tl-label::before { content: "-"; } .tasting-timeline .tl-label { position: sticky; left: 0; z-index: 2; flex: 0 0 var(--tl-label); box-sizing: border-box; width: var(--tl-label); padding: 4px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--surface-raised); border-right: 1px solid var(--hairline); color: var(--text-fg); } .tasting-timeline .tl-tier-2 .tl-label { padding-left: 22px; } .tasting-timeline .tl-tier-3 .tl-label { padding-left: 36px; } .tasting-timeline .is-fault .tl-label { font-style: italic; } .tasting-timeline .tl-group { position: sticky; left: 0; box-sizing: border-box; width: var(--tl-label); padding: 4px 8px; font-weight: 700; color: var(--text-muted); } .tasting-timeline .tl-track { position: relative; flex: 0 0 auto; height: 28px; } .tasting-timeline .tl-cell { position: absolute; top: 3px; bottom: 3px; box-sizing: border-box; border: 1px solid var(--tasting-colour, var(--text-faint)); border-radius: 3px; } .tasting-timeline .tl-shade-1 { background: color-mix(in srgb, var(--tasting-colour, var(--text-faint)) 20%, transparent); } .tasting-timeline .tl-shade-2 { background: color-mix(in srgb, var(--tasting-colour, var(--text-faint)) 40%, transparent); } .tasting-timeline .tl-shade-3 { background: color-mix(in srgb, var(--tasting-colour, var(--text-faint)) 60%, transparent); } .tasting-timeline .tl-shade-4 { background: color-mix(in srgb, var(--tasting-colour, var(--text-faint)) 80%, transparent); } .tasting-timeline .tl-shade-5 { background: color-mix(in srgb, var(--tasting-colour, var(--text-faint)) 100%, transparent); } .tasting-timeline .tl-dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--tasting-colour, var(--text-faint)); } .tasting-timeline .tl-strength { position: absolute; top: 4px; transform: translateX(-50%); font-size: 0.75rem; white-space: nowrap; color: var(--text-muted); } .tasting-timeline .tl-axis .tl-track { height: 64px; } .tasting-timeline .tl-photo-row .tl-track { height: 36px; } .tasting-timeline .tl-col-thumb { position: absolute; top: 3px; width: 30px; height: 30px; object-fit: cover; border-radius: 4px; background: var(--canvas-worktop); } .tasting-timeline .tl-col-label { position: absolute; top: 4px; bottom: 4px; overflow: hidden; font-size: 0.75rem; line-height: 28px; text-align: end; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--text-muted); } .tasting-timeline .tl-overlay { position: absolute; top: 0; bottom: 0; left: var(--tl-label); pointer-events: none; } .tasting-timeline .tl-marker { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--text-muted); } .tasting-timeline.tl-compare .tl-col-label { writing-mode: horizontal-tb; transform: none; overflow: hidden; line-height: 1.2; text-align: center; white-space: normal; overflow-wrap: anywhere; } .tasting-timeline.tl-compare .tl-sub { display: block; color: var(--text-faint); } .tasting-lines-form { margin-top: 12px; } .tasting-lines-form fieldset { margin: 0; padding: 0; border: 0; } .tasting-lines-form .tasting-lines-option { display: inline-block; margin: 0 16px 4px 0; } .tasting-compare-candidates { margin: 0 0 12px; padding: 0; list-style: none; } .tasting-compare-candidates li { margin: 0 0 4px; } .tl-marker-list { margin: 8px 0 0; padding-left: 20px; } .tasting-wheel-chart { margin: 0 0 12px; } .tasting-wheel-chart .tasting-wheel-figure { margin: 0 auto; max-width: 360px; } .tasting-wheel-chart .tasting-wheel-svg { display: block; width: 100%; height: auto; overflow: visible; } .tasting-wheel-chart .tasting-wheel-arc { fill: var(--tasting-colour, var(--text-faint)); stroke: var(--surface-bg); stroke-width: 0.8; } .tasting-wheel-chart .tasting-wheel-arc.tasting-wheel-tier-2 { fill: color-mix(in srgb, var(--tasting-colour, var(--text-faint)) 72%, var(--surface-bg)); } .tasting-wheel-chart .tasting-wheel-arc.tasting-wheel-tier-3 { fill: color-mix(in srgb, var(--tasting-colour, var(--text-faint)) 48%, var(--surface-bg)); } .tasting-wheel-chart .tasting-wheel-arc.is-retired { stroke-dasharray: 2 1.5; } .tasting-wheel-chart .tasting-wheel-labels text { font-size: 5px; fill: var(--ink); stroke: var(--surface-bg); stroke-width: 1.6px; paint-order: stroke; pointer-events: none; } .tasting-wheel-chart .tasting-wheel-arc.is-muted { opacity: 0.35; } .tasting-wheel-chart .tasting-wheel-outer-labels text { font-size: 6px; fill: var(--ink); pointer-events: none; } .tasting-wheel-chart .tasting-wheel-outer-labels text.is-muted { fill: var(--text-muted); } .tasting-wheel-chart .tasting-wheel-area { fill: currentColor; fill-opacity: 0.12; stroke: none; } .tasting-wheel-chart .tasting-wheel-half { stroke: var(--tasting-share-none); stroke-linecap: round; } .tasting-wheel-chart .tasting-wheel-point { fill: var(--tasting-share-none); stroke: var(--surface-bg); stroke-width: 0.6; } .tasting-wheel-chart .tasting-wheel-half.tasting-share-1 { stroke: var(--tasting-share-1); } .tasting-wheel-chart .tasting-wheel-point.tasting-share-1 { fill: var(--tasting-share-1); } .tasting-wheel-chart .tasting-wheel-half.tasting-share-2 { stroke: var(--tasting-share-2); } .tasting-wheel-chart .tasting-wheel-point.tasting-share-2 { fill: var(--tasting-share-2); } .tasting-wheel-chart .tasting-wheel-half.tasting-share-3 { stroke: var(--tasting-share-3); } .tasting-wheel-chart .tasting-wheel-point.tasting-share-3 { fill: var(--tasting-share-3); } .tasting-wheel-chart .tasting-wheel-half.tasting-share-4 { stroke: var(--tasting-share-4); } .tasting-wheel-chart .tasting-wheel-point.tasting-share-4 { fill: var(--tasting-share-4); } .tasting-wheel-chart .tasting-wheel-half.tasting-share-5 { stroke: var(--tasting-share-5); } .tasting-wheel-chart .tasting-wheel-point.tasting-share-5 { fill: var(--tasting-share-5); } .tasting-wheel-chart .tasting-wheel-group th { text-align: start; } .tasting-wheel-chart .tasting-wheel-timeline .tasting-wheel-figure { max-width: 520px; } .tasting-wheel-chart .tasting-wheel-timeline.is-compact .tasting-wheel-outer-labels { display: none; } .tasting-wheel-chart .tasting-wheel-table { margin-top: 8px; } .tasting-wheel-chart .tasting-wheel-term.tier-2 { padding-inline-start: 20px; } .tasting-wheel-chart .tasting-wheel-term.tier-3 { padding-inline-start: 40px; } .tasting-wheel-chart .tasting-wheel-swatch { display: inline-block; width: 10px; height: 10px; margin-inline-end: 6px; border-radius: 2px; background: var(--tasting-colour, var(--text-faint)); } .tasting-wheel-chart .tasting-wheel-faults { margin-top: 8px; } .tasting-wheel-chart .tasting-wheel-faults h4 { margin: 0 0 4px; } .tasting-wheel-chart .tasting-wheel-faults ul { margin: 0; padding-left: 20px; } .tasting-summary .tasting-summary-heading { display: none; } @media (scripting: none) { .tasting-summary .tab-panel.hidden { display: block !important; } .tasting-summary tabs { display: none !important; } .tasting-summary .tasting-summary-heading { display: block; } } @media print { .tasting-summary .tab-panel.hidden { display: block !important; } .tasting-summary tabs { display: none !important; } .tasting-summary .tasting-summary-heading { display: block; } .tasting-wheel-chart .tasting-wheel-figure, .tasting-wheel-chart .tasting-wheel-timeline .tasting-wheel-figure { max-width: 280px; break-inside: avoid; } } .fill-set-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .fill-set-list .fill-set > a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 6px; color: var(--text-fg); text-decoration: none; min-width: 0; } .fill-set-list .fill-set.is-selected > a { border-color: var(--accent); background: var(--surface-raised); font-weight: 600; } .fill-set-list .fill-set-thumbs { display: flex; flex: none; gap: 4px; } .fill-set-list .fill-set-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; } .fill-set-list .fill-set-text { display: flex; flex-direction: column; min-width: 0; } .fill-set-list .fill-set-name { overflow-wrap: anywhere; } .fill-set-list .fill-set-meta { font-size: 0.85em; font-weight: 400; color: var(--text-muted); } .tasting-public-notes { list-style: none; margin: 6px 0 0; padding: 0; } .tasting-public-notes li { padding: 6px 0; border-top: 1px solid var(--hairline); } .tasting-public-notes .tasting-public-note-head { display: flex; flex-wrap: wrap; gap: 4px 6px; color: var(--text-muted); } .tasting-public-notes .tasting-public-note-text { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; } .extra-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .extra-links li { margin: 0; min-width: 0; } .extra-links a { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; } .extra-links i { flex: 0 0 1.25em; text-align: center; } file-drop { display: block; box-sizing: border-box; max-width: 100%; padding: 12px; border: 2px dashed var(--field-border); border-radius: 6px; background: var(--wash-faint); } file-drop.file-drop-over { border-color: var(--accent); background: var(--wash-strong); } file-drop input[type=file] { max-width: 100%; } file-drop .file-drop-hint { margin: 6px 0 0; color: var(--text-muted); } file-drop .file-drop-message { margin: 6px 0 0; overflow-wrap: anywhere; } file-drop .file-drop-message:empty { display: none; } file-drop .file-drop-message.file-drop-error { color: var(--danger-fg); } .draft-new-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: max(10px, 0.6875rem); font-weight: 900; line-height: 1.6; white-space: nowrap; } .draft-header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .draft-header h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; } .draft-footer-actions form { display: inline; } .draft-matched { margin-left: 6px; color: var(--ok-fg); } .draft-line-pick { flex: 1 1 100%; } .draft-step-keys, .draft-step-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; } .draft-step-key { font-size: max(10px, 0.75rem); color: var(--ink); } .draft-step-key .draft-step-key-label { margin-right: 4px; color: var(--text-muted); } .draft-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; white-space: normal; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; } .draft-chip.draft-chip-warn { background: transparent; border: 1px solid var(--warn-fg); color: var(--warn-fg); font-weight: 400; } .draft-description { white-space: pre-line; } .draft-step-section-heading { margin: 12px 0 6px; } .draft-notes-intro { color: var(--text-muted); } .marketing-site { display: block; margin: 0; padding: 0; } .marketing-site .marketing-skip-link { position: absolute; left: 8px; top: -100px; padding: 10px 14px; background: var(--surface-raised); color: var(--text-fg); border: 1px solid var(--field-border); border-radius: 6px; z-index: 1000; } .marketing-site .marketing-skip-link:focus { top: 8px; } .marketing-site .marketing-header, .marketing-site .marketing-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--surface-raised); color: var(--text-fg); } .marketing-site .marketing-header a, .marketing-site .marketing-footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; } .marketing-site .marketing-header nav, .marketing-site .marketing-footer nav { display: flex; flex-wrap: wrap; gap: 18px; } .marketing-site .marketing-wordmark { font-weight: 700; text-decoration: none; } .marketing-site .marketing-main { max-width: 64rem; margin: 0 auto; padding: 24px 16px; } .marketing-site .marketing-hero { padding: 32px 0; } .marketing-site .marketing-hero h1 { margin: 0 0 12px; } .marketing-site .marketing-lead { font-size: 1.15em; max-width: 44rem; } .marketing-site .marketing-section { padding: 16px 0; } .marketing-site .marketing-section h2 { margin: 0 0 12px; } .marketing-site .marketing-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .marketing-site .marketing-list { margin: 0; padding-left: 1.25em; max-width: 48rem; } .marketing-site .marketing-list li { margin-bottom: 8px; } .marketing-site .article-hero, .marketing-site .article-body img { max-width: 100%; height: auto; } .marketing-site .article-body { max-width: 48rem; overflow-wrap: anywhere; } .marketing-site .article-body pre { overflow-x: auto; } .marketing-site .marketing-header nav a.button { padding: 0 14px; } .marketing-site a:focus-visible, .marketing-site button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .marketing-site * { scroll-behavior: auto; transition: none; animation: none; } } @media (min-width: 769px) { .marketing-site .marketing-grid { grid-template-columns: repeat(3, 1fr); } .marketing-site .marketing-header, .marketing-site .marketing-footer { padding: 12px 32px; } .marketing-site .marketing-main { padding: 40px 32px; } } /*# sourceMappingURL=main.css.map */