/* ============================================================================
   F11  THE CLAIM TO EUROFORM: REPORT ATTACHED, SENT FROM THE CONSOLE
   Tokens only, from app.css, so both themes work without a second set of
   colours. The line about the report in Xero carries a small coloured mark:
   green once it is on the invoice, amber when Xero refused it, blue while it
   is due at the next hourly check, grey while it waits on something (the
   switch, or Adam's approval). The send states reuse app.css's .note edges;
   only "sent" needs a green edge, which app.css does not have.
   ============================================================================ */

/* ------------------------------------------------------- the claim drawer */
.f11-claim h4{margin-top:4px}
.f11-line{position:relative;padding-left:14px}
.f11-line::before{
  content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:50%;
  background:var(--ink-3)
}
.f11-line.f11-good::before{background:var(--good)}
.f11-line.f11-warn::before{background:var(--warn)}
.f11-line.f11-info::before{background:var(--info)}
.f11-line.f11-mute::before{background:var(--line)}
.f11-line.f11-warn{color:var(--ink-2)}
.f11-dim{color:var(--ink-3)}
.f11-line.f11-dim::before{display:none}
.f11-line.f11-dim{padding-left:0}
.note.f11-sent{border-left-color:var(--good)}
.f11-btns{margin:2px 0 6px}
/* The send button names both mailboxes, which is long: let it wrap rather than
   run out of the drawer. */
.f11-btns .btn{white-space:normal;text-align:left;line-height:1.3}
/* "I have looked in the Sent folder": the tick every answer waits on, drawn
   as a row with a large box so it is easy to hit on a phone (F09's pattern). */
.f11-looked{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin:6px 0 8px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink)}
.f11-looked input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:var(--lime-fill);cursor:pointer}
.f11-looked:focus-within{border-color:var(--lime)}

/* ------------------------------------- the checklist lines F11 adds to */
.rules .r-d [data-f11="sentline"],
.rules .r-d [data-f11="attached"]{color:var(--ink-2)}

/* --------------------------------- Purchase Orders: Invoices to Euroform */
[data-f11="schedule"] .tw td .pill{white-space:nowrap}

@media(max-width:700px){
  /* On a phone app.css already stacks every .btnrow full width; keep the
     label readable at that width. */
  .f11-btns .btn{text-align:center}
  .f11-line{font-size:13px}
}