/* polish.css -- colour and shape for the pages that did not have them yet: Dashboard, My services, Orders,
   Leads, Settings, and the sign-in page. They now look like the Data sheet and PDF tools pages: a signboard at
   the top in the page's own strong colour, its things in a tray of that colour's tint, each thing on a white card.
   Styles only. No script reads anything here, and nothing is hidden, moved in the page, or resized under a script
   that measures it: taking this file away gives back the pages exactly as they were. */

/* ---- one strong colour for each page ---- */
#viewDashboard { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22);--sign:#A9C8FF;--sign-ink:#0F2A63; }
#viewServices { --tone:#6D3FD6;--deep:#4A22A6;--tint:#EEE8FD;--edge:#D0C0F6;--glow:rgba(109,63,214,.22);--sign:#C9B8FB;--sign-ink:#2A1466; }
#viewOrders { --tone:#E8590C;--deep:#9A3A00;--tint:#FFF0E3;--edge:#F8CFAE;--glow:rgba(232,89,12,.22);--sign:#FFB787;--sign-ink:#4A1D00; }
#viewLeads { --tone:#D6257F;--deep:#96124F;--tint:#FDE7F1;--edge:#F5BDD8;--glow:rgba(214,37,127,.22);--sign:#F9A8CB;--sign-ink:#4D0A2A; }
#viewSettings { --tone:#0891B2;--deep:#0B5F75;--tint:#E0F5FA;--edge:#A9DDE9;--glow:rgba(8,145,178,.22);--sign:#8FDDEA;--sign-ink:#06323D; }

