/* per-page polish: skill-new
   Scoped exclusively to structures in skill-new.html.
   Layers steel-system overrides on the proto's page-specific CSS.
*/

/* Form card: soft shadow + accent-tinted hairline */
.shell > .wrap .form.card {
  border-color: color-mix(in srgb, var(--accent) 9%, var(--line)) !important;
  box-shadow: var(--shadow-sm);
}

/* Form head strip: glass, accent hairline below */
.shell > .wrap .form .fhd {
  background: var(--surface-3) !important;
  border-bottom-color: color-mix(in srgb, var(--accent) 12%, var(--line)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Page heading hierarchy */
.shell > .wrap .ph h1 {
  letter-spacing: -.03em;
  font-weight: 660;
}
.shell > .wrap .ph .sub {
  color: var(--ink-soft);
}

/* Crumb: keep typography in line with skill-detail crumb */
.shell > .wrap .crumb {
  font-size: 12.5px;
  color: var(--ink-mute);
}
.shell > .wrap .crumb a {
  color: var(--ink-soft);
  font-weight: 500;
}
.shell > .wrap .crumb a:hover {
  color: var(--accent);
}

/* Field labels and helper text */
.shell > .wrap .field .flabel {
  color: var(--ink);
  font-weight: 580;
}
.shell > .wrap .field .fhelp {
  color: var(--ink-mute);
}

/* Slug field: clean single paper surface with muted prefix inline.
   The proto's bg-2 + accent-tinted halftone bg read as a grey
   "block" (Federico) - drop it back to plain paper like other inputs. */
.shell > .wrap .slug {
  background: var(--paper) !important;
  border-color: var(--line) !important;
}
.shell > .wrap .slug .slug-pre {
  color: var(--ink-mute);
}
.shell > .wrap .slug .slug-input {
  color: var(--ink);
}

/* Inputs / textareas: focus halo follows the steel accent */
.shell > .wrap .input:focus,
.shell > .wrap .md-area:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Visibility segmented control: active uses the same solid blue as other CTAs */
.shell > .wrap .seg {
  border-color: var(--line-strong);
}
.shell > .wrap .seg-opt {
  color: var(--ink-soft);
}
.shell > .wrap .seg-opt:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2)) !important;
}
.shell > .wrap .seg-opt.active {
  background: var(--solid) !important;
  color: var(--solid-fg) !important;
}

/* Folder chips: when active, switch to solid; restraint over color */
.shell > .wrap .chips .fc {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink-soft);
}
.shell > .wrap .chips .fc:hover {
  color: var(--ink);
  border-color: var(--accent-line);
}
.shell > .wrap .chips .fc.on {
  background: var(--solid) !important;
  color: var(--solid-fg) !important;
  border-color: var(--solid) !important;
}

/* Tag input row */
.shell > .wrap .tagrow {
  background: var(--paper);
  border-color: var(--line-strong);
}
.shell > .wrap .tagrow:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.shell > .wrap .tag {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  color: var(--accent) !important;
}
.shell > .wrap .tag .x {
  color: var(--accent);
  opacity: .7;
}
.shell > .wrap .tag .x:hover {
  opacity: 1;
}

