/* app-motion.css: الحركة واللمسات الأخيرة والأيقونات. الملفات تُحمَّل بالترتيب: app.css, app-theme.css, app-motion.css, app-deeds.css, app-extras.css, app-lit.css, app-petitions.css */
/* ===== motion & finish layer: one easing family, fast product timings, reduced-motion path at the end ===== */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 260ms;
}
/* browser surfaces carry the palette too: native pickers, checkboxes and scrollbars follow light/dark */
:root {
  color-scheme: light dark;
}
html {
  scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent;
}
/* any field without its own styling still matches the system (zero specificity, so specific rules win) */
:where(
    input:not(
        [type="checkbox"],
        [type="radio"],
        [type="file"],
        [type="range"],
        [type="color"],
        [type="hidden"]
      ),
    select,
    textarea
  ) {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 9px;
  padding: 8px 12px;
  min-width: 0;
  transition:
    border-color var(--t),
    box-shadow var(--t);
}
:where(
    input:not([type="checkbox"], [type="radio"], [type="file"]),
    select,
    textarea
  ):focus {
  outline: 0;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 15%, transparent);
}
.inl select {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 9px;
  padding: 8px 10px;
}
.inl input:not([type="date"]) {
  flex: 1 1 180px;
}
::selection {
  background: color-mix(in srgb, var(--acc) 22%, transparent);
}
body {
  caret-color: var(--acc);
  -webkit-tap-highlight-color: transparent;
}
input[type="checkbox"],
input[type="radio"],
progress {
  accent-color: var(--acc);
}
.kpi .v,
td,
.chip,
.cnt,
#bc,
.cal .dn,
.badge,
.meta b {
  font-variant-numeric: tabular-nums;
}
:is(
    .btn,
    .tab,
    .sbtn,
    .stg,
    .catb,
    .seg button,
    .seg a.segl,
    .tabbar a,
    .tabbar button,
    .fabb,
    .x,
    .qbtn,
    .wback,
    .pali,
    a,
    summary,
    input[type="checkbox"],
    input[type="radio"]
  ):focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 9px;
}
.side a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.ce:focus-visible,
.mrow:focus-visible,
a.card:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* press feedback: small, immediate, never on disabled controls */
.btn,
.sbtn,
.stg,
.tab,
.seg button,
.seg a.segl,
.tabbar a,
.tabbar button {
  transition:
    background-color var(--t),
    border-color var(--t),
    color var(--t),
    box-shadow var(--t),
    transform var(--t-fast) var(--ease-out);
}
:is(.btn, .sbtn, .stg, .seg button, .seg a.segl, .catb, .qbtn):active:not(
    :disabled
  ) {
  transform: scale(0.97);
}
.tabbar a:active,
.tabbar button:active {
  transform: scale(0.92);
}
.mrow:active,
a.card:active,
.mc:active {
  transform: scale(0.995);
}
/* hover lifts only where a pointer can hover — no sticky lift after a tap on phones */
@media (hover: none) {
  .mrow:hover,
  .catb:hover {
    transform: none;
  }
}
.side a {
  transition:
    background-color var(--t),
    color var(--t),
    box-shadow var(--t) var(--ease-out);
}
.side a::before {
  transition: opacity var(--t);
}
.side a:hover::before,
.side a.on::before {
  opacity: 1;
}
.tab {
  transition:
    color var(--t),
    border-color var(--t) var(--ease-out);
}

/* view change: the new page settles in; refreshes of the same page stay still */
@keyframes viewin {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
#main.enter {
  animation: viewin var(--t-slow) var(--ease-out);
}

/* dialogs: overlay fades, panel rises; exit is quicker than entry */
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes fadeout {
  to {
    opacity: 0;
  }
}
@keyframes dlgin {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}
@keyframes dlgout {
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}
.ov {
  animation: fade var(--t) var(--ease-out);
}
.ov > .dlg {
  animation: dlgin var(--t-slow) var(--ease-out);
}
.ov.out {
  animation: fadeout var(--t-fast) var(--ease-in) forwards;
  pointer-events: none;
}
.ov.out > .dlg {
  animation: dlgout var(--t-fast) var(--ease-in) forwards;
}

/* popovers and menus grow from their anchor */
@keyframes popin {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
@keyframes popup {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
.pop:not([hidden]) {
  transform-origin: top center;
  animation: popin var(--t) var(--ease-out);
}
details.morem[open] > div {
  transform-origin: top left;
  animation: popin var(--t) var(--ease-out);
}
.fabm:not([hidden]) {
  transform-origin: bottom left;
  animation: popup var(--t) var(--ease-out);
}
.fabm button {
  transition: background-color var(--t);
}

/* quick-add button: + turns into × while its menu is open, and steps aside while scrolling down */
.fab {
  transition:
    transform var(--t-slow) var(--ease-out),
    opacity var(--t);
}
.fab.away {
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
}
.fabb {
  transition:
    transform var(--t-slow) var(--ease-out),
    box-shadow var(--t);
}
.fab:has(.fabm:not([hidden])) .fabb {
  transform: rotate(45deg);
}
.fabb:active {
  transform: scale(0.94);
}

/* toasts stack instead of overlapping, and leave instead of vanishing */
#toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  max-width: 90vw;
}
#toasts .toast {
  position: static;
  transform: none;
  pointer-events: auto;
  animation: toastin var(--t-slow) var(--ease-out);
}
#toasts .toast.out {
  animation: toastout var(--t) var(--ease-in) forwards;
}
@keyframes toastin {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
@keyframes toastout {
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
}

/* collapsible sections: drawn chevron that turns, content eases in */
details.sec > summary::before,
details.sec[open] > summary::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  vertical-align: -2px;
  background: var(--mute);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")
    no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")
    no-repeat center/contain;
  transition: transform var(--t) var(--ease-out);
}
details.sec[open] > summary::before {
  transform: rotate(-90deg);
}
details.sec > summary {
  transition: color var(--t);
}
details.sec > summary:hover {
  color: var(--acc);
}
details.sec[open] > .secb {
  animation: fade var(--t-slow) var(--ease-out);
}

