/* 1.22: insurance, contracts and providers as a rental's Services & billing (contracts.js) */
.ctw{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:8px}
.ct-list{display:flex;flex-direction:column;gap:6px;flex:1 1 250px}
.ct-it{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;color:inherit;font:inherit;cursor:pointer}
.ct-it:hover{border-color:var(--muted)}
.ct-it.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--accent-soft)}
.ct-it.off{opacity:.65}
.ct-ico{--kc:var(--k8);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--kc);color:var(--k-fg,#fff);flex:none}
.ct-ico.big{width:44px;height:44px;border-radius:12px}
.ct-ico svg{width:18px;height:18px}.ct-ico.big svg{width:22px;height:22px}
.ct-ico.k1{--kc:var(--k1)}.ct-ico.k2{--kc:var(--k2)}.ct-ico.k3{--kc:var(--k3)}.ct-ico.k4{--kc:var(--k4)}
.ct-ico.k5{--kc:var(--k5)}.ct-ico.k6{--kc:var(--k6)}.ct-ico.k7{--kc:var(--k7)}.ct-ico.k8{--kc:var(--k8)}
.ct-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ct-t b{font-weight:650;overflow-wrap:anywhere}
.ct-t small{color:var(--muted);font-size:.8rem;overflow-wrap:anywhere}
.ct-t h2{margin:0;font-size:1.2rem}
.ct-pills{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.ctp{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.ctp.warn{background:var(--warn-soft);color:var(--warn)}
.ct-add{display:flex;align-items:center;gap:6px;justify-content:center;border:1px dashed var(--line);background:none;border-radius:12px;padding:10px;color:var(--muted);font:inherit;cursor:pointer}
.ct-add:hover{color:var(--fg);border-color:var(--muted)}
.ct-det{min-width:0;flex:999 1 440px}
.ct-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.ct-dh{display:flex;gap:12px;align-items:center}
.ct-acts{display:flex;gap:6px;align-items:center;margin-left:auto}
.ct-tabs{align-self:flex-start}
.ct-kv{margin:0}
.ct-box h3.sub{margin:4px 0 0}
.ct-prices{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ctc{font-size:.8rem;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.ctc b{color:var(--fg)}
.ctc.coming{background:var(--info-soft);color:var(--info)}
.ct-mt{width:100%;border-collapse:collapse;font-size:.88rem}
.ct-mt th{text-align:left;font-size:.74rem;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}
.ct-mt td{padding:6px;border-bottom:1px solid var(--line);vertical-align:middle}
.ct-mt tr:last-child td{border-bottom:0}
.ct-amt{display:flex;flex-direction:column;align-items:flex-start;border:0;background:none;padding:2px 4px;margin:-2px -4px;border-radius:8px;font:inherit;color:inherit;cursor:pointer;text-align:left}
.ct-amt:hover{background:var(--surface-2)}
.ct-amt small{color:var(--muted);font-size:.78rem}
.ctf{display:inline-flex;align-items:center;gap:3px;font-size:.78rem;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--fg);text-decoration:none;margin:1px 3px 1px 0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctf.add{background:none;border:1px dashed var(--line);color:var(--muted);cursor:pointer}
.ctf.add:hover{color:var(--fg)}
.insform .span2{grid-column:1/-1}
.cf-kinds .chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* 1.22: an asset's photos and its accidents & claims (assetlog.js) */
.al-albums{margin:4px 0 10px}
.al-albums .chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.al-albums small{opacity:.7;margin-left:3px}
.al-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.al-grid.small{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.al-ph{position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--surface-2);aspect-ratio:4/3}
.al-ph.cover{box-shadow:0 0 0 2px var(--accent)}
.al-img{display:block;width:100%;height:100%;border:0;padding:0;background:none;cursor:zoom-in}
.al-img img{width:100%;height:100%;object-fit:cover;display:block}
.al-star{position:absolute;top:6px;left:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:16px;line-height:28px;text-align:center;cursor:pointer}
.al-star.on{background:var(--accent);color:var(--accent-fg);cursor:default}
.al-menu{position:absolute;top:4px;right:4px}
.al-menu summary{background:rgba(255,255,255,.85);color:#222}
.al-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:3px 8px;font-size:.72rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
dialog.al-dialog{background:#111;color:#eee;padding:10px;max-width:min(96vw,1200px)}
.al-view{display:grid;gap:8px;justify-items:center;position:relative}
.al-big{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px}
.al-x{position:absolute;top:0;right:0;color:#eee}
.al-nav{display:flex;gap:12px;align-items:center}
.al-nav .btn{color:#eee;font-size:1.4rem}
.al-inc .date{flex:none}
.al-status{flex-wrap:wrap;align-self:flex-start}
.al-notes{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line);display:grid;gap:10px}
.al-notes li{position:relative}
.al-notes li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.al-notes li.sys::before{background:var(--muted)}
.al-notes li.sys .pre{color:var(--muted);font-size:.86rem}
.ctf.na{background:none;border:0;color:var(--muted);font-size:.72rem;cursor:pointer;text-decoration:underline dotted}
.ctf.na:hover{color:var(--fg)}
.ctf.gone{background:none;border:1px solid var(--line);color:var(--muted);font-style:italic}
.ctx{border:0;background:none;color:inherit;cursor:pointer;padding:0 0 0 4px;font-size:.9rem;line-height:1}

/* 1.23: payslips of an employment */
.psl .tw{margin-top:8px}.psl-tax{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--surface-2);margin:6px 0 10px}
.psl-tax .seg{align-self:flex-start}
/* 1.23: tasks */
.tk-card{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:inherit;text-decoration:none;margin-bottom:8px}
.tk-card:hover{border-color:var(--muted)}.tk-card.dim{opacity:.7}
.tk-card .ico,.tk-gh .ico{--kc:var(--k8);width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--kc);color:#fff;flex:none}
.tk-gh .ico{width:34px;height:34px;border-radius:11px}
.tk-card .ico.k1,.tk-gh .ico.k1{--kc:var(--k1)}.tk-card .ico.k2,.tk-gh .ico.k2{--kc:var(--k2)}.tk-card .ico.k3,.tk-gh .ico.k3{--kc:var(--k3)}.tk-card .ico.k4,.tk-gh .ico.k4{--kc:var(--k4)}
.tk-card .ico.k5,.tk-gh .ico.k5{--kc:var(--k5)}.tk-card .ico.k6,.tk-gh .ico.k6{--kc:var(--k6)}.tk-card .ico.k7,.tk-gh .ico.k7{--kc:var(--k7)}.tk-card .ico.k8,.tk-gh .ico.k8{--kc:var(--k8)}
.tk-card .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.tk-card b{font-size:1rem}.tk-card small{color:var(--muted)}
.tk-bar{display:block;height:7px;border-radius:5px;background:var(--line);max-width:420px;overflow:hidden;margin-top:4px}.tk-bar i{display:block;height:100%;background:var(--ok,#2F7D52)}
.tk-grp{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.tk-grp span{font-size:.75rem;padding:2px 9px;border-radius:999px;background:var(--surface-2)}
.tk-grp span.w{background:var(--warn-soft);color:var(--warn)}.tk-grp span.ok{background:var(--ok-soft,#E3F2E8);color:var(--ok,#1F6B43)}
.warn-t{color:var(--warn)}
.tk-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:12px;align-items:start}
.tk-g{padding:12px 16px}
.tk-gh{display:flex;align-items:center;gap:10px;padding-bottom:6px}.tk-gh small{color:var(--muted)}
.tk-line{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.7fr) auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.tk-line .n b{display:block;font-weight:600;overflow-wrap:anywhere}.tk-line .n small{display:block;color:var(--muted);font-size:.78rem}
.tk-line .p{display:flex;flex-wrap:wrap;gap:6px 12px}.tk-line .pc{display:flex;flex-direction:column;gap:2px;min-width:0}.tk-line .pc>small{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tk-line .s{display:flex;align-items:center;gap:4px}
.tk-tax{display:inline-block;margin-top:3px;font-size:.7rem;font-weight:650;padding:1px 8px;border-radius:999px;background:var(--info-soft);color:var(--info)}
.tk-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.tk-sum>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 16px;display:grid;gap:2px}.tk-sum b{font-size:1.4rem}.tk-sum small{color:var(--muted)}
.tk-rv tr.ok td{opacity:.65}.tk-rv td.r,.tk-rv th.r{text-align:right}
@media (max-width:700px){.tk-line{grid-template-columns:1fr}.tk-line .s{justify-content:flex-start}}
/* 1.23.1: an extra payment of a month, under its month */
.ct-xrow td{background:var(--surface-2);border-bottom-style:dashed}
.ct-xrow td:first-child{padding-left:18px}
.ct-addx{display:block;margin-top:2px;font-size:.76rem}
.tk-xline{margin-left:22px;border-left:2px dashed var(--line);padding-left:10px}
/* 1.27: months paid together in one payment, notes on a month */
.ct-mt tr.ct-tog td{background:color-mix(in srgb,var(--ok) 8%,transparent)}
.ct-mt tr.ct-tog td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.ct-mt tr.ct-tline td,.ct-mt tr.ct-nline td{font-size:.8rem;padding:3px 6px 8px 12px;color:var(--muted)}
.ct-mt tr.ct-tline td{background:color-mix(in srgb,var(--ok) 8%,transparent);box-shadow:inset 3px 0 0 var(--ok);color:var(--fg)}
.ct-mt tr.ct-tline .ic,.ct-mt tr.ct-nline .ic{width:13px;height:13px;vertical-align:-2px}
.ctf.tog{background:color-mix(in srgb,var(--ok) 16%,transparent);gap:4px;max-width:220px}
.ctf.tog a{color:inherit;text-decoration:none;display:inline-flex;gap:3px;align-items:center}
.ct-mpick{display:flex;flex-direction:column;gap:6px}

/* notes wrap to the table's width and a month with a note is tinted, with its note line */
.ct-mt tr.ct-tline td,.ct-mt tr.ct-nline td{white-space:normal;overflow-wrap:anywhere}
.ct-notetxt{display:block;margin:3px 0 2px;font-style:italic;color:var(--fg);line-height:1.45}.ct-notetxt.in{display:inline}
.ct-mt tr.noted td{background:color-mix(in srgb,#D69E2E 11%,var(--surface))}
.ct-mt tr.noted td:first-child{box-shadow:inset 3px 0 0 #D69E2E}
.ct-mt tr.ct-tog.noted td:first-child,.ct-mt tr.ct-tline.noted td{box-shadow:inset 3px 0 0 var(--ok),inset 6px 0 0 #D69E2E}

/* 1.34: the same parts as a rental's Services & billing: list in one card, head with chips, tabs on a grey track,
   a table of months with ⋯ per month, prices as a list */
.ct-list{background:var(--surface);border-radius:20px;padding:8px;gap:2px;box-shadow:var(--shadow,0 1px 2px rgba(0,0,0,.05));border:1px solid var(--line)}
.ct-it{border:0;border-radius:14px;background:none;padding:10px}
.ct-it:hover{background:var(--surface-2)}
.ct-it.on{background:var(--accent-soft);box-shadow:none}
.ct-it.on .ct-t b{color:var(--accent)}
.ct-add{margin-top:4px}
.ct-box{border-radius:20px;padding:20px 22px;gap:14px}
.ct-dh{flex-wrap:wrap}
.ct-dh .ct-t{min-width:180px}
.ct-chips{display:flex;gap:6px;flex-wrap:wrap}
.ct-chips:empty{display:none}
.ct-acts{margin-left:0}
.ct-track{display:flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;background:var(--surface-2);width:fit-content;max-width:100%;box-sizing:border-box}
.ct-track button{height:36px;padding:0 15px;border:0;border-radius:999px;background:none;font:inherit;font-size:.88rem;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.ct-track button:hover{color:var(--fg)}
.ct-track button[aria-selected="true"]{background:var(--surface);color:var(--fg);font-weight:650;box-shadow:0 1px 2px rgba(10,25,30,.08),0 4px 12px rgba(10,25,30,.1)}
.ct-track .n{font-size:.7rem;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--warn-soft);color:var(--warn)}
@media (max-width:600px){.ct-track{flex-wrap:nowrap;overflow-x:auto;border-radius:20px;width:100%}}
.ct-prog{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.9rem}
.ct-pbar,.ct-prbar{display:block;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ct-pbar{width:160px;flex:none}
.ct-pbar i,.ct-prbar i{display:block;height:100%;border-radius:999px;background:var(--ok)}
.ct-mt td{padding:10px 6px;border-bottom:0;border-top:1px solid var(--line)}
.ct-mt th.r,.ct-mt td.r{text-align:right}
.ct-mt td small{display:block;color:var(--muted);font-size:.76rem}
.ct-mt tr.ct-y td{border-top:0;padding:14px 6px 4px;font-size:.75rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.ct-mt td.ct-am{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-mt td.ct-am .ct-amt{font-weight:600}
.ct-mt td.ct-m{width:40px;text-align:right}
.ct-cell{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ct-mt .ctf{padding:5px 10px;border-radius:10px;font-size:.8rem;max-width:210px}
.ct-mt .ctf.add{border:1.5px dashed var(--line)}
.ct-mt .ctf.add.more{padding:5px 9px}
.ct-mt .ctf.add:hover{border-color:var(--accent);color:var(--accent)}
.ct-mt tr.ct-tog td{background:none}
.ct-mt tr.ct-tog td:first-child{box-shadow:none}
.ct-mt tr.ct-nline td,.ct-mt tr.ct-tline td{border-top:0;padding:0 6px 10px;background:none;box-shadow:none}
.ct-note{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:7px 12px;border-radius:12px;background:color-mix(in srgb,#D69E2E 12%,var(--surface));font-size:.82rem;color:var(--fg)}
.ct-note b{color:var(--warn)}
.ct-rowm{position:relative;display:inline-block}
.ct-rowm > summary{list-style:none;cursor:pointer;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.ct-rowm > summary::-webkit-details-marker{display:none}
.ct-rowm > summary:hover,.ct-rowm[open] > summary{background:var(--surface-2);color:var(--fg)}
.ct-rowm > summary .ic{width:16px;height:16px}
.ct-rowm .menu-pop{min-width:240px}
.ct-start{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--surface-2)}
.ct-sec{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ct-sec h3{margin:0;font-size:1rem}
.ct-sec .grow{flex:1}
.ct-prl{display:flex;flex-direction:column}
.ct-pr{display:grid;grid-template-columns:minmax(120px,1.3fr) 96px 52px minmax(50px,1fr) 70px 28px;gap:12px;align-items:center;padding:10px 4px;border-top:1px solid var(--line);font-size:.9rem}
.ct-pr .ct-prbar i{background:color-mix(in srgb,var(--muted) 40%,transparent)}
.ct-pr.cur b{color:var(--accent)}
.ct-pr.cur .ct-prbar i{background:var(--accent)}
@media (max-width:600px){.ct-pr{grid-template-columns:minmax(0,1fr) auto auto 28px}.ct-pr .ct-prbar,.ct-pr > span:nth-child(5){display:none}}
/* on a phone each month is a card */
@media (max-width:600px){
  .ct-mt,.ct-mt tbody,.ct-mt td{display:block;width:auto}
  .ct-mt tr:first-child{display:none}
  .ct-mt tr{display:block}
  .ct-mt tr:not(.ct-y):not(.ct-nline):not(.ct-tline):not(:first-child){display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 10px;align-items:center;padding:12px 14px;margin:0 0 8px;border-radius:16px;border:1px solid var(--line)}
  .ct-mt tr td{border-top:0;padding:0}
  .ct-mt tr > td:first-child{grid-column:1;grid-row:1}
  .ct-mt td.ct-am{grid-column:2;grid-row:1}
  .ct-mt td.ct-m{grid-column:3;grid-row:1;width:auto}
  .ct-mt td.ct-c,.ct-mt td.ct-st{grid-column:1/-1}
  .ct-mt td.ct-c::before{content:attr(data-l);display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
  .ct-mt tr.ct-y td{padding:10px 2px 6px}
}
/* 1.34.1: each one its own card again, the picked one with a petrol border; the price that was never paid */
.ct-list{background:none;border:0;box-shadow:none;padding:0;gap:10px}
.ct-it{background:var(--surface);border:2px solid transparent;border-radius:16px;padding:12px;box-shadow:var(--shadow,0 1px 2px rgba(0,0,0,.06))}
.ct-it:hover{background:var(--surface);border-color:var(--line)}
.ct-it.on{background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-color:var(--accent)}
.ct-pr.dead{background:color-mix(in srgb,#D69E2E 9%,var(--surface));border-radius:12px;border-top-color:transparent;color:var(--muted)}
.ct-pr.dead b{text-decoration:line-through;color:var(--muted);font-weight:600}
.ct-pr.dead .ct-prbar i{background:var(--line)}
.ct-unused{display:block;font-size:.76rem;color:var(--warn)}