/* Home dashboard (public/js/admin/home-dashboard.js, home-widgets.js) and the drag-and-drop states (sortable.js brings its own base rules).
   Grid: 12 columns on a desktop monitor (S 3, M 6, L 9, Full 12), 6 on a tablet, 1 on a phone. Logical properties everywhere (Arabic / RTL). */

.page.home { max-width: min(1860px, 100%); gap: 18px; }
.hd-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.hd-greet { min-width: 0; }
.hd-greet h1 { font-size: clamp(22px, 1.1vw + 14px, 30px); letter-spacing: -.015em; line-height: 1.2; margin: 0 0 4px; }
.hd-top-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hd-period .seg { min-height: 36px; font-size: 13px; padding: 0 12px; transition: background .15s, color .15s; }
.hd-customize { min-height: 38px; }

/* edit bar (sticks under the top bar while you rearrange) */
.hd-editbar { position: sticky; top: calc(var(--stick, 62px) + 8px); z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 10px 14px;
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--r); box-shadow: var(--shadow); animation: hd-drop .2s ease-out; }
@keyframes hd-drop { from { opacity: 0; transform: translateY(-8px); } }
.hd-edit-hint { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--ink); flex: 1 1 320px; min-width: 0; }
.hd-edit-hint .ico { color: var(--accent); }
.hd-edit-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-status { min-width: 96px; text-align: end; }
.hd-status.is-error { color: var(--danger-ink); font-weight: 650; }

/* the grid */
.hd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; align-items: stretch; }
@media (min-width: 1700px) { .hd-grid { gap: 20px; } }
.hd-widget[data-size="s"] { grid-column: span 3; }
.hd-widget[data-size="m"] { grid-column: span 6; }
.hd-widget[data-size="l"] { grid-column: span 9; }
.hd-widget[data-size="f"] { grid-column: span 12; }
@media (max-width: 1280px) {
  .hd-widget[data-size="s"] { grid-column: span 4; }
  .hd-widget[data-size="m"] { grid-column: span 6; }
  .hd-widget[data-size="l"] { grid-column: span 12; }
}
@media (max-width: 1000px) {
  .hd-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .hd-widget[data-size="s"] { grid-column: span 2; }   /* a tablet in portrait: S = a third of the row, M = half, L and Full = the whole row (the phone rule below makes it one column) */
  .hd-widget[data-size="m"] { grid-column: span 3; }
  .hd-widget[data-size="l"], .hd-widget[data-size="f"] { grid-column: span 6; }
}
@media (max-width: 720px) {
  .hd-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hd-widget[data-size] { grid-column: auto; }
  .hd-top-act { width: 100%; }
  .hd-period { flex: 1 1 100%; }
  .hd-period .seg { flex: 1; padding: 0 6px; }
  .hd-customize { flex: 1 1 100%; }
  .hd-edit-act { width: 100%; }
  .hd-edit-act .btn { flex: 1 1 auto; justify-content: center; }
  .hd-status { flex: 1 1 100%; text-align: start; }
}

/* a widget */
.hd-widget { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 150px; padding: 16px 18px 18px; container-type: inline-size;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  animation: hd-in .34s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 36ms);
  transition: box-shadow .18s ease-out, border-color .18s, transform .18s ease-out; }