/* ---- the signboard: the page's name, with a small picture of what the page is for ---- */
@media (min-width: 901px) {
  #viewDashboard > .topbar, #viewServices > .topbar, #viewOrders > .topbar, #viewLeads > .topbar, #viewSettings > .topbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 12px;
    min-height: 132px; align-content: center; overflow: hidden; background-color: var(--sign); background-repeat: no-repeat; background-position: right 22px top 50%; background-size: auto 132px;
    border-radius: 18px; padding: 24px 300px 24px 26px; margin: -2px 0 18px; }
  #viewDashboard > .topbar { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 250 132%22%3E%3Cg transform=%22translate(18 50) rotate(-13)%22%3E%3Crect x=%223%22 y=%225%22 width=%2296%22 height=%2274%22 rx=%2212%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Crect width=%2296%22 height=%2274%22 rx=%2212%22 fill=%22%23fff%22/%3E%3Crect x=%2210%22 y=%2210%22 width=%2224%22 height=%2224%22 rx=%227%22 fill=%22%230E9F6E%22/%3E%3Crect x=%2241%22 y=%2213%22 width=%2240%22 height=%226%22 rx=%223%22 fill=%22%23132A3A%22/%3E%3Crect x=%2241%22 y=%2224%22 width=%2226%22 height=%225%22 rx=%222.5%22 fill=%22%23B9C6CC%22/%3E%3Crect x=%2210%22 y=%2243%22 width=%2276%22 height=%225%22 rx=%222.5%22 fill=%22%23DCE3E1%22/%3E%3Crect x=%2210%22 y=%2255%22 width=%2276%22 height=%2211%22 rx=%225.5%22 fill=%22%230E9F6E%22/%3E%3C/g%3E%3Cg transform=%22translate(138 40) rotate(12)%22%3E%3Crect x=%223%22 y=%225%22 width=%2296%22 height=%2274%22 rx=%2212%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Crect width=%2296%22 height=%2274%22 rx=%2212%22 fill=%22%23fff%22/%3E%3Crect x=%2210%22 y=%2210%22 width=%2224%22 height=%2224%22 rx=%227%22 fill=%22%23D6257F%22/%3E%3Crect x=%2241%22 y=%2213%22 width=%2240%22 height=%226%22 rx=%223%22 fill=%22%23132A3A%22/%3E%3Crect x=%2241%22 y=%2224%22 width=%2226%22 height=%225%22 rx=%222.5%22 fill=%22%23B9C6CC%22/%3E%3Crect x=%2210%22 y=%2243%22 width=%2276%22 height=%225%22 rx=%222.5%22 fill=%22%23DCE3E1%22/%3E%3Crect x=%2210%22 y=%2255%22 width=%2276%22 height=%2211%22 rx=%225.5%22 fill=%22%23D6257F%22/%3E%3C/g%3E%3Cg transform=%22translate(77 26) rotate(-1)%22%3E%3Crect x=%223%22 y=%225%22 width=%2296%22 height=%2274%22 rx=%2212%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Crect width=%2296%22 height=%2274%22 rx=%2212%22 fill=%22%23fff%22/%3E%3Crect x=%2210%22 y=%2210%22 width=%2224%22 height=%2224%22 rx=%227%22 fill=%22%23E8590C%22/%3E%3Crect x=%2241%22 y=%2213%22 width=%2240%22 height=%226%22 rx=%223%22 fill=%22%23132A3A%22/%3E%3Crect x=%2241%22 y=%2224%22 width=%2226%22 height=%225%22 rx=%222.5%22 fill=%22%23B9C6CC%22/%3E%3Crect x=%2210%22 y=%2243%22 width=%2276%22 height=%225%22 rx=%222.5%22 fill=%22%23DCE3E1%22/%3E%3Crect x=%2210%22 y=%2255%22 width=%2276%22 height=%2211%22 rx=%225.5%22 fill=%22%23E8590C%22/%3E%3C/g%3E%3C/svg%3E"); }
  #viewServices > .topbar { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 250 132%22%3E%3Cg transform=%22translate(64 16) rotate(-5)%22%3E%3Crect x=%224%22 y=%226%22 width=%22112%22 height=%22140%22 rx=%2212%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Crect width=%22112%22 height=%22140%22 rx=%2212%22 fill=%22%23fff%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%2256%22 height=%228%22 rx=%224%22 fill=%22%23132A3A%22/%3E%3Crect x=%2214%22 y=%2234%22 width=%2284%22 height=%2218%22 rx=%226%22 fill=%22%23EEE8FD%22/%3E%3Ccircle cx=%2226%22 cy=%2243%22 r=%225%22 fill=%22%236D3FD6%22/%3E%3Crect x=%2238%22 y=%2240%22 width=%2244%22 height=%226%22 rx=%223%22 fill=%22%23B7A3EE%22/%3E%3Crect x=%2214%22 y=%2258%22 width=%2284%22 height=%2218%22 rx=%226%22 fill=%22%23E2F7EC%22/%3E%3Ccircle cx=%2226%22 cy=%2267%22 r=%225%22 fill=%22%230E9F6E%22/%3E%3Crect x=%2238%22 y=%2264%22 width=%2234%22 height=%226%22 rx=%223%22 fill=%22%238FD9B9%22/%3E%3Crect x=%2214%22 y=%2282%22 width=%2284%22 height=%2218%22 rx=%226%22 fill=%22%23FFF0E3%22/%3E%3Ccircle cx=%2226%22 cy=%2291%22 r=%225%22 fill=%22%23E8590C%22/%3E%3Crect x=%2238%22 y=%2288%22 width=%2250%22 height=%226%22 rx=%223%22 fill=%22%23F4B58B%22/%3E%3C/g%3E%3Cg transform=%22translate(170 34)%22%3E%3Ccircle cx=%2224%22 cy=%2226%22 r=%2224%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Ccircle cx=%2222%22 cy=%2222%22 r=%2224%22 fill=%22%23FFC83D%22/%3E%3Cpath d=%22M22 11v22M11 22h22%22 stroke=%22%23132A3A%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
  #viewOrders > .topbar { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 250 132%22%3E%3Cg transform=%22translate(34 30)%22%3E%3Crect x=%223%22 y=%225%22 width=%22112%22 height=%2246%22 rx=%2216%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Crect width=%22112%22 height=%2246%22 rx=%2216%22 fill=%22%23fff%22/%3E%3Cpath d=%22M18 44l-8 16 22-14z%22 fill=%22%23fff%22/%3E%3Crect x=%2216%22 y=%2213%22 width=%2264%22 height=%227%22 rx=%223.5%22 fill=%22%23132A3A%22/%3E%3Crect x=%2216%22 y=%2227%22 width=%2242%22 height=%226%22 rx=%223%22 fill=%22%23B9C6CC%22/%3E%3C/g%3E%3Cg transform=%22translate(96 84)%22%3E%3Crect x=%223%22 y=%225%22 width=%22104%22 height=%2240%22 rx=%2215%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Crect width=%22104%22 height=%2240%22 rx=%2215%22 fill=%22%23132A3A%22/%3E%3Crect x=%2216%22 y=%2212%22 width=%2252%22 height=%226%22 rx=%223%22 fill=%22%23fff%22/%3E%3Crect x=%2216%22 y=%2224%22 width=%2230%22 height=%225%22 rx=%222.5%22 fill=%22%237E97A6%22/%3E%3Cpath d=%22M78 21l5 5 9-10%22 fill=%22none%22 stroke=%22%2337D7A2%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3Cg transform=%22translate(176 18)%22%3E%3Ccircle cx=%2227%22 cy=%2229%22 r=%2226%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Ccircle cx=%2225%22 cy=%2225%22 r=%2226%22 fill=%22%23FFC83D%22/%3E%3Cpath d=%22M16 15h18M16 23h18M19 15c11 0 11 8 0 8l12 14%22 fill=%22none%22 stroke=%22%23132A3A%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E"); }
  #viewLeads > .topbar { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 250 132%22%3E%3Cg transform=%22translate(88 20) rotate(9)%22%3E%3Crect width=%2292%22 height=%22124%22 rx=%2210%22 fill=%22%236D3FD6%22/%3E%3C/g%3E%3Cg transform=%22translate(74 18) rotate(2)%22%3E%3Crect width=%2292%22 height=%22124%22 rx=%2210%22 fill=%22%232563EB%22/%3E%3C/g%3E%3Cg transform=%22translate(58 16) rotate(-6)%22%3E%3Crect x=%224%22 y=%226%22 width=%2292%22 height=%22124%22 rx=%2210%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Crect width=%2292%22 height=%22124%22 rx=%2210%22 fill=%22%23fff%22/%3E%3Crect x=%2212%22 y=%2213%22 width=%2246%22 height=%227%22 rx=%223.5%22 fill=%22%23132A3A%22/%3E%3Crect x=%2212%22 y=%2228%22 width=%2268%22 height=%225%22 rx=%222.5%22 fill=%22%23C9D3D8%22/%3E%3Crect x=%2212%22 y=%2238%22 width=%2260%22 height=%225%22 rx=%222.5%22 fill=%22%23C9D3D8%22/%3E%3Crect x=%2212%22 y=%2248%22 width=%2266%22 height=%225%22 rx=%222.5%22 fill=%22%23C9D3D8%22/%3E%3Crect x=%2212%22 y=%2264%22 width=%2268%22 height=%2234%22 rx=%228%22 fill=%22%23FDE7F1%22 stroke=%22%23D6257F%22 stroke-width=%222%22/%3E%3Crect x=%2220%22 y=%2273%22 width=%2238%22 height=%225%22 rx=%222.5%22 fill=%22%23D6257F%22/%3E%3Crect x=%2220%22 y=%2283%22 width=%2226%22 height=%225%22 rx=%222.5%22 fill=%22%23EFA0C6%22/%3E%3C/g%3E%3C/svg%3E"); }
  #viewSettings > .topbar { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 250 132%22%3E%3Cg transform=%22translate(50 22)%22%3E%3Crect x=%224%22 y=%226%22 width=%22150%22 height=%22104%22 rx=%2216%22 fill=%22%23132A3A%22 opacity=%22.16%22/%3E%3Crect width=%22150%22 height=%22104%22 rx=%2216%22 fill=%22%23fff%22/%3E%3Crect x=%2218%22 y=%2224%22 width=%22114%22 height=%228%22 rx=%224%22 fill=%22%23E3E9EB%22/%3E%3Crect x=%2218%22 y=%2224%22 width=%2270%22 height=%228%22 rx=%224%22 fill=%22%23E8590C%22/%3E%3Ccircle cx=%2288%22 cy=%2228%22 r=%2211%22 fill=%22%23fff%22 stroke=%22%23E8590C%22 stroke-width=%225%22/%3E%3Crect x=%2218%22 y=%2250%22 width=%22114%22 height=%228%22 rx=%224%22 fill=%22%23E3E9EB%22/%3E%3Crect x=%2218%22 y=%2250%22 width=%2234%22 height=%228%22 rx=%224%22 fill=%22%232563EB%22/%3E%3Ccircle cx=%2252%22 cy=%2254%22 r=%2211%22 fill=%22%23fff%22 stroke=%22%232563EB%22 stroke-width=%225%22/%3E%3Crect x=%2218%22 y=%2276%22 width=%22114%22 height=%228%22 rx=%224%22 fill=%22%23E3E9EB%22/%3E%3Crect x=%2218%22 y=%2276%22 width=%2296%22 height=%228%22 rx=%224%22 fill=%22%230E9F6E%22/%3E%3Ccircle cx=%22114%22 cy=%2280%22 r=%2211%22 fill=%22%23fff%22 stroke=%22%230E9F6E%22 stroke-width=%225%22/%3E%3C/g%3E%3C/svg%3E"); }
  #viewDashboard > .topbar > h1, #viewServices > .topbar > h1, #viewOrders > .topbar > h1, #viewLeads > .topbar > h1, #viewSettings > .topbar > h1 { font-size: calc(31px * var(--md-ts, 1)) !important; line-height: 1.18; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
  #viewDashboard > .topbar > .topbar-date, #viewServices > .topbar > .topbar-date, #viewOrders > .topbar > .topbar-date, #viewLeads > .topbar > .topbar-date, #viewSettings > .topbar > .topbar-date { flex: 1 1 100%; margin: 0; font-family: var(--font-body); font-size: 13.5px; line-height: 1.45; color: var(--sign-ink); }
  #viewDashboard > .topbar > .page-refresh, #viewServices > .topbar > .page-refresh, #viewOrders > .topbar > .page-refresh, #viewLeads > .topbar > .page-refresh, #viewSettings > .topbar > .page-refresh { background: #fff; border-color: transparent; box-shadow: 0 2px 0 rgba(19,42,58,.14); }
  #viewDashboard > .topbar > .page-refresh:hover, #viewServices > .topbar > .page-refresh:hover, #viewOrders > .topbar > .page-refresh:hover, #viewLeads > .topbar > .page-refresh:hover, #viewSettings > .topbar > .page-refresh:hover { border-color: var(--ink); color: var(--ink); }
}
@media (min-width: 901px) and (max-width: 1080px) {
  #viewDashboard > .topbar, #viewServices > .topbar, #viewOrders > .topbar, #viewLeads > .topbar, #viewSettings > .topbar { min-height: 112px; padding-right: 220px; background-size: auto 104px; background-position: right 14px top 50%; }
}
/* on a phone the name of the page keeps its small place; it only takes the page's colour */
@media (max-width: 900px) {
  #viewDashboard > .topbar, #viewServices > .topbar, #viewOrders > .topbar, #viewLeads > .topbar, #viewSettings > .topbar { background: var(--sign); border-radius: 14px; padding: 9px 12px !important; }
  #viewDashboard > .topbar > .topbar-date, #viewServices > .topbar > .topbar-date, #viewOrders > .topbar > .topbar-date, #viewLeads > .topbar > .topbar-date, #viewSettings > .topbar > .topbar-date { color: var(--sign-ink) !important; }
  #viewDashboard > .topbar > .page-refresh, #viewServices > .topbar > .page-refresh, #viewOrders > .topbar > .page-refresh, #viewLeads > .topbar > .page-refresh, #viewSettings > .topbar > .page-refresh { background: #fff; border-color: transparent; }
}

