/* cartesianecu.com/account/: "Usage and history" of the profile page (assets/account-activity.js), on top of site.css and
   account.css (their tokens: --panel, --line, --muted, --accent, --bad-text ...). Chart colours: the operations (orange =
   tuning, cloning, editing; blue = DTC analyses, original file downloads) and six computers, each theme its own. */
.acc-page{--pa-q:var(--brand-car);--pa-e:#5aa9e6;--pa-c0:#ff8a3d;--pa-c1:#5aa9e6;--pa-c2:#4bd08a;--pa-c3:#c490f0;--pa-c4:#f2c94c;--pa-c5:#f06595}
:root[data-theme="light"] .acc-page{--pa-e:#2f7fc1;--pa-c0:#e6761f;--pa-c1:#2f7fc1;--pa-c2:#1f9d63;--pa-c3:#8a55c7;--pa-c4:#b8860b;--pa-c5:#d6336c}

/* the line under today's limits: when they start again */
.pa-reset{margin:14px 0 0;font-size:14.5px;color:var(--text)}
.pa-reset.full{color:var(--bad-text);font-weight:600}

/* the chart card */
.pa-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 16px}
.pa-head-t{min-width:0;flex:1 1 260px}
.pa-card h2{font-size:18px;margin:0}
.pa-card .pa-sub{margin:6px 0 0}
.pa-card > h2 + .pa-sub{margin:6px 0 0}
/* no overflow:hidden on the switch: it would clip the buttons' focus ring; the end buttons round their own corners */
.pa-seg{display:inline-flex;flex:none;border:1px solid var(--line2);border-radius:10px;background:var(--panel)}
.pa-seg button{font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:0;border-radius:0;padding:7px 12px;cursor:pointer;transition:color .15s,background .15s}
.pa-seg button:first-child{border-radius:9px 0 0 9px}
.pa-seg button:last-child{border-radius:0 9px 9px 0}
.pa-seg button:focus-visible{position:relative;z-index:1}
@media (hover:hover){.pa-seg button:hover{color:var(--text)}}
.pa-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.pa-seg button:focus-visible,.pa-plot:focus-visible,.pa-more:focus-visible,.pa-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pa-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 18px}
.pa-total{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);min-width:0}
.pa-total dt{font-size:12.5px;font-weight:600;color:var(--muted)}
.pa-total dd{margin:2px 0 0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}