@keyframes hd-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.hd-grid:not(.editing) .hd-widget:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); box-shadow: 0 2px 4px rgba(60, 40, 25, .05), 0 16px 38px rgba(60, 40, 25, .12); }
:root[data-theme="dark"] .hd-grid:not(.editing) .hd-widget:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 38px rgba(0, 0, 0, .4); }
.hd-widget.bare { padding: 0; min-height: 0; background: none; border: 0; box-shadow: none; }
.hd-widget.bare .hd-wh { display: none; }
.hd-grid:not(.editing) .hd-widget.hd-empty { display: none; }
.hd-wh { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 14px; }
.hd-wh h3 { font-size: 15px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-wico { display: inline-grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.hd-wico.lg { width: 40px; height: 40px; border-radius: 12px; }
.hd-wsub { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: var(--panel-3); }
.hd-wsub:empty { display: none; }
.hd-wlink { margin-inline-start: auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--muted); opacity: 0; transition: opacity .15s, background .15s, color .15s, transform .15s ease-out; flex: 0 0 auto; }
.hd-wsub:not(:empty) + .hd-wlink { margin-inline-start: 0; }
:root[dir="rtl"] .hd-wlink .ico { transform: scaleX(-1); }
.hd-widget:hover .hd-wlink, .hd-wlink:focus-visible { opacity: 1; }
.hd-wlink:hover { background: var(--panel-3); color: var(--ink); transform: translateX(2px); }
:root[dir="rtl"] .hd-wlink:hover { transform: translateX(-2px); }
@media (hover: none) { .hd-wlink { opacity: .85; } }
.hd-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.hd-body > * { min-width: 0; }
.hd-skel { display: grid; gap: 10px; }
.hd-skel .sk-block:nth-child(1) { height: 64px; }
.hd-skel .sk-block:nth-child(2) { height: 14px; width: 70%; }
.hd-skel .sk-block:nth-child(3) { height: 80px; }
.hd-error { display: grid; justify-items: start; gap: 8px; padding: 6px 0; color: var(--danger-ink); }
.hd-nothing { display: flex; align-items: center; gap: 8px; padding: 14px 0; }
.hd-stack { display: grid; gap: 14px; align-content: start; }

/* widget content */
.hd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 12px; }
.hd-kpi { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); transition: border-color .15s, transform .15s ease-out, background .15s; }
a.hd-kpi:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-1px); background: var(--panel); }
.hd-kpi-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 650; font-size: 12.5px; min-width: 0; }
.hd-kpi-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); flex: 0 0 auto; }
.hd-kpi-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.hd-kpi-val { font-size: clamp(19px, 4.6cqw, 26px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-kpi-foot { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; }
.hd-kpi-sub { color: var(--muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-kpi.tone-ok .hd-kpi-val { color: var(--ok-ink); }
.hd-kpi.tone-warn .hd-kpi-val { color: var(--warn-ink); }
.hd-kpi.tone-danger .hd-kpi-val { color: var(--danger-ink); }
.hd-sub-title { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.hd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hd-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; margin-inline: -8px; border-radius: 10px; transition: background .12s; }
a.hd-row:hover, a.hd-row:focus-visible { background: var(--panel-2); }
.hd-row-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--panel-3); color: var(--muted); flex: 0 0 auto; }
.hd-row-main { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.hd-row-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hd-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-ok { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--ok-ink); font-weight: 600; font-size: 13px; }
.hd-hbars .hbar { padding: 2px 0; }
.hd-chart { min-width: 0; }
.hd-donut { justify-content: center; flex: 1; align-content: center; gap: 24px; }
.hd-donut .legend-col { min-width: 140px; flex: 0 1 300px; }
.hd-table th, .hd-table td { padding: 9px 10px; }
.hd-register { display: grid; gap: 12px; align-content: start; }
.hd-reg-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hd-reg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hd-reg-stats div { display: grid; }
.hd-reg-stats span { color: var(--muted); font-size: 12px; font-weight: 650; }
.hd-reg-stats b { font-size: 18px; font-variant-numeric: tabular-nums; }
.hd-reg-spark svg { display: block; width: 100%; height: auto; max-height: 52px; }
.hd-ap { display: grid; gap: 5px; }
.hd-ap-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hd-ap-top b { font-size: 18px; font-variant-numeric: tabular-nums; }
.hbar-fill.tone-ok { background: var(--ok); }
.hbar-fill.tone-warn { background: var(--c3); }
.hd-actions { display: grid; gap: 2px; }
.hd-action { display: flex; align-items: center; gap: 10px; padding: 5px 10px; font-size: 13.5px; margin-inline: -10px; border-radius: 12px; font-weight: 600; transition: background .12s, transform .12s ease-out; }
.hd-action:hover, .hd-action:focus-visible { background: var(--panel-2); }
.hd-action:active { transform: scale(.98); }
.hd-action-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-d); flex: 0 0 auto; }
.hd-action-go { margin-inline-start: auto; color: var(--muted); opacity: 0; transition: opacity .12s, transform .12s; }
.hd-action:hover .hd-action-go, .hd-action:focus-visible .hd-action-go { opacity: 1; transform: translateX(2px); }
:root[dir="rtl"] .hd-action:hover .hd-action-go { transform: translateX(-2px); }
@container (max-width: 560px) { .hide-m { display: none !important; } }

/* app shortcuts */
.hd-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
.hd-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid transparent; text-align: center; color: var(--ink); user-select: none; -webkit-user-drag: none;
  transition: background .15s, border-color .15s, transform .16s ease-out; }
