/* sheet.css — sheet-wide layout and shared field primitives still
 * consumed by fields.js/dropdown.js/warnings.js.
 *
 * Row-level layout lives in components/<row>.css. Component-internal
 * class rules (createTextField, createEntryList, etc.) stay here
 * because those DOM factories pre-date the per-row component split
 * and are shared across every row. */

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--color-surface);
  color: var(--color-fg); /* exception: was #1a1a1a — token --color-fg #000 is close */
  padding: var(--sp-lg);
}

/* ── Sheet container ── */
.sheet {
  /* No page-like max-width cap; the sheet breathes into the viewport
   * with uniform side padding. Container-query context stays so
   * component breakpoints resolve against the sheet's inline size. */
  background: var(--color-paper);
  padding: var(--sp-md) var(--sp-lg);
  container: sheet / inline-size;
}

.sheet-title {
  font-size: var(--fs-caption); /* exception: was 11px, --fs-caption is 12px */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  margin-bottom: var(--sp-md);
  text-align: center;
}

/* ── Field rows (inline editable) ── */
.field-row {
  position: relative;
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid #bbb; /* exception: decorative field underline, not --color-border #000 */
  padding: var(--sp-xs) 0;
  min-height: 28px;
}
.field-label {
  font-size: var(--fs-caption); /* exception: was 9px, --fs-caption is 12px */
  font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: #777; /* exception: decorative mid-gray for muted label */
  width: 100px; flex-shrink: 0; padding-top: var(--sp-xs); /* exception: was 3px */
}
.field-label.small-label { width: 50px; }
.field-input {
  flex: 1; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-body); /* exception: was 15px, nearest --fs-body 14px */
  color: var(--color-fg); /* exception: was #1a1a1a */
  padding: var(--sp-xxs) var(--sp-xs); outline: none; transition: background 0.15s;
}
.field-input:focus { background: var(--color-focus-bg); border-radius: 2px; }
.field-input::placeholder { color: var(--color-divider-light); font-style: italic; }
.field-input.saved-flash { background: var(--color-flash-saved); }

/* ── Tag input (ancestry, paths) ── */
.tag-field {
  flex: 1; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--sp-xs); min-height: 26px; position: relative;
}
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-xs); /* exception: was 3px, nearest --sp-xs 4px */
  background: #f0f0f0; border: 1px solid #d0d0d0; border-radius: 3px; /* exception: decorative chip surface */
  padding: var(--sp-xxs) var(--sp-sm); font-size: var(--fs-body); /* exception: was 1px 6px */
  color: #333; /* exception: was #333, --color-fg #000 close enough but intentional lighter */
  line-height: 1.6; transition: all 0.15s;
}
.tag.canonical { background: #e8f0ff; border-color: #b8cfff; } /* exception: decorative canonical-tint */
.tag.saved-flash { background: var(--color-flash-saved); border-color: #a5d6a7; } /* exception: decorative saved-flash border tint, no token */
.tag .tag-remove {
  border: none; background: transparent; cursor: pointer;
  font-size: var(--fs-caption); color: #aaa; padding: 0 0 0 var(--sp-xxs); /* exception: decorative gray */
  line-height: 1; transition: color 0.1s;
}
.tag .tag-remove:hover { color: var(--color-error); }
.tag-input {
  border: none; background: transparent; font-family: inherit;
  font-size: var(--fs-body); color: var(--color-fg); outline: none; /* exception: was #1a1a1a */
  min-width: 80px; flex: 1; padding: var(--sp-xxs) var(--sp-xs);
}
.tag-input::placeholder { color: var(--color-divider-light); font-style: italic; font-size: var(--fs-caption); }

/* ── Dropdown (shared by tags and entries) ── */
.dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-paper); border: 1px solid var(--color-divider-light); border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 100;
  max-height: 160px; overflow-y: auto; display: none;
}
.dropdown.visible { display: block; }
.dropdown-item {
  padding: var(--sp-sm) var(--sp-sm); font-size: var(--fs-body); cursor: pointer; /* exception: was 8px 12px, nearest --sp-sm 8px */
  display: flex; justify-content: space-between; align-items: center;
}
.dropdown-item:hover, .dropdown-item.highlighted { background: #e8f0ff; } /* exception: decorative hover tint */
.dropdown-item .canonical-badge {
  font-size: var(--fs-caption); background: #e0e7ff; color: #3b5bdb; /* exception: decorative badge */
  padding: var(--sp-xxs) var(--sp-sm); border-radius: 8px; /* exception: was 1px 6px */
}

/* ── Warning overlays (position:absolute, no layout impact) ── */
.warn-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.warn-indicator {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 50;
  width: 14px;
  height: 14px;
}
.warn-icon {
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 700; /* exception: was 8px, --fs-caption is 12px */
  border: none; cursor: pointer; padding: 0;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.warn-icon.severity-warn { background: var(--color-status-warn-border); color: var(--color-status-warn-fg); }
.warn-icon.severity-error { background: var(--color-error); color: #fff; } /* exception: severity color, pending T9 */
.warn-icon.severity-info { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
.warn-icon:hover { transform: scale(1.25); }

.warn-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-overlay-bg); color: #fff; /* exception: tooltip fg-on-overlay, role-adjacent to --color-accent-fg */
  padding: var(--sp-sm) var(--sp-sm); border-radius: 4px; /* exception: was 6px 10px */
  font-size: var(--fs-caption); max-width: 260px;
  line-height: 1.4; z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  pointer-events: none; white-space: normal;
}
.warn-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--color-overlay-bg);
}
.warn-indicator.open .warn-tooltip { display: block; }

