/* XML固有の寸法、通知色、シンタックスカラー */
.xml-anonymizer-tool {
  --xml-file-name-max-width: 280px;
  --xml-file-name-mobile-max-width: 180px;
  --xml-rule-panel-max-height: 310px;
  --xml-rule-table-min-width: 1040px;
  --xml-rule-path-max-width: 380px;
  --xml-callout-background: #ddf4ff;
  --xml-callout-border: #54aeff;
  --xml-privacy-text: #0550ae;
  --xml-syntax-tag: #800000;
  --xml-syntax-attribute: #ff0000;
  --xml-syntax-value: #0000ff;
  --xml-syntax-comment: #008000;
  --xml-syntax-cdata: #a31515;
  --xml-syntax-punctuation: #0000ff;
}

:root[data-theme="dark"] .xml-anonymizer-tool .editors {
  --xml-syntax-tag: #569cd6;
  --xml-syntax-attribute: #9cdcfe;
  --xml-syntax-value: #ce9178;
  --xml-syntax-comment: #6a9955;
  --xml-syntax-cdata: #ce9178;
  --xml-syntax-punctuation: #808080;
}

/* ページ内パネルとファイル操作 */
.xml-mask-panel {
  border: var(--anonymizer-border);
  border-radius: var(--anonymizer-panel-radius);
  background: var(--anonymizer-panel);
}

.xml-mask-notice {
  margin-block-end: 14px;
  padding: 12px 14px;
  color: var(--anonymizer-accent);
  background: var(--xml-callout-background);
  border-color: var(--xml-callout-border);
}

.xml-mask-file-input,
.xml-mask-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.xml-mask-file-input {
  margin: -1px;
}

.xml-mask-file-name {
  max-width: var(--xml-file-name-max-width);
  overflow: hidden;
  color: var(--anonymizer-muted);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* パスごとのマスキングルール */
.xml-mask-rule-panel {
  border-block-start: 0;
  border-radius: 0;
  padding: 12px 14px;
}

.xml-mask-rule-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-block-end: 10px;
}

.xml-mask-rule-heading :where(.xml-mask-rule-title, .xml-mask-rule-description) {
  margin: 0;
}

.xml-mask-rule-title {
  font-size: 1rem;
}

.xml-mask-rule-description {
  margin-block-start: 4px;
  color: var(--anonymizer-muted);
  font-size: .82rem;
}

.xml-mask-rule-actions {
  display: flex;
  gap: 8px;
}

.xml-mask-rule-wrap {
  max-height: var(--xml-rule-panel-max-height);
  overflow: auto;
  border: var(--anonymizer-border);
  border-radius: 6px;
}

.xml-mask-rule-table {
  width: 100%;
  min-width: var(--xml-rule-table-min-width);
  border-collapse: collapse;
  background: var(--anonymizer-panel);
  font-size: .82rem;
}

.xml-mask-rule-table th,
.xml-mask-rule-table td {
  padding: 7px 8px;
  border-block-end: var(--anonymizer-border);
  text-align: start;
  vertical-align: middle;
}

.xml-mask-rule-table th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  color: var(--anonymizer-text);
  background: var(--anonymizer-panel-2);
  white-space: nowrap;
}

.xml-mask-rule-path {
  max-width: var(--xml-rule-path-max-width);
  overflow: hidden;
  color: var(--anonymizer-text);
  font-family: var(--anonymizer-code-font-family);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xml-mask-rule-control {
  width: 100%;
  min-width: 120px;
  height: 32px;
  padding: 5px 7px;
  color: var(--anonymizer-text);
  background: var(--anonymizer-control-bg);
  border: var(--anonymizer-border);
  border-radius: 5px;
  font: inherit;
}

.xml-mask-rule-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--anonymizer-accent);
}

/* マスキング対象の凡例とXMLシンタックスカラー */
.highlight-xml-text {
  --highlight-bg: rgba(96, 165, 250, .24);
  --legend-color: #60a5fa;
}

.highlight-xml-attribute {
  --highlight-bg: rgba(74, 222, 128, .23);
  --legend-color: #4ade80;
}

.highlight-xml-cdata {
  --highlight-bg: rgba(248, 113, 113, .24);
  --legend-color: #f87171;
}

.xml-tag-name {
  color: var(--xml-syntax-tag);
}

.xml-attribute-name {
  color: var(--xml-syntax-attribute);
}

.xml-attribute-value {
  color: var(--xml-syntax-value);
}

.xml-comment {
  color: var(--xml-syntax-comment);
}

.xml-cdata {
  color: var(--xml-syntax-cdata);
}

.xml-processing-instruction,
.xml-punctuation {
  color: var(--xml-syntax-punctuation);
}

/* ツール説明と状態メッセージ */
.xml-mask-about {
  width: 100%;
  margin-block-start: 24px;
  padding: 24px 28px;
}

.xml-mask-about :where(.xml-mask-about-title, .xml-mask-about-subtitle) {
  margin-block: 0 10px;
}

.xml-mask-about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-block: 24px;
}

.xml-mask-about-list > li {
  margin-block: 7px;
  line-height: 1.65;
}

.xml-mask-privacy {
  padding: 12px 14px;
  color: var(--xml-privacy-text);
  background: var(--xml-callout-background);
  border: 1px solid var(--xml-callout-border);
  border-radius: 7px;
}

.xml-mask-bootstrap-message {
  color: var(--anonymizer-danger);
}

.xml-mask-bootstrap-message:empty {
  display: none;
}

/* キーボード操作時のフォーカス表示 */
.xml-anonymizer-tool :is(button, select, input, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--anonymizer-accent) 35%, transparent);
  outline-offset: 2px;
}

/* モバイル表示 */
@media (max-width: 800px) {
  .xml-mask-rule-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .xml-mask-about-grid {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .xml-mask-file-name {
    max-width: var(--xml-file-name-mobile-max-width);
  }

  .xml-mask-about {
    padding: 20px 18px;
  }
}