/* ---- Dashboard: the people who offer services, each on a card of their own colour ---- */
#viewDashboard .service-grid { background: var(--tint); border: 1px solid var(--edge); border-radius: 16px; padding: 14px; gap: 12px; }
#viewDashboard .service-card { border-color: var(--edge); border-radius: 13px; padding: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; }
#viewDashboard .service-card:nth-child(5n+1) { --tone:#E8590C;--deep:#9A3A00;--tint:#FFF0E3;--edge:#F8CFAE;--glow:rgba(232,89,12,.22); }
#viewDashboard .service-card:nth-child(5n+2) { --tone:#0E9F6E;--deep:#05674A;--tint:#E2F7EC;--edge:#AEE5CB;--glow:rgba(14,159,110,.22); }
#viewDashboard .service-card:nth-child(5n+3) { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22); }
#viewDashboard .service-card:nth-child(5n+4) { --tone:#D6257F;--deep:#96124F;--tint:#FDE7F1;--edge:#F5BDD8;--glow:rgba(214,37,127,.22); }
#viewDashboard .service-card:nth-child(5n+5) { --tone:#6D3FD6;--deep:#4A22A6;--tint:#EEE8FD;--edge:#D0C0F6;--glow:rgba(109,63,214,.22); }
#viewDashboard .svc-prov-av { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--tone); color: #fff; font-size: 17px; transition: transform .15s; }
#viewDashboard .svc-group-head { gap: 12px; }
#viewDashboard .svc-prov-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; }
#viewDashboard .svc-group-list li { border-top-color: var(--edge); }
#viewDashboard .svc-group-list li b { color: var(--deep); }
#viewDashboard .service-card .service-card-btn { background: var(--tone); border-color: var(--tone); border-radius: 10px; box-shadow: 0 2px 0 rgba(19,42,58,.14); }
#viewDashboard .svc-search { border-radius: 12px; }
#viewDashboard .svc-search:focus-within { border-color: var(--tone); box-shadow: 0 0 0 3px var(--glow); }
#viewDashboard .loc-nudge, #viewDashboard .pay-safe { border-radius: 14px; }