/* ── Number field with +/- ── */
.num-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.num-field input {
  width: 40px; height: 30px;
  border: 1px solid #aaa; border-radius: 2px; /* exception: decorative light border */
  text-align: center; font-size: var(--fs-emphasis); font-weight: 600;
  font-family: inherit; background: transparent; outline: none;
  transition: all 0.15s; -moz-appearance: textfield;
}
.num-field input::-webkit-inner-spin-button,
.num-field input::-webkit-outer-spin-button { -webkit-appearance: none; }
.num-field input:focus { background: var(--color-focus-bg); }
.num-field input.saved-flash { background: var(--color-flash-saved); }
.num-field input.calc-flash { background: var(--color-flash-calc); }

.num-stepper {
  display: flex; flex-direction: column; margin-left: var(--sp-xxs); /* exception: was 1px, nearest --sp-xxs 2px */
  opacity: 0; transition: opacity 0.15s;
}
.num-field:hover .num-stepper,
.num-field:focus-within .num-stepper { opacity: 1; }
.num-stepper button {
  width: 16px; height: 15px; border: 1px solid var(--color-divider-light);
  background: #f8f8f8; cursor: pointer; font-size: var(--fs-caption); /* exception: was 10px */
  line-height: 1; color: #666; display: flex; /* exception: decorative mid-gray */
  align-items: center; justify-content: center; padding: 0;
  transition: all 0.1s;
}
.num-stepper button:first-child { border-radius: 0 2px 0 0; border-bottom: none; }
.num-stepper button:last-child { border-radius: 0 0 2px 0; }
.num-stepper button:hover { background: #e8e8e8; color: var(--color-fg); } /* exception: hover-gray decorative */

/* ── Rank dots ── */
.rank-dots { display: flex; gap: var(--sp-xs); } /* exception: was 3px, nearest --sp-xs 4px */
.rank-dot {
  width: 14px; height: 14px; border: 1.5px solid var(--color-fg-subtle);
  border-radius: 50%; cursor: pointer; background: transparent;
  transition: all 0.15s; padding: 0;
}
.rank-dot.filled { background: #333; border-color: #333; } /* exception: filled-state near-black */
.rank-dot:hover { border-color: #333; } /* exception: hover-state near-black */

/* ── Derived stats with unit suffix ── */
.derived-cell {
  display: flex; align-items: baseline;
  border: 1.5px solid #999; border-radius: 2px; /* exception: decorative mid-gray border */
  padding: var(--sp-sm) var(--sp-sm); /* exception: was 6px 8px, nearest --sp-sm 8px */
}
.derived-label {
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: 1px; /* exception: was 8px */
  text-transform: uppercase; color: #777; flex-shrink: 0; /* exception: decorative mid-gray */
  padding-top: var(--sp-xs); margin-right: var(--sp-sm); /* exception: was 3px, 6px — nearest --sp-xs, --sp-sm */
}
.derived-val {
  width: 32px; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-body); color: var(--color-fg-subtle);
  padding: var(--sp-xxs) var(--sp-xxs); outline: none; transition: all 0.15s;
  text-align: right;
}
.derived-val:focus { background: var(--color-focus-bg); color: var(--color-fg); border-radius: 2px; }
.derived-val.is-override { color: var(--color-fg); font-weight: 600; }
.derived-val.saved-flash { background: var(--color-flash-saved); }
.derived-unit {
  font-size: var(--fs-caption); color: #999; margin-left: var(--sp-xxs); flex-shrink: 0; /* exception: decorative gray */
  user-select: none;
}
.derived-reset {
  width: 14px; height: 14px; border: none; background: transparent;
  color: var(--color-divider-light); font-size: var(--fs-caption); cursor: pointer; /* exception: was 11px */
  display: none; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0; margin-left: var(--sp-xxs);
}
.derived-val.is-override ~ .derived-unit ~ .derived-reset { display: flex; }
.derived-reset:hover { color: var(--color-error); }

/* ── Entry lists ── */
.entry-list { margin-top: var(--sp-xs); }
.entry-row {
  position: relative; display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-xs) 0; border-bottom: 1px solid #ddd; min-height: 32px; /* exception: decorative light divider */
}
.entry-row:last-child { border-bottom-style: dashed; }
.entry-input {
  flex: 1; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-body); color: var(--color-fg); /* exception: was #1a1a1a */
  padding: var(--sp-xs) var(--sp-xs); outline: none; transition: background 0.15s;
}
.entry-input:focus { background: var(--color-focus-bg); border-radius: 2px; }
.entry-input::placeholder { color: var(--color-divider-light); font-style: italic; font-size: var(--fs-caption); }
.entry-input.saved-flash { background: var(--color-flash-saved); }

