@layer components {
  /* Fields */
  /* Carbon field: flat fill, single bottom rule, focus draws a 2px blue frame. */
  .field { width: 100%; min-height: 4rem; padding: .8rem 1.2rem; border: none; border-bottom: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 1.4rem; transition: background-color .11s cubic-bezier(.2, 0, .38, .9), outline-color .11s cubic-bezier(.2, 0, .38, .9); }
  .field::placeholder { color: var(--placeholder); }
  .field:hover { background: var(--surface); }
  .field:focus { outline: 2px solid var(--focus); outline-offset: -2px; border-bottom-color: transparent; }
  select.field { appearance: none; padding-right: 3.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c8580' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; }
  .field.mono { font-family: var(--mono); font-size: 1.35rem; }
  .field--short { max-width: 44rem; }
  textarea.field { resize: vertical; line-height: 1.5; }
  /* A file field reads as a drop target, with its button styled like the ghost buttons. */
  input[type="file"].field { max-width: 64rem; min-height: 7.2rem; padding: 1.4rem 1.6rem; border-style: dashed; background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
  input[type="file"].field::file-selector-button { margin-right: 1.2rem; padding: .6rem 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: inherit; font-size: 1.35rem; font-weight: 600; cursor: pointer; }
  input[type="file"].field:hover::file-selector-button { border-color: var(--ink-3); }
  /* Text the phone will display gets the phone screen's tint, so it reads as screen copy. */
  .field.copy { font-family: var(--mono); font-size: 1.4rem; white-space: pre-wrap; background: var(--screen-soft); }
  /* A templated field: the backdrop lies over it and draws the same text with its {{ names }} as chips. */
  .copy-wrap { position: relative; display: block; }
  .copy-wrap > .field { display: block; }
  .copy-wrap.is-painted > .field { color: transparent; caret-color: var(--ink); }
  .copy-backdrop { position: absolute; z-index: 1; inset: 0; overflow: hidden; padding: .8rem 1.2rem; border-bottom: 1px solid transparent; font-size: 1.4rem; color: var(--ink); pointer-events: none; }
  .copy-wrap:has(> .field.mono) > .copy-backdrop { font-family: var(--mono); font-size: 1.35rem; }
  .copy-wrap:has(> .field.copy) > .copy-backdrop { font-family: var(--mono); font-size: 1.4rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
  .copy-wrap.is-line > .copy-backdrop { display: flex; align-items: center; white-space: pre; }
  .copy-wrap.is-line > .copy-backdrop > span { flex: none; }
  .copy-backdrop mark { border-radius: 3px; background: var(--input-soft); color: var(--input-ink); box-shadow: 0 0 0 1px var(--input-soft); }
  .copy-menu { position: absolute; z-index: 5; top: calc(100% + .3rem); left: 0; min-width: min(26rem, 100%); max-width: 100%; margin: 0; padding: .4rem; list-style: none; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-float); }
  .copy-menu li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem; padding: .4rem .8rem; font-family: var(--mono); font-size: 1.25rem; color: var(--ink); cursor: pointer; }
  .copy-menu li[aria-selected="true"] { background: var(--input-soft); color: var(--input-ink); }
  .copy-menu small { overflow: hidden; font-family: var(--sans); font-size: 1.2rem; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
  .copy-insert > .list-available { margin-top: .6rem; }
  .copy-new { display: none; border-style: dashed; cursor: pointer; }
  form[data-copy-field-creates-value="true"] .copy-new { display: inline-flex; }
  form:not([data-copy-field-creates-value="true"]) .copy-insert > .list-available:not(:has(.pill:not(.copy-new))) { display: none; }
  .copy-compose { margin-top: 1rem; padding: 1.2rem; border: 1px dashed var(--line-strong); }
  .copy-compose > * + * { margin-top: 1rem; }
  .menu-preview { margin-top: 1.4rem; }
  .menu-preview-screen { min-height: 5rem; padding: 1rem 1.2rem; border: 1px solid var(--screen-line); border-radius: var(--r-control); background: var(--screen-bg); color: var(--screen-ink); font-family: var(--mono); font-size: 1.35rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
  .menu-preview-screen:empty::before { content: "…"; color: var(--ink-3); }
  .list-step { margin: 1.4rem 0 .2rem; font-size: 1.3rem; font-weight: 600; color: var(--ink); }
  .list-method { flex: 0 0 11rem; }
  .list-sample { display: grid; gap: .6rem; justify-items: start; margin: .4rem 0 1.2rem; padding: 1rem 1.2rem; border: 1px dashed var(--line); border-radius: var(--r-card); }
  .list-sample .stacked { width: 100%; }
  .answer-rule .pair-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .answer-rule-written { display: grid; gap: .8rem; }
  .answer-rule-suggest { justify-self: start; margin-top: .4rem; }
  .answer-rule-try { display: grid; gap: .4rem; margin-top: .4rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
  .answer-rule-verdict { margin: 0; font-size: 1.3rem; font-weight: 550; }
  .answer-rule-verdict[data-state="pass"] { color: var(--ok); }
  .answer-rule-verdict[data-state="fail"] { color: var(--warning); }
  .answer-rule-verdict[data-state="error"] { color: var(--danger); }
  .menu-preview-key { padding: 0 .5rem; border-radius: var(--r-control); background: var(--warning-soft); color: var(--warning); font-size: 1.15rem; }
  .source { font-family: var(--mono); font-size: 1.3rem; line-height: 1.65; tab-size: 2; white-space: pre; overflow: auto; min-height: 24rem; }
  .stacked { display: block; min-width: 0; }
  .check { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; font-size: 1.4rem; cursor: pointer; }
  .check input { width: 1.7rem; height: 1.7rem; margin: 0; accent-color: var(--focus); }
  .fields { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
  /* "New screen" in a go-to select: a name, a kind and a way back to the list. */
  .new-target { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem; align-items: center; }
  .new-target .field { min-width: 0; }
  .new-target select.field { width: auto; }
}