/* ---- My services: what you offer, each on its own card; the left edge says how it stands ---- */
#viewServices > .card:not(#myListCard) { background: none; border: 0; padding: 0 4px; margin: -6px 0 12px; }
#viewServices #myListCard { background: var(--tint); border-color: var(--edge); border-radius: 16px; padding: 14px; }
#viewServices #myList > .menu-row { background: #fff; border: 1px solid var(--edge); border-radius: 13px; padding: 13px 14px; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
#viewServices #myList > .menu-row:last-child { margin-bottom: 0; }
#viewServices #myList > .menu-row:has(.badge-approved) { border-left: 5px solid #0E9F6E; }
#viewServices #myList > .menu-row:has(.badge-pending) { border-left: 5px solid #FFC83D; }
#viewServices #myList > .menu-row:has(.badge-rejected) { border-left: 5px solid #C1442D; }
#viewServices .menu-row-name { font-size: 14.5px; color: var(--ink); }
@media (max-width: 700px) { #viewServices #myList > .my-svc-row { padding: 12px !important; } }
#viewServices .badge-approved, #viewOrders .badge-approved { background: #E2F7EC; color: #05674A; }
#viewServices .badge-pending, #viewOrders .badge-pending { background: #FFF1CC; color: #6B4A00; }
#viewServices .badge-rejected, #viewOrders .badge-rejected { background: #FBEAE6; color: #A1301C; }

/* ---- Orders: the two lists as one switch; every order on a card ---- */
#viewOrders #ordersList > .card { border-color: var(--edge); border-radius: 13px; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
#viewOrders #tabReceived.btn-primary, #viewOrders #tabPlaced.btn-primary { background: var(--tone); border-color: var(--tone); }
@media (min-width: 901px) {
  #viewOrders > .toolbar { display: inline-flex; flex-wrap: nowrap; gap: 4px; background: #fff; border: 1px solid var(--edge); border-radius: 999px; padding: 4px; }
  #viewOrders #tabReceived, #viewOrders #tabPlaced { border-radius: 999px; padding: 8px 18px; }
  #viewOrders #tabReceived:not(.btn-primary), #viewOrders #tabPlaced:not(.btn-primary) { border-color: transparent; background: transparent; color: var(--deep); }
  #viewOrders #tabReceived:not(.btn-primary):hover, #viewOrders #tabPlaced:not(.btn-primary):hover { background: var(--tint); }
}

/* ---- Leads: the lists sent to you ---- */
#viewLeads .lead-grid { background: var(--tint); border: 1px solid var(--edge); border-radius: 16px; padding: 14px; }
#viewLeads .lead-box { border-color: var(--edge); border-radius: 13px; transition: border-color .15s, box-shadow .15s, transform .15s; }
#viewLeads .lead-box-meta b { display: inline-block; background: var(--tint); color: var(--deep); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
#viewLeads .lead-box .btn-primary { background: var(--tone); border-color: var(--tone); border-radius: 10px; box-shadow: 0 2px 0 rgba(19,42,58,.14); }

/* ---- Settings: each group under its own colour ---- */
#viewSettings > .card { border-radius: 16px; border-color: var(--edge); border-top: 5px solid var(--tone); }
#viewSettings > .card:nth-of-type(5n+2) { --tone:#0891B2;--deep:#0B5F75;--tint:#E0F5FA;--edge:#A9DDE9;--glow:rgba(8,145,178,.22); }
#viewSettings > .card:nth-of-type(5n+3) { --tone:#6D3FD6;--deep:#4A22A6;--tint:#EEE8FD;--edge:#D0C0F6;--glow:rgba(109,63,214,.22); }
#viewSettings > .card:nth-of-type(5n+4) { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22); }
#viewSettings > .card:nth-of-type(5n+5) { --tone:#0E9F6E;--deep:#05674A;--tint:#E2F7EC;--edge:#AEE5CB;--glow:rgba(14,159,110,.22); }
#viewSettings > .card:nth-of-type(5n+6) { --tone:#E8590C;--deep:#9A3A00;--tint:#FFF0E3;--edge:#F8CFAE;--glow:rgba(232,89,12,.22); }
#viewSettings > .card:nth-of-type(5n+7) { --tone:#D6257F;--deep:#96124F;--tint:#FDE7F1;--edge:#F5BDD8;--glow:rgba(214,37,127,.22); }
#viewSettings .card-head h3 { display: flex; align-items: center; gap: 8px; color: var(--deep); }
#viewSettings .card-head h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--tone); }

/* ---- the windows these pages open: a provider's services and a service's form in the Dashboard's colour,
        the form builder in the colour of My services ---- */
.modal.modal-svc { --tone:#2563EB;--deep:#1A3F9C;--tint:#E7EFFF;--edge:#BFD2FA;--glow:rgba(37,99,235,.22); }
#builderOverlay { --tone:#6D3FD6;--deep:#4A22A6;--tint:#EEE8FD;--edge:#D0C0F6;--glow:rgba(109,63,214,.22); }
.modal-svc .svc-head { background: var(--tint); border-color: var(--edge); border-top-color: var(--tone); border-radius: 14px; }
.modal-svc .svc-head .svc-prov-av { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--tone); color: #fff; font-size: 17px; }
.modal-svc .svc-head .svc-group-head { gap: 12px; }
.modal-svc .svc-count { background: #fff; border-color: var(--edge); color: var(--deep); }
.modal-svc .svc-row { border-color: var(--edge); border-radius: 13px; transition: border-color .15s, box-shadow .15s; }
.modal-svc .svc-row:focus-visible { border-color: var(--tone); box-shadow: 0 0 0 3px var(--glow); }
.modal-svc .svc-row .svc-adv, .modal-svc .svc-row-price { color: var(--deep); }
.modal-svc .svc-row-go { color: var(--tone); }
#builderOverlay .gform-card { border-color: var(--edge); border-top-color: var(--tone); border-radius: 14px; }

/* what answers the mouse is for devices that have one: on a touch screen a card would keep its glow after a tap */
@media (hover: hover) {
  #viewDashboard .service-card:hover { border-color: var(--tone); box-shadow: 0 10px 20px -10px var(--glow), 0 0 0 3px var(--glow); transform: translateY(-2px); }
  #viewDashboard .service-card:hover .svc-prov-av { transform: rotate(-7deg) scale(1.06); }
  #viewServices #myList > .menu-row:hover { border-color: var(--tone); box-shadow: 0 0 0 3px var(--glow); }
  #viewOrders #ordersList > .card:hover { border-color: var(--tone); box-shadow: 0 0 0 3px var(--glow); }
  #viewLeads .lead-box:hover { border-color: var(--tone); box-shadow: 0 10px 20px -10px var(--glow), 0 0 0 3px var(--glow); transform: translateY(-2px); }
  .modal-svc .svc-row:hover { border-color: var(--tone); box-shadow: 0 0 0 3px var(--glow); }
}

@media (prefers-reduced-motion: reduce) {
  #viewDashboard .service-card, #viewDashboard .svc-prov-av, #viewLeads .lead-box { transition: none; }
  #viewDashboard .service-card:hover, #viewLeads .lead-box:hover, #viewDashboard .service-card:hover .svc-prov-av { transform: none; }
}

/* ---- the sign-in page: the hand of papers from the PDF tools, and the five colours along the top of the card ---- */
.login-screen > .login-card { position: relative; overflow: hidden; }
.login-screen > .login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: linear-gradient(90deg, #E8590C 0 20%, #0E9F6E 20% 40%, #2563EB 40% 60%, #D6257F 60% 80%, #6D3FD6 80% 100%); }
@media (min-width: 601px) and (min-height: 620px) {
  .login-screen { position: relative; overflow: hidden; }
  .login-screen::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 438px; margin: -96px 0 0 -280px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 250%22%3E%3Cg transform=%22rotate(-34 160 300)%22%3E%3Crect x=%22112%22 y=%2260%22 width=%2296%22 height=%22130%22 rx=%2210%22 fill=%22%23E8590C%22/%3E%3Crect x=%22126%22 y=%2292%22 width=%2260%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22106%22 width=%2244%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22120%22 width=%2248%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3Cg transform=%22rotate(-17 160 300)%22%3E%3Crect x=%22112%22 y=%2260%22 width=%2296%22 height=%22130%22 rx=%2210%22 fill=%22%230E9F6E%22/%3E%3Crect x=%22126%22 y=%2292%22 width=%2256%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22106%22 width=%2266%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22120%22 width=%2244%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3Cg transform=%22rotate(0 160 300)%22%3E%3Crect x=%22112%22 y=%2260%22 width=%2296%22 height=%22130%22 rx=%2210%22 fill=%22%232563EB%22/%3E%3Crect x=%22126%22 y=%2292%22 width=%2264%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22106%22 width=%2248%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22120%22 width=%2252%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3Cg transform=%22rotate(17 160 300)%22%3E%3Crect x=%22112%22 y=%2260%22 width=%2296%22 height=%22130%22 rx=%2210%22 fill=%22%23D6257F%22/%3E%3Crect x=%22126%22 y=%2292%22 width=%2252%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22106%22 width=%2262%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22120%22 width=%2240%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3Cg transform=%22rotate(34 160 300)%22%3E%3Crect x=%22112%22 y=%2260%22 width=%2296%22 height=%22130%22 rx=%2210%22 fill=%22%236D3FD6%22/%3E%3Crect x=%22126%22 y=%2292%22 width=%2260%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22106%22 width=%2240%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3Crect x=%22126%22 y=%22120%22 width=%2248%22 height=%226%22 rx=%223%22 fill=%22%23fff%22 opacity=%22.6%22/%3E%3C/g%3E%3C/svg%3E") center top / contain no-repeat; pointer-events: none; }
}