/* AxioraX soft mint inside pages (21 Oct 2026): axm-work. Scoped to its own pages only: My Progress (.v-progress), Task Boards
   (.v-boards), a board (.v-board), a task (.v-task), My work (.v-mywork) and a shared task (.v-sharedtask), each drawn with
   the class axm-v (js/progress.js, js/taskboards.js). The card system itself is css/axcards.css.
   Light mode only. Phone first; a computer (html.ax-desk) gets wider grids. Logical sides, so Arabic reads right to left. */

/* shared: white pills for filters, the white card button */
.view.axm-v .axwk-skel{height:220px;margin-top:16px;border-radius:26px}
.view.axm-v .axwk-hero{margin-top:16px}
.view.axm-v .axwk-hbtn{display:flex;margin-top:14px}
.view.axm-v .axwk-hbtn .axm-btn{height:38px;padding:0 17px;border-radius:19px;font-size:13.5px;gap:7px}
.view.axm-v .axwk-hp .axwk-pl{max-width:100%;overflow:hidden;cursor:pointer}
.view.axm-v .axwk-hp .axwk-pl>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view.axm-v .axwk-hp .axwk-pl svg{flex:none}
.view.axm-v .axwk-tn{display:inline-flex;align-items:center;gap:3px;color:#0C2418}
.view.axm-v .axwk-tn.good{color:var(--green)}
.view.axm-v .axwk-tn.bad{color:var(--gold-ink)}
.view.axm-v .axwk-tn.same{color:#4E6A5A}
.view.axm-v .axwk-tn svg{display:block}
/* a computer only: a small bar chart beside the numbers, the newest bar in gold */
.view.axm-v .axwk-hist{display:none}
.axwk-hist-t{display:block;font-size:12px;color:#4E6A5A;text-align:end;margin-bottom:8px}
.axwk-hist-b{display:flex;justify-content:flex-end;align-items:stretch;gap:14px;height:112px}
.axwk-hist-b>span{width:22px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}
.axwk-hist-b em{font-style:normal;font-size:11.5px;line-height:14px;font-weight:700;color:#2F4A3B}
.axwk-hist-b b{display:block;width:100%;flex:none;border-radius:7px;background:rgba(19,83,51,.20)}
.axwk-hist-b b.now{background:linear-gradient(#E4BE3F,#C9A227)}
.axwk-hist-l{display:flex;justify-content:flex-end;gap:14px;margin-top:7px;font-size:11.5px;color:#4E6A5A}
.axwk-hist-l span{width:22px;text-align:center}
.axwk-hist-b b.dot{height:6px;width:6px;border-radius:50%;background:rgba(19,83,51,.26)}

/* My Progress (js/progress.js) */
.view.v-progress.axm-v .axwk-flt{margin-top:16px;padding:2px 1px 4px}
.view.v-progress.axm-v .axwk-flt .chip{height:38px;border-radius:19px;background:#fff;color:#2A2A2A;font-weight:600;
  box-shadow:0 1px 2px rgba(12,12,12,.04),inset 0 0 0 1px #E4E8E3}
.view.v-progress.axm-v .axwk-flt .chip.c-green{background:var(--green);color:#fff;box-shadow:none}
/* Compare my results and Manage results: two white tiles, the icon over the words, so the words always fit a phone */
.view.v-progress.axm-v .axwk-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:14px;gap:10px}
.view.v-progress.axm-v .axwk-tools .bs{flex-direction:column;height:auto;min-height:80px;border-radius:20px;padding:12px 8px;gap:7px;background:#fff;color:var(--ink);
  font-size:14.5px;line-height:18px;font-weight:600;white-space:normal;border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 10px 24px -16px rgba(19,83,51,.22)}
.view.v-progress.axm-v .axwk-tools .bs>span:last-child{max-width:100%;text-align:center}
.view.v-progress.axm-v .axwk-tools .bs:active{transform:scale(.98)}
.view.v-progress.axm-v .axwk-bi{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.view.v-progress.axm-v .axwk-bi svg{width:17px;height:17px}
/* the results, each a white card: the test, its score, a line of the score, then the date and the change */
.view.v-progress.axm-v .pcards{margin-top:0;gap:12px}
.view.v-progress.axm-v .pcard{grid-template-columns:36px minmax(0,1fr) auto;align-items:start;column-gap:12px;row-gap:12px;padding:15px;border-radius:22px;
  background:#fff;border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.v-progress.axm-v .pcard:active{background:#fff;transform:scale(.985)}
.view.v-progress.axm-v .pcard .pi{width:36px;height:36px;border-radius:12px}
.view.v-progress.axm-v .pcard .pt{padding-top:1px}
.view.v-progress.axm-v .pcard .pt b{font-size:16px;line-height:21px;font-weight:700;letter-spacing:-.005em}
.view.v-progress.axm-v .pcard .pt>span{font-size:13px;line-height:18px;margin-top:2px}
.view.v-progress.axm-v .pcard .pr{height:36px;align-items:center}
.view.v-progress.axm-v .pcard .pscore{font-size:25px;line-height:28px;letter-spacing:-.03em}
.view.v-progress.axm-v .pcard .pscore i{font-size:12px;font-weight:500;color:var(--sub);letter-spacing:0}
.view.v-progress.axm-v .axwk-sb{grid-column:1/-1;display:block;height:6px;border-radius:4px;background:#EEF1EE;overflow:hidden}
.view.v-progress.axm-v .axwk-sb i{display:block;height:100%;border-radius:4px;background:var(--green)}
.view.v-progress.axm-v .axwk-sb.gold i{background:linear-gradient(90deg,#E4BE3F,#C9A227)}
[dir=rtl] .view.v-progress.axm-v .axwk-sb.gold i{background:linear-gradient(270deg,#E4BE3F,#C9A227)}
.view.v-progress.axm-v .pcard .pf{font-size:12.5px;line-height:18px;color:var(--ph);min-height:26px}
.view.v-progress.axm-v .ptrend{height:26px;border-radius:13px;padding:0 10px;font-size:12px;gap:4px}
.view.v-progress.axm-v .ptrend svg{width:14px;height:14px}
.view.v-progress.axm-v .ptrend.c-amber{background:var(--gold-soft);color:var(--gold-ink)}
.view.v-progress.axm-v .ptrend.c-grey{background:#F1F2F1;color:var(--sub)}
.view.v-progress.axm-v .ptrend.c-gold{background:#fff;color:var(--gold-ink);box-shadow:inset 0 0 0 1px #EADFAF}
.view.v-progress.axm-v .note{margin-top:14px}

/* a narrow phone: the two buttons keep their words on one line */
@media (max-width:374px){
  .view.v-progress.axm-v .axwk-tools .bs{font-size:13.5px;padding:12px 6px}
}
@media (min-width:900px){
  .view.axm-v .axwk-hist{display:block;width:240px;flex:none;align-self:center}
  .view.v-progress.axm-v .axwk-flt{max-width:560px}
  .view.v-progress.axm-v .axwk-tools{max-width:560px}
  .view.v-progress.axm-v .axwk-tools .bs{flex-direction:row;min-height:56px;padding:0 16px;gap:10px}
  .view.v-progress.axm-v .pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .view.v-progress.axm-v .note{max-width:none}
}

/* Task Boards (js/taskboards.js) */
.view.v-boards.axm-v .axm-chip.red{background:var(--red-soft);color:var(--red)}
.view.v-boards.axm-v .axwk-hst b{white-space:nowrap}
.view.v-boards.axm-v .axwk-hp{margin-top:14px}
/* My work: three white cards, the number and its icon, then its name */
.axwk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.axwk-tile{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:13px 12px 13px;border-radius:20px;text-align:start;color:var(--ink);background:#fff;
  border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -16px rgba(19,83,51,.18);transition:transform .15s var(--ease)}
.axwk-tile:active{transform:scale(.97)}
.axwk-th{display:flex;align-items:center;justify-content:space-between;gap:6px}
.axwk-th b{font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.axwk-tile.over.on .axwk-th b{color:var(--red)}
.axwk-th .axm-chip{width:32px;height:32px;border-radius:11px}
.axwk-tl{font-size:13px;line-height:17px;font-weight:600;color:var(--sub);margin-top:8px}
/* the boards: white cards, the tasks by status as one line of colours */
.view.v-boards.axm-v .axwk-bd{font:inherit;width:100%}
.view.v-boards.axm-v .axwk-bd .axm-wt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view.v-boards.axm-v .axwk-bd .axm-wn b i{font-style:normal;font-size:14px;font-weight:600;color:var(--sub);margin-inline-start:1px;letter-spacing:0}
.axwk-sl{display:flex;height:8px;margin-top:14px;border-radius:5px;background:#EEF1EE;overflow:hidden}
.axwk-sl i{display:block;height:100%;flex:none}
.axwk-sl i+i{border-inline-start:2px solid #fff}
.axwk-s-done{background:var(--green)}
.axwk-s-work{background:var(--gold)}
.axwk-s-stuck{background:var(--red)}
.axwk-s-todo{background:#CDD3CE}
.axwk-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:14px 4px 0;font-size:12.5px;line-height:16px;font-weight:500;color:var(--sub)}
.axwk-key span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.axwk-key i{display:block;width:10px;height:10px;border-radius:50%}
/* the latest updates: one white card of lines */
.axwk-log{background:#fff;border:1px solid #ECEEEA;border-radius:22px;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16);padding:3px 0}
.axwk-li{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px}
.axwk-li+.axwk-li{box-shadow:inset 0 1px 0 #F0F1EF}
.axwk-ld{flex:none;width:32px;height:32px;border-radius:11px;background:var(--gold-soft);display:grid;place-items:center}
.axwk-ld::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.axwk-lt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.axwk-lt b{font-size:14.5px;line-height:20px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.axwk-lt small{font-size:12.5px;line-height:17px;color:var(--ph);margin-top:1px}

/* every Task Boards page: white cards and pills on the soft ground */
.view.v-boards.axm-v .tk-new,.view.v-board.axm-v .tk-new,.view.v-mywork.axm-v .tk-new,.view.v-task.axm-v .tk-new,.view.v-sharedtask.axm-v .tk-new{background:#fff;border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 10px 24px -16px rgba(19,83,51,.20);margin-top:14px}
.view.v-boards.axm-v .tk-card,.view.v-board.axm-v .tk-card,.view.v-mywork.axm-v .tk-card{background:#fff;border-radius:18px;box-shadow:0 0 0 1px #ECEEEA,0 10px 24px -16px rgba(19,83,51,.20)}
.view.v-boards.axm-v .tk-card:active,.view.v-board.axm-v .tk-card:active,.view.v-mywork.axm-v .tk-card:active{background:#FAFBFA}
.view.v-boards.axm-v .tk-shl .tk-card,.view.v-board.axm-v .tk-shl .tk-card,.view.v-mywork.axm-v .tk-shl .tk-card{box-shadow:0 0 0 1.5px #EDE6C6,0 10px 24px -16px rgba(167,148,33,.25)}
.view.v-boards.axm-v .tk-card .tk-av,.view.v-board.axm-v .tk-card .tk-av,.view.v-mywork.axm-v .tk-card .tk-av{box-shadow:0 0 0 2px #fff}
.view.v-boards.axm-v .tk-card .tk-av.me,.view.v-board.axm-v .tk-card .tk-av.me,.view.v-mywork.axm-v .tk-card .tk-av.me{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #E4BE3F}
.view.v-boards.axm-v .tk-card .tk-av.axm,.view.v-board.axm-v .tk-card .tk-av.axm,.view.v-mywork.axm-v .tk-card .tk-av.axm{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--gold)}
.view.v-boards.axm-v .tk-mw,.view.v-board.axm-v .tk-mw,.view.v-mywork.axm-v .tk-mw{gap:10px}

@media (min-width:900px){
  .view.v-boards.axm-v .axwk-tiles{gap:18px}
  .axwk-tile{padding:16px 18px}
  .view.v-boards.axm-v .tk-new{max-width:360px;margin-inline:auto}
  .view.v-boards.axm-v .tk-shl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .view.v-boards.axm-v .axwk-bds .axm-card.w{grid-column:auto}
}

/* a board (List, Kanban, Gantt, Files) */
.view.v-board.axm-v .tk-views{margin-top:16px!important;background:#fff;border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 10px 24px -16px rgba(19,83,51,.20)}
.view.v-board.axm-v .tk-views button.on{background:var(--green-soft);color:var(--green);box-shadow:none}
.view.v-board.axm-v .tk-flt button,.view.v-mywork.axm-v .tk-flt button{box-shadow:0 1px 2px rgba(12,12,12,.04),inset 0 0 0 1px #E4E8E3}
.view.v-board.axm-v .tk-flt button.on,.view.v-mywork.axm-v .tk-flt button.on{box-shadow:none}
.view.v-board.axm-v .tk-gt em{background:#fff;box-shadow:inset 0 0 0 1px #E4E8E3}
.view.v-board.axm-v .tk-gm:active{background:#EDF0EC}
.view.v-board.axm-v .tk-pbar{background:#E4E8E3}
.view.v-board.axm-v .tk-add{background:rgba(255,255,255,.55);border-color:#E1E5E0}
.view.v-board.axm-v .tk-add:active{background:#fff}
.view.v-board.axm-v .tk-col{background:#EDF0EC;box-shadow:inset 0 0 0 1px #E3E7E2}
.view.v-board.axm-v .tk-col .tk-add{background:rgba(255,255,255,.7)}
.view.v-board.axm-v .tk-gn{border-radius:22px;border:1px solid #ECEEEA;margin-left:0;margin-right:0;overflow:hidden;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.v-board.axm-v .tk-gl{border-start-start-radius:22px;border-end-start-radius:22px}

/* a task, a shared task: the fields, subitems, notes and updates on white cards */
.view.v-task.axm-v .tk-crumb,.view.v-sharedtask.axm-v .tk-crumb{background:#fff;box-shadow:0 1px 2px rgba(12,12,12,.04),inset 0 0 0 1px #E6E9E5}
.view.v-task.axm-v .grp,.view.v-sharedtask.axm-v .grp{gap:0;background:#fff;border:1px solid #ECEEEA;border-radius:22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.v-task.axm-v .grp .row,.view.v-sharedtask.axm-v .grp .row{background:#fff;border-radius:0}
.view.v-task.axm-v .grp .row+.row,.view.v-sharedtask.axm-v .grp .row+.row{box-shadow:inset 0 1px 0 #F0F1EF}
.view.v-task.axm-v .grp button.row:active,.view.v-sharedtask.axm-v .grp button.row:active{background:#F6F7F5}
.view.v-task.axm-v .ta,.view.v-sharedtask.axm-v .ta{background:#fff;box-shadow:inset 0 0 0 1px #E6E9E5}
.view.v-task.axm-v .tk-ub,.view.v-sharedtask.axm-v .tk-ub{background:#fff;box-shadow:0 0 0 1px #ECEEEA}
.view.v-task.axm-v .tk-u.sys .tk-ub{background:none;box-shadow:none}
.view.v-sharedtask.axm-v .tk-ronotes{background:#fff;box-shadow:0 0 0 1px #ECEEEA}
.view.v-task.axm-v .tk-pbar,.view.v-sharedtask.axm-v .tk-pbar{background:#E8EBE7}
.view.v-boards.axm-v .axwk-none{padding:18px 16px;border-radius:22px;background:#fff;border:1px solid #ECEEEA;text-align:center;font-size:14.5px;line-height:20px;color:var(--sub)}

/* a result and the way to improve it (js/progress.js S.report, S.improve) */
/* the score: a soft mint card with the gold ring */
.view.v-report.axm-v .axwk-score{margin-top:16px;padding:16px;gap:16px;border-radius:26px;background:linear-gradient(150deg,#EDF6F0 0%,#DFEFE5 55%,#D0E7D9 100%);
  border:1px solid #CDE3D5;box-shadow:0 1px 2px rgba(19,83,51,.05),0 16px 32px -20px rgba(19,83,51,.32)}
.view.v-report.axm-v .axwk-score .axm-ring.sm{display:block;width:96px;height:96px}
.view.v-report.axm-v .axwk-score .axm-rc b{font-size:28px}
.view.v-report.axm-v .axwk-score .pstx b{color:var(--green);font-weight:700;font-size:18px;letter-spacing:-.01em}
.view.v-report.axm-v .axwk-score .pstx span{color:#4E6A5A}
.view.v-report.axm-v .axwk-score .pfi{background:#fff;border:1px solid rgba(19,83,51,.12)}
.view.v-report.axm-v .axwk-score .ptrend.c-amber{background:#fff;color:var(--gold-ink)}
.view.v-report.axm-v .axwk-score .ptrend.c-green{background:#fff}
.view.v-report.axm-v .axwk-score .pfirst{color:#4E6A5A}
/* white cards and white pill buttons on the soft ground */
.view.v-report.axm-v .tile:not(.axwk-score),.view.v-improve.axm-v .tile{background:#fff;border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.v-report.axm-v .tile:not(.axwk-score) .ppart+.ppart{border-top-color:#F0F1EF}
.view.v-report.axm-v .bs,.view.v-improve.axm-v .bs{background:#fff;border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 10px 24px -16px rgba(19,83,51,.20)}
.view.v-report.axm-v .grp,.view.v-improve.axm-v .grp{gap:0;background:#fff;border:1px solid #ECEEEA;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.v-report.axm-v .grp .row,.view.v-improve.axm-v .grp .row{background:#fff;border-radius:0}
.view.v-report.axm-v .grp .row+.row,.view.v-improve.axm-v .grp .row+.row{box-shadow:inset 0 1px 0 #F0F1EF}
.view.v-report.axm-v .grp button.row:active,.view.v-improve.axm-v .grp button.row:active{background:#F6F7F5}
.view.v-report.axm-v .ppart .bar{background:#EEF1EE}
.view.v-improve.axm-v .pcourse{background:#fff;border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.v-improve.axm-v .pfocus{margin-top:16px}
@media (min-width:900px){
  .view.v-report.axm-v .axwk-score .axm-ring.sm{width:120px;height:120px}
  .view.v-report.axm-v .axwk-score .axm-rc b{font-size:34px}
  .view.v-report.axm-v .axwk-score{padding:22px 24px;gap:24px}
}
/* the files of a board or a task: white cards on the soft ground */
.view.v-board.axm-v .fgrid .fcd,.view.v-task.axm-v .fgrid .fcd{background:#fff;box-shadow:0 0 0 1px #ECEEEA,0 12px 30px -16px rgba(19,83,51,.18)}
.view.v-board.axm-v .fgrid .fcd:active,.view.v-task.axm-v .fgrid .fcd:active{background:#FAFBFA}
/* a computer: the four Kanban columns share the page width, side by side, with nothing cut off at the edge */
@media (min-width:900px){
  html.ax-desk .view.v-board.axm-v .tk-kb{margin-left:0;margin-right:0;padding-left:0;padding-right:0;scroll-padding-inline:0}
  html.ax-desk .view.v-board.axm-v .tk-col{flex:1 1 0;width:auto;min-width:230px}
}

/* Advanced in soft gold (his ask, 21 Oct 2026, 13:12; css/axcards.css): the results bars on the leading card, the
   change of score, and the result's own score card */
html.axm-gold .axm-hero .axwk-tn{color:var(--axg-n)}
html.axm-gold .axm-hero .axwk-tn.good{color:var(--green)}
html.axm-gold .axm-hero .axwk-tn.bad{color:var(--axg-t)}
html.axm-gold .axm-hero .axwk-tn.same,html.axm-gold .axm-hero .axwk-hist-t,html.axm-gold .axm-hero .axwk-hist-l{color:var(--axg-s)}
html.axm-gold .axm-hero .axwk-hist-b em{color:var(--axg-x)}
html.axm-gold .axm-hero .axwk-hist-b b{background:rgba(140,122,20,.24)}
html.axm-gold .axm-hero .axwk-hist-b b.now{background:linear-gradient(#2F9566,#135333)}
html.axm-gold .axm-hero .axwk-hist-b b.dot{background:rgba(140,122,20,.34)}
html.axm-gold .view.v-report.axm-v .axwk-score{background:var(--axg-bg);border-color:var(--axg-bd);box-shadow:var(--axg-sh)}
html.axm-gold .view.v-report.axm-v .axwk-score .pstx b{color:var(--axg-t)}
html.axm-gold .view.v-report.axm-v .axwk-score .pstx span,html.axm-gold .view.v-report.axm-v .axwk-score .pfirst{color:var(--axg-s)}
html.axm-gold .view.v-report.axm-v .axwk-score .pfi{border-color:var(--axg-p)}
html.axm-gold .view.v-report.axm-v .axwk-score .axm-ring stop:nth-child(1){stop-color:#4FAE80}
html.axm-gold .view.v-report.axm-v .axwk-score .axm-ring stop:nth-child(2){stop-color:#23804F}
html.axm-gold .view.v-report.axm-v .axwk-score .axm-ring stop:nth-child(3){stop-color:#135333}
html.axm-gold .view.v-report.axm-v .axwk-score .axm-ring svg>circle:first-of-type{stroke:var(--axg-l)}
/* My Progress: press and hold (22 Oct 2026) */
.phold{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:9px 14px;border-radius:14px;background:var(--green-soft);color:var(--green);font-size:13.5px;line-height:18px;font-weight:600}
.phold svg{flex:none}
.pcard{transition:transform .18s cubic-bezier(.3,.7,.2,1),box-shadow .18s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pcard.pheld{transform:scale(.97)}
.axwk-bd{transition:transform .18s cubic-bezier(.3,.7,.2,1);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.axwk-bd.pheld{transform:scale(.97)}