.pa-plot-wrap{position:relative;padding-left:36px}
.pa-y{position:absolute;left:0;width:30px;text-align:right;font-size:11.5px;line-height:1;color:var(--muted);transform:translateY(-50%);font-variant-numeric:tabular-nums}
.pa-y2{top:0}
.pa-y1{top:50%}
.pa-y0{top:100%}
.pa-plot{height:150px;border-radius:4px;cursor:crosshair;touch-action:pan-y}
.pa-svg{display:block;width:100%;height:100%;max-width:none;overflow:visible}
.pa-grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.pa-base{stroke:var(--line2);stroke-width:1}
.pa-sel{fill:var(--text);fill-opacity:.07}
/* the selected day's frame, drawn over the bars: 3:1 or more against the card (the tint behind them alone is not) */
.pa-selm{fill:none;stroke:var(--muted);stroke-width:1.5}
.pa-plot:focus-visible .pa-selm{stroke:var(--accent);stroke-width:2}
.pa-nd{fill:url(#paHatch)}
.pa-hatch{stroke:var(--muted);stroke-width:1.5}
.pa-bar.pa-q{fill:var(--pa-q)}
.pa-bar.pa-e{fill:var(--pa-e)}
.pa-bar.pa-c0{fill:var(--pa-c0)}
.pa-bar.pa-c1{fill:var(--pa-c1)}
.pa-bar.pa-c2{fill:var(--pa-c2)}
.pa-bar.pa-c3{fill:var(--pa-c3)}
.pa-bar.pa-c4{fill:var(--pa-c4)}
.pa-bar.pa-c5{fill:var(--pa-c5)}
.pa-x{display:flex;justify-content:space-between;gap:8px;margin:8px 0 0 36px;font-size:12px;color:var(--muted)}
.pa-read{margin:10px 0 0;min-height:1.6em;font-size:14px;overflow-wrap:anywhere}
.pa-legend{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted)}
.pa-legend li{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow-wrap:anywhere}
.pa-legend .acc-tag{margin-left:0}
.pa-sw{width:12px;height:12px;flex:none;border-radius:3px}
.pa-sw.pa-q{background:var(--pa-q)}
.pa-sw.pa-e{background:var(--pa-e)}
.pa-sw.pa-c0{background:var(--pa-c0)}
.pa-sw.pa-c1{background:var(--pa-c1)}
.pa-sw.pa-c2{background:var(--pa-c2)}
.pa-sw.pa-c3{background:var(--pa-c3)}
.pa-sw.pa-c4{background:var(--pa-c4)}
.pa-sw.pa-c5{background:var(--pa-c5)}
.pa-sw.pa-nd{border:1px solid var(--muted);background:repeating-linear-gradient(45deg,var(--muted) 0 1.5px,transparent 1.5px 5px)}
.pa-card .acc-hint{margin:10px 0 0}

/* the list card */
.pa-card .pa-zone{margin:8px 0 12px}
.pa-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,2fr) minmax(0,1.4fr);gap:4px 14px;align-items:baseline}
.pa-cols{padding:0 12px 8px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted)}
.pa-rows{list-style:none;margin:0;padding:0}
.pa-rows .pa-row{padding:11px 12px;border-bottom:1px solid var(--line)}
.pa-rows .pa-row:last-child{border-bottom:0}
.pa-rows .pa-when{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.pa-rows .pa-op{font-weight:600;overflow-wrap:anywhere}
.pa-rows .pa-op::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--pa-q);vertical-align:1px}
.pa-rows .pa-op[data-op="dtc"]::before,.pa-rows .pa-op[data-op="ori"]::before{background:var(--pa-e)}
.pa-rows .pa-op[data-op="other"]::before{background:var(--line2)}
.pa-veh b{display:block;font-weight:600;overflow-wrap:anywhere}
.pa-ecu{display:block;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.pa-rows .pa-pc{font-size:14px;overflow-wrap:anywhere}
.pa-rows .pa-pc .acc-tag{margin-left:6px;color:var(--muted);background:color-mix(in srgb,var(--text) 7%,transparent)}   /* quieter than the Computers card's: it repeats on many rows */
.pa-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.pa-foot .pa-msg{margin:0}
.pa-msg.bad{color:var(--bad-text)}

@media (max-width:760px){
  .pa-plot{height:130px}
  .pa-cols{display:none}
  /* the operation at most half the row: a long one ("Download de ficheiro original") wraps instead of running over the date */
  .pa-rows .pa-row{grid-template-columns:minmax(0,1fr) fit-content(50%);padding:12px 2px}
  .pa-rows .pa-when{grid-column:1;grid-row:1}
  .pa-rows .pa-op{grid-column:2;grid-row:1;text-align:right}
  .pa-rows .pa-veh,.pa-rows .pa-pc{grid-column:1 / -1}
}
@media (max-width:420px){
  .pa-totals{gap:8px}
  .pa-total{padding:10px 12px}
  .pa-total dd{font-size:18px}
  .pa-seg button{padding:7px 10px}
}
/* the narrowest phones: each total on its own line, the label beside its number, so "12 ficheiros" never breaks apart */
@media (max-width:360px){
  .pa-totals{grid-template-columns:minmax(0,1fr)}
  .pa-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .pa-total dt{flex:1 1 auto;min-width:0;letter-spacing:.03em;overflow-wrap:anywhere}
  .pa-total dd{flex:none;margin:0;font-size:17px;white-space:nowrap}
}