.tag-field {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.tag-bands {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.tag-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
  z-index: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.tag-field textarea.tag-input {
  position: relative;
  z-index: 1;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--ink);
  overflow: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.tag-field textarea.tag-input.tag-plain {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}

.tag-field textarea.tag-input::placeholder {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

.tag-field.is-ref-preview .tag-backdrop {
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}

mark.tag-ref {
  background: color-mix(in srgb, var(--ref, var(--accent)) 20%, transparent);
  color: var(--ink);
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ref, var(--accent)) 28%, transparent);
}

.tag-field.is-ref-preview mark.tag-ref mark.tag-tok {
  color: var(--tag, var(--accent));
}

/* Overlay marks must not change glyph metrics: the caret lives in the
   transparent textarea. font-weight / padding / inline-block here shift
   visible text and wrap early (worse on phone, and with each @tag). */
.tag-backdrop mark,
.tag-backdrop .tag-hd,
.tag-backdrop .tag-quote,
.tag-backdrop .tag-brace,
.tag-backdrop .tag-temporal,
.tag-backdrop .tag-end {
  display: inline;
  font-weight: inherit;
  font-style: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: content-box;
}

mark.tag-captured {
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

mark.tag-tok {
  background: color-mix(in srgb, var(--tag, var(--accent)) 16%, transparent);
  color: var(--tag, var(--accent));
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

mark.tag-theme {
  background: color-mix(in srgb, var(--tag, var(--accent)) 12%, transparent);
  color: var(--tag, var(--accent));
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

mark.tag-tok.tag-action {
  background-color: transparent;
  background-image: linear-gradient(
    transparent calc(100% - 1px),
    var(--tag, var(--accent)) calc(100% - 1px)
  );
  box-shadow: none;
  border-radius: 0;
}

mark.tag-tok.tag-inbox {
  background-image: linear-gradient(
    transparent calc(100% - 1px),
    var(--tag, var(--accent)) calc(100% - 1px)
  );
  box-shadow: none;
}

.tag-prop {
  color: var(--muted);
}

mark.tag-name {
  background-color: transparent;
  background-image: linear-gradient(
    transparent calc(100% - 0.07em),
    color-mix(in srgb, var(--tag, var(--accent)) 62%, transparent) calc(100% - 0.07em)
  );
  color: inherit;
  box-shadow: none;
  border-radius: 0;
}

.tag-field.is-ref-preview mark.tag-ref mark.tag-name {
  color: color-mix(in srgb, var(--tag, var(--accent)) 70%, var(--ink));
}

.tag-backdrop mark.tag-temporal {
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
}

.tag-temporal-band {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--tag, var(--accent)) 16%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--tag, var(--accent)) 42%, transparent);
  pointer-events: none;
}

mark.tag-end {
  color: var(--muted);
  background: transparent;
}

.tag-hd {
  color: var(--ink);
}

.tag-quote {
  color: var(--accent);
}

.tag-caret-mirror {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.tag-menu {
  position: fixed;
  z-index: 80;
  min-width: 14rem;
  max-width: 22rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.2rem 0;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface, #fff);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
}

.tag-menu-group {
  padding: 0.35rem 0.55rem 0.15rem;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag-menu-group:not(:first-child) {
  margin-top: 0.15rem;
  border-top: 1px solid var(--border);
  padding-top: 0.4rem;
}

.tag-menu-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0.28rem 0.4rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}

.tag-menu-item.is-active,
.tag-menu-item:hover {
  background: color-mix(in srgb, var(--tag, var(--accent)) 12%, var(--mix));
}

.tag-menu-swatch {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--tag, var(--accent));
  flex-shrink: 0;
}

.tag-menu-label { flex: 1; min-width: 0; }

.tag-menu-key {
  font-size: 0.68rem;
  color: var(--muted);
}

.tag-menu-ai {
  flex-shrink: 0;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0 0 0.45rem;
}

.tag-actions[hidden] { display: none; }

.tag-actions-hint,
.tag-actions-status {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--muted);
}

.tag-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.tag-action-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
}

.tag-action-name {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink);
}

.tag-action-engine {
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
}

.tag-actions-all {
  align-self: flex-start;
}

.tag-action-row.is-proposal {
  flex-wrap: wrap;
}

.tag-action-proposal {
  flex: 1 1 100%;
  margin: 0.15rem 0 0;
  padding: 0.45rem 0.6rem;
  border-left: 3px solid var(--accent, #6b4c7a);
  background: color-mix(in srgb, var(--paper, #f6f1e8) 88%, var(--ink, #1a1612));
  font-family: var(--serif, Georgia, serif);
  font-size: 0.88rem;
  white-space: pre-wrap;
  color: var(--ink);
}

.tag-action-decide {
  display: flex;
  gap: 0.35rem;
  flex: 1 1 100%;
  justify-content: flex-end;
}

.tag-inbox {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-shrink: 0;
  padding: 0 0 0.45rem;
}

.tag-inbox[hidden] { display: none; }

.tag-inbox-hint {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--muted);
}

.tag-inbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.tag-inbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.tag-inbox-row.is-idea {
  box-shadow: inset 3px 0 0 var(--tag, #3a6a6a);
  padding-left: 0.4rem;
}

.tag-inbox-row.is-todo {
  box-shadow: inset 3px 0 0 var(--tag, #b8a82a);
  padding-left: 0.4rem;
}

.tag-inbox-check {
  flex-shrink: 0;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.tag-inbox-box {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--ink);
  border-radius: 0.08rem;
  background: transparent;
}

.tag-inbox-check:hover .tag-inbox-box {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.tag-inbox-jump {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  margin: 0;
  padding: 0.12rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tag-inbox-jump:hover {
  color: var(--accent);
}

.tag-inbox-kind {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--tag, var(--ink));
}

.tag-inbox-meta {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--muted);
}

.tag-inbox-body {
  font-family: var(--serif);
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

.tag-inbox.is-panel {
  padding: 0.35rem 0 0.7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.55rem;
}

.tag-inbox.is-panel.is-empty {
  border-bottom: 0;
}

.notes-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}

.notes-tab {
  appearance: none;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.42rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  box-shadow: inset 0 -1px 0 transparent;
}

.notes-tab[data-notes-tab="todo"] { --tab-accent: #b8a82a; }
.notes-tab[data-notes-tab="idea"] { --tab-accent: #3a6a6a; }
.notes-tab[data-notes-tab="objective"] { --tab-accent: #8b3d42; }

.notes-tab:hover {
  color: var(--tab-accent, var(--ink));
}

.notes-tab.active {
  color: var(--tab-accent, var(--ink));
  box-shadow: inset 0 -1.5px 0 var(--tab-accent, var(--accent));
}

.notes-tab-count {
  font-variant-numeric: tabular-nums;
  margin-left: 0.2em;
  opacity: 0.72;
}

.atelier-note-stage .tag-field {
  flex: 1;
  min-height: 12rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--ink) 6%, transparent);
}

.atelier-note-stage .tag-field .note-stage-body {
  flex: 1;
  min-height: 0;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.editor-shell .tag-field {
  flex: 1;
  min-height: 12rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface, #fff);
}

.editor-shell .tag-field .editor-text {
  flex: 1;
  min-height: 0;
  height: auto;
  border: 0;
  background: transparent;
}

.obj-source-label .tag-field,
.atelier-modal-body .tag-field {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface, #fff);
}

.obj-source-label .tag-field .obj-source-text,
.atelier-modal-body .tag-field .obj-pop-text {
  border: 0;
  background: transparent;
  box-shadow: none;
}