/* Shared controls for the small tools under /projects/. Loaded after site.css and
   built on its tokens, so tools follow the blog's light, dark and Increase Contrast
   appearances. Colours map to HIG grouped-list semantics (systemGroupedBackground,
   secondarySystemGroupedBackground, systemRed/Green accessible variants). */
:root {
  --surface: #fff;                     /* secondarySystemGroupedBackground */
  --field: #fff;
  --field-border: rgb(60 60 67 / .29);
  --danger: #d70015;                   /* systemRed, accessible variant 5.9:1 */
  --success: #248a3d;                  /* systemGreen, accessible variant 4.6:1 */
  --segment-bg: rgb(118 118 128 / .12);
  --segment-on: #fff;
  --shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 .5px rgb(0 0 0 / .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #2c2c2e;                /* secondarySystemGroupedBackground on #1c1c1e */
    --field: #1c1c1e;
    --field-border: rgb(84 84 88 / .9);
    --danger: #ff6961;                 /* systemRed, accessible dark variant */
    --success: #30d158;
    --segment-bg: rgb(118 118 128 / .24);
    --segment-on: #636366;
    --shadow: none;
  }
}
@media (prefers-contrast: more) {
  :root { --field-border: rgb(60 60 67 / .6); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --field-border: rgb(235 235 245 / .5); }
}


/* 工具页标题区紧凑一些，把一屏的空间留给工具本身，尽量不用滚动。 */
main.tool { padding-top: .5rem; }
.tool h1 { margin: .1em 0 .15em; }
.tool-lead { margin: 0 0 1rem; color: var(--muted); }
.tool .back-link { margin-bottom: .25rem; }

