.title-field { display: inline-flex; min-width: 0; max-width: 100%; }
.title-field-view {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-075);
  min-width: 0;
  max-width: calc(100% + var(--sp-100) * 2);
  margin: 0 calc(var(--sp-100) * -1);
  padding: 0 var(--sp-100);
  border: none;
  border-radius: var(--r-s);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: text;
  transition: background-color var(--dur-pop) var(--ease-out);
}
.title-field-view:hover { background: var(--a-200); }
.title-field-text { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-field-text.is-placeholder { color: var(--ink3); }
.title-field-pen { flex: none; display: inline-grid; color: var(--ink3); opacity: 0;
                   transition: opacity var(--dur-pop) var(--ease-out); }
.title-field-view:hover .title-field-pen,
.title-field-view:focus-visible .title-field-pen { opacity: 1; }
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not(.wp-num):not(.pin-input).title-field-input {
  flex: none;
  field-sizing: content;
  width: auto;
  min-width: 2ch;
  max-width: calc(100% + var(--sp-100) * 2);
  height: auto;
  margin: 0 calc(var(--sp-100) * -1);
  padding: 0 var(--sp-100);
  border: none;
  border-radius: var(--r-s);
  background: var(--a-200);
  box-shadow: none;
  font: inherit;
}
.title-field.faint { opacity: .5; transition: opacity var(--dur-pop) var(--ease-out); }
.title-field.faint:hover, .title-field.faint:focus-within { opacity: 1; }
html[data-motion="calm"] :is(.title-field.faint, .title-field-view, .title-field-pen) { transition: none; }
.title-field.open > .combo-drop { display: block; }