/* ============================================================================
   F17  MONEY LINKED TO JOBS, AND THE DEPOSIT CHECKPOINT
   Tokens only, from app.css, so both themes work without a second set of
   colours. The phone rules sit at the end, at the widths app.css already folds
   at (700px: tables stack into labelled lines).
   ============================================================================ */

/* ------------------------------------------------- the Job section (drawers) */
.f17-job .f17-on{margin:0 0 4px;font-size:13px;color:var(--ink)}
.f17-job .f17-off{margin:0 0 8px;font-size:13px;color:var(--ink-2)}
.f17-sug{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  margin:0 0 8px;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--info);
  border-radius:var(--r);background:var(--info-bg);font-size:12.5px;color:var(--ink)}
.f17-sug small{display:block;color:var(--ink-3);font-size:11.5px}
.f17-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 10px}
.f17-pick-l{font-size:12px;color:var(--ink-2);width:100%}
.f17-pick select{flex:1 1 220px;min-width:0;min-height:34px;padding:6px 8px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:12.5px}
.f17-dim{color:var(--ink-3);font-size:11.5px}

/* --------------------------------------------- the deposit line in the job */
.f17-dep{margin:0 0 10px}
.f17-dep .f17-dep-l{margin:0 0 6px;font-size:12.5px;color:var(--ink);line-height:1.5}
.f17-dep .f17-dep-l small{display:block;color:var(--ink-3);font-size:11.5px}
.f17-sugs{margin:0 0 10px}
/* "It has no deposit": the reason box it opens, and what was said. The
   buttons are display:inline-flex, which would beat the hidden attribute. */
.f17-dep [hidden]{display:none !important}
.f17-none-f{margin:4px 0 10px}
.f17-none-f textarea{display:block;width:100%;box-sizing:border-box;min-height:56px;padding:8px 10px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  font:inherit;font-size:13px;resize:vertical}
.f17-none-f .btnrow{margin-top:8px}

/* ---------------------------------------------- Money: "Not on a job yet" */
.f17-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.f17-looks{display:block;width:100%;font-size:11.5px;color:var(--ink-2)}
.f17-counts{margin:-6px 0 18px}
/* The two Money sections F17 adds start with the same gap as the core's own
   headings (app.css zeroes a first-child heading's top margin). */
[data-f17="loose"] > .sec-h, [data-f17="bills"] > .sec-h{margin-top:26px}

/* -------------------------------------------- the claim's "sent from Xero" */
.f17-xsent{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-2)}
.f17-xsent.warn{color:var(--warn)}

/* ------------------------------------------------------- the question
   Above the drawer (61), the notice strip (62), the comment button (70), the
   phone menu (75) and the drag ghost (80), because it can be raised from any
   of them, and below nothing: it must be answered or cancelled. */
.f17-ask-wrap{position:fixed;inset:0;z-index:85;display:flex;align-items:center;justify-content:center;
  padding:16px;background:var(--scrim)}
.f17-ask{width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow:auto;padding:18px 20px;
  border-radius:8px;border:1px solid var(--line);border-top:3px solid var(--warn);background:var(--panel);
  color:var(--ink);box-shadow:var(--shadow)}
.f17-ask h3{margin:0 0 10px;font-size:16px}
.f17-ask .f17-ask-why{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--ink)}
.f17-ask .f17-ask-to{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.f17-ask .f17-ask-l{display:block;margin:0 0 4px;font-size:12px;font-weight:600;color:var(--ink-2)}
.f17-ask textarea{display:block;width:100%;box-sizing:border-box;min-height:72px;padding:8px 10px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  font:inherit;font-size:13px;resize:vertical}
.f17-ask .f17-ask-err{margin:8px 0 0;font-size:12px;color:var(--crit)}
.f17-ask .f17-ask-none{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:12.5px;
  line-height:1.45;color:var(--ink-2);cursor:pointer}
.f17-ask .f17-ask-none input{flex:none;margin:2px 0 0;width:16px;height:16px}
.f17-ask .btnrow{margin-top:14px;justify-content:flex-end}

@media(max-width:700px){
  .f17-ask-wrap{align-items:flex-end;padding:0}
  .f17-ask{max-width:none;border-radius:10px 10px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .f17-ask .btnrow{flex-direction:column-reverse;align-items:stretch}
  .f17-ask .btnrow .btn{width:100%;min-height:44px}
  .f17-pick select{flex-basis:100%}
}