/* Grouped sections, like an inset grouped list. */
.group { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
.group-title, .group > legend {
  display: block;
  margin: 0 0 .4rem;
  padding: 0 .9rem;
  color: var(--muted);
  font-size: .8125em;
  font-weight: 500;
  letter-spacing: .02em;
}
.group-body {
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.group-note { margin: .45rem 0 0; padding: 0 .9rem; color: var(--muted); font-size: .8125em; line-height: 1.55; }
.row {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .45rem .9rem;
}
/* Inset separators, as in iOS grouped lists. */
.row + .row { margin-inline-start: .9rem; padding-inline-start: 0; border-top: 1px solid var(--rule); }
.row-label { flex: 1 1 auto; min-width: 0; }
.row-label small { display: block; color: var(--muted); font-size: .8125em; line-height: 1.4; }
.row-value {
  flex: 1 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Text fields */
.field {
  width: 100%;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field);
  font-size: max(16px, 1em);           /* 16px+ keeps iOS from zooming on focus */
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: var(--muted); opacity: .8; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--select); }
.field[aria-invalid="true"] { border-color: var(--danger); }
textarea.field { display: block; min-height: 9rem; resize: vertical; font-family: var(--mono); font-size: max(15px, .9em); line-height: 1.55; }
/* A field sitting inside a row reads as part of the list. */
.row .field { flex: 0 1 9rem; text-align: end; border-color: transparent; background: transparent; padding-inline: .25rem; }
.row .field:focus { border-color: var(--accent); background: var(--field); }
.row .field[aria-invalid="true"] { border-color: var(--danger); }
.unit { flex: none; min-width: 2.2em; color: var(--muted); }
.input-pair { display: flex; gap: .5rem; align-items: stretch; }
.input-pair .field { flex: 1 1 auto; min-width: 0; }

/* Buttons: bordered (default), filled (one primary action), plain (text). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-height: 44px;
  min-width: 44px;
  padding: .45rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--tint);
  color: var(--accent-on-tint);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.btn:hover:not(:disabled) { border-color: transparent; text-decoration: none; filter: brightness(.97); }
.btn:active:not(:disabled) { background: var(--press); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-filled { background: var(--fill-accent); color: var(--on-accent); }
.btn-filled:active:not(:disabled) { background: var(--fill-accent); filter: brightness(.85); }
.btn-plain { background: transparent; padding-inline: .5rem; }
.btn-plain:active:not(:disabled) { background: var(--press); }
.btn-wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1.5rem; }
.btn-row .btn { flex: 1 1 8rem; }

/* Segmented control built on radio buttons, so it works with keyboard and VoiceOver. */
.segmented {
  display: flex;
  margin: 0 0 1.5rem;
  padding: 2px;
  border: 0;
  border-radius: 10px;
  background: var(--segment-bg);
  min-width: 0;
}
.segmented label { position: relative; flex: 1 1 0; display: flex; }
/* 点击区域延伸到控件外边距，整段高 44pt（HIG Accessibility 最小触控区）。 */
.segmented:not(.compact) label::after { content: ""; position: absolute; inset: -2px 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .25rem .6rem;
  border-radius: 8px;
  color: var(--text);
  font-size: .9375em;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}
.segmented input:checked + span { background: var(--segment-on); box-shadow: 0 1px 3px rgb(0 0 0 / .12); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.segmented.compact { display: inline-flex; margin: 0; flex: none; }
.segmented.compact span { min-height: 32px; padding-inline: .7rem; font-size: .875em; }
.segmented.compact label { flex: none; }
/* Keep the 44pt hit target while the compact control looks smaller. */
.segmented.compact span { position: relative; }
.segmented.compact span::after { content: ""; position: absolute; inset: -6px 0; }

/* Inline status and result */
.status { min-height: 1.6em; margin: 0 0 1rem; color: var(--muted); font-size: .9375em; }
.status:empty { min-height: 0; margin: 0; }
.status.is-error { color: var(--danger); }
.status.is-success { color: var(--success); }
.status.is-error::before { content: "⚠︎ "; }
.status.is-success::before { content: "✓ "; }

.result {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.result-label { margin: 0; color: var(--muted); font-size: .875em; }
.result-value { margin: .1rem 0 0; font-size: 2.25em; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.result-value small { font-size: .45em; font-weight: 500; color: var(--muted); margin-inline-start: .2em; letter-spacing: 0; }
.result-detail { margin: .5rem 0 0; color: var(--muted); font-size: .875em; font-variant-numeric: tabular-nums; }
.result-detail:empty { display: none; }
.result.is-empty .result-value { color: var(--muted); font-weight: 500; }

.copy-feedback { color: var(--success); }

.fine-print { margin-top: 2rem; color: var(--muted); font-size: .8125em; line-height: 1.6; }
.fine-print p { margin-bottom: .6em; }

/* 标题字号由 site.css 统一（Title 1 / Large Title）；这里只缩小结果数字。 */
@media (max-width: 599px) {
  .result-value { font-size: 2em; }
  main.tool { padding-top: .5rem; }
  textarea.field { min-height: 7rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .segmented span, .field { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
}

/* 常规宽度（≥900px）：输入在左、结果在右，各占外框一半，用满宽屏（HIG Layout：常规宽度
   多栏排列）。结果栏滚动时停在视野里；还没有结果时显示空状态说明，不留一块空白。
   紧凑宽度仍是上下排列，结果出现在输入下面。 */
.tool-empty { display: none; }
@media (min-width: 900px) {
  main.tool > .tool-columns {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem;
    align-items: start; max-width: none;
  }
  .tool-output { position: sticky; top: 1.5rem; }
  /* 宽屏下说明不必限在阅读宽度，一行写完；输入框略矮，左右两栏高度接近 */
  main.tool > .tool-lead { max-width: none; }
  .tool-columns textarea.field { min-height: 6.5rem; }
  .tool-columns .group, .tool-columns .segmented, .tool-columns .btn-row { margin-bottom: 1rem; }
  .tool-output:has(> #output-wrap[hidden]) > .tool-empty,
  .tool-output:has(> #results[hidden]) > .tool-empty,
  .tool-output:has(> output:empty) > .tool-empty {
    display: grid; place-items: center; min-height: 12rem; margin: 0 0 1rem; padding: 1.5rem;
    border: 1.5px dashed var(--rule-strong); border-radius: 14px;
    color: var(--muted); font-size: .9375rem; text-align: center;
  }
}

/* 添加到主屏幕后（独立窗口）：工具就是一个 App，不再显示博客的顶栏、返回链接和页脚。
   内容从安全区以下开始，避免被状态栏压住。 */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .site-header, .site-footer, .tool .back-link, .skip-link, .browser-only { display: none; }
  main.tool { padding-top: calc(env(safe-area-inset-top) + 1rem); padding-bottom: calc(env(safe-area-inset-bottom) + 2rem); }
}