*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Plus Jakarta Sans, system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
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 */
}

/*
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 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
  color-scheme: light;
  --color-erika: 30 99 174;
  --color-erika-link: 30 99 174;
  --color-erika-hover: 24 84 136;
  --color-erika-active: 20 69 111;
  --color-erika-soft: 234 242 250;
  --color-erika-line: 207 224 240;
  --color-erika-bright: 0 192 238;
  --color-success: 100 180 12;
  --color-danger: 203 0 0;
  --color-warning: 255 140 2;
  --color-ink: 17 24 39;
  --color-ink-muted: 107 114 128;
  --color-line: 229 231 235;
  --color-line-hover: 203 208 216;
  --color-shell: 245 248 252;
  --color-surface: 255 255 255;
  --color-success-ink: 61 122 0;
  --color-warning-ink: 146 74 0;
  --karir-brand: 30 99 174;
  --karir-brand-dark: 24 84 136;
  --karir-brand-tint: 234 242 250;
  --karir-brand-line: 207 224 240;
  --karir-ink: 26 26 26;
  --karir-body: 55 53 47;
  --karir-muted: 107 106 103;
  --karir-meta: 112 111 108;
  --karir-placeholder: 196 195 192;
  --karir-surface: 255 255 255;
  --karir-canvas: 250 250 250;
  --karir-shell: 247 247 245;
  --karir-line-hover: 217 216 213;
  --karir-line: 238 238 238;
  --karir-line-strong: 148 147 144;
  --karir-line-control: 183 183 183;
  --karir-bar-off: 229 228 226;
  --karir-watermark: 211 227 242;
  --karir-review: 180 83 9;
  --karir-review-bg: 255 251 235;
  --karir-offer: 4 120 87;
  --karir-offer-bg: 236 253 245;
  --karir-rejected: 200 30 30;
  --karir-rejected-bg: 254 242 242;
  --karir-premium: 212 160 23;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-erika: 53 104 159;
  --color-erika-link: 91 155 224;
  --color-erika-hover: 65 121 182;
  --color-erika-active: 76 136 201;
  --color-erika-soft: 27 43 68;
  --color-erika-line: 53 73 107;
  --color-erika-bright: 34 211 238;
  --color-success: 134 214 51;
  --color-danger: 255 82 82;
  --color-warning: 255 167 51;
  --color-ink: 232 235 242;
  --color-ink-muted: 139 150 172;
  --color-line: 38 48 74;
  --color-line-hover: 58 71 104;
  --color-shell: 12 18 32;
  --color-surface: 19 27 44;
  --color-success-ink: 134 214 51;
  --color-warning-ink: 255 167 51;
}

strong,
  b {
  font-weight: 500;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* ── Flash lintas-redirect (`packages/ui/views/partials/flash-messages.ejs`) ──
     Partialnya DIBAGI tiga app, jadi nama kelasnya netral (`ui-`), bukan
     ber-prefix app. Definisinya tetap per-app supaya warnanya ikut token app
     masing-masing.

     Sebelum 2026-09-21 partial itu merakit rupanya dari rantai ternary utility
     di dalam atribut `class` — satu baris 230 karakter yang harus dibaca ulang
     setiap kali seseorang menambah jenis pesan. */

.ui-alert {
  margin-bottom: 0.75rem;
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ui-alert-success {
  background-color: rgb(var(--color-success) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-ink) / var(--tw-text-opacity, 1));
}

