/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Command List · design-system: DESIGN.md · theme: graphite-warm-white-orange · contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49–57) · designed-as-app */

.operating-page {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: var(--space-md) var(--space-sm) var(--space-2xl);
  gap: var(--space-lg);
}

.operating-page h1,
.operating-page h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.operating-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.operating-page-header h1,
.operating-page-header p,
.operating-ledger-heading h2,
.operating-ledger-heading p,
.operating-dialog-head h2,
.operating-dialog-head p,
.operating-detail-head h2,
.operating-detail-remark p {
  margin: 0;
}

.operating-page-header h1 {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.operating-page-header p {
  margin-top: var(--space-2xs);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.operating-header-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
}

.operating-header-actions .btn,
.operating-filter-primary .btn,
.operating-filter-advanced .btn,
.operating-dialog-actions .btn,
.operating-void-actions .btn {
  min-height: 44px;
}

.operating-page-content {
  display: grid;
  gap: var(--space-sm);
}

.operating-summary {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.operating-summary-primary {
  display: grid;
  align-content: center;
  min-height: 148px;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.operating-summary-primary > span,
.operating-summary-support span,
.operating-row-amount small,
.operating-detail-amount span,
.operating-detail-grid dt,
.operating-detail-remark > span {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.operating-summary-primary > strong {
  margin: var(--space-2xs) 0 var(--space-3xs);
  color: var(--color-text-primary);
  font-size: clamp(28px, 7vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.operating-summary-primary.positive > strong { color: var(--success-700); }
.operating-summary-primary.negative > strong { color: var(--error-700); }
.operating-summary-primary small { color: var(--color-text-secondary); }

.operating-summary-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.operating-summary-support > div {
  display: grid;
  align-content: center;
  min-height: 92px;
  padding: var(--space-sm);
}

.operating-summary-support > div + div { border-left: 1px solid var(--color-border); }
.operating-summary-support span { display: flex; align-items: center; gap: var(--space-2xs); }
.operating-summary-support strong { margin-top: 6px; color: var(--color-text-primary); font-size: 18px; }

.operating-summary-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-400);
}

.operating-summary-dot.income { background: var(--success-700); }
.operating-summary-dot.expense { background: var(--warning-700); }

.operating-ledger {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.operating-filter-primary,
.operating-filter-advanced {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.operating-filter-primary label,
.operating-filter-advanced label,
.operating-form-grid label,
.operating-amount-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.operating-filter-primary .input,
.operating-filter-primary .select,
.operating-filter-advanced .input,
.operating-entry-form .input,
.operating-entry-form .select {
  min-height: 44px;
}

.operating-page .input:focus-visible,
.operating-page .select:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 1px;
  border-color: var(--color-border-strong);
  box-shadow: none;
}


.operating-page .input:disabled,
.operating-page .select:disabled { cursor: not-allowed; opacity: .55; }

.operating-filter-advanced[hidden] { display: none; }
.operating-filter-advanced p { min-height: 18px; margin: 0; color: var(--color-text-secondary); font-size: 12px; }
.operating-filter-advanced p[data-tone="error"] { color: var(--error-700); }

.operating-ledger-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
}

.operating-ledger-heading h2 {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.operating-ledger-heading p { margin-top: 4px; color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; }
.operating-ledger-heading > span { flex: 0 0 auto; color: var(--color-text-secondary); font-size: 12px; }

.operating-ledger-head { display: none; }
.operating-ledger-list { border-top: 1px solid var(--color-border); }

.operating-ledger-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "subject amount"
    "date amount"
    "state open";
  gap: var(--space-2xs) var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.operating-ledger-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--brand-700);
  outline-offset: -2px;
}

.operating-ledger-row:active { background: var(--gray-100); }
.operating-ledger-row:disabled { cursor: not-allowed; opacity: .55; }

.operating-ledger-row.is-void { opacity: .62; }
.operating-row-date { grid-area: date; }
.operating-row-subject { grid-area: subject; }
.operating-row-state { grid-area: state; }
.operating-row-amount { grid-area: amount; text-align: right; }
.operating-row-open { grid-area: open; color: var(--gray-400); font-size: 22px; text-align: right; }

.operating-row-date,
.operating-row-subject,
.operating-row-amount {
  display: grid;
  min-width: 0;
  gap: var(--space-3xs);
}

.operating-row-date strong,
.operating-row-subject strong,
.operating-row-amount strong {
  overflow: hidden;
  color: var(--color-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operating-row-date small,
.operating-row-subject small { overflow: hidden; color: var(--color-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.operating-row-date strong { font-size: 12px; font-weight: 600; }
.operating-row-subject strong { font-size: 14px; }
.operating-row-amount strong { font-size: 16px; }
.operating-row-amount.income strong { color: var(--success-700); }
.operating-row-amount.expense strong { color: var(--warning-700); }
.operating-row-amount.void strong { color: var(--color-text-secondary); text-decoration: line-through; }

.operating-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  width: fit-content;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.operating-state.income { color: var(--success-700); }
.operating-state.expense { color: var(--warning-700); }
.operating-state.void { color: var(--gray-500); }
.operating-state > span { width: 14px; text-align: center; }

.operating-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm);
  color: var(--color-text-secondary);
  font-size: 12px;
}

.operating-pagination > div { display: flex; gap: var(--space-2xs); }

.operating-empty,
.operating-error {
  display: grid;
  justify-items: start;
  gap: var(--space-2xs);
  min-height: 180px;
  align-content: center;
  padding: var(--space-lg);
  color: var(--color-text-secondary);
}

.operating-empty strong,
.operating-error strong { color: var(--color-text-primary); font-size: 15px; }
.operating-empty .btn,
.operating-error .btn { margin-top: var(--space-2xs); }

.operating-summary-skeleton,
.operating-row-skeleton {
  background: var(--gray-100);
}

.operating-summary-skeleton { min-height: 240px; border-radius: var(--radius-xl); }
.operating-row-skeleton { display: grid; gap: var(--space-xs); padding: var(--space-md); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.operating-row-skeleton span { display: block; width: 68%; height: 12px; border-radius: var(--radius-sm); background: var(--gray-100); }
.operating-row-skeleton span:nth-child(2) { width: 44%; }
.operating-row-skeleton span:nth-child(3) { width: 26%; }

.operating-dialog {
  position: fixed;
  inset: 0;
  width: min(calc(100% - 24px), 680px);
  height: fit-content;
  max-height: min(88dvh, 780px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-md);
}

.operating-dialog::backdrop { background: var(--color-overlay); }

.operating-dialog-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.operating-dialog-head h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.02em; }
.operating-dialog-head p { margin-top: 4px; color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; }

.operating-dialog-close,
.operating-void-start {
  min-height: 40px;
  padding: 0 var(--space-xs);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--gray-100);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 650;
}

.operating-dialog-close:focus-visible,
.operating-void-start:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 1px;
}

.operating-dialog-close:active,
.operating-void-start:active { background: var(--gray-300); }
.operating-dialog-close:disabled,
.operating-void-start:disabled { cursor: not-allowed; opacity: .55; }

.operating-entry-form,
#operatingDetailMount { padding: var(--space-md); }
.operating-entry-form { display: grid; gap: var(--space-md); }

.operating-type-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.operating-type-choice legend { grid-column: 1 / -1; margin-bottom: 6px; color: var(--color-text-secondary); font-size: 12px; font-weight: 650; }
.operating-type-choice label { min-width: 0; cursor: pointer; }
.operating-type-choice input { position: absolute; opacity: 0; pointer-events: none; }
.operating-type-choice label > span {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-weight: 650;
}

.operating-type-choice input:checked + span { border-color: var(--color-text-primary); background: var(--gray-100); }
.operating-type-choice input:focus-visible + span { outline: 2px solid var(--brand-700); outline-offset: 1px; }
.operating-type-choice label:active > span { background: var(--gray-100); }
.operating-type-choice input:disabled + span { cursor: not-allowed; opacity: .55; }
.operating-type-choice label:first-of-type b { color: var(--success-700); }
.operating-type-choice label:nth-of-type(2) b { color: var(--warning-700); }

.operating-field-message { grid-column: 1 / -1; min-height: 1lh; margin: 0; color: var(--color-text-secondary); font-size: 12px; font-weight: 400; line-height: 1.45; }

.operating-money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 70px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.operating-money-input:focus-within { outline: 2px solid var(--brand-700); outline-offset: 1px; }
.operating-money-input i { padding-left: var(--space-sm); color: var(--color-text-secondary); font-family: var(--font-mono); font-size: 24px; font-style: normal; }
.operating-money-input input { width: 100%; min-width: 0; padding: 0 var(--space-sm); border: 0; outline: 0; background: transparent; color: var(--color-text-primary); font-family: var(--font-mono); font-size: clamp(26px, 8vw, 38px); font-weight: 700; }
.operating-money-input input[aria-invalid="true"] { color: var(--error-700); }

.operating-form-grid { display: grid; gap: var(--space-sm); }
.operating-form-grid textarea,
.operating-void-panel textarea {
  width: 100%;
  min-height: 92px;
  padding: var(--space-xs);
  resize: vertical;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.operating-form-grid textarea:focus-visible,
.operating-void-panel textarea:focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 1px;
}

.operating-form-grid textarea:disabled,
.operating-void-panel textarea:disabled { cursor: not-allowed; opacity: .55; }

[aria-invalid="true"] { border-color: var(--error-700); }
.operating-form-error { min-height: 18px; color: var(--error-700); font-size: 12px; }
.operating-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2xs); }

.operating-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.operating-detail-head .mono { color: var(--color-text-secondary); font-size: 12px; }
.operating-detail-head h2 { min-width: 0; margin-top: var(--space-2xs); overflow-wrap: anywhere; font-family: var(--font-display); font-size: 20px; }
.operating-detail-amount { display: grid; gap: 6px; margin: var(--space-md) 0; padding: var(--space-md) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.operating-detail-amount strong { color: var(--color-text-primary); font-size: clamp(28px, 8vw, 40px); letter-spacing: -0.035em; }
.operating-detail-amount.income strong { color: var(--success-700); }
.operating-detail-amount.expense strong { color: var(--warning-700); }
.operating-detail-amount.void strong { color: var(--color-text-secondary); text-decoration: line-through; }

.operating-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: 0; }
.operating-detail-grid div { min-width: 0; }
.operating-detail-grid dd { margin: var(--space-2xs) 0 0; overflow-wrap: anywhere; color: var(--color-text-primary); }
.operating-detail-remark { margin-top: var(--space-md); }
.operating-detail-remark p { margin-top: 6px; color: var(--color-text-primary); line-height: 1.6; white-space: pre-wrap; }
.operating-detail-danger { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.operating-void-start { color: var(--error-700); }
.operating-void-panel { display: grid; gap: var(--space-xs); padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.operating-void-panel[hidden] { display: none; }
.operating-void-panel label { color: var(--color-text-primary); font-weight: 650; }
.operating-void-panel small { color: var(--color-text-secondary); }
.operating-void-actions { display: flex; justify-content: flex-end; gap: var(--space-2xs); }
.operating-danger-btn { border-color: var(--error-700); background: var(--error-700); color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  .operating-ledger-row:hover { background: var(--gray-25); }
  .operating-dialog-close:hover,
  .operating-void-start:hover { background: var(--gray-200); }
  .operating-type-choice label:hover > span { border-color: var(--color-text-primary); }
  .operating-form-grid textarea:hover,
  .operating-void-panel textarea:hover { border-color: var(--color-text-primary); }
}

@media (min-width: 40rem) {
  .operating-page { padding: var(--space-lg); }
  .operating-page-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .operating-header-actions { display: flex; }
  .operating-summary { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); }
  .operating-summary-primary { border-right: 1px solid var(--color-border); border-bottom: 0; }
  .operating-summary-support { grid-template-columns: 1fr; }
  .operating-summary-support > div + div { border-top: 1px solid var(--color-border); border-left: 0; }
  .operating-filter-primary { grid-template-columns: minmax(180px, 1fr) minmax(150px, .45fr) auto auto; align-items: end; }
  .operating-filter-advanced { grid-template-columns: minmax(160px, 220px) minmax(160px, 220px) auto minmax(180px, 1fr); align-items: end; }
  .operating-filter-advanced p { align-self: center; }
  .operating-ledger-heading,
  .operating-ledger-row,
  .operating-pagination { padding-left: var(--space-md); padding-right: var(--space-md); }
  .operating-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operating-form-remark { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  .operating-page { padding: var(--space-xl); gap: var(--space-xl); }
  .operating-summary-primary { padding: var(--space-xl); }
  .operating-ledger-head,
  .operating-ledger-row {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(240px, 1.7fr) minmax(110px, .7fr) minmax(150px, .8fr) 20px;
    gap: var(--space-md);
    align-items: center;
  }
  .operating-ledger-head { padding: var(--space-xs) var(--space-md); border-top: 1px solid var(--color-border); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: 11px; font-weight: 650; }
  .operating-ledger-row { grid-template-areas: none; min-height: 76px; }
  .operating-row-date,
  .operating-row-subject,
  .operating-row-state,
  .operating-row-amount,
  .operating-row-open { grid-area: auto; }
}

@media (max-width: 24rem) {
  .operating-summary-support { grid-template-columns: 1fr; }
  .operating-summary-support > div + div { border-top: 1px solid var(--color-border); border-left: 0; }
  .operating-pagination { align-items: stretch; }
  .operating-pagination > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .operating-dialog-actions,
  .operating-void-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}