/* Everything on the dashboard opens something (owner round 5): how a tappable thing looks (a chevron, mirrored in Arabic; a pressed state; 44 pt),
   the row lit for a moment on the screen it opened, and the three detail screens (Payments received, Units, Due soon: app/js/dash-detail.js) */

/* ---- the chevron: one shape for panel titles, tappable cards and rows; it points the reading way (left in Arabic) ---- */
.dhead::after,.dtap > h3::after,.dlist > button.ditem::after,.dlist > .dprop::after,.dlist > .dowed-row::after{
  content:""; flex:none; width:16px; height:16px; background:currentColor; opacity:.45;
  -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='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  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='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat }
html[dir=rtl] .dhead::after,html[dir=rtl] .dtap > h3::after,html[dir=rtl] .dlist > button.ditem::after,html[dir=rtl] .dlist > .dprop::after,html[dir=rtl] .dlist > .dowed-row::after{ transform:scaleX(-1) }
.dlist > button.ditem::after,.dlist > .dprop::after,.dlist > .dowed-row::after{ width:13px; height:13px; margin-inline-start:-4px; opacity:.35 }

/* a panel's title is a button: the whole title, at least 44 pt tall, without changing the panel's height */
.panel > h3.dhead-row{ gap:8px }
.dhead{ display:inline-flex; align-items:center; gap:4px; min-height:calc(44px * var(--dt,1)); margin:-12px 0; padding:0 4px; margin-inline-start:-4px; border:0; border-radius:10px; background:none;
  color:inherit; font:inherit; text-align:start; cursor:pointer; -webkit-tap-highlight-color:transparent }
.dhead:hover{ background:var(--line-soft) } .dhead:active{ background:var(--line-soft); opacity:.7 }
.dhead:focus-visible{ outline:2px solid var(--nile); outline-offset:0 }
html.native-ios .dhead:hover{ background:none } html.native-ios .dhead:active{ background:var(--fill) }

/* a whole card that is a button (the gauge, the cashflow card, the heroes): a chevron at the end of its title, pressed like the cards above */
.dtap{ cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .14s cubic-bezier(.2,.8,.2,1) }
.dtap > h3::after{ margin-inline-start:auto }
.dtap:active{ transform:scale(.985) } .dtap:focus-visible{ outline:2px solid var(--nile); outline-offset:2px }
.ledger.dtap{ position:relative }
.ledger.dtap::after{ content:""; position:absolute; top:12px; inset-inline-end:12px; width:16px; height:16px; background:currentColor; opacity:.6;
  -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='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  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='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat }
html[dir=rtl] .ledger.dtap::after{ transform:scaleX(-1) }
.ledger.dtap .ledger-head{ padding-inline-end:22px }

/* rows: pressed state and keyboard ring for the button rows (the div rows have theirs in dashboard.css) */
.ditem:active,.dprop:active{ background:var(--line-soft) } .ditem:focus-visible,.dprop:focus-visible,.dstage:focus-visible,.dcard:focus-visible{ outline:2px solid var(--nile); outline-offset:-2px }
.ditem .tag{ flex:none }

/* the money chart's bars: the whole column is the target; a ring on keyboard focus, a light wash on hover, dimmed while pressed */
.dbar{ cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent }
.dbar:hover .dhit{ fill:var(--line-soft) } .dbar:focus-visible .dhit{ stroke:var(--nile); stroke-width:2 }
.dbar:active rect:not(.dhit){ opacity:.6 }

/* the row a tap was about, on the screen it opened: lit for a moment */
@keyframes dflash{ 0%,40%{ background-color:var(--nile-tint); box-shadow:0 0 0 2px var(--nile) inset } 100%{ background-color:transparent; box-shadow:0 0 0 0 transparent inset } }
.dflash,.dflash > td{ animation:dflash 2.2s ease-out }
.dflash:focus{ outline:none }
@media(prefers-reduced-motion:reduce){ .dtap{ transition:none } .dflash,.dflash > td{ animation:none; background-color:var(--nile-tint) } }

/* ---- the detail screens ---- */
.ddhelp{ font-size:calc(13px * var(--dt,1)); margin:0 0 12px; line-height:1.55 }
.ddtools select{ min-height:calc(44px * var(--dt,1)); max-width:100% }
.ddchips{ margin:0 0 10px } .ddchips .cchip{ min-height:calc(44px * var(--dt,1)) }
.ddsum .pbody{ padding:14px 18px }
.ddsum-k{ font-size:calc(13px * var(--dt,1)); color:var(--muted); line-height:1.5 }
.ddsum-v{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin-top:4px }
.ddsum-v b{ font-size:calc(24px * var(--dt-cap,1)); font-weight:800; letter-spacing:-.02em } .ddsum-v .muted{ font-size:calc(13px * var(--dt,1)) }
.ddpay-row .damt{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:end }
.ddpay-row .damt b{ font-size:calc(14.5px * var(--dt,1)); white-space:nowrap } .ddpay-row .damt small{ font-size:calc(12px * var(--dt,1)); color:var(--muted); white-space:nowrap }
@media(max-width:420px){ .ddpay-row .damt small{ white-space:normal } }
/* a row title in someone's own words keeps its own direction (dir="auto", dashOwnDir) but lines up with the page's side like the line under it */
html[dir="ltr"] .ditem .dt b[dir="auto"]{ text-align:left } html[dir="rtl"] .ditem .dt b[dir="auto"]{ text-align:right }