/* Markdown content area: subtle inset, monospace */
.shell > .wrap .md-area {
  background: var(--bg-2);
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Footer action strip: matches form head treatment */
.shell > .wrap .form .factions {
  background: var(--surface-3) !important;
  border-top-color: color-mix(in srgb, var(--accent) 10%, var(--line)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.shell > .wrap .factions .cancel {
  color: var(--ink-mute);
}
.shell > .wrap .factions .cancel:hover {
  color: var(--accent);
}

/* Right-rail preview card: floats, accent-tinted */
.shell > .wrap .rail .rcard {
  background: var(--surface-3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: color-mix(in srgb, var(--accent) 10%, var(--line));
}
.shell > .wrap .rail .preview-card {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.shell > .wrap .rail .preview-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}
.shell > .wrap .rail .preview-card .pc-nm {
  color: var(--ink);
}
.shell > .wrap .rail .preview-card .pc-ds {
  color: var(--ink-soft);
}
.shell > .wrap .rail .helpcard p {
  color: var(--ink-soft);
}

/* Sidebar new-skill button keeps the same solid-accent styling everywhere */
.side .snew {
  background: var(--solid);
  color: var(--solid-fg);
  border-color: var(--solid);
  box-shadow: var(--shadow-btn);
}
.side .snew:hover {
  background: var(--solid-2);
}

/* Mobile collapse: rail stacks under the form, sticky disabled */
@media (max-width: 880px) {
  .shell > .wrap .rail {
    position: static;
  }
}
@media (max-width: 640px) {
  .shell > .wrap .form .fbody {
    padding: 18px 18px 6px;
  }
  .shell > .wrap .form .factions {
    padding: 14px 18px;
  }
  .shell > .wrap .factions .right {
    width: 100%;
    justify-content: stretch;
  }
  .shell > .wrap .factions .right .btn {
    flex: 1;
  }
}

/* ════════════════════════════════════════════════════════════════
   C1 - UNIFY CONTROL LANGUAGE.
   Federico: "Visibility vs Folder vs Tags look super different.
   Need more alignment, more consistency."
   Root cause: the proto ships 3 different container patterns -
   .seg = segmented full-width bar with internal dividers,
   .chips = row of discrete pill buttons (the cleanest),
   .tagrow = single tall container holding chips + an extending input
             ("very big white field").
   Override: all three become a row of identical pill buttons matching
   the .fc/library pattern (30px height, 13px padding, --r-pill, paper
   bg, line border, font 12/550). Active = var(--solid). Tag chips +
   add-input are the same pill. No outer container backgrounds.
   ════════════════════════════════════════════════════════════════ */

.shell > .wrap .seg {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
}
.shell > .wrap .seg-opt {
  height: 30px !important;
  padding: 0 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  background: var(--paper) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink-soft) !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  gap: 6px !important;
  transition: transform var(--t-base) var(--spring), color var(--t-fast), border-color var(--t-fast), background var(--t-fast) !important;
}
.shell > .wrap .seg-opt:hover {
  color: var(--ink) !important;
  background: var(--paper) !important;
  border-color: var(--line-strong) !important;
  transform: translateY(-1px);
}
.shell > .wrap .seg-opt.active,
.shell > .wrap .seg-opt[aria-checked="true"] {
  background: var(--solid) !important;
  color: var(--solid-fg) !important;
  border-color: var(--solid) !important;
}
.shell > .wrap .seg-opt svg {
  width: 13px !important;
  height: 13px !important;
  opacity: .85 !important;
}

/* Folder chips: align dimensions with the unified pill above so all
   three rows share identical button geometry. */
.shell > .wrap .chips .fc {
  height: 30px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  background: var(--paper) !important;
  border-color: var(--line) !important;
}

/* Tags: drop the big white container; tags + add-input flow inline
   as the same pill language. Tag chips look like inactive folder
   chips with a close glyph. The add-input is a pill itself, natural
   width (no extending field). */
.shell > .wrap .tagrow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  align-items: center !important;
  box-shadow: none !important;
}
.shell > .wrap .tagrow:focus-within {
  box-shadow: none !important;
}
.shell > .wrap .tag {
  height: 30px !important;
  padding: 0 6px 0 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  background: var(--paper) !important;
  color: var(--ink-soft) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  gap: 6px !important;
}
.shell > .wrap .tag .x {
  color: var(--ink-mute) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 4px !important;
  cursor: pointer !important;
}
.shell > .wrap .tag .x:hover {
  color: var(--ink) !important;
}
.shell > .wrap .tagrow .ti {
  height: 30px !important;
  padding: 0 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-pill) !important;
  background: var(--paper) !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  color: var(--ink) !important;
  flex: 0 1 auto !important;
  min-width: 180px !important;
  max-width: 260px !important;
}
.shell > .wrap .tagrow .ti:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}