/* app.css — components added in v4 (lock screen, status chips, banner, dialogs, settings, share picker),
   plus accessibility, touch, tablet and installed-app refinements. Loaded last. */

[hidden] { display: none !important; }            /* the HTML hidden attribute must always win */
.is-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline-check { width: auto; margin: 0; }
.remember-row { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 8px 0; }
.noscript { padding: 24px; font: 16px Georgia, serif; }

/* ---------- keyboard focus: always visible ---------- */
:focus-visible { outline: 3px solid #1f5fbf; outline-offset: 2px; }
.skip-link { position: fixed; left: 8px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 14px; border-radius: 4px; font: 14px Arial, sans-serif; }
.skip-link:focus { top: 8px; }

/* ---------- dialogs ---------- */
.modal-veil { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: #211912e6; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow: auto; }
.modal-card.xwide { width: min(96vw, 980px); }
.modal-card input[type=checkbox] { width: auto; margin: 3px 8px 0 0; flex: none; }
.modal-card label { display: block; font-weight: 700; font-size: 13px; margin-top: 8px; }
.modal-card label.ack, .modal-card label.chk { display: flex; align-items: flex-start; font-weight: 400; line-height: 1.4; margin: 10px 0; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pm-err, .sh-msg { min-height: 1.2em; font-size: 13px; color: #8b3028; margin-top: 4px; }
.sh-msg.ok { color: #42633a; }
.explain { background: #fffaf0; border: 1px solid #b99a66; border-left: 4px solid #9b7136; padding: 10px 12px; margin: 8px 0 12px; font-size: 13px; line-height: 1.45; }
.explain ul { margin: 6px 0 8px 18px; padding: 0; }
.warn-box { background: #fff1d6; border: 1px solid #c9923a; border-left: 4px solid #b9701a; padding: 9px 12px; font-size: 13px; line-height: 1.45; }
.strength { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px; font-size: 12px; }
.strength-track { flex: 1; height: 6px; background: #d9c59a; border-radius: 3px; overflow: hidden; }
.strength-track i { display: block; height: 100%; width: 0; background: #8b3028; transition: width .2s; }
.strength-track i.lv-warn { background: #b9701a; } .strength-track i.lv-ok { background: #42633a; }
.linkish { background: none; border: 0; color: #5b3d17; text-decoration: underline; padding: 8px 0; font: 13px Georgia, serif; cursor: pointer; }
.hint { font-size: 12px; color: #75634e; }

/* lock screen reuses the sign-in card */
.lock-screen .auth-message.bad, .auth-message.bad { color: #8b3028; }
.auth-links button { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 6px 4px; }

/* ---------- status chips + banner ---------- */
.chip { display: inline-block; font: 12px Arial, sans-serif; padding: 4px 9px; border-radius: 99px; border: 1px solid #b99a66; background: #fffaf0; color: #2d2118; white-space: nowrap; }
.chip.lv-ok { border-color: #6f9a62; background: #eef6e8; color: #2f5226; }
.chip.lv-work { border-color: #b99a66; background: #f7ecd2; }
.chip.lv-warn { border-color: #c9923a; background: #fff1d6; color: #6a4106; }
.chip.lv-error { border-color: #b33a2e; background: #fde8e5; color: #7a1d14; font-weight: 700; }
.chip.lv-idle { opacity: .75; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; font: 14px/1.4 Arial, sans-serif; border-bottom: 2px solid; position: sticky; top: 0; z-index: 20; }
.banner.lv-error { background: #fde8e5; border-color: #b33a2e; color: #5c130c; }
.banner.lv-warn { background: #fff1d6; border-color: #c9923a; color: #5a3703; }
.banner-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.banner button { padding: 6px 12px; min-height: 34px; }
.badge:not(:empty) { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 9px; background: #8b3028; color: #fff; font: 11px/18px Arial, sans-serif; text-align: center; }

/* ---------- conflicts, share rows ---------- */
.cf-card { border: 1px solid #b99a66; background: #fffaf0; padding: 12px; margin: 10px 0; }
.cf-card h3 { margin: 0 0 6px; }
.cf-line, .cf-diff { margin: 2px 0; font-size: 13px; }
.sh-fields { border: 1px solid #b99a66; padding: 8px 12px; margin: 10px 0; max-height: 260px; overflow: auto; }
.sh-fields legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.sh-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sh-group { border: 0; border-top: 1px solid #d9c59a; margin: 6px 0 0; padding: 4px 0 0; }
.sh-group legend { font-size: 12px; color: #75634e; }
.sh-field { display: flex; font-weight: 400 !important; margin: 3px 0 !important; }
.sh-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9c59a; padding: 8px 0; }
.sh-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-info small { color: #75634e; overflow-wrap: anywhere; }
.sv-pass { display: block; width: 100%; max-width: 320px; margin: 10px auto; padding: 10px; font-size: 16px; }
.sv-open { display: block; margin: 0 auto; max-width: 220px; }

/* ---------- settings & diagnostics ---------- */
.set-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; position: sticky; top: -22px; background: #f4e7c9; padding: 4px 0 8px; z-index: 2; }
.set-sec { border-top: 1px solid #b99a66; padding: 12px 0; }
.set-sec h3 { margin-top: 0; }
.set-list { margin: 0; display: grid; gap: 4px; }
.set-row { display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 10px; font-size: 13px; align-items: center; }
.set-row dt { color: #75634e; } .set-row dd { margin: 0; overflow-wrap: anywhere; }
.set-row .lv-ok { color: #2f5226; } .set-row .lv-warn { color: #8a5200; } .set-row .lv-error { color: #8b1d12; font-weight: 700; } .set-row .lv-work { color: #5b3d17; }
.set-row select { width: auto; margin: 0; padding: 6px; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.diag-text { width: 100%; font: 12px/1.4 ui-monospace, Consolas, monospace; padding: 8px; background: #fffaf0; border: 1px solid #b99a66; resize: vertical; }

/* ---------- update bar ---------- */
#updateBar { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: min(94vw, 640px); background: #211912; color: #f1d69b; padding: 10px 14px; border: 1px solid #9b7136; font: 14px Arial, sans-serif; box-shadow: 0 10px 30px #0008; }
.update-btn { background: #ead7ad; }

/* ---------- touch targets (finger-sized) and iOS no-zoom inputs ---------- */
@media (pointer: coarse) {
  button, .secondary, .primary, .danger, select, .report-item { min-height: 44px; }
  input, select, textarea, .search, .filter { font-size: 16px; }
  .chk input, .modal-card input[type=checkbox] { width: 22px; height: 22px; }
  .sh-field { padding: 4px 0; }
}

/* ---------- safe areas (notches, rounded corners, home indicator) in installed/mobile mode ----------
   Each value keeps the original padding (22px desktop, 10px phone, 24px sign-in) and only grows if the device needs more. */
@media screen { .app { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); padding-bottom: max(22px, env(safe-area-inset-bottom)); } }
@media screen and (max-width: 850px) { .app { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); padding-bottom: max(10px, env(safe-area-inset-bottom)); } }
.auth-screen { padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }

/* ---------- tablets: narrower sidebar so the form keeps room ---------- */
@media (min-width: 851px) and (max-width: 1180px) {
  .app { grid-template-columns: 280px minmax(0, 1fr); }
  .sidebar-actions { grid-template-columns: 1fr 1fr; }
  .toolbar { flex-wrap: wrap; }
}
/* ---------- phones ---------- */
@media (max-width: 850px) {
  .toolbar .group { flex-wrap: wrap; }
  .set-row { grid-template-columns: 1fr; gap: 0; }
  .modal-card { padding: 16px; }
  .banner { font-size: 13px; }
}
@media (max-width: 420px) { .sidebar-actions { grid-template-columns: 1fr; } .chip { white-space: normal; } }

/* ---------- installed-app window ---------- */
@media (display-mode: standalone), (display-mode: minimal-ui) { #installBtn { display: none !important; } }

/* ---------- user preferences ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .chip, .banner, .cf-card, .explain, .warn-box { border: 2px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}
@media (prefers-contrast: more) { .hint, .set-row dt, .sh-info small { color: #2d2118; } }

/* ---------- never print the app chrome ---------- */
@media print {
  .modal-veil, .banner, #updateBar, .lock-screen, .skip-link, #announcer, .chip { display: none !important; }
}