@jant/core 0.6.15 → 0.7.0

package/src/styles/components.css

@@ -3,6 +3,11 @@
  *
  * These use Tailwind's @layer and @apply, so they must be imported
  * AFTER Tailwind is initialized in the user's CSS entry.
+ *
+ * Reader half only. The settings pages, the config editor, the navigation
+ * manager, the custom URL manager, the dash chrome and the form skeletons
+ * live in `components-author.css`, which loads only on authenticated pages —
+ * see the note in `style-author.css`.
  */
 
 /* Search result highlight */
@@ -15,377 +20,10 @@ mark {
 
 /* Config Editor — a quiet utility list, not a stack of nested cards. */
 @layer components {
-  .config-editor-page {
-    display: flex;
-    flex-direction: column;
-    width: min(54rem, 100%);
-    gap: clamp(1rem, 2vw, 1.25rem);
-    padding-bottom: 1rem;
-  }
-
   jant-config-editor {
     display: block;
     min-width: 0;
   }
-
-  .config-editor-toolbar,
-  .config-editor-search {
-    min-width: 0;
-  }
-
-  .config-editor-search {
-    position: relative;
-  }
-
-  .config-editor-search > svg {
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    left: 0.78rem;
-    transform: translateY(-50%);
-    color: var(--color-muted-foreground);
-    pointer-events: none;
-  }
-
-  .config-editor-search .config-editor-search-input {
-    width: 100%;
-    min-height: 2.65rem;
-    padding-left: 2.35rem;
-    border-radius: var(--radius);
-    font-family: var(--font-ui);
-  }
-
-  .config-editor-fallback .config-editor-search-input {
-    padding-left: 0.8rem;
-  }
-
-  .config-editor-toolbar-meta {
-    display: flex;
-    min-height: 1.85rem;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    margin: 0.35rem 0.1rem 0.25rem;
-  }
-
-  .config-editor-count {
-    margin: 0;
-    color: var(--color-muted-foreground);
-    font-family: var(--font-ui);
-    font-size: var(--type-2xs);
-    line-height: 1.35;
-  }
-
-  .config-editor-modified-filter {
-    display: inline-flex;
-    min-height: 1.85rem;
-    align-items: center;
-    gap: 0.42rem;
-    color: var(--color-muted-foreground);
-    font-family: var(--font-ui);
-    font-size: var(--type-2xs);
-    cursor: pointer;
-    touch-action: manipulation;
-    white-space: nowrap;
-  }
-
-  .config-editor-modified-filter:hover,
-  .config-editor-modified-filter:focus-within {
-    color: var(--color-foreground);
-  }
-
-  .config-editor-modified-filter:focus-within {
-    outline: 2px solid color-mix(in srgb, var(--site-accent) 26%, transparent);
-    outline-offset: 2px;
-  }
-
-  .config-editor-list {
-    margin: 0;
-    padding: 0;
-    border-top: 1px solid var(--color-border);
-    border-bottom: 1px solid var(--color-border);
-    list-style: none;
-  }
-
-  .config-editor-row {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem);
-    align-items: center;
-    gap: clamp(1.25rem, 3vw, 2.25rem);
-    min-width: 0;
-    padding: 0.88rem 0.1rem;
-    border-bottom: 1px solid
-      color-mix(in srgb, var(--color-border) 78%, transparent);
-  }
-
-  .config-editor-row:last-child {
-    border-bottom: 0;
-  }
-
-  .config-editor-row[aria-busy="true"] {
-    background: color-mix(in srgb, var(--site-accent) 2.5%, transparent);
-  }
-
-  .config-editor-copy,
-  .config-editor-value-column,
-  .config-editor-control-row {
-    min-width: 0;
-  }
-
-  .config-editor-heading {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.45rem;
-  }
-
-  .config-editor-heading > label {
-    cursor: pointer;
-  }
-
-  .config-editor-key {
-    overflow-wrap: anywhere;
-    color: var(--color-foreground);
-    font-family: var(--font-mono);
-    font-size: var(--type-xs);
-    font-weight: var(--fw-medium);
-    line-height: 1.35;
-  }
-
-  .config-editor-state {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3rem;
-    color: var(--color-muted-foreground);
-    font-family: var(--font-ui);
-    font-size: var(--type-2xs);
-    line-height: 1.3;
-  }
-
-  .config-editor-state::before {
-    width: 0.28rem;
-    height: 0.28rem;
-    flex: none;
-    border-radius: 999px;
-    background: currentColor;
-    content: "";
-  }
-
-  .config-editor-modified {
-    color: color-mix(in srgb, var(--site-accent) 72%, var(--color-foreground));
-  }
-
-  .config-editor-locked::before {
-    border-radius: 0.05rem;
-  }
-
-  .config-editor-description {
-    margin: 0.28rem 0 0;
-    color: var(--color-muted-foreground);
-    font-family: var(--font-ui);
-    font-size: var(--type-xs);
-    line-height: 1.42;
-    text-wrap: pretty;
-  }
-
-  .config-editor-value-column {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.28rem;
-  }
-
-  .config-editor-control-row {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 2rem;
-    align-items: center;
-    gap: 0.7rem;
-  }
-
-  .config-editor-control-row-select {
-    grid-template-columns: minmax(0, 1fr) 2rem;
-  }
-
-  .config-editor-control-row-number {
-    grid-template-columns: minmax(0, 8rem) 2rem;
-    justify-content: start;
-  }
-
-  .config-editor-control-row > input[role="switch"] {
-    justify-self: end;
-  }
-
-  .config-editor-control-row .config-editor-select,
-  .config-editor-value-input {
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    font-family: var(--font-mono);
-    font-size: var(--type-xs);
-  }
-
-  .config-editor-control-row .config-editor-select {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .config-editor-status {
-    align-self: flex-end;
-    color: var(--color-muted-foreground);
-    font-family: var(--font-ui);
-    font-size: var(--type-2xs);
-    line-height: 1.35;
-  }
-
-  .config-editor-status-saved {
-    color: color-mix(in srgb, var(--site-accent) 68%, var(--color-foreground));
-  }
-
-  .config-editor-status-error {
-    max-width: 100%;
-    color: var(--color-destructive);
-    text-align: right;
-    text-wrap: pretty;
-  }
-
-  .config-editor-reset {
-    display: grid;
-    width: 2rem;
-    height: 2rem;
-    place-items: center;
-    padding: 0;
-    border: 0;
-    border-radius: var(--radius);
-    background: transparent;
-    color: var(--color-muted-foreground);
-    cursor: pointer;
-    touch-action: manipulation;
-  }
-
-  .config-editor-reset:hover,
-  .config-editor-reset:focus-visible {
-    background: var(--color-muted);
-    color: var(--color-foreground);
-  }
-
-  .config-editor-reset:focus-visible,
-  .config-editor-open-control:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--site-accent) 28%, transparent);
-    outline-offset: 3px;
-  }
-
-  .config-editor-reset:disabled {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
-
-  .config-editor-open-control {
-    display: flex;
-    min-width: 0;
-    min-height: 2.35rem;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.8rem;
-    padding: 0.35rem 0.1rem;
-    color: inherit;
-    text-decoration: none;
-    cursor: pointer;
-    touch-action: manipulation;
-  }
-
-  .config-editor-linked-value {
-    min-width: 0;
-    overflow: hidden;
-    color: var(--site-text-secondary);
-    font-family: var(--font-mono);
-    font-size: var(--type-xs);
-    line-height: 1.4;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .config-editor-open-action {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    gap: 0.3rem;
-    color: var(--color-muted-foreground);
-    font-family: var(--font-ui);
-    font-size: var(--type-2xs);
-    line-height: 1.35;
-    white-space: nowrap;
-  }
-
-  .config-editor-open-control:hover .config-editor-linked-value,
-  .config-editor-open-control:hover .config-editor-open-action,
-  .config-editor-open-control:focus-visible .config-editor-linked-value,
-  .config-editor-open-control:focus-visible .config-editor-open-action {
-    color: var(--color-foreground);
-  }
-
-  .config-editor-fallback-value {
-    width: 100%;
-    min-width: 0;
-    overflow: hidden;
-    padding-block: 0.35rem;
-    color: var(--site-text-secondary);
-    font-family: var(--font-mono);
-    font-size: var(--type-xs);
-    line-height: 1.4;
-    text-align: right;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .config-editor-empty {
-    display: grid;
-    min-height: 9rem;
-    place-items: center;
-    padding: 2rem;
-    border-top: 1px solid var(--color-border);
-    border-bottom: 1px solid var(--color-border);
-    color: var(--color-muted-foreground);
-    font-family: var(--font-ui);
-    font-size: var(--type-sm);
-    line-height: 1.45;
-    text-align: center;
-  }
-
-  .config-editor-empty p {
-    max-width: 28rem;
-    margin: 0;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .config-editor-row .config-editor-reset {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    .config-editor-row:hover .config-editor-reset,
-    .config-editor-row:focus-within .config-editor-reset {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-
-  @media (max-width: 760px) {
-    .config-editor-row {
-      grid-template-columns: minmax(0, 1fr);
-      align-items: stretch;
-      gap: 0.62rem;
-      padding-block: 0.85rem;
-    }
-
-    .config-editor-control-row > input[role="switch"] {
-      justify-self: start;
-    }
-
-    .config-editor-fallback-value {
-      text-align: left;
-    }
-  }
 }
 
 .search-snippet {
@@ -481,20 +119,6 @@ svg[stroke-width].icon-fine {
     }
   }
 
-  .toast-copy {
-    @apply shrink-0 translate-y-0.5 cursor-pointer rounded-sm p-0 border-0 bg-transparent;
-    color: var(--color-muted-foreground);
-    transition: color 0.15s;
-
-    &:hover {
-      color: var(--color-foreground);
-    }
-
-    > svg {
-      @apply size-3.5;
-    }
-  }
-
   .toast-out {
     animation: toast-out 0.3s ease-in forwards;
   }
@@ -522,159 +146,10 @@ svg[stroke-width].icon-fine {
 
 /* Admin header */
 @layer components {
-  .dash-header {
-    padding: 20px 0 0;
-  }
-
-  @media (min-width: 700px) {
-    .dash-header {
-      padding: 24px 0 0;
-    }
-  }
-
-  .dash-header-inner {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    padding-bottom: 12px;
-  }
-
-  .dash-header-avatar-link {
-    flex-shrink: 0;
-    line-height: 0;
-  }
-
-  .dash-header-avatar {
-    width: 22px;
-    height: 22px;
-    border-radius: 5px;
-  }
-
-  .dash-header-avatar:is(img) {
-    object-fit: cover;
-  }
-
-  .dash-header-avatar-fallback {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-size: var(--type-2xs);
-    font-weight: var(--fw-semibold);
-    line-height: 1;
-  }
-
-  .dash-header-nav {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  }
-
-  .dash-header-nav-sep {
-    display: none;
-  }
-
-  .dash-header-right {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-left: auto;
-  }
-
-  .dash-header-link {
-    font-size: var(--type-xs);
-    color: var(--color-muted-foreground);
-    transition: color 0.15s;
-
-    &:hover {
-      color: var(--color-foreground);
-    }
-  }
-
-  .dash-header-link-active {
-    color: var(--color-foreground);
-    font-weight: var(--fw-medium);
-  }
-
-  .dash-header-visit {
-    @apply flex items-center gap-3;
-    font-size: var(--type-sm);
-    color: var(--color-muted-foreground);
-    transition: color 0.15s;
-
-    &:hover {
-      color: var(--color-foreground);
-    }
-  }
-
-  .dash-header-visit-text {
-    display: none;
-  }
-
-  @media (min-width: 700px) {
-    .dash-header-visit-text {
-      display: inline;
-    }
-
-    .dash-header-visit-icon {
-      display: none;
-    }
-  }
-
-  .dash-header-menu-btn {
-    @apply flex items-center justify-center;
-    width: 32px;
-    height: 32px;
-    border-radius: var(--radius);
-    border: none;
-    background: transparent;
-    color: var(--color-muted-foreground);
-    cursor: pointer;
-    transition:
-      color 0.15s,
-      background-color 0.15s;
-
-    &:hover {
-      color: var(--color-foreground);
-      background-color: var(--color-accent);
-    }
-  }
-
-  .dash-header-menu-btn + [data-popover] {
-    min-width: 170px;
-  }
 }
 
 /* Breadcrumb — second row below header on settings sub-pages */
 @layer components {
-  .dash-breadcrumb {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 8px 0;
-    font-size: var(--type-base);
-    line-height: 1.35;
-  }
-
-  .dash-breadcrumb-parent {
-    color: var(--color-muted-foreground);
-    transition: color 0.15s;
-
-    &:hover {
-      color: var(--color-foreground);
-    }
-  }
-
-  .dash-breadcrumb-sep {
-    color: var(--color-muted-foreground);
-    opacity: 0.5;
-  }
-
-  .dash-breadcrumb-current {
-    color: var(--color-foreground);
-    font-weight: var(--fw-medium);
-  }
 }
 
 /* Page intro — shared title block for top-level pages */
@@ -730,1064 +205,28 @@ svg[stroke-width].icon-fine {
 
 /* Settings root — iOS-style grouped list */
 @layer components {
-  .settings-root {
-    @apply flex flex-col;
-    width: var(--layout-content-width);
-    gap: clamp(1.15rem, 2.8vw, 1.65rem);
-    padding-bottom: 0.15rem;
-  }
-
-  @media (max-width: 760px) {
-    .settings-root {
-      width: 100%;
-    }
-  }
-
-  .settings-directory-section {
-    @apply flex flex-col;
-    gap: 0.22rem;
-  }
-
-  .settings-directory-section + .settings-directory-section {
-    padding-top: 0.34rem;
-  }
-
-  .settings-directory-section-title {
-    margin: 0;
-    font-family: var(--font-ui);
-    color: var(--site-text-secondary);
-    font-size: var(--type-xs);
-    font-weight: var(--fw-medium);
-    line-height: 1.3;
-    letter-spacing: 0.02em;
-  }
-
-  .settings-directory-section-title[data-tone="danger"] {
-    color: color-mix(
-      in srgb,
-      var(--color-destructive) 72%,
-      var(--site-text-secondary)
-    );
-  }
+}
 
-  .settings-directory-list {
-    @apply flex flex-col;
-    gap: 0.35rem;
-  }
+/* Admin scoped font rules */
+@layer components {
+}
 
-  .settings-directory-item {
-    @apply flex items-center w-full text-left;
-    gap: 0.68rem;
-    padding: 0.85rem 0.6rem 0.85rem 0;
-    border: none;
-    border-radius: 0.85rem;
-    background: transparent;
-    box-shadow: none;
-    color: inherit;
-    text-decoration: none;
-    transition:
-      background-color 0.18s ease,
-      color 0.18s ease;
-  }
+/* Navigation preview — browser-chrome frame for nav preview */
+@layer components {
+}
 
-  button.settings-directory-item {
-    appearance: none;
-    cursor: pointer;
-    font: inherit;
-  }
+/* Navigation items list — card-style draggable nav items */
+@layer components {
+}
 
-  .settings-directory-item:hover {
-    background: color-mix(
-      in srgb,
-      var(--color-foreground) 4%,
-      var(--color-background)
-    );
-  }
+/* Skeleton screen sizing — used in SSR fallbacks while Lit hydrates */
+@layer components {
+}
 
-  .settings-directory-item:focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--site-accent) 28%, transparent);
-    outline-offset: 3px;
-    background: color-mix(in srgb, var(--site-accent) 6%, var(--color-card));
-  }
-
-  .settings-directory-item[data-tone="subtle"] {
-    color: inherit;
-  }
-
-  .settings-directory-item[data-tone="danger"] {
-    color: inherit;
-  }
-
-  .settings-directory-item[data-tone="danger"]:hover,
-  .settings-directory-item[data-tone="danger"]:focus-visible {
-    background: color-mix(
-      in srgb,
-      var(--color-destructive) 7%,
-      var(--color-background)
-    );
-  }
-
-  .settings-directory-item-icon {
-    @apply flex items-center justify-center shrink-0;
-    width: 2.55rem;
-    height: 2.55rem;
-    border: 1px solid color-mix(in srgb, var(--color-border) 76%, white 24%);
-    border-radius: 999px;
-    background: transparent;
-    color: var(--color-foreground);
-  }
-
-  .settings-directory-item[data-tone="subtle"] .settings-directory-item-icon {
-    color: color-mix(
-      in srgb,
-      var(--color-foreground) 86%,
-      var(--color-muted-foreground)
-    );
-  }
-
-  .settings-directory-item[data-tone="danger"] .settings-directory-item-icon {
-    border-color: color-mix(
-      in srgb,
-      var(--color-destructive) 16%,
-      var(--color-border)
-    );
-    color: color-mix(
-      in srgb,
-      var(--color-destructive) 86%,
-      var(--color-foreground)
-    );
-  }
-
-  .settings-directory-item-icon svg {
-    width: 1.08rem;
-    height: 1.08rem;
-    stroke-width: 1.9;
-  }
-
-  .settings-directory-item-copy {
-    @apply flex flex-col flex-1 min-w-0;
-    gap: 0.3rem;
-  }
-
-  .settings-directory-item-name {
-    font-family: var(--font-ui);
-    font-size: var(--type-secondary);
-    font-weight: var(--fw-regular);
-    line-height: 1.3;
-    color: var(--color-foreground);
-    text-wrap: pretty;
-  }
-
-  .settings-directory-item-desc {
-    font-family: var(--font-ui);
-    font-size: var(--type-sm);
-    line-height: 1.4;
-    color: var(--muted-foreground);
-    text-wrap: pretty;
-  }
-
-  .settings-directory-item-chevron {
-    @apply shrink-0;
-    color: color-mix(
-      in srgb,
-      var(--color-muted-foreground) 82%,
-      var(--color-foreground)
-    );
-    opacity: 0.72;
-    transition:
-      transform 0.18s ease,
-      opacity 0.18s ease,
-      color 0.18s ease;
-  }
-
-  .settings-directory-item:hover .settings-directory-item-chevron,
-  .settings-directory-item:focus-visible .settings-directory-item-chevron {
-    transform: translateX(1px);
-    opacity: 1;
-    color: color-mix(
-      in srgb,
-      var(--color-foreground) 62%,
-      var(--color-muted-foreground)
-    );
-  }
-
-  .settings-root-version {
-    text-align: center;
-    font-size: var(--type-2xs);
-    font-family: var(--font-mono, monospace);
-    color: var(--color-muted-foreground);
-    opacity: 0.45;
-    margin: 0 0 0.6rem;
-    user-select: all;
-  }
-
-  .settings-root-version-link {
-    color: inherit;
-    text-decoration: underline;
-    text-decoration-style: dotted;
-    text-underline-offset: 2px;
-  }
-
-  .settings-root-version-link:hover {
-    opacity: 0.75;
-  }
-
-  .settings-root-signout {
-    @apply flex justify-center;
-    padding-top: 0.1rem;
-  }
-
-  .settings-root-signout-btn {
-    @apply inline-flex items-center justify-center cursor-pointer;
-    min-height: 1.8rem;
-    padding: 0;
-    border: none;
-    background: transparent;
-    color: var(--color-destructive);
-    font-size: var(--type-xs);
-    font-weight: var(--fw-medium);
-    letter-spacing: -0.01em;
-    transition:
-      opacity 0.18s ease,
-      color 0.18s ease;
-  }
-
-  .settings-root-signout-btn:hover,
-  .settings-root-signout-btn:focus-visible {
-    opacity: 0.78;
-  }
-
-  .settings-root-signout-btn:focus-visible {
-    outline: 2px solid
-      color-mix(in srgb, var(--color-destructive) 28%, transparent);
-    outline-offset: 3px;
-  }
-
-  .settings-group-label {
-    margin: 0 0 0.55rem;
-    padding-inline: 0.15rem;
-    font-size: var(--type-xs);
-    font-weight: var(--fw-medium);
-    line-height: 1.3;
-    letter-spacing: 0.04em;
-    color: color-mix(
-      in srgb,
-      var(--color-foreground) 72%,
-      var(--color-muted-foreground)
-    );
-  }
-
-  .settings-group {
-    overflow: hidden;
-    border: 1px solid
-      color-mix(in srgb, var(--color-border) 84%, var(--site-accent) 8%);
-    border-radius: 0.95rem;
-    background-color: color-mix(
-      in srgb,
-      var(--color-card) 97%,
-      var(--site-accent) 3%
-    );
-    box-shadow: 0 10px 24px -22px
-      color-mix(in srgb, var(--color-foreground) 18%, transparent);
-  }
-
-  .settings-item {
-    @apply flex items-center;
-    gap: 0.75rem;
-    padding: 0.82rem 0.9rem;
-    --settings-item-icon-accent: var(--site-accent);
-    --settings-item-icon-bg-strength: 13%;
-    --settings-item-icon-border-strength: 22%;
-    --settings-item-icon-fg-strength: 70%;
-    transition:
-      background-color 0.18s ease,
-      border-color 0.18s ease;
-    border-bottom: 1px solid
-      color-mix(in srgb, var(--color-border) 78%, transparent);
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--settings-item-icon-accent) 5%,
-        var(--color-card)
-      );
-    }
-
-    &:focus-visible {
-      outline: 2px solid
-        color-mix(in srgb, var(--settings-item-icon-accent) 24%, transparent);
-      outline-offset: -2px;
-      background-color: color-mix(
-        in srgb,
-        var(--settings-item-icon-accent) 6%,
-        var(--color-card)
-      );
-    }
-  }
-
-  .settings-item[data-tone="subtle"] {
-    --settings-item-icon-bg-strength: 8%;
-    --settings-item-icon-border-strength: 16%;
-    --settings-item-icon-fg-strength: 56%;
-  }
-
-  .settings-item[data-tone="danger"] {
-    --settings-item-icon-accent: var(--color-destructive);
-    --settings-item-icon-bg-strength: 10%;
-    --settings-item-icon-border-strength: 20%;
-    --settings-item-icon-fg-strength: 76%;
-  }
-
-  .settings-item-icon {
-    @apply flex items-center justify-center shrink-0;
-    width: 28px;
-    height: 28px;
-    border-radius: 8px;
-    border: 1px solid
-      color-mix(
-        in srgb,
-        var(--settings-item-icon-accent)
-          var(--settings-item-icon-border-strength),
-        var(--color-border)
-      );
-    background-color: color-mix(
-      in srgb,
-      var(--settings-item-icon-accent) var(--settings-item-icon-bg-strength),
-      var(--color-card)
-    );
-    color: color-mix(
-      in srgb,
-      var(--settings-item-icon-accent) var(--settings-item-icon-fg-strength),
-      var(--color-foreground)
-    );
-    transition:
-      background-color 0.18s ease,
-      border-color 0.18s ease,
-      color 0.18s ease;
-  }
-
-  .settings-item-text {
-    @apply flex flex-col flex-1 min-w-0;
-    gap: 0.08rem;
-  }
-
-  .settings-item-name {
-    font-size: var(--type-base);
-    font-weight: var(--fw-medium);
-    line-height: 1.3;
-    color: var(--color-foreground);
-  }
-
-  .settings-item-desc {
-    font-family: var(--font-ui);
-    font-size: var(--type-xs);
-    line-height: 1.4;
-    color: var(--color-muted-foreground);
-  }
-
-  .settings-item-chevron {
-    @apply shrink-0;
-    color: var(--color-muted-foreground);
-    opacity: 0.38;
-    transition:
-      opacity 0.18s ease,
-      color 0.18s ease;
-  }
-
-  .settings-item:hover .settings-item-chevron,
-  .settings-item:focus-visible .settings-item-chevron {
-    opacity: 0.62;
-    color: color-mix(
-      in srgb,
-      var(--color-foreground) 46%,
-      var(--color-muted-foreground)
-    );
-  }
-
-  .settings-export-form {
-    display: block;
-  }
-
-  @media (max-width: 699px) {
-    .settings-directory-item {
-      gap: 0.62rem;
-      padding: 0.78rem 0.52rem 0.78rem 0;
-      border-radius: 0.8rem;
-    }
-
-    .settings-directory-item-icon {
-      width: 2.38rem;
-      height: 2.38rem;
-    }
-
-    .settings-root-version {
-      text-align: left;
-    }
-
-    .settings-root-signout {
-      justify-content: flex-start;
-    }
-  }
-
-  button.settings-item {
-    @apply w-full text-left cursor-pointer;
-    background: none;
-    border: none;
-    font: inherit;
-    border-bottom: 1px solid
-      color-mix(in srgb, var(--color-border) 78%, transparent);
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .custom-url-row {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    padding: 0.8rem 0.9rem 0.78rem;
-    transition: background-color 0.18s ease;
-    border-bottom: 1px solid
-      color-mix(in srgb, var(--color-border) 78%, transparent);
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--site-accent) 4%,
-        var(--color-card)
-      );
-    }
-
-    &:focus-within {
-      background-color: color-mix(
-        in srgb,
-        var(--site-accent) 5%,
-        var(--color-card)
-      );
-    }
-  }
-
-  .custom-url-row-main {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-    flex-direction: column;
-    gap: 0.28rem;
-    padding-right: 2.1rem;
-  }
-
-  .custom-url-row-header {
-    position: relative;
-    min-width: 0;
-  }
-
-  .custom-url-row-flow {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.16rem;
-    min-width: 0;
-    padding-top: 0.04rem;
-  }
-
-  .custom-url-row-target {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: 0.24rem 0.56rem;
-    min-width: 0;
-  }
-
-  .custom-url-row-menu {
-    position: absolute;
-    top: -0.18rem;
-    right: -0.24rem;
-    z-index: 2;
-  }
-
-  .custom-url-path {
-    display: block;
-    min-width: 0;
-    overflow-wrap: anywhere;
-    font-size: var(--type-base);
-    line-height: 1.3;
-    letter-spacing: -0.018em;
-    color: color-mix(
-      in srgb,
-      var(--color-foreground) 94%,
-      var(--site-accent) 6%
-    );
-  }
-
-  .custom-url-target-path {
-    display: inline;
-    max-width: 100%;
-    overflow-wrap: anywhere;
-    font-size: var(--type-xs);
-    line-height: 1.4;
-    letter-spacing: -0.01em;
-    color: color-mix(
-      in srgb,
-      var(--color-foreground) 74%,
-      var(--color-muted-foreground)
-    );
-  }
-
-  .custom-url-menu-trigger {
-    @apply flex items-center justify-center cursor-pointer;
-    width: 1.75rem;
-    height: 1.75rem;
-    border: 1px solid transparent;
-    border-radius: 999px;
-    background: transparent;
-    color: color-mix(
-      in srgb,
-      var(--color-muted-foreground) 88%,
-      var(--color-foreground)
-    );
-    transition:
-      background-color 0.18s ease,
-      border-color 0.18s ease,
-      color 0.18s ease;
-
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--site-accent) 5%,
-        var(--color-card)
-      );
-      border-color: color-mix(
-        in srgb,
-        var(--color-border) 72%,
-        var(--site-accent) 12%
-      );
-      color: var(--color-foreground);
-    }
-
-    &:focus-visible {
-      outline: 2px solid color-mix(in srgb, var(--site-accent) 20%, transparent);
-      outline-offset: 2px;
-      background-color: color-mix(
-        in srgb,
-        var(--site-accent) 6%,
-        var(--color-card)
-      );
-      border-color: color-mix(
-        in srgb,
-        var(--color-border) 72%,
-        var(--site-accent) 14%
-      );
-      color: var(--color-foreground);
-    }
-  }
-
-  .custom-url-flow-arrow {
-    @apply flex items-center justify-center;
-    width: 0.9rem;
-    height: 0.9rem;
-    color: color-mix(
-      in srgb,
-      var(--color-muted-foreground) 82%,
-      var(--site-accent) 18%
-    );
-    opacity: 0.7;
-  }
-
-  .custom-url-menu {
-    position: absolute;
-    right: 0;
-    top: calc(100% + 0.35rem);
-    z-index: 30;
-    min-width: 8.5rem;
-    padding: 0.35rem;
-    border: 1px solid
-      color-mix(in srgb, var(--color-border) 84%, var(--site-accent) 8%);
-    border-radius: 0.85rem;
-    background-color: color-mix(
-      in srgb,
-      var(--color-card) 98%,
-      var(--site-accent) 2%
-    );
-    box-shadow: 0 20px 38px -28px
-      color-mix(in srgb, var(--color-foreground) 26%, transparent);
-  }
-
-  .custom-url-menu-item {
-    @apply w-full text-left cursor-pointer;
-    border: none;
-    background: transparent;
-    border-radius: 0.6rem;
-    padding: 0.58rem 0.72rem;
-    font-size: var(--type-sm);
-    line-height: 1.35;
-    color: var(--color-foreground);
-    transition:
-      background-color 0.18s ease,
-      color 0.18s ease;
-
-    &:hover,
-    &:focus-visible {
-      background-color: color-mix(
-        in srgb,
-        var(--site-accent) 7%,
-        var(--color-card)
-      );
-      color: var(--color-foreground);
-      outline: none;
-    }
-  }
-
-  .custom-url-menu-item-danger {
-    color: var(--color-destructive);
-
-    &:hover,
-    &:focus-visible {
-      background-color: color-mix(
-        in srgb,
-        var(--color-destructive) 8%,
-        var(--color-card)
-      );
-      color: var(--color-destructive);
-    }
-  }
-
-  .custom-url-target-meta {
-    display: inline-flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.38rem;
-    min-width: 0;
-  }
-
-  .custom-url-type-mark {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.26rem;
-    font-size: var(--type-2xs);
-    line-height: 1.32;
-    letter-spacing: 0.02em;
-    color: var(--color-muted-foreground);
-  }
-
-  .custom-url-type-icon {
-    flex-shrink: 0;
-    color: color-mix(
-      in srgb,
-      var(--site-accent) 28%,
-      var(--color-muted-foreground)
-    );
-    opacity: 0.9;
-  }
-
-  .custom-url-redirect-code {
-    font-size: var(--type-2xs);
-    line-height: 1.3;
-    letter-spacing: 0.05em;
-    color: var(--color-muted-foreground);
-  }
-
-  @media (max-width: 640px) {
-    .custom-url-row {
-      padding-inline: 0.8rem;
-    }
-
-    .custom-url-row-main {
-      padding-right: 1.95rem;
-    }
-
-    .custom-url-menu {
-      min-width: 7.75rem;
-    }
-  }
-}
-
-/* Admin scoped font rules */
-@layer components {
-  .dash-heading {
-    font-family: var(--font-ui);
-  }
-}
-
-/* Navigation preview — browser-chrome frame for nav preview */
-@layer components {
-  .nav-preview {
-    @apply border rounded-lg overflow-hidden;
-    background-color: var(--color-card);
-  }
-
-  .nav-preview-chrome {
-    @apply flex items-center gap-3 px-4 py-2.5 border-b;
-    background-color: var(--color-muted);
-  }
-
-  .nav-preview-dots {
-    @apply flex gap-1.5;
-
-    > span {
-      @apply block size-2.5 rounded-full;
-      background-color: var(--color-muted-foreground);
-      opacity: 0.3;
-    }
-  }
-
-  .nav-preview-label {
-    @apply text-xs;
-    color: var(--color-muted-foreground);
-  }
-
-  .nav-preview-content {
-    @apply px-5 py-3;
-  }
-
-  .nav-preview-content .site-header-top {
-    justify-content: flex-start;
-  }
-}
-
-/* Navigation items list — card-style draggable nav items */
-@layer components {
-  .nav-items-list {
-    @apply flex flex-col gap-2;
-  }
-
-  .nav-items-list-drop {
-    min-height: 3rem;
-    border: 1.5px dashed
-      color-mix(in srgb, var(--color-border) 60%, transparent);
-    border-radius: 0.75rem;
-    padding: 0.5rem;
-    transition: border-color 0.15s;
-  }
-
-  .nav-items-list-drop:has(.nav-item) {
-    border-color: transparent;
-    padding: 0;
-  }
-
-  .nav-items-empty-hint {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    min-height: 2rem;
-    font-size: var(--type-xs);
-    color: var(--muted-foreground);
-    opacity: 0.6;
-    text-align: center;
-    margin: 0;
-  }
-
-  .nav-item {
-    @apply border rounded-lg;
-  }
-
-  .nav-item-editing {
-    @apply ring-1 ring-ring;
-  }
-
-  .nav-item-row {
-    @apply flex items-center gap-1 px-1 py-1;
-  }
-
-  .nav-item-handle {
-    @apply flex items-center justify-center w-8 h-8 shrink-0 cursor-grab rounded;
-    transition: background-color 0.15s;
-
-    &:hover {
-      background-color: var(--color-accent);
-    }
-
-    &:active {
-      cursor: grabbing;
-    }
-  }
-
-  .nav-item-info {
-    @apply flex flex-col flex-1 min-w-0 py-1.5 px-1.5 rounded cursor-pointer;
-    transition: background-color 0.15s;
-
-    &:hover {
-      background-color: var(--color-accent);
-    }
-  }
-
-  .nav-item-toggle {
-    @apply flex items-center justify-center w-8 h-8 shrink-0 rounded border-0 bg-transparent cursor-pointer;
-    color: var(--color-muted-foreground);
-    transition:
-      color 0.15s,
-      background-color 0.15s;
-
-    &:hover {
-      color: var(--color-foreground);
-      background-color: var(--color-accent);
-    }
-  }
-
-  .nav-item-edit {
-    @apply flex flex-col gap-3 px-4 pb-3 pt-3 border-t mx-1 mb-1;
-    border-color: var(--color-border);
-  }
-
-  .nav-suggestions-list {
-    @apply flex flex-col gap-2;
-  }
-
-  .nav-suggestion-item {
-    @apply flex items-center justify-between gap-3 rounded-lg border px-3 py-2;
-  }
-
-  .nav-suggestion-info {
-    @apply flex min-w-0 flex-col;
-  }
-
-  .nav-suggestion-title {
-    @apply truncate text-sm font-medium;
-  }
-
-  .nav-suggestion-meta {
-    @apply truncate text-xs text-muted-foreground;
-  }
-
-  /* Collection picker dropdown menu */
-  .collection-picker {
-    @apply absolute left-0 z-10 mt-1.5 w-64 overflow-y-auto rounded-lg border py-1.5;
-    max-height: 20rem;
-    background-color: var(--color-popover);
-    box-shadow: var(--shadow-md);
-  }
-
-  .collection-picker-group {
-    @apply px-3 pb-1 pt-3 text-xs font-medium;
-    color: var(--color-muted-foreground);
-
-    &:first-child {
-      padding-top: 0.5rem;
-    }
-  }
-
-  .collection-picker-item {
-    @apply flex items-center gap-2 rounded-md text-left border-0 bg-transparent cursor-pointer;
-    font-size: 0.9375rem;
-    line-height: 1.35;
-    padding: 0.5rem 0.625rem;
-    margin: 0 0.25rem;
-    width: calc(100% - 0.5rem);
-    color: var(--color-foreground);
-    transition: background-color 0.1s;
-
-    &:hover:not(:disabled) {
-      background-color: var(--color-accent);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-
-  .collection-picker-title {
-    @apply truncate flex-1;
-  }
-
-  .collection-picker-footer {
-    @apply sticky mt-1 border-t px-1 pb-1 pt-1;
-    bottom: -0.375rem;
-    background-color: var(--color-popover);
-  }
-
-  .collection-picker-create {
-    @apply flex w-full cursor-pointer items-center gap-1 rounded-md border-0 bg-transparent px-2 py-1.5 text-left text-sm font-normal;
-    color: var(--color-muted-foreground);
-    transition:
-      background-color 0.1s,
-      color 0.1s;
-
-    &:hover,
-    &:focus-visible {
-      background-color: var(--color-accent);
-      color: var(--color-foreground);
-      outline: none;
-    }
-  }
-
-  /* Page picker — a focused search/create flow inside Navigation settings */
-  .nav-page-dialog > .nav-page-dialog-panel {
-    width: min(34rem, calc(100% - 2rem));
-    gap: 1.25rem;
-  }
-
-  .nav-page-picker-section {
-    min-height: 16rem;
-  }
-
-  .nav-page-search-wrap {
-    @apply relative;
-
-    > svg {
-      @apply pointer-events-none absolute left-3 top-1/2 -translate-y-1/2;
-      color: var(--color-muted-foreground);
-    }
-  }
-
-  .nav-page-search-wrap .nav-page-search-input.nav-page-search-input {
-    padding-inline-start: 2.5rem;
-  }
-
-  .nav-page-results-label {
-    @apply mb-1.5 mt-4 text-xs font-medium;
-    color: var(--color-muted-foreground);
-  }
-
-  .nav-page-results {
-    @apply -mx-2 flex flex-col gap-1 overflow-y-auto px-2;
-    max-height: min(18rem, 42vh);
-  }
-
-  .nav-page-result {
-    @apply flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border-0 bg-transparent px-3 py-2.5 text-left;
-    color: var(--color-foreground);
-    transition:
-      background-color 0.12s,
-      color 0.12s;
-
-    &:hover:not(:disabled),
-    &:focus-visible,
-    &.nav-page-result-selected {
-      background-color: var(--color-accent);
-      outline: none;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      opacity: 0.55;
-    }
-
-    > svg {
-      @apply shrink-0;
-      color: var(--color-muted-foreground);
-    }
-  }
-
-  .nav-page-result-copy {
-    @apply flex min-w-0 flex-col gap-0.5;
-  }
-
-  .nav-page-result-title {
-    @apply truncate text-sm font-medium;
-  }
-
-  .nav-page-result-path {
-    @apply truncate text-xs;
-    color: var(--color-muted-foreground);
-  }
-
-  .nav-page-status {
-    @apply flex min-h-44 items-center justify-center px-6 text-center text-sm;
-    color: var(--color-muted-foreground);
-  }
-
-  .nav-page-dialog-footer.nav-page-dialog-footer {
-    @apply sm:justify-between;
-  }
-
-  .nav-page-create-link {
-    @apply gap-2;
-  }
-
-  .nav-page-spinner {
-    @apply size-4 shrink-0 animate-spin rounded-full border-2;
-    border-color: var(--color-border);
-    border-top-color: var(--color-foreground);
-  }
-
-  .nav-page-slug-field {
-    @apply flex items-center overflow-hidden rounded-md border;
-    background-color: var(--color-background);
-    border-color: var(--color-input);
-
-    &:focus-within {
-      border-color: var(--color-ring);
-      box-shadow: 0 0 0 1px var(--color-ring);
-    }
-  }
-
-  .nav-page-slug-prefix {
-    @apply shrink-0 pl-3 text-sm;
-    color: var(--color-muted-foreground);
-  }
-
-  .nav-page-slug-input.nav-page-slug-input {
-    @apply min-w-0 flex-1 border-0 pl-0 shadow-none outline-none;
-
-    &:focus {
-      box-shadow: none;
-    }
-  }
-
-  .nav-page-visibility-note {
-    @apply flex items-start gap-2 rounded-lg px-3 py-2.5 text-sm;
-    color: var(--color-muted-foreground);
-    background-color: var(--color-muted);
-
-    > svg {
-      @apply mt-0.5 shrink-0;
-    }
-  }
-
-  .nav-collection-dialog > .nav-collection-dialog-panel {
-    width: min(32rem, calc(100% - 2rem));
-    gap: 1.25rem;
-  }
-
-  .nav-create-success-header {
-    @apply items-center text-center;
-  }
-
-  .nav-create-success-icon {
-    @apply mb-1 flex size-10 items-center justify-center rounded-full;
-    color: var(--color-primary);
-    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
-  }
-
-  .nav-create-success-card {
-    @apply flex flex-col gap-1 rounded-lg border px-4 py-3;
-    background-color: var(--color-muted);
-  }
-}
-
-/* Skeleton screen sizing — used in SSR fallbacks while Lit hydrates */
-@layer components {
-  .skel-label {
-    min-height: 1.5rem;
-  }
-
-  .skel-input {
-    height: 2.75rem;
-  }
-
-  .skel-textarea {
-    height: 6rem;
-  }
-
-  .skel-section-sm {
-    min-height: 180px;
-  }
-
-  .skel-section-md {
-    min-height: 200px;
-  }
-
-  .skel-section-lg {
-    min-height: 300px;
-  }
+/* Progressive enhancement for the locale picker: the plain <select> beside it
+   is the real field until the element upgrades, at which point the element
+   hides it and takes over. Keeping the picker out of the layout until then
+   avoids showing two controls for one choice. */
+jant-locale-picker:not(:defined) {
+  display: none;
 }