/* Dailynews 的風格：覆寫 shared/css/site.css 的變數。主要在 iPad 閱讀，操作目標至少 44px，不依賴滑鼠移過去 */
:root {
  --color-primary: #1d4e89;
  --color-text: #17212e;
  --color-muted: #566373;
  --color-bg: #f4f6fa;
  --color-surface: #fff;
  --color-border: #d7deea;
  --color-ok: #1b7446;
  --color-error: #b3362b;
  --dn-soft: #e6eef8;
  --dn-warn: #8a5800;
  --dn-on-primary: #fff;
  --dn-tap: 44px;
  --dn-read: 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #86b6ef;
    --color-text: #e8edf3;
    --color-muted: #9fabba;
    --color-bg: #10161f;
    --color-surface: #18212c;
    --color-border: #2d3947;
    --color-ok: #62c490;
    --color-error: #f28f83;
    --dn-soft: #1b2a3c;
    --dn-warn: #e3b562;
    --dn-on-primary: #0c1622;
    color-scheme: dark;
  }

  .button:not(.button-secondary):not(.button-danger) { color: var(--dn-on-primary); }
}

html { -webkit-text-size-adjust: 100%; }
button, a, select, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.site-header,
.site-footer {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.site-nav a,
.site-nav .link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--dn-tap);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--dn-tap);
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 16px;
}

.field textarea { min-height: 104px; resize: vertical; }

main.dn-main {
  max-width: 1000px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--dn-tap);
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.dn-btn:active { background: var(--dn-soft); }
.dn-btn[disabled] { opacity: .55; cursor: default; }
.dn-btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--dn-on-primary); font-weight: 600; }
.dn-btn-primary:active { background: var(--color-primary); opacity: .85; }
.dn-btn-danger { color: var(--color-error); border-color: var(--color-error); }
.dn-btn-icon { width: var(--dn-tap); padding: 0; flex: none; }
.dn-update { min-width: 104px; }

.dn-spin {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dn-spin .8s linear infinite;
}

@keyframes dn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dn-spin { animation: none; } }

.dn-toolbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-block: 8px;
  background: var(--color-bg);
}

.dn-daynav, .dn-tools { display: flex; align-items: center; gap: 4px; }
.dn-tools { flex-wrap: wrap; gap: 8px; }
.dn-daynav h1 { margin: 0; padding-inline: 6px; font-size: 1.25rem; text-wrap: balance; }
.dn-meta { margin: 0; color: var(--color-muted); font-size: .875rem; font-variant-numeric: tabular-nums; }

.dn-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
.dn-side { min-width: 0; }
.dn-topics { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }

.dn-topics button {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--dn-tap);
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.dn-topics button[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--dn-on-primary); font-weight: 600; }
.dn-count { font-size: .875rem; font-variant-numeric: tabular-nums; opacity: .75; }

@media (min-width: 900px) {
  .dn-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .dn-side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); align-self: start; }
  .dn-topics { flex-direction: column; overflow: visible; }
  .dn-topics button { flex: auto; text-align: left; }
}

.dn-reading { display: grid; gap: 24px; min-width: 0; max-width: 720px; font-size: calc(1rem * var(--dn-read)); }
.dn-section { display: grid; gap: 12px; min-width: 0; }
.dn-section > h2 { margin: 0; font-size: 1.2em; }
.dn-overview { margin: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--dn-soft); line-height: 1.75; }
.dn-stories { margin: 0; padding: 0; list-style: none; }
.dn-story { display: grid; gap: 6px; padding-block: 14px; border-top: 1px solid var(--color-border); }
.dn-story h3 { margin: 0; font-size: 1.0625em; line-height: 1.4; }
.dn-story p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.dn-badge { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--color-primary); color: var(--dn-on-primary); font-size: .75rem; font-weight: 600; vertical-align: .1em; }
.dn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dn-srclist { display: grid; }

.dn-srclist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--dn-tap);
  border-top: 1px solid var(--color-border);
  text-decoration: none;
}

.dn-panel { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.dn-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dn-steps li { display: flex; justify-content: space-between; gap: 12px; }
.dn-state { flex: none; font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.dn-state-ok { color: var(--color-ok); }
.dn-state-failed { color: var(--color-error); }
.dn-note { margin: 0; padding: 12px 14px; border: 1px solid currentColor; border-radius: var(--radius); }
.dn-note-ok { color: var(--color-ok); }
.dn-note-warn { color: var(--dn-warn); }
.dn-note-error { color: var(--color-error); }
.dn-note ul { margin: 6px 0 0; padding-left: 20px; }

.dn-stack { display: grid; gap: 24px; max-width: 860px; margin-top: 8px; }
.dn-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dn-title-row h1, .dn-title-row h2 { margin: 0; font-size: 1.25rem; }
.dn-rows { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.dn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; }
.dn-row + .dn-row { border-top: 1px solid var(--color-border); }
.dn-grow { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.dn-row h3 { margin: 0; font-size: 1rem; }
.dn-rowbtns { display: flex; gap: 4px; }
.dn-off { color: var(--color-muted); font-size: .875rem; font-weight: 400; }

.dn-tablewrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.dn-tablewrap table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dn-tablewrap th, .dn-tablewrap td { padding: 10px 14px; border-top: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.dn-tablewrap thead th { border-top: 0; color: var(--color-muted); font-size: .875rem; font-weight: 500; }
.dn-tablewrap .dn-num { text-align: right; }

dialog.dn-sheet {
  width: min(600px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--color-surface);
  color: var(--color-text);
}

dialog.dn-sheet::backdrop { background: rgba(10, 16, 24, .45); }
.dn-sheet form { display: flex; flex-direction: column; height: 100%; }

/* 取消和儲存放在頂端，才不會被螢幕鍵盤擋住 */
.dn-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--color-border);
}

.dn-sheet-head h2 { margin: 0; min-width: 0; font-size: 1.0625rem; }

.dn-sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

.dn-addrow { display: flex; gap: 8px; }
.dn-addrow input { flex: 1; min-width: 0; }
.dn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dn-chips:empty { display: none; }
.dn-chip { display: inline-flex; align-items: center; max-width: 100%; min-height: var(--dn-tap); padding-left: 12px; border-radius: var(--radius); background: var(--dn-soft); overflow-wrap: anywhere; }
.dn-chip button { flex: none; width: 40px; height: var(--dn-tap); border: 0; background: none; color: var(--color-muted); font-size: 1.125rem; cursor: pointer; }
.dn-check { display: flex; align-items: center; gap: 12px; min-height: var(--dn-tap); padding-block: 6px; font-weight: 400; cursor: pointer; }
.field label.dn-check { display: flex; margin: 0; font-weight: 400; }
.field .dn-check input { flex: none; width: 24px; height: 24px; min-height: 0; accent-color: var(--color-primary); }
.dn-check + .dn-check { border-top: 1px solid var(--color-border); }
.dn-query { margin: 0; padding: 10px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius); background: var(--color-bg); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .875rem; overflow-wrap: anywhere; }
.dn-label { margin-bottom: 4px; font-weight: 600; }