/* ---------- components/entry-bar/entry-bar.css ---------- */
/* ===== entry-bar =====
   The Account / Description / Amount bar, the account lock and the account suggestion pop-up. */
.bar{display:grid;grid-template-columns:1.2fr 1.8fr .55fr;gap:6px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.fld{display:block;min-width:0}
.fld input{display:block}
.fld.has-lk{position:relative}.fld.has-lk input{padding-right:42px}
.lk{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:8px;background:transparent;color:var(--mute);cursor:pointer;transition:background .15s,color .15s}
.lk:hover{background:var(--line)}
.lk.on{background:var(--accent);color:var(--bg)}
#acc.locked{border-color:var(--accent);background:var(--card)}
.srchi{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--mute);opacity:0;pointer-events:none;transition:opacity .25s}
.fld.srch .srchi{opacity:.85}
.bar #desc{padding-left:11px;transition:border-color .15s,box-shadow .15s,background .15s,padding-left .25s}
.fld.srch #desc{padding-left:34px}
#aPop{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:100%;width:max-content;max-width:min(320px,86vw);max-height:425px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 32px -10px rgba(0,0,0,.4);padding:6px;z-index:30}
#aPop.on{display:block}
.fld>span:not(.dsum){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar input{width:100%;min-width:0;border:1.5px solid transparent;background:var(--bg);color:var(--text);border-radius:8px;padding:9px 11px;font:inherit;font-size:15px;transition:border-color .15s,box-shadow .15s,background .15s}
.bar input::placeholder{color:var(--mute);opacity:.6}
.bar input:focus{outline:0;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
#amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
#amt.bad{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 16%,transparent)}
/* phone: Account and Description on the first row; below them a plus/minus key, the Amount and a Save key
   (the phone's number pad has no minus and, on iPhone, no Enter, so these two keys are always on screen) */
.mb{display:none}
@media (max-width:560px){
  .bar{grid-template-columns:1fr 36px 36px 36px 36px 36px 44px}
  .bar>label:nth-of-type(1){grid-column:1/-1}
  .bar>label:nth-of-type(2){grid-column:1/6;grid-row:2}
  .bar>label:nth-of-type(3){grid-column:6/8;grid-row:2}
  .mb{display:flex;grid-row:3;align-items:center;justify-content:center;height:32px;min-height:0;padding:0;border-radius:8px;background:var(--bg);color:var(--text);font-size:20px;font-weight:700}
  .pv{grid-column:1;background:transparent;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden}
  .pv.pos{color:var(--accent)}.pv.neg{color:var(--err)}
  .op{font-size:18px}
  .op:nth-of-type(1){grid-column:2}.op:nth-of-type(2){grid-column:3}.op:nth-of-type(3){grid-column:4}.op:nth-of-type(4){grid-column:5}.op:nth-of-type(5){grid-column:6}
  #goBtn{grid-column:7;background:var(--accent);color:var(--bg)}
  #amt{font-size:16px;padding-left:8px;padding-right:8px}
  .bar input{height:38px;padding-top:0;padding-bottom:0}   /* the three boxes are a little shorter, but still taller than the keys */
  .fld #asum{display:none !important}   /* the live sum is in the key row on the phone */
  #aPop{max-width:calc(100vw - 24px);max-height:min(425px,var(--pop-h,425px))}   /* the account list stays above the keyboard (the room is worked out in frame.js) */
}

/* the small pills above the Amount box (live sum, and the drafts total that the list fills in) */
.fld.has-ds{position:relative}
.dsum{position:absolute;right:4px;top:-16px;z-index:2;font-size:11px;font-weight:700;line-height:1;padding:3px 8px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--text);white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.dsum.neg{color:var(--err)}.dsum.pos{color:var(--accent)}
.fld.typing #dsum{display:none !important}
/* ---- the glow: a soft green halo around the bar that slowly breathes, and shines brighter while you type in it ---- */
.bar{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));animation:barGlow 3s ease-in-out infinite;transition:border-color .2s}
.bar:focus-within{border-color:var(--accent);animation:none;box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 16px 1px color-mix(in srgb,var(--accent) 45%,transparent)}
@keyframes barGlow{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 6px 0 color-mix(in srgb,var(--accent) 16%,transparent)}50%{box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 16px 1px color-mix(in srgb,var(--accent) 38%,transparent)}}
@media (prefers-reduced-motion:reduce){.bar{animation:none;box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 10px color-mix(in srgb,var(--accent) 26%,transparent)}}

/* ---- progress line + money mood: --m is the mood colour (green = money in, red = money out) ---- */
.bar{position:relative;--m:var(--accent)}
.bar.mneg{--m:var(--err)}
.bar{border-color:color-mix(in srgb,var(--m) 40%,var(--line))}
.bar:focus-within{border-color:var(--m);box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 16px 1px color-mix(in srgb,var(--m) 45%,transparent)}
@keyframes barGlow{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 6px 0 color-mix(in srgb,var(--m) 16%,transparent)}50%{box-shadow:0 1px 2px rgba(0,0,0,.04),0 0 16px 1px color-mix(in srgb,var(--m) 38%,transparent)}}
.bar.mready{animation-duration:1.3s}
.bar input.mf{border-color:color-mix(in srgb,var(--m) 45%,transparent)}
.bar input:focus{border-color:var(--m);box-shadow:0 0 0 3px color-mix(in srgb,var(--m) 20%,transparent)}
#amt.bad{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 16%,transparent)}
.bar.mpos #amt,.bar.mneg #amt{color:var(--m)}
.etr{position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;pointer-events:none}
.etr b{display:block;height:100%;width:0;background:var(--m);transition:width .35s ease,background .25s}
.bar #goBtn{background:var(--m);opacity:.55;transition:opacity .3s,background .25s}
.bar.mready #goBtn{opacity:1;animation:goPulse 1.2s ease-in-out infinite}
@keyframes goPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--m) 55%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.bar.mready #goBtn{animation:none}.etr b{transition:none}}

/* ---- phone: our own number pad for the Amount box (the iPhone keyboard is not used there). Same look as the Drafts pad, last row has the four signs ---- */
#epad{display:none}
#amt[readonly]{caret-color:transparent;-webkit-user-select:none;user-select:none}
@keyframes epup{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:560px){
  #epad.on{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.12);animation:epup .16s ease-out}
  #epad .ep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  #epad .ep-grid button{height:42px;border:0;border-radius:12px;background:var(--bg);color:var(--text);font-size:20px;font-weight:600;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  #epad .ep-grid button:active{background:color-mix(in srgb,var(--text) 14%,var(--bg))}
  #epad .ep-grid .fn{background:color-mix(in srgb,var(--text) 9%,var(--bg));font-size:18px}
  #epad .ep-grid .dn{background:linear-gradient(135deg,#f7d56a,#d9a520);color:#3a2800}   /* the tick (Save) key is golden */
  #epad .ep-grid .dn:active{background:linear-gradient(135deg,#f7d56a,#d9a520);opacity:.85}
}
/* phone: the small keys under the boxes (+ - x ÷ % and Save) are hidden, the pad has them. Only the live answer stays, and its row only exists while there is an answer. */
@media (max-width:560px){
  .bar .op,.bar #goBtn{display:none}
  .bar .pv{grid-column:1/-1;height:20px}
  .bar .pv:empty{display:none}
}
@media (prefers-reduced-motion:reduce){#epad.on{animation:none}}