/* board: cards feel grabbable, the target column answers the drag */
.mc[draggable="true"] {
  cursor: grab;
}
.mc[draggable="true"]:active {
  cursor: grabbing;
}
.mc {
  transition:
    border-color var(--t),
    box-shadow var(--t),
    opacity var(--t),
    transform var(--t) var(--ease-out);
}
.mc.dragging {
  opacity: 0.45;
  transform: scale(0.97) rotate(-1deg);
}
.col {
  transition:
    background-color var(--t),
    outline-color var(--t);
}
.col.over {
  background: color-mix(in srgb, var(--acc) 9%, var(--acc2));
}
.drop {
  transition:
    background-color var(--t),
    color var(--t);
}
.drop:hover,
.drop.over {
  background: var(--acc2);
  color: var(--acc);
}
.bar i {
  transition: width var(--t-slow) var(--ease-out);
}
.pali {
  transition:
    background-color var(--t-fast),
    color var(--t-fast);
}
tbody tr td {
  transition: background-color var(--t-fast);
}

/* first load: a quiet mark instead of a blank page (appears only if loading takes a moment) */
.boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.boot i {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--gold) no-repeat center/24px;
  animation:
    bootin 0.4s 0.3s var(--ease-out) both,
    breathe 1.6s 0.7s ease-in-out infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");
}
@keyframes bootin {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes breathe {
  50% {
    opacity: 0.55;
  }
}

@media (max-width: 860px) {
  #toasts {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
  .ov > .dlg {
    animation: sheetup var(--t-slow) var(--ease-out);
  }
  .ov.out > .dlg {
    animation: sheetdown var(--t) var(--ease-in) forwards;
  }
  details.morem[open] > div {
    transform-origin: bottom center;
    animation-name: popup;
  }
  /* chip rows that scroll sideways fade at the far edge, so it reads as "more this way" */
  .stages,
  .filters {
    -webkit-mask-image: linear-gradient(
      to left,
      #000 calc(100% - 28px),
      transparent
    );
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  }
}
@keyframes sheetdown {
  to {
    transform: translateY(60px);
    opacity: 0;
  }
}

/* today: a number takes you to its list, which lights up for a moment */
@keyframes flash {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent);
  }
  25% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 55%, transparent);
  }
  100% {
    box-shadow: var(--shadow);
  }
}
.card.flash {
  animation: flash 1.1s 0.25s var(--ease-out);
}
.calm-i .ico {
  width: 30px;
  height: 30px;
  color: var(--ok);
}
/* long text: checkbox stays beside its line, segment labels never break, headings wrap evenly */
.list label.row {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.list label.row > input {
  flex: none;
  margin-top: 4px;
}
.seg button,
.seg a.segl {
  white-space: nowrap;
}
h1,
h3,
h4,
.hero-t {
  text-wrap: balance;
}

/* status palette: tuned to sit with navy + gold, with lighter dark-mode twins (used as --c by badges, stages, calendar) */
:root {
  --c-blue: #2b5e9e;
  --c-red: #c2362f;
  --c-red2: #9f2a24;
  --c-green: #2b7a4b;
  --c-amber: #9c6412;
  --c-purple: #7b4bb5;
  --c-violet: #6a4fc0;
  --c-teal: #1f7f78;
  --c-cyan: #1d6f8f;
  --c-slate: #64748b;
  --c-slate2: #4b5768;
  --c-grey: #9aa1ab;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-blue: #8db4e2;
    --c-red: #f08a80;
    --c-red2: #e57368;
    --c-green: #6fcf97;
    --c-amber: #e7b562;
    --c-purple: #c3a4ef;
    --c-violet: #ad9bf0;
    --c-teal: #6cc9bd;
    --c-cyan: #73c2df;
    --c-slate: #9aa6b6;
    --c-slate2: #8793a4;
    --c-grey: #6b7280;
  }
  .sbtn.on,
  .stg.on {
    color: #0e131a;
  }
}

/* drawn icons (replace emoji at render time): one stroke family, sized to the text, coloured by context */
.ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex: none;
}
.catb .ico {
  width: 30px;
  height: 30px;
  color: var(--acc);
  stroke-width: 1.6;
  transition:
    color var(--t),
    transform var(--t-slow) var(--ease-out);
}
.catb:hover .ico {
  color: var(--gold);
}
@media (hover: hover) {
  .catb:hover .ico {
    transform: translateY(-2px);
  }
}
.ico-alert {
  color: var(--warn);
}
.ico-done {
  color: var(--ok);
}
.pali .ico,
.fabm .ico,
.pop .ico {
  color: var(--mute);
  margin-left: 4px;
}
.pali.on .ico {
  color: var(--acc);
}

:is(.side, .tabbar, .sheetnav) a[data-h="deeds"] {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v9.5'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M13.38 15.62a1 1 0 0 0-3-3l-5.01 5.01a2 2 0 0 0-.51.86l-.84 2.87a.5.5 0 0 0 .62.62l2.87-.84a2 2 0 0 0 .86-.51z'/%3E%3C/svg%3E");
}