.ui-alert-error {
  background-color: rgb(var(--color-danger) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.ui-alert-warning {
  background-color: rgb(var(--color-warning) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
}

.ui-alert-info {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.shell-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 6px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.shell-nav-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Pedoman §05: item nav aktif teks 600, nonaktif lebih tipis. Sebelumnya
     SEMUA item bobot sama sehingga tidak ada beda
     bobot antara aktif dan tidak — kelas dasar sekarang `text-row` (13.5/500)
     dan hanya yang aktif dinaikkan.
     CATATAN: latar aksen penuh + shadow di bawah TIDAK sesuai pedoman
     (§05 menuntut latar #f2f1ef + ikon aksen, tanpa shadow). Dibiarkan
     menunggu keputusan — mengubahnya menyentuh rupa seluruh navigasi. */

.shell-nav-item.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 4px 16px -4px rgba(29, 98, 174, 0.15);
  --tw-shadow-colored: 0 4px 16px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shell-nav-item.is-disabled {
  cursor: not-allowed;
}

.shell-nav-item.is-disabled:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.shell-nav-soon {
  margin-left: auto;
  border-radius: 99px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.shell-icon-btn {
  position: relative;
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.shell-icon-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.shell-dropdown {
  position: absolute;
  right: 0px;
  top: calc(100% + 8px);
  width: 14rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  --tw-shadow: 0 4px 16px -4px rgba(29, 98, 174, 0.15);
  --tw-shadow-colored: 0 4px 16px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shell-dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.shell-dropdown-item:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

/* "Keluar" — satu-satunya butir destruktif di menu ini. */

.shell-dropdown-item-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.shell-dropdown-item-danger:hover {
  background-color: rgb(var(--color-danger) / 0.1);
}

.shell-card {
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.shell-stat-card {
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.shell-stat-label {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.shell-stat-value {
  margin-top: 0.375rem;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  font-weight: 500;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.shell-stat-ctx {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.shell-pill {
  border-radius: 99px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}

.shell-pill-success {
  background-color: rgb(var(--color-success) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-ink) / var(--tw-text-opacity, 1));
}

.shell-pill-danger {
  background-color: rgb(var(--color-danger) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

/* Varian ketiga: keadaan "belum tuntas" yang bukan sukses dan bukan galat —
     dipakai badge "Menunggu sinkron" (lowongan yang `karir_id`-nya masih NULL,
     Exception #5). Idiom `bg-<token>/10` + pasangan `-ink`-nya sama persis
     dengan `.shell-pill-success` di atas; `text-warning-ink` (bukan
     `text-warning`) karena token warning polos cuma 2.01:1 di atas latar
     terang — catatannya ada di tailwind-preset.js. */

.shell-pill-warning {
  background-color: rgb(var(--color-warning) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
}

/* ── KERANGKA SIDEBAR (pedoman §05, §11) ─────────────────────────────────
   *
   * Navigasi erika HANYA sidebar. `CLAUDE.md` proyek desain menyebutnya di
   * bagian "Beda Erika": "Navigasi sidebar kiri 240px (tertutup 68px), BUKAN
   * top nav" — topbar 60px itu pola sisi kandidat. Menu akun dan lonceng
   * notifikasi karena itu tinggal DI SINI, bukan di bar atas: menu privat
   * perusahaan "hanya di dropdown kartu pengguna di sidebar — tidak pernah
   * jadi item navigasi".
   */

/* JANGAN masukkan `lg:static lg:translate-x-0` ke sini. Keduanya harus
     mengalahkan `-translate-x-full` yang disuntik `sidebarClass()` (Alpine),
     dan utility SELALU menang atas @layer components — apa pun urutan
     penulisannya. Begitu keduanya di-@apply ke sini, sidebar ter-translate
     keluar layar di SEMUA lebar, termasuk desktop: gejalanya "sidebar langsung
     tertutup" dan tidak bisa dibuka lagi karena tombolnya cuma `lg:hidden`.
     Tempatnya di atribut class view, bersebelahan dengan x-bind:class. */

.shell-sidebar {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 20;
  display: flex;
  width: 15rem;
  flex-direction: column;
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  /* RUANG UNTUK BILAH TAB BAWAH. Sidebar ini `inset-y-0` — ia setinggi layar
       penuh — sementara di bawah `lg` ada bilah tab setinggi 54px yang duduk di
       `z-20` yang SAMA dan dirender belakangan, jadi ia menang. Akibatnya kaki
       sidebar (kartu akun + notifikasi) berada DI BELAKANG bilah itu: terukur
       2026-09-10 di 390px, kartu akun berakhir di y=878 sementara bilah mulai
       di y=836 — 42 dari 54px tingginya tidak bisa disentuh sama sekali.

       Padding, BUKAN menaikkan z-index sidebar: bilah tab tetap terlihat dan
       tetap bisa ditekan selagi laci terbuka, jadi pemakai tidak kehilangan
       penanda "saya sedang di halaman mana". Menutupinya dengan sidebar akan
       memperbaiki gejalanya sambil membuang informasi itu.

       Nilainya sadar-safe-area, sama seperti `.shell-bottomnav-space` yang
       sudah dipakai untuk kaki konten: di peranti dengan indikator home,
       bilahnya lebih tinggi dari 54px dan padding tetap harus ikut. `pb-14`
       polos tidak tahu itu. */
}

@media (max-width: 1023px) {
  .shell-sidebar {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
}

/* §02: Erika BUKAN logo terpisah. Wordmark "erika" buatan sendiri dilarang
     eksplisit ("Membuat wordmark Erika sendiri atau mengganti huruf logo").
     Bentuk yang sah: logo Karir + pil teks "Erika"; kotak aksen berhuruf E
     28px adalah bentuk SIDEBAR TERTUTUP.
     TODO: aset logo Karir belum ada di apps/erika/public. Pedoman sumber
     menautkannya dari karir.com — jangan di-hotlink, self-host seperti font
     (nodejs-migration-standard.md §8). Sampai itu ada, kotak E dipakai
     sebagai penanda sementara di kedua keadaan. */

.shell-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 12px;
  padding-top: 16px;
}

.shell-brand-mark {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.shell-brand-pill {
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Label grup nav. Tanpa `uppercase tracking-wide` + bobot 700 — github.md
     mencatatnya sebagai penyimpangan yang disengaja dan bobot >=700 dilarang. */

.shell-navlabel {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 0.375rem;
  padding-top: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Kartu pengguna di KAKI sidebar — pemicu menu privat perusahaan. */

.shell-user-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.shell-user-card:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.shell-user-avatar {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.shell-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.shell-user-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Dropdown akun MUNCUL KE ATAS (§11) — ia duduk di kaki sidebar, arah bawah
     akan keluar layar. `.shell-dropdown` yang lama membuka ke bawah dan
     dipakai topbar; keduanya sengaja dibiarkan berdampingan sampai tidak ada
     lagi pemakai `.shell-dropdown`. */

.shell-dropdown-up {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0px;
  right: 0px;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding: 0.375rem;
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* "Keluar" dipisah garis (§11). Hover pedoman #fef2f2; repo belum punya
     token danger-soft, `bg-danger/10` idiom yang sudah dipakai `.shell-pill-danger`. */

.shell-dropdown-sep {
  margin-top: 0.375rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-top: 0.375rem;
}

/* Popover notifikasi 340px — angka dari pedoman §13, ditulis sekali di sini
     supaya tidak jadi `w-[340px]` lepas di view. */

.shell-notif-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0px;
  width: 340px;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Widget paket. DATAR: `bg-gradient-to-br from-erika to-erika-link` yang
     lama melanggar larangan gradient (§14), dan github.md sudah mencatat
     perbaikannya — "jadi kartu aksen lembut datar". */

.shell-plan-card {
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika-soft) / var(--tw-bg-opacity, 1));
  padding: 12px;
}

/* Kartu angka — pedoman §10: hitungan ditampilkan sebagai "deret kartu
     berisi angka", yang terpilih memakai tint aksen. Dipakai daftar CATS
     (Total / Pelamar Baru); deret enam tahap pelamar memakai kelas yang sama
     supaya tidak lahir rupa kedua untuk benda yang sama. */

/* INLINE, bukan kartu besar: angka + label berdampingan dalam satu pil
     setinggi kontrol. Versi blok bertumpuk (angka 24px di atas label, rata
     tengah) memakan tiga baris tinggi untuk dua angka — di daftar CATS ia
     mendominasi kartu lowongan padahal cuma pelengkap judul. */

.e-count-card {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-count-card.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika-soft) / var(--tw-bg-opacity, 1));
}

.e-count-value {
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-count-label {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Placeholder angka selama dimuat asinkron (kartu CATS, GET /cats/counts):
     balok selebar ±2 digit di garis dasar yang sama, berdenyut hanya bila
     pengguna tidak meminta gerak dikurangi. */

.e-count-skeleton {
  display: inline-block;
  height: 0.75rem;
  width: 0.875rem;
  border-radius: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-line) / var(--tw-bg-opacity, 1));
  vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pulse {
  }

  .e-count-skeleton {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

/* ── KEPALA HALAMAN ──────────────────────────────────────────────────────
   * Judul pindah dari topbar ke dalam kolom konten. `text-section` sudah
   * persis spesifikasi pedoman untuk judul halaman: 20px / 600 / -0.3px. */

.shell-page-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shell-page-title {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Breadcrumb halaman anak (§11): 11.5px, pemisah ri-arrow-right-s-line,
     ruas terakhir tanpa tautan. Pemisah pedoman #c4c3c0 dan ruas terakhir
     #37352f belum punya token di erika (netral repo masih dingin) — dipetakan
     ke ink-muted/ink sampai kontradiksi #2 ditutup untuk netral. */

.shell-breadcrumb {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.shell-breadcrumb-current {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* ── ATOM FORM & TAMPILAN ────────────────────────────────────────────────
   *
   * KENAPA ADA: sebelum blok ini, erika tidak punya satu pun kelas untuk
   * kontrol form. Hasilnya terukur (`pnpm audit:ui`): 144 <button> ditulis
   * dengan 77 string utility BERBEDA, 92 input teks dengan 13 varian, dan
   * dua checkbox menumbuhkan `focus:ring-erika` sendiri — padahal
   * UI Guideline Erika §07 menyatakan "fokus = border aksen, tanpa ring".
   * Karir tidak punya masalah ini karena punya lapis `.k-*`: 151 atom,
   * hanya 3 yang lepas. Blok ini memindahkan mekanisme itu ke erika.
   *
   * PREFIX `e-`, BUKAN `shell-`: `shell-*` berarti kerangka app (sidebar,
   * topbar, dropdown). Atom form dipakai di mana saja, jadi prefiksnya
   * sejajar dengan `k-*` milik karir.
   *
   * SEMUA NILAI DARI SKALA TERTUTUP di packages/ui/src/tailwind-preset.js —
   * `rounded-control` (6px), ramp `text-row/body/meta/badge` yang bobotnya
   * sudah berhenti di 600. Jangan menambah px/rem lepas di sini; kalau butuh
   * nilai baru, tambahkan ke preset supaya kedua app ikut.
   *
   * TIGA PERUBAHAN TAMPAK yang disengaja, mengikuti pedoman yang menang atas
   * kode (github.md "Catatan penyimpangan yang disengaja"):
   *   1. Bobot 600, bukan 700 — pedoman melarang >=700.
   *   2. Fokus = border aksen, tanpa ring.
   *   3. Tinggi kontrol dikunci ke 36px (32px kecil, 28px ikon), bukan
   *      hasil sampingan padding yang berbeda-beda per halaman.
   */

.e-btn {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.e-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.e-btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika-link) / var(--tw-bg-opacity, 1));
}

/* Hover mengubah latar DAN border — pedoman §07. Sebelum `line-hover` ada di
     preset, aturan ini tidak bisa dipatuhi tanpa hex lepas di view. */

.e-btn-secondary {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-btn-secondary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.e-btn-ghost {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Destruktif = OUTLINE, tidak pernah fill merah (Snippet Erika blok 03:
     "destruktif (outline saja, tidak pernah fill merah)"). Versi pertama kelas
     ini memakai `bg-danger text-white` — salah arah, diperbaiki 2026-08-11. */

.e-btn-danger {
  border-width: 1px;
  border-color: rgb(var(--color-danger) / 0.4);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.e-btn-danger:hover {
  background-color: rgb(var(--color-danger) / 0.1);
}

.e-btn-sm {
  height: 2rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
}

/* 28px — "tombol ikon aksi baris 28px, selalu terlihat" (pedoman §07). */

.e-btn-icon {
  height: 1.75rem;
  width: 1.75rem;
  gap: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

/* Aksi berupa teks ("Hapus semua", "Reset", "Batal pilih"). Bukan `.e-btn`:
     ia tidak punya tinggi/padding kontrol dan duduk di dalam baris teks. */

.e-link {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-link:hover {
  text-decoration-line: underline;
}

.e-input,
  .e-select,
  .e-textarea {
  width: 100%;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-input::-moz-placeholder, .e-select::-moz-placeholder, .e-textarea::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-input::placeholder,
  .e-select::placeholder,
  .e-textarea::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-input:hover,
  .e-select:hover,
  .e-textarea:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
}

.e-input,
  .e-select,
  .e-textarea {
  /* Tanpa ring: pedoman §07 "Fokus = border aksen, tanpa ring atau shadow". */
}

.e-input:focus,
  .e-select:focus,
  .e-textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.e-input:disabled,
  .e-select:disabled,
  .e-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.e-input,
  .e-select {
  height: 2.25rem;
}

/* Chevron select. Pedoman §07 memaku ikon di dalam field pada "12px dari
     tepi kanan"; panah BAWAAN browser tidak bisa dipaku ke angka itu — tiap
     mesin render menaruhnya di tempat berbeda dan Blink menempelkannya nyaris
     ke garis tepi. Itu penyebab chevron terlihat mepet, bukan kurang padding.
     Jadi panah UA dimatikan dan digambar sendiri. */

.e-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* BUKAN `@apply pr-9`: aturan `.e-input, .e-select, .e-textarea` di atas
       sudah menulis `px-3`, dan urutan keluaran @apply ditentukan Tailwind
       (per properti), bukan urutan penulisan — mana yang menang jadi tidak
       deterministik. Ditulis sebagai properti biasa supaya pasti. */
  padding-right: 2.25rem;
  /* 36px = chevron 16 + tepi 12 + jeda teks 8 */
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 1rem 1rem;
  /* Warna di-hardcode: data URI tidak bisa membaca custom property. Nilainya
       MENGIKUTI --color-ink-muted (#6B7280 terang / #8B96AC gelap) — kalau
       token itu berubah, dua baris ini ikut diubah manual. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236B7280%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
}

[data-theme="dark"] .e-select {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238B96AC%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
}

/* 40px hanya di form auth (pedoman §07), 32px untuk pemilih nilai dalam baris. */

.e-input-lg {
  height: 2.5rem;
}

.e-input-sm,
  .e-select-sm {
  height: 2rem;
}

.e-textarea {
  min-height: 80px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.e-input-invalid {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity, 1));
}

.e-input-invalid:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity, 1));
}

/* Berkas. `input[type=file]` punya permukaan bawaan browser (tombol
     ::file-selector-button) yang TIDAK ikut kelas induknya — tanpa varian
     `file:` di bawah, tombolnya tetap rupa bawaan sistem dan tinggi kontrol
     36px yang dikunci di sini bocor di satu-satunya tempat yang terlihat.
     Tombolnya sengaja dibuat menyerupai `.e-btn-secondary` (latar shell,
     tanpa border sendiri karena border-nya milik field). */

.e-file {
  height: 2.25rem;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-file:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
}

.e-file:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.e-file:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.e-file::file-selector-button {
  margin-right: 0.75rem;
  height: 2.25rem;
  cursor: pointer;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Logo & galeri perusahaan di "Profil di halaman karir.com" (Pengaturan).
     Logo dibingkai persegi seperti di halaman perusahaan karir.com — logo
     apa pun rasionya muat utuh (`object-contain`). Thumbnail galeri 16:9,
     dipotong (`object-cover`) supaya grid rata. */

.e-company-logo {
  display: flex;
  height: 4rem;
  width: 4rem;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-company-logo > img {
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  -o-object-fit: contain;
     object-fit: contain;
  padding: 0.25rem;
}

/* Galeri berstandar 1200 × 900 (4:3) sejak 2026-10-21 — kotak pratinjau
     ikut rasio itu supaya yang terlihat di sini = yang tersimpan. */

.e-gallery-thumb {
  display: flex;
  aspect-ratio: 4/3;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-gallery-thumb > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Banner perusahaan — standar 1600 × 400 (4:1), keputusan pemilik
     2026-10-21 (sama dengan `.k-banner` halaman perusahaan karir). */

.e-banner-preview {
  display: flex;
  aspect-ratio: 4/1;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-banner-preview > img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Pemotong gambar (`imageCropUpload`): kanvas beresolusi ukuran standar,
     ditampilkan selebar kolomnya; digeser dengan seret (pointer/sentuh). */

.e-crop {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 6px;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding: 12px;
}

.e-crop-canvas {
  display: block;
  height: auto;
  width: 100%;
  max-width: 100%;
  cursor: grab;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  touch-action: none;
}

.e-crop-canvas:active {
  cursor: grabbing;
}

.e-crop-canvas-square {
  max-width: 20rem;
}

.e-crop-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-crop-zoom > input {
  min-width: 0px;
  flex: 1 1 0%;
  accent-color: rgb(var(--color-erika) / 1);
}

/* Kelengkapan profil publik: bilah tipis + teks "x dari 8 terisi". Lebar
     isian dari atribut `value` <progress> — tanpa style inline (CSP). */

.e-meter {
  height: 0.375rem;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.e-meter::-webkit-progress-bar {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.e-meter::-webkit-progress-value {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
}

.e-meter::-moz-progress-bar {
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
}

/* 16px radius 4px — angka eksplisit UI Guideline Erika §09. Sengaja di luar
     skala radius (6/8/12/99): kotak 16px dengan radius 6px terbaca seperti pil.
     Karir memakai 3px karena pedomannya sendiri berbeda — jangan disamakan. */

/* Border `line-hover`, BUKAN `line` — sengaja lebih gelap daripada input.
     Pedoman memakai tiga nilai border berbeda: #eeeeee kartu, #e5e5e5 input,
     #d9d8d5 kotak centang. Kotak 16px yang kosong butuh tepi lebih kuat;
     dengan border seterang input, kotak KOSONG praktis tidak terlihat dan
     tercentang/tidak jadi bergantung pada isian aksen saja (keluhan yang sama
     tercatat sebagai celah kontras di ui-guideline-kandidat.md §2).
     WAJIB sama dengan `.e-box` di bawah — dua rupa checkbox dalam satu app
     adalah cacat yang lapis komponen ini ada untuk mencegah. */

.e-checkbox {
  height: 1rem;
  width: 1rem;
  flex: none;
  border-radius: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
  accent-color: rgb(var(--color-erika) / 1);
}

.e-radio {
  height: 1rem;
  width: 1rem;
  flex: none;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
  accent-color: rgb(var(--color-erika) / 1);
}

/* ── VARIAN YANG LAHIR DARI PENYAPUAN 2026-09-09 ────────────────────────
     Sembilan kelas di bawah bukan penambahan spekulatif. Masing-masing
     menggantikan satu rupa yang SUDAH hidup di view sebagai utility lepas dan
     terhitung oleh `pnpm audit:ui`; tanpa mereka, 271 kontrol erika tidak bisa
     dibawa ke nol tanpa mengubah tampilannya. Angka pemakaian dicatat supaya
     kalau kelak nol, kelasnya ikut dihapus, bukan mengendap. */

/* Aksi yang MENYETUJUI (terima lamaran, luluskan tahap). Satu-satunya isian
     penuh selain primary — dan sengaja bukan `.e-btn-danger` yang outline:
     yang destruktif ditahan, yang menyetujui didorong. 1 pemakaian. */

.e-btn-success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.e-btn-success:hover {
  opacity: 0.9;
}

/* Penambah baris pada daftar yang masih kosong ("+ Tambah pengalaman").
     Garis putus-putus = tempat yang MENUNGGU diisi, beda dari tombol biasa. */

.e-btn-dashed {
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-btn-dashed:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Kartu-pilihan saling-eksklusif (Admin / Member di form anggota tim).
     Border 2px supaya keadaan terpilih terbaca tanpa mengandalkan warna saja.
     Kelas keadaannya diikat Alpine — lihat `.e-choicebox-active`. */

.e-choicebox {
  border-radius: 6px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding: 0.75rem;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-choicebox:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
}

.e-choicebox-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  background-color: rgb(var(--color-erika) / 0.05);
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika) / var(--tw-text-opacity, 1));
}

/* Kepala seksi yang bisa dilipat. `text-left` ada di sini, bukan di view:
     ia mengoreksi `text-align:center` bawaan <button>, jadi ia bagian dari
     rupa kontrol, bukan tata letak halaman. */

.e-accordionhead {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-accordionhead:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

/* Tombol buang pada pratinjau gambar — duduk DI ATAS gambar, jadi
     warnanya tidak boleh mengikuti tema: latarnya bisa foto apa saja. */

.e-imgremove {
  position: absolute;
  border-radius: 9999px;
  background-color: rgb(0 0 0 / 0.6);
  padding: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-imgremove:hover {
  background-color: rgb(0 0 0 / 0.8);
}

/* `input[type=file]` yang sengaja disembunyikan di balik tombol sendiri.
     `sr-only`, BUKAN `hidden`: `display:none` membuat field tidak bisa
     difokuskan keyboard, jadi pemakai keyboard tidak punya jalan sama sekali
     ke pemilih berkasnya. 3 pemakaian. */

.e-file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Aksi-teks bernada destruktif dan bernada redam. Ukurannya ikut `.e-link`;
     yang berbeda hanya warnanya. */

.e-link-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.e-link-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-link-muted:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

/* Aksi-teks sebesar teks isi — judul baris yang bisa diklik (nama pelamar,
     nama tahapan). `.e-link` terlalu kecil untuk peran itu. */

.e-link-body {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 500;
}

/* Tombol ikon BULAT (pemilih tema). `.e-btn-icon` sudah mengunci 28px;
     yang berbeda hanya radiusnya. */

.e-btn-round {
  border-radius: 99px;
}

/* Batas paginasi. Varian `disabled:` milik `.e-btn` hanya berlaku pada
     <button>; tautan paginasi adalah <a> dan tidak punya atribut `disabled`,
     jadi keadaan itu butuh kelasnya sendiri. Hilang tanpa sengaja saat
     penyapuan kontrol 2026-09-09 — atribut `class` lama memuat ekspresi EJS
     `pagination.page <= 1 ? "pointer-events-none opacity-40" : ""` dan ikut
     tertimpa; ditemukan saat audit resume_search. */

.e-btn.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Tombol sekunder yang menandai keadaan "aktif/tersimpan" — dipakai tombol
     bookmark di kartu Cari Resume. Warna saja tidak cukup sebagai penanda, jadi
     ikonnya juga berganti dari outline ke fill; kelas ini yang mengurus tepi
     dan warnanya. */

.e-btn-secondary.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

/* ── DATA TERKUNCI ────────────────────────────────────────────────────
     Teks yang tergambar di sini BUKAN data sungguhan: server mengganti
     nilainya dengan karakter acak sebelum HTML-nya dikirim, jadi nilai asli
     tidak pernah meninggalkan server. Blur di sini murni rupa — ia mengaburkan
     karakter acak, bukan menyembunyikan sesuatu yang sebenarnya ada di DOM.

     Perbedaannya penting: blur adalah CSS, dan CSS tembus oleh devtools,
     "disable styles", blok-salin, Ctrl+F, dan pembaca layar. Kalau yang
     diblur data asli, ia kostum, bukan pengaman. Karena yang diblur di sini
     sampah acak, tidak ada yang bisa dipanen dari sana.

     `select-none` + `pointer-events-none` supaya tidak ada yang tergoda
     menyalinnya; sampah acak yang tersalin ke clipboard cuma membingungkan.
     Elemennya sendiri `aria-hidden` di markup, dengan teks "Terkunci" versi
     `sr-only` di sebelahnya — pembaca layar tidak boleh dibacakan sampah. */

.e-locked {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  filter: blur(3px);
}

/* Keadaan terpilih pada tombol ghost yang dipakai sebagai segmented control
     (pemilih tema). Diikat Alpine lewat `is-active`, bukan dirakit di .ts. */

.e-btn-ghost.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.e-btn-ghost.is-active:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika-link) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Tab berbentuk KARTU (tab lowongan): satu blok selebar kolom dengan
     penanda aksen di tepi bawah. Beda peran dari `.e-tab` yang berupa
     garis bawah di dalam satu baris — makanya kelas sendiri, bukan varian. */

.e-tabcard {
  width: 100%;
  border-radius: 6px;
  border-bottom-width: 2px;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-tabcard:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-tabcard.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Langkah yang SUDAH dilewati — aksen diredam, teks tetap penuh. Tanpa
     keadaan ketiga ini, langkah 1 yang selesai tampak sama dengan langkah 3
     yang belum disentuh. */

.e-tabcard.is-done {
  border-color: rgb(var(--color-erika) / 0.4);
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Tanda kolom wajib. Sebelum ini TIDAK ADA satu pun form erika yang
     menandainya — kewajibannya baru ketahuan saat submit ditolak peramban
     (audit lapis kedua, temuan 07). `aria-required` dipasang berdampingan di
     markup: bintang untuk yang melihat, atribut untuk yang mendengar. */

.e-wajib {
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.e-label {
  margin-bottom: 0.25rem;
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Status lowongan — pedoman §07: Aktif / Dijeda / Draf / Ditutup. */

.e-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}

.e-badge-active {
  background-color: rgb(var(--color-success) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-ink) / var(--tw-text-opacity, 1));
}

.e-badge-paused {
  background-color: rgb(var(--color-warning) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
}

.e-badge-draft {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-badge-closed {
  background-color: rgb(var(--color-danger) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

/* Penanda NETRAL berbingkai — dipakai di dalam baris popover, tempat
     `.e-badge-draft` (latar `shell`, tanpa border) lenyap begitu barisnya
     ter-hover karena hover-nya juga `bg-shell`. Bukan warna semantik: §14
     mengunci warna semantik untuk penanda status saja. */

.e-badge-outline {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Grade asesmen — chip berbingkai radius 6px; B memakai tint aksen, bukan
     biru generik, "agar seluruh biru di produk berasal dari satu sumber". */

.e-grade {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  border-width: 1px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}

.e-grade-a {
  border-color: rgb(var(--color-success) / 0.4);
  background-color: rgb(var(--color-success) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-success-ink) / var(--tw-text-opacity, 1));
}

/* `text-erika-link`, BUKAN `text-erika`: di mode terang keduanya #1e63ae
     (identik), tapi di mode gelap `--color-erika` = #35689F adalah warna
     ISIAN tombol — dipakai sebagai teks ia cuma 3,23:1 di atas kanvas gelap,
     di bawah ambang 4,5:1 WCAG 1.4.3. Yang untuk teks `--color-erika-link`
     = #5B9BE0. Terukur 2026-09-08. */

.e-grade-b {
  border-color: rgb(var(--color-erika) / 0.4);
  background-color: rgb(var(--color-erika) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

.e-grade-c {
  border-color: rgb(var(--color-warning) / 0.4);
  background-color: rgb(var(--color-warning) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
}

.e-grade-d {
  border-color: rgb(var(--color-danger) / 0.4);
  background-color: rgb(var(--color-danger) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

/* Lebar maksimum halaman pengaturan — pedoman §04 memaku 820px. Ditulis
     SEKALI di sini dengan sumbernya, bukan `max-w-[820px]` yang diketik ulang
     di view (nilai arbitrer di view dilarang, dan di sana asal-usul angkanya
     hilang). */

.e-settings-page {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 820px;
}

/* Pesan galat di dalam halaman (bukan flash lintas-redirect). Kelasnya
     STATIS dan dipasang di view, bukan dirakit di komponen Alpine: kelas yang
     lahir sebagai string di berkas .ts tidak terlihat scanner JIT Tailwind dan
     hilang diam-diam dari CSS hasil build (jebakan yang sudah tercatat di
     apps/erika/tailwind.config.js). */

.e-alert-error {
  border-radius: 6px;
  background-color: rgb(var(--color-danger) / 0.1);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

/* Bilah impersonasi — tetap di atas isi setiap halaman saat sesi ini hasil
     "Masuk sebagai" officer. Kuning peringatan (bukan merah galat): ini bukan
     kesalahan, tapi keadaan yang HARUS terlihat supaya officer tidak lupa
     sedang bertindak atas nama orang lain. Lihat impersonasi-masuk-sebagai.md §6. */

.e-impersonation-bar {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-radius: 6px;
  border-width: 1px;
  border-color: rgb(var(--color-warning) / 0.4);
  background-color: rgb(var(--color-warning) / 0.1);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
}

.e-impersonation-bar-exit {
  margin-left: auto;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

/* Banner masa aktif membership (skenario 2, 2026-10-11): kuning H-7, merah
     sesudah habis. Sebaris dengan bilah impersonasi — sama-sama pemberitahuan
     tingkat sesi di atas isi halaman, bukan pesan satu aksi (`.ui-alert`). */

.e-membership-banner {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  border-radius: 6px;
  border-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
}

.e-membership-banner-warning {
  border-color: rgb(var(--color-warning) / 0.4);
  background-color: rgb(var(--color-warning) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
}

.e-membership-banner-danger {
  border-color: rgb(var(--color-danger) / 0.4);
  background-color: rgb(var(--color-danger) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.e-membership-banner-action {
  margin-left: auto;
  font-weight: 500;
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

/* Keterangan di bawah sebuah isian ("Ukuran maks. 2MB…", nama berkas yang
     sedang terpasang). Kelas tersendiri, bukan `text-caption text-ink-muted`
     yang diketik ulang: ukuran & warna huruf termasuk RUPA, dan aturannya
     hanya bisa berubah di satu tempat kalau namanya ada. */

.e-field-hint {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Pesan galat di bawah isian yang ber-`.e-input-invalid` (mis. "Email
     Penerima tidak valid" di form lowongan). Pasangan `.e-field-hint`, dengan
     alasan yang sama: warna & ukuran huruf adalah rupa. */

.e-field-error {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

/* Tab pengaturan — garis bawah aksen, BUKAN kolom kiri: pedoman §10
     melarang dua navigasi vertikal dalam satu layar. */

.e-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
}

.e-tab {
  margin-bottom: -1px;
  border-bottom-width: 2px;
  border-color: transparent;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-bottom: 0.5rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-tab:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-tab.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Tab tingkat HALAMAN (bilah status pelamar, tab jenis soal): lebih besar
     daripada `.e-tab` yang duduk di dalam kartu pengaturan. Dua ukuran ini
     memang sudah hidup berdampingan sebelum kelas ini ada — yang berubah cuma
     tempat angkanya, dari utility yang diketik ulang di tiga view menjadi satu
     definisi. Kalau kelak diputuskan menyatukan keduanya, ini tempatnya. */

.e-tab-page {
  flex: none;
  border-bottom-width: 2px;
  border-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-tab-page:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-tab-page.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

.e-toggle {
  display: flex;
  height: 1.25rem;
  width: 2.25rem;
  align-items: center;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-line) / var(--tw-bg-opacity, 1));
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-toggle.is-on {
  justify-content: flex-end;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
}

.e-toggle-knob {
  display: block;
  height: 1rem;
  width: 1rem;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

/* Empty state — WAJIB di tiap daftar dan tab (pedoman §10): ikon, satu baris
     penyebab, satu saran tindakan, satu tombol pemulihan. */

.e-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 28px;
  padding-bottom: 28px;
  text-align: center;
}

.e-empty-icon {
  font-size: 1.5rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* ── SEKSI 09: SELECT, FILTER & DRAWER ───────────────────────────────────
   *
   * Angka px eksplisit di bawah (280 · 210 · 24 · 16) datang langsung dari
   * pedoman dan Snippet blok 12–15. Ia BUKAN nilai karangan, jadi tidak masuk
   * skala tertutup — tapi juga tidak boleh ditulis ulang per view.
   *
   * "Dibangun dari primitif yang sudah ada: field + chip + popover + checkbox.
   *  Tidak ada komponen select pihak ketiga dan tidak ada gaya baru."
   */

/* Anatomi popover berlaku untuk SEMUA popover: multi-select, select, sortir,
     menu akun, notifikasi. Satu-satunya tempat shadow dibolehkan. */

.e-popover {
  position: absolute;
  z-index: 30;
  overflow: hidden;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.e-popover-list {
  max-height: 210px;
  overflow-y: auto;
  padding: 0.375rem;
}

.e-popover-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-popover-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.e-popover-row {
  /* Butir menu yang dikunci (mis. export tanpa baris) — tanpa aturan ini ia
       tetap menyala saat disorot dan terbaca seperti bisa ditekan. */
}

.e-popover-row:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.e-popover-row:hover:disabled {
  background-color: transparent;
}

/* Jumlah hasil rata kanan — pedoman menuntut setiap opsi menyebut dampaknya. */

.e-popover-count {
  margin-left: auto;
  flex: none;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-popover-search {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.5rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Kelas eksplisit, BUKAN selector turunan `.e-popover-search input`: audit
     atom UI membaca atribut `class` di markup, jadi kontrol yang hanya bergaya
     lewat turunan terbaca sebagai "utility lepas" dan tidak terlindungi. */

.e-search-input {
  min-width: 0px;
  flex: 1 1 0%;
  border-width: 0px;
  background-color: transparent;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.e-search-input::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-search-input::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* `items-start`, bukan `items-center`: sejak kaki ini juga dipakai menu
     Export — yang kalimatnya bisa tiga baris — ikon yang di-center melayang di
     tengah paragraf, jauh dari baris pertama yang ia tandai. Untuk kaki
     satu-baris (multi-select) keduanya menghasilkan tata letak yang sama. */

.e-popover-footer {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Kotak centang BUATAN, bukan <input> — di dalam popover ia harus bisa
     menampilkan ikon centang putih di atas isian aksen (§09). `accent-*` pada
     input native tidak menghasilkan bentuk itu. */

.e-box {
  display: flex;
  height: 1rem;
  width: 1rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  color: transparent;
}

.e-box.is-on {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ── GRUP OPSI DI DALAM LACI FILTER ────────────────────────────────────
     Bentuk INLINE dari multi-select, bukan popover. Alasannya bukan selera:
     `.e-ms-popover` diposisikan absolut relatif pemicunya, sementara
     `.e-drawer-body` punya `overflow-y-auto` — popover di dalamnya akan
     terpotong tepi laci dan ikut tergulir menjauh dari pemicunya. Lagi pula
     laci ITU SENDIRI sudah overlay; membuka popover di dalam overlay adalah
     lapisan kedua yang tidak dibutuhkan siapa pun.

     Yang DIPAKAI ULANG dari multi-select: `.e-box` (kotak buatan §5),
     `.e-popover-search` + `.e-search-input`, dan `.e-popover-count`. Jadi
     rupanya identik dengan popover — yang berbeda cuma susunannya.

     ── KENAPA INI MENGGANTI `max-h-40 overflow-y-auto` ────────────────────
     Bentuk lama membungkus tiap grup dalam kotak setinggi 160px yang
     menggulir sendiri, DI DALAM laci yang juga menggulir. Untuk Jurusan itu
     berarti 6.356px isi di jendela 160px (rasio 40:1) dengan gulir bersarang.
     Di sini daftarnya dibiarkan setinggi isinya; yang menggulir HANYA laci.
     Pemendeknya bukan potongan tinggi, melainkan kotak cari. */

.e-optiongroup {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-bottom: 0.5rem;
}

/* Baris judul grup = target buka-tutup. 44px, jadi ia nyaman disentuh
     walau isinya cuma teks. `list-none` + `::-webkit-details-marker`
     mencabut segitiga bawaan peramban; penandanya chevron kita sendiri
     supaya arah dan warnanya konsisten dengan kontrol lain. */

.e-optionsummary {
  display: flex;
  min-height: 2.75rem;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-optionsummary::-webkit-details-marker {
  display: none;
}

/* Jumlah TOTAL opsi di grup — bukan jumlah hasil (§12 minta jumlah hasil,
     dan datanya belum ada; lihat catatan di commit laci filter). Angka ini
     tetap menjawab "seberapa besar yang akan terbuka kalau saya ketuk". */

.e-optionjumlah {
  margin-left: auto;
  flex: none;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-optionchevron {
  flex: none;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

details[open] > .e-optionsummary .e-optionchevron {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.e-optionsearch {
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
}

.e-optionlist {
  display: flex;
  flex-direction: column;
}

/* Tinggi 40px: kotak centangnya TETAP 16px sesuai §5 — yang membesar area
     sentuhnya, bukan gambarnya. Bentuk lama (`py-1` pada label) menyisakan
     target 13×13px, seperempat luas minimum WCAG 2.5.8. */

.e-optionrow {
  display: flex;
  min-height: 2.5rem;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-optionrow:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

/* ── `[hidden]` HARUS DIMENANGKAN SECARA EKSPLISIT ────────────────────
     `.e-optionrow` menyetel `display:flex`. Aturan `[hidden]{display:none}`
     datang dari stylesheet BAWAAN PERAMBAN, dan stylesheet penulis selalu
     menang atas bawaan peramban pada spesifisitas yang setara — jadi baris
     yang disembunyikan penyaring TETAP TERGAMBAR.

     Gejalanya kejam karena setengah benar: `filterOptionGroup` memang menyetel
     `el.hidden = true`, dan pemeriksaan DOM (`r.hidden`) melaporkan
     penyaringan berhasil. Yang tidak berubah cuma yang dilihat mata. Ketahuan
     dari tangkapan layar form Cabang — kotak cari berisi "sura", daftarnya
     utuh 535 baris. Cacat ini hidup di laci filter sejak pola ini dibuat. */

.e-optionrow[hidden] {
  display: none;
}

/* Input native DISEMBUNYIKAN, bukan dihapus: ia tetap yang membawa nilai
     saat form dikirim dan tetap yang menerima fokus keyboard. Yang terlihat
     `.e-box` di sebelahnya — persis yang §5 minta untuk multi-select. */

.e-optioninput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Radio memakai kotak yang sama, hanya bulat — §5 mengunci rupa checkbox
     tapi tidak melarang varian bentuk untuk pilih-satu, dan membedakan
     keduanya justru yang memberi tahu pengguna bahwa ini pilih SATU. */

.e-box-bulat {
  border-radius: 99px;
}

.e-optioninput:checked + .e-box {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.e-optioninput:focus-visible + .e-box {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
}

.e-optionnote {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* ── SATU BARIS YANG MENGGULIR, BUKAN TUMPUKAN — DI BAWAH `sm` SAJA ────
     Di 390px, kontrol yang membungkus adalah alasan utama layar pertama
     daftar pelamar habis untuk perabot (terukur 792px dari 844px = 94%,
     audit 2026-09-08). Dua bilah di bawah ini menggulir mendatar di HP dan
     kembali membungkus seperti semula sejak `sm` — desktop tidak berubah
     sedikit pun.

     Polanya sama dengan pita tab status tepat di atasnya, yang memang sudah
     `overflow-x-auto`: satu bahasa untuk "terlalu banyak kontrol, layarnya
     sempit", bukan dua.

     `pb-1` memberi ruang scrollbar di peramban yang menampilkannya, dan
     dinolkan lagi di `sm` supaya jarak desktop tidak bergeser. */

/* `display: contents` sejak `sm`, BUKAN sekadar mengembalikan flex-wrap:
     pembungkus ini harus LENYAP dari tata letak desktop. Versi pertamanya
     memakai `sm:flex-1` dan hasilnya bar terbelah dua baris — pembungkusnya
     ikut berebut ruang dengan kolom kata kunci, dan layar pertama desktop
     malah naik 360px -> 392px. Dengan `contents`, anak-anaknya kembali jadi
     anak langsung `.e-filterbar` persis seperti sebelum partial ini ada. */

/* ── STRIP FILTER DI HP: TIDAK LAGI MENGGULIR MENDATAR ─────────────────
     Versi sebelumnya `overflow-x-auto`, dan itu merusak DUA hal sekaligus —
     keduanya terukur di 390px pada 2026-09-09:

     1. `scrollWidth` 874px di wadah 358px. "Filter lanjutan" mulai di x=680
        dan "Cari" berakhir di x=890: dua kontrol terpenting di bar ini tidak
        terlihat sampai pemakai menebak sendiri bahwa barisnya bisa digeser.

     2. `overflow-x: auto` MEMAKSA `overflow-y` ikut jadi `auto` (spesifikasi
        CSS: begitu satu sumbu non-visible, sumbu lain tidak boleh `visible`).
        Akibatnya panel multi-select terpotong — 282px dari panelnya berada di
        luar wadah dan tidak tergambar sama sekali. Itu penyebab "dropdown
        tidak kelihatan saat fokus"; bukan z-index, bukan Alpine.

     Gantinya: kedua pil berbagi baris (`flex-1`), tombol menyusut jadi ikon,
     dan semuanya muat tanpa digeser sedikit pun. */

.e-filterbar-pills {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

@media (min-width: 640px) {
  .e-filterbar-pills {
    display: contents;
  }
}

/* Hanya berlaku selama pembungkusnya benar-benar wadah flex (di bawah sm).
     Sejak sm ia `display: contents` dan aturan ini tidak boleh ikut mengubah
     perilaku menyusut anak-anaknya di desktop. */

@media (max-width: 639px) {
  .e-filterbar-pills > * {
    flex: none;
  }

  /* Kedua pil berbagi sisa ruang. `max-w-none` membatalkan batas 320px milik
       `.e-ms-wrap` — batas itu untuk desktop, di HP ia justru yang membuat
       barisnya melebihi layar. */

  .e-filterbar-pills > .e-ms-wrap {
    min-width: 0px;
    max-width: none;
    flex: 1 1 0%;
    /* `position: static` WAJIB di SINI juga, bukan cuma di `.e-ms-anchor`.
         `.e-ms-wrap` sendiri `relative`; mematikan jangkar di anaknya saja
         hanya menaikkan jangkarnya satu tingkat ke pembungkus ini — panelnya
         tetap selebar pil (terukur 108px), bukan selebar strip. */
    position: static;
  }

  /* Panel dijangkarkan ke SELURUH strip, bukan ke pil pemicunya. Pil di HP
       cuma ~116px; panel 280px yang dijangkar ke sana pasti menerobos tepi —
       ke kanan kalau `left-0`, ke kiri kalau `right-0`. Dengan jangkar
       dipindah ke strip, panelnya selebar strip dan selalu muat. */

  .e-filterbar-pills .e-ms-anchor {
    position: static;
  }

  .e-filterbar-pills .e-ms-popover {
    left: 0px;
    right: 0px;
    width: auto;
  }
}

/* Selector turunan, disengaja: label ini dirender `_multi-select.ejs` dan
     hanya di KONTEKS INI ia berlebihan — placeholder pill sudah berbunyi
     "Semua fungsi" / "Semua lokasi". Menambah local baru ke partial hanya
     untuk menyembunyikan label di satu tempat lebih mahal daripada satu
     baris ini. */

.e-filterbar-pills .e-label {
  display: none;
}

@media (min-width: 640px) {
  .e-filterbar-pills .e-label {
    display: block;
  }
}

.e-actionbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

@media (min-width: 640px) {
  .e-actionbar {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0px;
  }
}

@media (max-width: 639px) {
  .e-actionbar > * {
    flex: none;
  }
}

/* Judul halaman 20/600 sesuai §2 — menggantikan `text-[22px]` yang ditulis
     langsung di view (nilai arbitrer di view dilarang, dan 22 bukan angka
     pedoman). */

.e-pagetitle {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Deret aksi di sebelah judul halaman.

     Di HP labelnya `sr-only`, jadi `px-4` milik `.e-btn` cuma menyisakan ruang
     kosong di kiri-kanan ikon: tiga tombol memakan 132px dari 390px dan
     judulnya terperas jadi tiga baris. Dikunci jadi bujur sangkar 36px sampai
     `sm`, lalu kembali ke tombol berlabel.

     Ditulis sebagai aturan turunan, bukan kelas yang ditempel di tiap tombol,
     karena yang menentukan bentuknya adalah TEMPATNYA — tombol yang sama
     dipakai berlabel penuh di tempat lain. */

.e-titleactions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
}

/* Judul di baris beraksi dibatasi DUA baris di HP. Judul lowongan tidak
     punya batas panjang di DB — data uji saja sudah berisi ketikan asal
     sepanjang 40 karakter — dan tanpa batas ini tinggi header tumbuh
     sekehendak isinya lalu mendorong daftar pelamar keluar dari layar
     pertama. Judul penuh tetap tersedia lewat atribut `title`. */

.e-pagetitle-clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (min-width: 640px) {
  .e-pagetitle-clamp {
    overflow: visible;
    display: block;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none;
  }
}

.e-titleactions .e-btn {
  width: 2.25rem;
  padding-left: 0px;
  padding-right: 0px;
}

@media (min-width: 640px) {
  .e-titleactions .e-btn {
    width: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.e-ms-field {
  display: flex;
  min-height: 2.25rem;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-ms-field:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
}

.e-ms-field.is-open {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
}

.e-ms-chip {
  display: flex;
  height: 1.5rem;
  max-width: 100%;
  align-items: center;
  gap: 0.375rem;
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.5rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-ms-chip:hover {
  background-color: rgb(var(--color-line) / 0.4);
}

.e-ms-chip-label {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ikon silang di dalam chip: bukan `.e-btn-icon` (28px) — ia duduk di dalam
     chip 24px, jadi tidak boleh membawa tinggi/padding kontrol sendiri. */

.e-chip-remove {
  display: flex;
  flex: none;
  align-items: center;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-chip-remove:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-ms-placeholder {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Pembungkus + popover multi-select. Posisi dan lebar (280px, offset 4px)
     tinggal DI SINI, bukan di view: sejak larangan utility rupa berlaku,
     `w-[280px]` dan `top-[calc(100%+4px)]` di view terjaring `_arbitraryValues`
     — dan memang seharusnya, karena angkanya milik pedoman §09, bukan milik
     satu halaman. */

.e-ms-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
}

/* Varian FIELD FORM: batas 320px di atas milik strip filter, tempat
     multi-select berjajar dengan kontrol lain. Di form (lowongan baru, kriteria
     kandidat) ia satu field di kolom grid dan harus selebar input di
     sekitarnya. Popover-nya tetap 280px (§09). Dipilih lewat local
     `fullWidth` di `_multi-select.ejs`. */

.e-ms-wrap-full {
  max-width: none;
}

/* Jangkar posisi popover. Dulu utility `relative` di markup partial; ia
     butuh nama sendiri supaya strip filter bisa MEMATIKANNYA di HP (lihat
     `.e-filterbar-pills .e-ms-anchor` di atas) tanpa menyentuh pemakai lain. */

.e-ms-anchor {
  position: relative;
}

/* Geometri popover §09 (offset 4px, lebar 280px) dipakai DUA pemakai:
     multi-select filter dan menu aksi (dropdown ubah status pelamar). Ditulis
     sebagai satu aturan dengan dua nama, bukan disalin: kalau angkanya
     berubah, keduanya wajib ikut. Nama terpisah supaya `e-ms-*` tidak
     dipakai di tempat yang bukan multi-select. */

.e-ms-popover,
  .e-menu-popover {
  left: 0px;
  top: calc(100% + 4px);
  width: 280px;
}

/* Panel yang dipicu tombol RATA KANAN. Tanpa ini `left-0` mendorongnya
     keluar tepi kanan layar — pemicunya duduk di ujung baris judul. */

.e-menu-popover-end {
  left: auto;
  right: 0px;
}

/* Baris "belum ada opsi" / "tidak ada yang cocok" di dalam popover. */

.e-popover-note {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Pemicu drawer memakai tint aksen saat ada filter aktif, dengan pil angka. */

.e-filter-trigger.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  background-color: rgb(var(--color-erika) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

.e-filter-count {
  margin-left: 0.25rem;
  display: inline-flex;
  min-width: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  font-size: 10px;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* POSISI SENGAJA TIDAK DI SINI (`fixed` / `absolute` ditulis view). Halaman
     nyata memakai `fixed` supaya drawer menutupi layar; /style-guide memakai
     `absolute` di dalam kotak `relative` supaya bisa dipajang tanpa menutupi
     seluruh halaman. Satu kelas, dua konteks — kalau posisinya dipaku di sini,
     salah satunya pasti salah. */

.e-drawer-overlay {
  inset: 0px;
  background-color: rgb(var(--color-ink) / 0.3);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ── BOTTOM SHEET DI HP, LACI KANAN SEJAK `sm` ────────────────────────
     IZIN PEMILIK 2026-09-08 untuk menabrak pedoman di jalur mobile. §4
     menetapkan drawer filter 380/440px dari kanan — angka desktop, dan di
     390px laci selebar 380px sudah menjadi layar penuh; yang tersisa dari
     "laci" cuma arah datangnya, dari tepi yang paling jauh dari ibu jari.

     Tingginya dibatasi 85vh supaya konteks di belakangnya tetap terlihat —
     itu yang membedakan sheet dari halaman baru. `rounded-t-card` menandai
     bahwa ia lapisan di atas, bukan halaman.

     Transformnya di sini, BUKAN utility di markup: utility selalu menang atas
     @layer components, jadi selama `panelState()` mengembalikan
     `translate-x-full`, CSS tidak punya cara membedakan arah per lebar
     layar. Lihat catatan di filter-drawer.ts. */

.e-drawer {
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: auto;
  display: flex;
  max-height: 85vh;
  width: 100%;
  flex-direction: column;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transform: translateY(100%);
}

.e-drawer.is-open {
  transform: none;
}

@media (min-width: 640px) {
  .e-drawer {
    left: auto;
    right: auto;
    right: 0px;
    top: 0px;
    height: 100%;
    max-height: none;
    width: 380px;
    border-radius: 0px;
    border-left-width: 1px;
    border-top-width: 0px;
    transform: translateX(100%);
  }

  .e-drawer.is-open {
    transform: none;
  }
}

.e-drawer-body {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 16px;
}

/* Footer TETAP — "Reset filter lanjutan" + primer "Terapkan filter". */

.e-drawer-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding: 16px;
}

/* ── SEKSI 10: PELAMAR & DATA BERTOKEN ───────────────────────────────────*/

/* Deret kartu tahap sebagai FILTER. Papan kanban dilarang. */

.e-stage-card {
  display: flex;
  min-width: 0px;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  text-align: left;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-stage-card:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
}

.e-stage-card.is-active {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  background-color: rgb(var(--color-erika) / 0.1);
}

.e-stage-count {
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-stage-chip {
  display: inline-flex;
  height: 22px;
  align-items: center;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Bar aksi massal. Aturan §10 yang mengikat: "muncul hanya saat ada pilihan"
     DAN "menutupnya tidak boleh menggeser tabel". Di tabel style-guide kedua
     hal itu dipenuhi dengan overlay di dalam kartu.
     Di daftar pelamar (kartu, bukan tabel — tidak ada baris header untuk
     ditumpangi) barisnya dijadikan SLOT PERMANEN: ia selalu ada, memuat
     checkbox "pilih semua", dan hanya tint aksen + aksinya yang muncul saat
     ada pilihan. Tidak ada pergeseran sama sekali, dan tint-nya tidak dipakai
     untuk menandai keadaan kosong. */

/* `flex-wrap`: sejak pemilih urutan ikut duduk di baris ini, di 390px
     keduanya tidak muat berdampingan — tanpa membungkus, kalimat "Pilih
     beberapa pelamar" terperas jadi tiga baris setinggi 68px. Yang turun ke
     baris kedua adalah pemilih urutannya (lihat `.e-bulkbar-sort`). */

.e-bulkbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Menempel ke kanan di SEMUA lebar. Sempat dibuat selebar baris di HP
     supaya kalimat centang tidak terperas; jawabannya sekarang bukan menambah
     baris melainkan memendekkan keduanya — label "Urutkan" jadi `sr-only` dan
     kalimatnya jadi "Pilih pelamar". `max-w` menahan select supaya teks opsi
     yang panjang memotong dirinya sendiri, bukan mendorong barisnya pecah. */

.e-bulkbar-sort {
  margin-left: auto;
  display: flex;
  min-width: 0px;
  max-width: 60%;
  flex: none;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .e-bulkbar-sort {
    max-width: none;
  }
}

/* `min-w-0` WAJIB sampai ke select-nya. Item flex tidak menyusut di bawah
     lebar isinya secara bawaan (`min-width:auto`), jadi `max-w` di induknya
     saja tidak menahan apa pun: select dengan opsi "Kecocokan tertinggi"
     tetap menggambar dirinya penuh dan menerobos tepi kanan kartu. Dengan ini
     teksnya yang memotong diri (elipsis bawaan select), bukan barisnya. */

.e-bulkbar-sort .e-select {
  min-width: 0px;
}

.e-bulkbar.is-active {
  background-color: rgb(var(--color-erika) / 0.1);
}

/* Tanda keputusan Mode Screening — `#playlist_failed`/`#playlist_shortlisted`
     legacy. SATU-SATUNYA tempat di app ini yang memakai huruf sebesar ini,
     dan itu disengaja: ia harus terbaca dalam sepersekian detik oleh mata yang
     sedang menatap kartu kandidat, bukan menatap tulisannya. Warna semantik
     (§14) — hijau untuk lolos, merah untuk gagal. */

.e-screening-flash {
  border-radius: 8px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.025em;
}

.e-screening-flash.is-positive {
  background-color: rgb(var(--color-success) / 0.15);
  --tw-text-opacity: 1;
  color: rgb(var(--color-success) / var(--tw-text-opacity, 1));
}

.e-screening-flash.is-negative {
  background-color: rgb(var(--color-danger) / 0.15);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

/* Baris catatan inline: hasil sebuah aksi (berhasil/gagal) atau keterangan
     singkat di atas daftar. Bukan `.e-dialog` (itu untuk konfirmasi aksi
     berbiaya) dan bukan `.e-empty` (itu untuk daftar kosong). */

.e-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-note.is-error {
  border-color: rgb(var(--color-danger) / 0.4);
  background-color: rgb(var(--color-danger) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

/* Sensor data Resume Search: BULLET, bukan blur. Blur masih bisa dibaca balik
     lewat devtools; bullet tidak membawa informasinya sama sekali. */

.e-masked {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  letter-spacing: 0.12em;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-avatar {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.e-avatar-locked {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-line) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* ── AVATAR KARTU PELAMAR: INISIAL DI BELAKANG, FOTO DI DEPAN ──────────
     Foto pelamar sering GAGAL DIMUAT, dan sebelumnya kegagalan itu tampil
     sebagai teks alt telanjang ("Foto Rafly Anggo…") yang meluber dari
     lingkaran avatar dan mendorong tata letak kartu.

     Sebab yang terukur 2026-09-08: sebagian avatar berasal dari
     `lh3.googleusercontent.com` (login Google), sementara `img-src` erika
     hanya memuat 'self', data:, dan dua origin MinIO — jadi peramban
     memblokirnya. Ini kegagalan yang TIDAK meninggalkan jejak di log server.

     Perbaikannya tidak bergantung pada sebab: inisial dirender sebagai lapis
     BAWAH, foto menutupinya sebagai lapis atas. Foto muat -> inisial
     tertutup. Foto gagal, apa pun alasannya (CSP, 404, offline) -> yang
     terlihat inisial, bukan kotak rusak. Nol JS, nol event handler. */

.e-avatarwrap {
  position: relative;
  height: 4rem;
  width: 4rem;
  flex: none;
}

.e-avatar-lg {
  height: 4rem;
  width: 4rem;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
}

/* Varian HP: 40px. Avatar 64px yang berdiri sendirian di tengah lebar layar
     memakan satu baris penuh sebelum nama pelamar muncul. */

.e-avatarwrap-sm {
  height: 2.5rem;
  width: 2.5rem;
}

/* ── KARTU PELAMAR: NAMA PALING ATAS ──────────────────────────────────
     Bentuk yang dipilih pemilik 2026-09-08. Kartunya SATU kolom di semua
     lebar; yang dulu kolom avatar 128px di kiri sekarang jadi baris identitas
     di atas. Alasannya urutan baca, bukan ruang — lihat catatan di view. */

.e-appcard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

/* SATU BARIS, dipaksa. Centang, avatar, nama, dan pil status semuanya
     duduk pada garis yang sama — `items-center`, dan namanya dipotong, bukan
     dibungkus. Versi sebelumnya menumpuk nama + subbaris di dalam baris ini
     sehingga tingginya dua baris; kualifikasi pindah ke baris pendidikan di
     badan kartu, tempat ia memang sudah ada. */

/* Nama pelamar sebagai PEMICU pratinjau. Sebelumnya `<button>` telanjang
     yang membawa utility rupa sendiri (`text-card font-medium text-erika-link`)
     — persis pola yang `audit:ui` hitung sebagai "kontrol membawa utility
     rupa", dan yang membuat rupanya bisa menyimpang diam-diam di tempat
     berikutnya yang menyalinnya.

     `is-viewed`: pelamar yang sudah dibuka turun jadi warna sekunder, jadi
     yang belum ditinjau tetap menonjol saat memindai daftar. */

.e-appcard-name {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

.e-appcard-name:hover {
  text-decoration-line: underline;
}

.e-appcard-name.is-viewed {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.e-appcard-name.is-viewed:hover {
  text-decoration-line: none;
}

/* Kandidat TERKUNCI di Cari Resume — namanya belum dibuka, jadi ia tidak boleh
     tampil seperti tautan yang siap dibaca. Rupanya sama dengan `is-viewed`,
     tapi namanya sendiri karena artinya berbeda: yang satu "sudah dilihat",
     yang ini "belum boleh dilihat". */

.e-appcard-name.is-locked {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}

.e-appcard-name.is-locked:hover {
  text-decoration-line: none;
}

.e-appcard-id {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pemicu status: SATU elemen yang menampilkan status sekarang sekaligus
     mengubahnya. Bentuknya pil supaya terbaca sebagai penanda status, tapi ia
     benar-benar tombol — chevron di dalamnya yang menandai bahwa ia bisa
     ditekan.

     `min-h-7` = 28px, di atas ambang 24px WCAG 2.5.8. `max-w-[9.5rem]` menahan
     status berlabel panjang ("Wawancara 1 — Dijadwalkan") supaya tidak
     mendorong nama pelamar keluar; labelnya terpotong, bukan namanya. */

.e-statuspill {
  display: inline-flex;
  min-height: 1.75rem;
  max-width: 9.5rem;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  border-radius: 99px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-statuspill:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

/* Ditolak. Warna semantik dipakai karena ini MEMANG status (§13 hanya
     melarangnya untuk dekorasi non-status), dan outline saja — §5: destruktif
     tidak pernah diisi penuh merah. */

/* ── DASHBOARD: JADWAL DULU, STATISTIK JADI SATU BARIS ────────────────
     Keputusan pemilik 2026-09-08 atas kontradiksi #6 pedoman (§1 prinsip 6
     "bukan memajang statistik" lawan §12 "urutan tetap: statistik ringkas →
     …"). Yang dipilih §1.

     Empat kartu KPI setinggi ~86px masing-masing jadi satu baris yang
     menggulir mendatar — 344px -> 72px di HP. Polanya sama dengan bilah aksi
     dan pita tab di halaman pelamar: satu bahasa untuk "terlalu banyak
     kontrol, layarnya sempit". */

/* ── SUSUNAN DASHBOARD ────────────────────────────────────────────────
     Satu kolom di HP (urutan DOM = urutan baca: jadwal -> perlu tindakan ->
     angka -> daftar lowongan), dua kolom sejak `lg` dengan proporsi 2fr/1fr
     yang memang disebut pedoman §4.

     Penempatannya eksplisit lewat `lg:col-start`/`lg:row-start` di markup,
     BUKAN dengan mengubah urutan DOM: urutan DOM adalah urutan baca pembaca
     layar dan urutan Tab, dan keduanya harus tetap "hari ini lebih dulu"
     berapa pun lebar layarnya.

     Kenapa ini ada: versi sebelumnya satu kolom di SEMUA lebar — hasil dari
     merapikan tampilan HP lalu membiarkan desktop ikut. Di 1440px kartu
     "Hari ini" jadi membentang 1.150px untuk satu baris teks. */

.e-dashgrid {
  display: grid;
  gap: 16px;
}

@media (min-width: 1024px) {
  .e-dashgrid {
    grid-template-columns: 2fr 1fr;
    align-items: flex-start;
  }
}

/* `min-width: 0` WAJIB pada anak grid. Bawaannya `auto`, yang berarti anak
     MENOLAK menyusut di bawah lebar isinya — dan `.e-kpistrip` di HP berisi
     tiga kartu selebar 395px yang seharusnya menggulir sendiri lewat
     `overflow-x-auto`. Dengan `min-width: auto` gulir itu tidak pernah aktif;
     yang melebar justru KOLOMNYA, dan seluruh saudara ikut teregang.
     Akibatnya SELURUH HALAMAN menggulir mendatar: terukur di 390px,
     `scrollWidth` 411 lawan `clientWidth` 390 — grid-nya sendiri sudah benar
     358px. Kerabat dekat `min-h-0` pada kolom flex modal kandidat. */

.e-dashgrid > * {
  min-width: 0;
}

.e-kpistrip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

@media (min-width: 640px) {
  .e-kpistrip {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0px;
  }
}

@media (min-width: 1024px) {
  .e-kpistrip {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

/* Di HP tiap kartu selebar isinya dan barisnya menggulir. Sejak `sm` mereka
     MELAR rata: tiga kotak kecil yang berdesakan di tepi kiri layar 1440px
     membuat sisa barisnya terbaca sebagai ruang yang lupa diisi. */

/* HP: selebar isinya, barisnya menggulir. `sm`: melar rata. `lg`: menumpuk
     di kolom kanan, karena tiga kotak melar 380px di satu baris justru
     terbaca sebagai ruang yang lupa diisi. */

.e-kpistrip > * {
  flex: none;
}

@media (min-width: 640px) {
  .e-kpistrip > * {
    flex: 1 1 0%;
  }
}

@media (min-width: 1024px) {
  .e-kpistrip > * {
    width: 100%;
    flex: none;
  }
}

.e-kpi {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.e-kpi-angka {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.25;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
  font-variant-numeric: tabular-nums;
}

.e-kpi-label {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

/* Kartu "perlu tindakan": satu-satunya kartu beraksen di dashboard, dan itu
     disengaja — §1 prinsip 2 "satu warna aksen" berarti aksen dipakai untuk
     MENUNJUK, bukan untuk menghias. Kalau semua kartu beraksen, tidak ada yang
     ditunjuk. */

.e-actioncard {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 8px;
  border-width: 1px;
  border-color: rgb(var(--color-erika) / 0.3);
  background-color: rgb(var(--color-erika) / 0.05);
  padding: 16px;
}

.e-statuspill.is-danger {
  /* `bg-danger/10` + `border-danger/40`: erika tidak punya token
       `danger-soft`/`danger-border` tersendiri, dan idiom alfa inilah yang
       sudah dipakai `.shell-pill-danger` dan spanduk peringatan di view. */
  border-color: rgb(var(--color-danger) / 0.4);
  background-color: rgb(var(--color-danger) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.e-avatar-sm {
  height: 2.5rem;
  width: 2.5rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
}

/* `alt=""` di markup-nya disengaja: nama pelamar berdiri sebagai tombol
     tepat di sebelahnya, jadi alt yang berisi nama membuat pembaca layar
     menyebut nama itu dua kali — dan alt kosong juga yang membuat peramban
     tidak menggambar apa pun saat gambarnya gagal. */

.e-avatarimg {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── KERANGKA MOBILE ─────────────────────────────────────────────────
     Izin pemilik 2026-09-08 untuk menabrak pedoman di jalur mobile. §4 hanya
     mengenal sidebar 240px sticky; ia tidak punya spesifikasi mobile sama
     sekali, jadi tiga kelas di bawah mengisi lubang, bukan menabrak aturan
     yang sudah ada. Alasan lengkap tiap keputusan ada di
     `partials/shell-bottom-nav.ejs`. */

/* Tersembunyi sampai difokus keyboard — `sr-only` yang membatalkan dirinya
     sendiri pada `:focus`. Bukan `display:none`: elemen yang display-none
     tidak bisa menerima fokus sama sekali, jadi tautannya tidak akan pernah
     muncul. */

.shell-skiplink {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.shell-skiplink:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  position: fixed;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 50;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shell-bottomnav {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 20;
  display: flex;
  align-items: stretch;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  /* Ruang untuk indikator home iOS/Android. Nol di peranti yang tidak
       punya, jadi tidak ada jarak menganggur di peramban desktop sempit. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 56px tinggi tap, jauh di atas ambang 24px WCAG 2.5.8 — ini navigasi utama,
     bukan kontrol sekunder. `min-w-0` supaya label panjang menyusut alih-alih
     mendorong tab lain keluar. */

.shell-bottomnav-item {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.shell-bottomnav-item i {
  font-size: 18px;
  line-height: 1;
}

/* Lihat catatan di `.e-grade-b`: warna isian dipakai sebagai teks gagal
     kontras di mode gelap. Bilah ini `lg:hidden`, jadi sapuan kontras yang
     hanya dijalankan di lebar desktop TIDAK AKAN pernah melihatnya. */

.shell-bottomnav-item.is-active {
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

.shell-bottomnav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ruang di kaki konten supaya baris terakhir tidak tertutup bilah tab.
     56 (tinggi) + 12 (napas), plus safe-area. */

/* `main.` BUKAN kemewahan — ia yang membuat aturan ini berlaku sama sekali.
     Kelas ini hidup di `@layer components`, dan di Tailwind UTILITY SELALU
     MENANG atas komponen. `<main class="flex-1 p-4 shell-bottomnav-space …">`
     karena itu berakhir dengan `padding-bottom: 16px` dari `p-4`, bukan 68px
     dari sini — terukur di 390px, `getComputedStyle(main).paddingBottom` =
     "16px", jadi 54px terakhir setiap halaman panjang berada di belakang bilah
     tab. Paling terlihat di /cats yang isinya 2.832px.

     `main.shell-bottomnav-space` berspesifisitas (0,1,1) dan mengalahkan
     utility (0,1,0), tanpa `!important` dan tanpa mengarang nilai arbitrer di
     view — env() tidak bisa ditulis sebagai utility.

     DIBATASI ke bawah `lg`, dan itu wajib: karena ia sekarang MENANG atas
     utility, tanpa batas ini ia juga mengalahkan `lg:pb-6` dan menyisakan
     68px ruang mati di desktop — padahal bilah tabnya sendiri `lg:hidden`.
     Terukur: desktop sempat ikut 68px sebelum media query ini dipasang. */

@media (max-width: 1023px) {
  main.shell-bottomnav-space {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── TEKS INPUT 16px DI HP ────────────────────────────────────────────
     Menabrak §5 yang menetapkan 13.5px, DAN ini satu-satunya nilai pedoman
     yang diubah angkanya. Alasannya murni teknis, bukan selera: di iOS, input
     dengan font di bawah 16px memicu ZOOM OTOMATIS saat difokus, dan halaman
     ikut tergeser — pengguna kehilangan tempatnya di daftar setiap kali
     menyentuh kotak cari. Hanya di bawah `sm`; sejak `sm` nilainya kembali
     seperti yang ditulis pedoman. */

@media (max-width: 639px) {
  .e-input,
    .e-select,
    .e-search-input,
    .e-optionsearch input,
    textarea.e-input {
    font-size: 16px;
  }
}

/* ── SEKSI 11: PROGRES, DIALOG & PESAN ───────────────────────────────────*/

.e-steps {
  display: flex;
  align-items: center;
}

.e-step-dot {
  display: flex;
  height: 1.25rem;
  width: 1.25rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  font-size: 10px;
  color: transparent;
}

.e-step-dot.is-done {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.e-step-line {
  height: 1px;
  flex: 1 1 0%;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-line) / var(--tw-bg-opacity, 1));
}

.e-step-label {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-step-label.is-current {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* Meter 5px — corong pelamar, kuota, kelengkapan profil. Tanpa gradien,
     tanpa warna berbeda per baris. */

.e-meter {
  height: 5px;
  width: 100%;
  overflow: hidden;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-line) / var(--tw-bg-opacity, 1));
}

.e-meter-fill {
  height: 100%;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
}

/* Dialog 400px — hanya untuk aksi berbiaya atau tak bisa dibatalkan. */

.e-dialog {
  width: 400px;
  max-width: 100%;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding: 16px;
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.e-dialog-icon {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: rgb(var(--color-erika) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

/* Modal FORM — bukan .e-dialog. Pedoman memaku .e-dialog 400px untuk
     konfirmasi aksi berbiaya/tak bisa dibatalkan; wadah form (mis. "Buat
     Agenda Baru") butuh lebih lebar dan tidak punya baris dampak. Dipisah
     supaya batas 400px itu tidak pelan-pelan luntur jadi "lebar modal apa
     pun".

     POSISI (`fixed`/`absolute`) SENGAJA tidak di sini — alasan sama seperti
     .e-drawer-overlay: halaman nyata butuh `fixed`, /style-guide memajangnya
     `absolute` di dalam kotak `relative`. */

.e-modal-overlay {
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--color-ink) / 0.4);
  padding: 16px;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-modal-panel {
  display: flex;
  width: 420px;
  max-width: 100%;
  flex-direction: column;
  gap: 16px;
  border-radius: 8px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding: 16px;
  --tw-shadow: 0 8px 24px -8px rgba(26, 26, 26, 0.18);
  --tw-shadow-colored: 0 8px 24px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Varian LEBAR untuk formulir bertingkat — modal undangan CATS punya tiga
     baris field berdampingan (tanggal + jam mulai + jam selesai), dan 420px
     memaksa ketiganya menumpuk sehingga jadwalnya tidak lagi terbaca sebagai
     satu kesatuan. 560px = lebar terkecil yang masih memuat tiga kolom itu
     pada ukuran kontrol yang dipatok pedoman. Angkanya tinggal DI SINI, bukan
     sebagai nilai arbitrer di view. */

.e-modal-panel-wide {
  width: 560px;
}

/* ── AGENDA (events) ─────────────────────────────────────────────────────
     Daftar dua kolom: jam (lebarnya dikunci supaya judul semua baris rata,
     seperti kolom `.event__content__time` legacy) + isi. Pemisah antar baris
     garis halus, bukan kartu per baris — satu hari bisa berisi banyak baris
     dan kartu bertumpuk membuat halamannya berisik. */

.e-agenda-day {
  border-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-agenda-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.e-agenda-row + .e-agenda-row {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
}

.e-agenda-time {
  width: 52px;
  flex: none;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-breadcrumb-current {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-bubble {
  max-width: 75%;
  border-radius: 8px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
}

.e-bubble-us {
  margin-left: auto;
  background-color: rgb(var(--color-erika) / 0.1);
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-bubble-them {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-convo-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.625rem;
  border-radius: 6px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.e-convo-row:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.e-convo-row.is-active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.e-unread-dot {
  margin-top: 0.375rem;
  height: 7px;
  width: 7px;
  flex: none;
  border-radius: 99px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
}

/* Tabel — header lebih terang dari permukaan, baris dipisah garis halus. */

.e-th {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.e-td {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

/* ── HTML WARISAN YANG SUDAH DISANITASI ────────────────────────────────
     Pembungkus untuk `<%- … %>` yang isinya keluaran allowlist di
     `packages/domain-erika/src/sanitize.ts`: deskripsi agenda, visi-misi
     perusahaan, "Tentang Saya" pelamar.

     KENAPA PERLU KELAS SENDIRI. Preflight Tailwind menyetel `margin: 0` pada
     `p`/`ul`/`ol` dan `list-style: none` pada `ul`/`ol`. Jadi begitu HTML
     warisan dirender, seluruh paragrafnya menempel jadi satu blok dan setiap
     `<li>` kehilangan butirnya — persis yang sudah terjadi diam-diam di
     `company_profile/show.ejs`, satu-satunya pemakai `<%- %>` sebelum ini:
     397 `<ul>` di data company tampil tanpa satu butir pun.

     UKURAN HURUF SENGAJA TIDAK DISETEL di sini. Pemanggilnya berbeda-beda
     (`text-caption` di kartu agenda, `text-meta` di halaman detail), dan
     ukuran ditentukan pemanggil sesuai pedoman §Skala huruf. Kelas ini hanya
     mengurus STRUKTUR blok — itu yang hilang, bukan ukurannya.

     Judul dibatasi: allowlist mengizinkan `h1`–`h4`, dan `h1` bawaan browser
     32px akan meledak di dalam kartu setinggi 190px. Data agenda hari ini
     tidak punya satu pun tag judul (terukur), tapi allowlist-nya mengizinkan
     dan editor kaya legacy punya tombolnya — jadi plafonnya dipasang sekarang,
     bukan setelah ada yang menulisnya. */

/* URL telanjang di dalam paragraf adalah pola nyata di data ini (deskripsi
     undangan rutin memuat tautan Maps dan profil perusahaan sebagai teks
     biasa, bukan sebagai tag a). Tanpa aturan ini satu URL 60 karakter
     memaksa kartu melebar melewati layar 390px — dan gulir mendatar itu
     muncul di HALAMAN, bukan di kartunya. */

.e-richtext {
  overflow-wrap: break-word;
}

.e-richtext > *:first-child {
  margin-top: 0px;
}

.e-richtext > *:last-child {
  margin-bottom: 0px;
}

.e-richtext p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.e-richtext ul,
  .e-richtext ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
  list-style-position: outside;
}

.e-richtext ul {
  list-style-type: disc;
}

.e-richtext ol {
  list-style-type: decimal;
}

.e-richtext li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Warna & perilaku hover mengikuti `.e-link` (§07 tautan dalam teks);
     ukurannya TIDAK, karena tautan di dalam paragraf harus seukuran
     paragrafnya, bukan `text-caption` seperti tautan aksi. */

/* Editor teks kaya (lowongan): area `contenteditable` berbingkai sama
     dengan `.e-textarea`, isinya bergaya `.e-richtext` supaya yang diketik
     tampak seperti hasilnya. 140px ≈ 6 baris, setara textarea yang diganti. */

.e-richtext-editor {
  min-height: 140px;
  width: 100%;
  border-radius: 6px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-richtext-editor:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
}

.e-richtext-editor:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.e-richtext-toolbar {
  margin-bottom: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.e-richtext a {
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Bobot 500, bukan 600/700: plafon bobot erika turun ke 500 untuk SEMUA
     elemen (keputusan pemilik 2026-08-11, dijaring `_weight700` di gate).
     Itu berlaku juga untuk `strong`/`b` yang datang dari HTML warisan —
     penekanannya jadi lebih halus daripada bold browser, dan itu memang
     yang diminta pedoman. */

.e-richtext h1,
  .e-richtext h2,
  .e-richtext h3,
  .e-richtext h4 {
  margin-bottom: 0.25rem;
  margin-top: 0.75rem;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-richtext strong,
  .e-richtext b {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.e-richtext u {
  text-decoration-line: underline;
}

.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;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.\!static {
  position: static !important;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.left-auto {
  left: auto;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-1 {
  right: 0.25rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1 {
  top: 0.25rem;
}

.top-4 {
  top: 1rem;
}

.top-6 {
  top: 1.5rem;
}

.\!z-auto {
  z-index: auto !important;
}

.z-10 {
  z-index: 10;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.m-3 {
  margin: 0.75rem;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.\!mb-0 {
  margin-bottom: 0px !important;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-card {
  margin-bottom: 16px;
}

.mb-stack {
  margin-bottom: 12px;
}

.ml-5 {
  margin-left: 1.25rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-card {
  margin-top: 16px;
}

.mt-stack {
  margin-top: 12px;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-32 {
  height: 8rem;
}

.h-40 {
  height: 10rem;
}

.h-52 {
  height: 13rem;
}

.h-64 {
  height: 16rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[220px\] {
  height: 220px;
}

.h-\[260px\] {
  height: 260px;
}

.h-\[320px\] {
  height: 320px;
}

.h-\[7px\] {
  height: 7px;
}

.h-full {
  height: 100%;
}

.max-h-40 {
  max-height: 10rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-\[85vh\] {
  max-height: 85vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[calc\(100vh-4rem\)\] {
  min-height: calc(100vh - 4rem);
}

.min-h-screen {
  min-height: 100vh;
}

.\!w-auto {
  width: auto !important;
}

.\!w-full {
  width: 100% !important;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-32 {
  width: 8rem;
}

.w-40 {
  width: 10rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-\[220px\] {
  width: 220px;
}

.w-\[72\%\] {
  width: 72%;
}

.w-\[7px\] {
  width: 7px;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[220px\] {
  min-width: 220px;
}

.min-w-\[32rem\] {
  min-width: 32rem;
}

.min-w-\[40rem\] {
  min-width: 40rem;
}

.min-w-full {
  min-width: 100%;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1 {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

.list-inside {
  list-style-position: inside;
}

.list-disc {
  list-style-type: disc;
}

.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.\!items-end {
  align-items: flex-end !important;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-0\.5 {
  gap: 0.125rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-card {
  gap: 16px;
}

.gap-chip {
  gap: 6px;
}

.gap-icongap {
  gap: 7px;
}

.gap-stack {
  gap: 12px;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-card > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(16px * var(--tw-space-y-reverse));
}

.space-y-section > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(28px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(28px * var(--tw-space-y-reverse));
}

.space-y-stack > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(12px * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-line > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-divide-opacity, 1));
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-card {
  border-radius: 8px;
}

.rounded-control {
  border-radius: 6px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-panel {
  border-radius: 12px;
}

.rounded-pill {
  border-radius: 99px;
}

.\!border-0 {
  border-width: 0px !important;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-danger {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-danger) / var(--tw-border-opacity, 1));
}

.border-danger\/40 {
  border-color: rgb(var(--color-danger) / 0.4);
}

.border-erika {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-erika) / var(--tw-border-opacity, 1));
}

.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line) / var(--tw-border-opacity, 1));
}

.border-line\/60 {
  border-color: rgb(var(--color-line) / 0.6);
}

.border-warning\/40 {
  border-color: rgb(var(--color-warning) / 0.4);
}

.\!bg-transparent {
  background-color: transparent !important;
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}

.bg-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-danger) / var(--tw-bg-opacity, 1));
}

.bg-danger\/10 {
  background-color: rgb(var(--color-danger) / 0.1);
}

.bg-erika {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-erika) / var(--tw-bg-opacity, 1));
}

.bg-erika\/5 {
  background-color: rgb(var(--color-erika) / 0.05);
}

.bg-shell {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-success) / var(--tw-bg-opacity, 1));
}

.bg-success\/10 {
  background-color: rgb(var(--color-success) / 0.1);
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.bg-warning\/10 {
  background-color: rgb(var(--color-warning) / 0.1);
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.p-card {
  padding: 16px;
}

.p-stack {
  padding: 12px;
}

.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-card {
  padding-left: 16px;
  padding-right: 16px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-stack {
  padding-top: 12px;
  padding-bottom: 12px;
}

.\!pb-0 {
  padding-bottom: 0px !important;
}

.\!pt-0 {
  padding-top: 0px !important;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-card {
  padding-bottom: 16px;
}

.pb-stack {
  padding-bottom: 12px;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-card {
  padding-top: 16px;
}

.pt-stack {
  padding-top: 12px;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
  font-family: Plus Jakarta Sans, system-ui, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[14\.5px\] {
  font-size: 14.5px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-badge {
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-body {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
}

.text-caption {
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
}

.text-card {
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-meta {
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
}

.text-row {
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
}

.text-section {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-weight: 500;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-danger {
  --tw-text-opacity: 1;
  color: rgb(var(--color-danger) / var(--tw-text-opacity, 1));
}

.text-erika {
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika) / var(--tw-text-opacity, 1));
}

.text-erika-link {
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.text-ink-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink-muted) / var(--tw-text-opacity, 1));
}

.text-success {
  --tw-text-opacity: 1;
  color: rgb(var(--color-success) / var(--tw-text-opacity, 1));
}

.text-warning-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--color-warning-ink) / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-60 {
  opacity: 0.6;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-card {
  --tw-shadow: 0 4px 16px -4px rgba(29, 98, 174, 0.15);
  --tw-shadow-colored: 0 4px 16px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-100 {
  transition-duration: 100ms;
}

.duration-150 {
  transition-duration: 150ms;
}

/* `<strong>`/`<b>` DEFAULTNYA 700 (preflight Tailwind: `font-weight: bolder`).
   Kedua pedoman melarang bobot >=700, jadi larangan itu bocor lewat tag HTML
   biasa — bukan cuma lewat kelas. Diturunkan ke 500, bobot terberat yang
   benar-benar kita kirim.
   INI PRASYARAT untuk mencabut 700.css dari assets:fonts: tanpa aturan ini,
   menghapus berkas fontnya membuat browser MEMALSUKAN tebal (synthetic bold)
   pada tiap <strong> — hasilnya lebih buruk daripada 700 asli. */

/*
 * Kelas komponen shell (sidebar/topbar/nav/kartu) — dipakai berulang di
 * banyak tempat, jadi di-@apply di sini alih-alih string utility raksasa
 * berulang di tiap view (pola resmi Tailwind utk kasus ini). Semua tetap
 * 100% dari token (bg-shell/text-ink/border-line/dst), bukan CSS lepas —
 * otomatis ikut berubah saat [data-theme="dark"] aktif.
 */

/* `x-cloak` dipakai di view tapi TIDAK PERNAH didefinisikan di app ini —
   ketahuan saat membangun multi-select. Tanpa aturan ini, elemen ber-`x-show`
   tampil sekejap sebelum Alpine boot lalu menghilang; popover 280px yang
   berkedip di tengah halaman sangat kentara. Di luar @layer supaya tidak
   ikut dipangkas kalau kebetulan tidak ada `x-cloak` di content. */

[x-cloak] {
  display: none !important;
}

/* ── PREFERENSI GERAK PENGGUNA ────────────────────────────────────────────
   Sebelum ini erika tidak punya satu pun aturan
   `@media (prefers-reduced-motion)`: dengan preferensi sistem disetel
   "kurangi gerak", 392 elemen tetap bertransisi (terukur 2026-09-08, audit
   lapis keempat temuan 02).

   Jujur soal bahayanya: §2 mengunci transisi ke `background`, `border-color`,
   `color`, dan `box-shadow` saja — tidak ada transform, tidak ada gerak
   spasial — jadi risiko vestibularnya rendah. Tapi preferensi yang DINYATAKAN
   pengguna lalu diabaikan sepenuhnya adalah nol dukungan, bukan sebagian, dan
   menutupnya cuma satu blok.

   Di luar @layer supaya ia menang atas apa pun yang menyetel transisi,
   termasuk utility. `!important` disengaja: ini pembatalan menyeluruh, bukan
   satu aturan yang ikut berlomba di kaskade. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.hover\:border-line-hover:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--color-line-hover) / var(--tw-border-opacity, 1));
}

.hover\:bg-shell:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-shell) / var(--tw-bg-opacity, 1));
}

.hover\:bg-surface:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-surface) / var(--tw-bg-opacity, 1));
}

.hover\:text-erika-link:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-erika-link) / var(--tw-text-opacity, 1));
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--color-ink) / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.focus\:ring-danger:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-danger) / var(--tw-ring-opacity, 1));
}

.focus\:ring-erika:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--color-erika) / var(--tw-ring-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:w-72 {
    width: 18rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:flex-1 {
    flex: 1 1 0%;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr_140px_auto\] {
    grid-template-columns: 1fr 140px auto;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-\[220px_1fr_1fr\] {
    grid-template-columns: 220px 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .lg\:static {
    position: static;
  }

  .lg\:sticky {
    position: sticky;
  }

  .lg\:bottom-auto {
    bottom: auto;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:col-start-1 {
    grid-column-start: 1;
  }

  .lg\:col-start-2 {
    grid-column-start: 2;
  }

  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }

  .lg\:row-start-1 {
    grid-row-start: 1;
  }

  .lg\:row-start-2 {
    grid-row-start: 2;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-screen {
    height: 100vh;
  }

  .lg\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-\[1\.4fr_1fr\] {
    grid-template-columns: 1.4fr 1fr;
  }

  .lg\:grid-cols-\[1fr_260px\] {
    grid-template-columns: 1fr 260px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_18rem\] {
    grid-template-columns: minmax(0,1fr) 18rem;
  }

  .lg\:pb-6 {
    padding-bottom: 1.5rem;
  }
}

@media print {
  .print\:hidden {
    display: none;
  }
}