.hd-app .app-ico { transition: transform .18s cubic-bezier(.2, .8, .25, 1), box-shadow .18s; }
.hd-grid:not(.editing) .hd-app:hover { background: color-mix(in srgb, var(--app) 9%, transparent); border-color: color-mix(in srgb, var(--app) 28%, transparent); }
.hd-grid:not(.editing) .hd-app:hover .app-ico, .hd-app:focus-visible .app-ico { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 24px color-mix(in srgb, var(--app) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hd-app:active { transform: scale(.97); }
.hd-app-name { font-weight: 650; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-app-hide { display: none; position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 24px; height: 24px; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); box-shadow: var(--shadow); padding: 0; }
.hd-app-hide:hover { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger); }
.editing .hd-app-hide { display: inline-grid; }
.editing .hd-app { cursor: grab; background: var(--panel-2); border: 1px dashed var(--line); touch-action: manipulation; }
.hd-hidden-apps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: 13px; }
.hd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; transition: transform .12s ease-out, border-color .12s; }
:root[dir="rtl"] .hd-chip { padding: 4px 4px 4px 10px; }
.hd-chip:hover { border-color: var(--app); }
.hd-chip:active { transform: scale(.96); }

/* edit mode on a widget */
.hd-tools { display: none; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 12px; padding: 4px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-2); }
.hd-grid.editing .hd-tools { display: flex; }
.hd-widget.bare .hd-tools { margin-top: 0; background: var(--panel); border: 1px dashed var(--line); }
.hd-widget.bare.hd-empty:not(.sortable-placeholder)::before { content: attr(data-title); display: block; padding: 8px 4px; font-weight: 650; color: var(--muted); }
.hd-grid.editing .hd-wlink, .hd-grid.editing .hd-wsub { display: none; }
.hd-handle, .hd-remove { display: inline-grid; place-items: center; width: 36px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); transition: background .12s, color .12s, transform .12s ease-out; }
.hd-handle { cursor: grab; touch-action: none; }
.hd-handle:hover { background: var(--panel-3); color: var(--ink); }
.hd-remove:hover { background: var(--danger-soft); color: var(--danger-ink); }
.hd-handle:active, .hd-remove:active { transform: scale(.92); }
.hd-sizes { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--panel-3); }
.hd-size { min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-weight: 750; font-size: 12px; transition: background .12s, color .12s; }
.hd-size:hover { color: var(--ink); }
.hd-size.on { background: var(--panel); color: var(--accent-d); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
.hd-grid.editing .hd-widget { cursor: grab; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.hd-grid.editing .hd-widget:not([data-id="apps"]) .hd-body { pointer-events: none; opacity: .86; }
.hd-grid.editing .hd-widget { user-select: none; -webkit-user-select: none; }
.hd-grid.editing .hd-widget.bare { border-style: solid; border-color: transparent; }
.hd-grid.editing .hd-handle:focus-visible { outline: 2px solid var(--accent); }
.sortable-clone-wrap .hd-widget { opacity: .97; }

/* the "Add widget" drawer */
.hd-add-list { display: grid; gap: 22px; }
.hd-add-group h4 { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.hd-add-row { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; background: var(--panel); transition: border-color .15s, box-shadow .15s, transform .15s ease-out; animation: hd-in .24s ease-out backwards; }
.hd-add-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow); transform: translateY(-1px); }
.hd-add-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hd-add-main small { line-height: 1.35; }
.hd-add-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; text-align: center; color: var(--muted); }
.hd-add-empty .ico { color: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .hd-widget, .hd-editbar, .hd-add-row { animation: none; }
  .hd-grid:not(.editing) .hd-widget:hover, a.hd-kpi:hover, .hd-add-row:hover { transform: none; }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------
   Phones and tablets: touch-sized edit tools, an edit bar above the bottom nav, bottom-sheet drawer (the mobile pass)
   ------------------------------------------------------------------------------------------------------------------------------------------ */
.hd-done { display: none; }
.hd-status:empty { display: none; }

/* thumb-sized controls wherever a finger is the pointer */
@media (pointer: coarse), (max-width: 900px) {
  .hd-tools { padding: 4px; gap: 6px; }
  .hd-handle, .hd-remove { width: 48px; height: 44px; border-radius: 11px; }
  .hd-handle { background: var(--panel-3); color: var(--ink); }
  .hd-size { min-width: 44px; height: 40px; font-size: 13px; }
  .hd-sizes { padding: 3px; }
  .hd-app-hide { width: 30px; height: 30px; inset-block-start: 2px; inset-inline-end: 2px; }
  .editing .hd-app { padding-top: 24px; }
  .hd-app-hide::after { content: ""; position: absolute; inset: -8px; }
  .hd-chip { min-height: 44px; padding-inline-end: 14px; }
  .hd-add-row .btn { min-height: 44px; min-width: 88px; justify-content: center; }
  .hd-wlink { width: 40px; height: 40px; margin-block: -6px; }
  .hd-action { min-height: 44px; }
  a.hd-row { min-height: 44px; }
}
/* edit mode only: no text selection, no iOS callout / link preview under a long press (the engine adds the same to the handles and tiles it drives) */
.hd-grid.editing .hd-widget, .hd-grid.editing .hd-widget *, .hd-grid.editing .hd-app, .hd-grid.editing .hd-handle { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hd-grid.editing .hd-widget { -webkit-tap-highlight-color: transparent; }

/* the edit bar: its buttons are fixed above the bottom nav (the hint stays at the top of the grid) */
@media (max-width: 900px) {
  .hd-editbar { position: static; top: auto; animation: none; padding: 10px 14px; }
  .hd-edit-hint { flex-basis: 100%; }
  .hd-edit-act { position: fixed; z-index: 29; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: calc(var(--bn-h, 56px) + 8px); width: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border-radius: 18px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    box-shadow: 0 10px 30px rgba(30, 18, 8, .22), 0 2px 6px rgba(30, 18, 8, .1); animation: hd-bar-up .22s cubic-bezier(.2, .8, .25, 1); }
  .hd-edit-act .btn { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; white-space: nowrap; }
  .hd-edit-act .hd-add { flex: 1.4 1 0; }
  .hd-edit-act .hd-done { display: inline-flex; flex: 1.1 1 0; }
  .hd-status { order: -1; flex: 1 1 100%; min-width: 0; text-align: center; font-size: 12px; margin-top: -2px; }
  .page.home.editing { padding-bottom: 88px; }
  body:has(.hd-grid.editing) .toasts { bottom: calc(var(--bn-h, 56px) + 78px); }
}
@media (min-width: 560px) and (max-width: 900px) { .hd-status { order: 0; flex: 0 0 auto; min-width: 92px; margin: 0; padding-inline: 8px; } }
@keyframes hd-bar-up { from { opacity: 0; transform: translateY(16px); } }
/* a landscape phone has no bottom nav */
@media (max-width: 900px) and (max-height: 520px) {
  .hd-edit-act { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; padding: 6px; border-radius: 16px; }
  .hd-status { order: 0; flex: 0 0 auto; min-width: 84px; margin: 0; padding-inline: 6px; }
  .page.home.editing { padding-bottom: 72px; }
  body:has(.hd-grid.editing) .toasts { bottom: 70px; }
}

@media (max-width: 720px) {
  /* one column: the S / M / L / Full switch has nothing to change, so it is not offered; the drag handle takes the room (a bigger target for the thumb) */
  .hd-sizes { display: none; }
  .hd-handle { flex: 1; width: auto; }
  .hd-edit-act .hd-reset { flex: 0 0 44px; padding: 0; }
  .hd-edit-act .hd-reset span:not(.ico) { display: none; }
  .hd-widget { padding: 14px; }
  .hd-tiles { grid-template-columns: repeat(auto-fit, minmax(min(172px, 100%), 1fr)); }
  .hd-wh h3 { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .hd-apps { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* "Add widget": a bottom sheet on a phone */
@media (max-width: 720px) {
  .backdrop-drawer.hd-add-backdrop { place-items: end stretch; }
  .backdrop-drawer.hd-add-backdrop .drawer.hd-add-drawer { width: 100% !important; max-width: 100%; height: auto; max-height: min(88dvh, calc(var(--vvh, 100dvh) - 8px)); border-radius: 22px 22px 0 0; animation: hd-sheet-up .26s cubic-bezier(.2, .8, .25, 1); }
  .hd-add-drawer .drawer-head { position: relative; padding-top: 22px; }
  .hd-add-drawer .drawer-head::before { content: ""; position: absolute; inset-block-start: 8px; inset-inline-start: 50%; width: 40px; height: 4px; margin-inline-start: -20px; border-radius: 4px; background: var(--line); }
  :root[dir="rtl"] .hd-add-drawer .drawer-head::before { margin-inline-start: 0; margin-inline-end: -20px; }
  .hd-add-drawer .drawer-body { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
  .hd-add-row { padding: 10px; gap: 12px; }
}
@keyframes hd-sheet-up { from { transform: translateY(40px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .hd-edit-act, .backdrop-drawer.hd-add-backdrop .drawer.hd-add-drawer { animation: none; } }