/* ── Goal rows ── */
.goal-row {
  position: relative; display: flex; align-items: center; gap: var(--sp-sm);
  padding: var(--sp-xs) 0; border-bottom: 1px solid #ddd; min-height: 32px; /* exception: decorative light divider */
}
.goal-row:last-child { border-bottom-style: dashed; }
.goal-input {
  flex: 1; border: none; background: transparent;
  font-family: inherit; font-size: var(--fs-body); color: var(--color-fg); /* exception: was #1a1a1a */
  padding: var(--sp-xs) var(--sp-xs); outline: none; transition: background 0.15s;
}
.goal-input:focus { background: var(--color-focus-bg); border-radius: 2px; }
.goal-input::placeholder { color: var(--color-divider-light); font-style: italic; font-size: var(--fs-caption); }
.goal-input.saved-flash { background: var(--color-flash-saved); }

/* ── Meta panels (entry detail) ── */
.meta-toggle {
  width: 20px; height: 20px; border: 1px solid var(--color-divider-light); border-radius: 3px;
  background: transparent; cursor: pointer; font-size: var(--fs-caption); color: #999; /* exception: was 11px + decorative gray */
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s;
}
.entry-row.has-value .meta-toggle { display: flex; }
.meta-toggle:hover { border-color: #666; color: #333; background: #f5f5f5; } /* exception: decorative hover shades */

.meta-panel {
  display: none; padding: var(--sp-sm) 0 var(--sp-sm) var(--sp-lg); border-bottom: 1px solid #eee; /* exception: was 28px left indent, nearest --sp-lg 24px; decorative light divider */
}
.meta-panel.open { display: block; }

/* ── Remove button ── */
.remove-btn {
  width: 18px; height: 18px; border: none; background: transparent;
  cursor: pointer; font-size: var(--fs-body); color: var(--color-divider-light);
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 2px; transition: all 0.15s;
}
.entry-row.has-value .remove-btn,
.goal-row.has-value .remove-btn { display: flex; }
.remove-btn:hover { color: var(--color-error); background: var(--color-status-error-bg); }

/* ── Animation states ── */
.saved-flash { background: var(--color-flash-saved); }
.calc-flash { background: var(--color-flash-calc); }

/* ── Toast notification ── */
.toast {
  position: fixed; bottom: var(--sp-md); right: var(--sp-md); /* exception: was 20px, nearest --sp-md */
  background: var(--color-overlay-bg); color: #fff; padding: var(--sp-sm) var(--sp-md); /* exception: toast fg-on-overlay */
  border-radius: 6px; font-size: var(--fs-body); opacity: 0;
  transform: translateY(8px); transition: all 0.2s;
  pointer-events: none; z-index: 200;
}
.toast.visible { opacity: 1; transform: translateY(0); }

/* ── Mobile: single-column reflow ── */
@media (max-width: 640px) {
  body { padding: var(--sp-sm); }
  .sheet { padding: var(--sp-sm); } /* exception: was 12px, nearest --sp-sm 8px */
}