/* ==========================================================================
   My Account — the member's list of projects.

   Shown instead of the three-step setup once a member has a project. Scoped
   under .myprojects with the same tokens .psetup uses, so the list and the
   steps it opens read as one page. Loaded after project-setup.css.
   ========================================================================== */

.myprojects{
  --blue:#2b3ea1; --blue-soft:#eef0fa; --ink:#2b2b2b; --grey:#6b6f76; --line:#e6e6e6;
  --yellow:#ffc907; --yellow-soft:#fff6d6; --green:#1d9d5f; --green-soft:#e7f6ee;
  --red:#c0392b; --red-soft:#fde3e3; --panel:#fafafa;
  font-family:'Montserrat',Arial,sans-serif; color:var(--ink);
  margin-top:clamp(34px,4.5vw,52px);
}
.myprojects *{box-sizing:border-box}

/* ==========================================================================
   THE CONSOLE SIDEBAR ON MY ACCOUNT

   Same markup every console page draws (Common/DashNav.php), under the site
   header this page has always had. The rules are copied from dashboard.css
   rather than linked, because that sheet also styles <body> and <header> and
   would fight the site chrome; they are scoped to .acct-shell so nothing else
   on the site can pick them up.

   Keep in step with the aside block in assets/css/dashboard.css — the two are
   meant to look identical, and a visitor moving between them would notice.
   ========================================================================== */
.acct-shell{display:flex;align-items:flex-start}
.acct-shell > aside{
  width:250px;flex:none;align-self:stretch;
  background:#fafafa;border-right:1px solid #e6e6e6;padding:26px 0;
  font-family:'Montserrat',Arial,sans-serif;
}
/* Collapse / expand, as on every other page with this menu (12 Oct 2026).
   My Account does not load dashboard.css, so the button, the folded rail and
   the icon tooltips are styled here, scoped to .acct-shell. */
.acct-shell .side-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  margin:0 18px 14px auto;padding:0;background:none;border:1px solid transparent;border-radius:9px;color:#6b6f76;cursor:pointer}
.acct-shell .side-toggle:hover{background:#f1f1f1;border-color:#e6e6e6;color:#2b2b2b}
.acct-shell .side-toggle svg{display:block;width:19px;height:19px}
.acct-shell > aside{transition:width .15s ease}
.acct-shell > aside.collapsed{width:68px}
.acct-shell > aside.collapsed .side-toggle{margin:0 auto 14px}
.acct-shell > aside.collapsed .side-toggle svg{transform:scaleX(-1)}
.acct-shell > aside.collapsed .side-title{height:0;padding:0;margin-bottom:6px;overflow:hidden}
.acct-shell > aside.collapsed .side-item{justify-content:center;padding:13px 0;gap:0;position:relative}
.acct-shell > aside.collapsed .txt{display:none}
.acct-shell > aside.collapsed .side-item .badge{position:absolute;top:5px;right:6px;margin:0;font-size:9.5px;padding:1px 5px}
.nav-tip{position:fixed;z-index:200;transform:translateY(-50%);background:#2b2b2b;color:#fff;font-family:'Montserrat',Arial,sans-serif;
  font-size:12px;font-weight:700;padding:6px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden}
.nav-tip.show{opacity:1;visibility:visible}
@media (max-width:900px){.acct-shell .side-toggle,.nav-tip{display:none}}
.acct-shell .side-title{
  font-size:11px;font-weight:800;letter-spacing:2.5px;color:#6b6f76;
  padding:0 26px;margin-bottom:12px;
}
.acct-shell .side-item{
  display:flex;align-items:center;gap:14px;width:100%;
  background:none;border:none;text-align:left;text-decoration:none;
  padding:13px 26px;font-size:14.5px;font-weight:600;color:#2b2b2b;
  border-left:4px solid transparent;
}
.acct-shell .side-item:hover{background:#f1f1f1}
.acct-shell .side-item.on{background:#fff;border-left-color:#ffc907;font-weight:800}
.acct-shell .side-item .ico{width:22px;text-align:center;font-size:15px;flex:none}
.acct-shell .side-item .badge{
  margin-left:auto;background:#2b3ea1;color:#fff;
  font-size:10.5px;font-weight:800;border-radius:10px;padding:2px 8px;
}

/* The page beside it: full width of what is left, not the site's centred
   column, so the projects table keeps the room it had before the sidebar. */
.acct-main{flex:1;min-width:0}
.acct-main > .wrap{max-width:none;width:auto;padding-left:32px;padding-right:32px}
/* The projects table has eight columns and 250px less room than it had before
   the sidebar: without tighter cells its last one is cut off. */
.acct-main .mp-table{font-size:13.5px}
.acct-main .mp-table th,.acct-main .mp-table td{padding:12px 10px}
.acct-main .mp-btn{padding:9px 14px;font-size:12px;letter-spacing:1px}
.acct-main .mp-pill{font-size:11px;padding:6px 11px;letter-spacing:.8px}

@media (max-width:900px){
  .acct-shell{display:block}
  .acct-shell > aside{width:100%;border-right:none;border-bottom:1px solid #e6e6e6;padding:14px 0}
  .acct-main > .wrap{padding-left:18px;padding-right:18px}
}

/* ---------- heading + counts ---------- */
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.mp-eyebrow{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:3px}
.mp-eyebrow::before{content:"";width:52px;height:4px;background:var(--yellow);flex:none}
/* The counts, which are also the list's filters: the chosen one sits forward,
   white with the page's yellow underline. */
.mp-stats{display:flex;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.mp-stat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:14px 22px;min-width:110px;background:none;border:none;border-right:1px solid var(--line);
  font-family:inherit;color:var(--ink);text-align:left;cursor:pointer;text-transform:none;letter-spacing:normal;
  transition:background .15s}
.mp-stat:last-child{border-right:none}
.mp-stat:hover{background:#f1f3f9}
.mp-stat .lbl{font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--grey)}
.mp-stat .num{font-size:22px;font-weight:800;line-height:1.1}
.mp-stat.on{background:#fff}
.mp-stat.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--yellow)}
.mp-stat.on .lbl{color:var(--ink)}
.mp-stat:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.mp-empty{margin:0;padding:26px 18px;border:1.5px dashed var(--line);border-radius:12px;background:#fff;
  text-align:center;font-size:14px;font-weight:600;color:var(--grey)}

/* ---------- the table ---------- */
.mp-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.mp-table{width:100%;border-collapse:collapse;font-size:15px}
.mp-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--grey);
  padding:14px 18px;background:var(--panel);border-bottom:1px solid var(--line);white-space:nowrap}
.mp-table td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.mp-table tr:last-child td{border-bottom:none}
.mp-name{font-weight:800;white-space:nowrap}
.mp-muted{color:var(--grey)}

/* Progress: configure -> access -> confirmation. Each dot carries a tooltip —
   its stage and how it stands — shown on hover and on keyboard focus. */
.mp-dots{display:inline-flex;gap:7px}
.mp-dots i{position:relative;width:12px;height:12px;border-radius:50%;background:#fff;
  border:1.5px solid #cfd3da;cursor:default;box-sizing:border-box}
.mp-dots i::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:12px;font-weight:600;font-style:normal;letter-spacing:.2px;
  white-space:nowrap;padding:6px 10px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:5;
}
.mp-dots i::before{
  content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);border-bottom:0;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:5;
}
.mp-dots i:hover::after,.mp-dots i:hover::before,
.mp-dots i:focus-visible::after,.mp-dots i:focus-visible::before{opacity:1}
.mp-dots i:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mp-dots i.done{background:var(--green);border-color:var(--green)}
.mp-dots i.current{background:var(--yellow);border-color:var(--yellow)}
.mp-dots i.bad{background:var(--red);border-color:var(--red)}

.mp-pill{display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.2px;border-radius:20px;
  padding:7px 14px;white-space:nowrap}
.mp-pill.active{background:var(--green-soft);color:var(--green)}
.mp-pill.waiting{background:var(--yellow-soft);color:#8a6d00}
.mp-pill.attention{background:var(--red-soft);color:var(--red)}
.mp-pill.incomplete{background:#eef0f4;color:var(--grey)}
.mp-pill.paused{background:var(--red-soft);color:var(--red);margin-top:4px;display:inline-block}

.mp-act{text-align:right;white-space:nowrap}
.mp-act form{margin:0}
.mp-btn{font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:1.4px;border-radius:8px;
  padding:11px 20px;cursor:pointer;text-transform:none;line-height:normal}
.mp-btn.ghost{background:#fff;border:2px solid var(--line);color:var(--ink)}
.mp-btn.ghost:hover{border-color:var(--ink)}
.mp-btn.go{background:var(--yellow);border:2px solid var(--yellow);color:var(--ink)}

/* ---------- add another ---------- */
.mp-add{margin:22px 0 0}
.mp-add button{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border:2px dashed var(--line);border-radius:12px;padding:24px;cursor:pointer;
  font-family:inherit;color:var(--ink);text-transform:none;letter-spacing:normal}
.mp-add button:hover{border-color:var(--blue);background:var(--blue-soft)}
.mp-add b{font-size:16px;font-weight:800}
.mp-add span{font-size:13.5px;color:var(--grey)}

/* ---------- after a save ---------- */
.mp-flash{display:flex;align-items:center;gap:10px;background:var(--green-soft);border:1px solid #bfe6d0;
  color:#14603a;border-radius:10px;padding:12px 16px;font-size:14px;font-weight:700;margin-bottom:22px}
.mp-flash-tick{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px}

/* ---------- inside a project's steps: the way back ----------
   MY PROJECTS shares the title's row, centred on the big heading, in the
   page's primary blue. On a narrow screen it wraps under the title. */
.psetup .mp-titlerow{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.psetup .mp-titlerow .page-title{flex:1 1 auto;min-width:0}
.psetup .mp-tolist{margin:0;flex:none}
.psetup .mp-tobtn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--blue);color:#fff;border:none;border-radius:10px;
  padding:13px 22px;font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:none;line-height:normal;cursor:pointer;
  box-shadow:0 6px 16px rgba(43,62,161,.22);
  transition:background .15s, box-shadow .15s, transform .15s;
}
.psetup .mp-tobtn:hover{background:#22338a;box-shadow:0 8px 20px rgba(43,62,161,.30);transform:translateY(-1px)}
.psetup .mp-tobtn:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.psetup .mp-tobtn svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--yellow);stroke-width:2}

@media (max-width:760px){
  .mp-stats{width:100%}
  .mp-stat{flex:1;min-width:0;padding:12px 14px}
}

/* ---------- a project's details, opened under its row by VIEW ---------- */
.mp-table tr.mp-row.open td{background:#f7f8fc}
.mp-detail > td{padding:0;background:var(--panel)}
.mp-panel{padding:20px 22px 22px;border-left:4px solid var(--yellow)}
.mp-panel.active{border-left-color:var(--green)}
.mp-panel.attention{border-left-color:var(--red)}
.mp-pcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:start}
.mp-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mp-card h5{margin:0;padding:11px 16px;background:var(--panel);border-bottom:1px solid var(--line);
  font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--grey)}
.mp-card dl{margin:0;padding:4px 16px}
.mp-card dl div{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.mp-card dl div:last-child{border-bottom:none}
.mp-card dt{flex:none;width:150px;font-size:11px;font-weight:800;letter-spacing:1.1px;color:var(--grey);padding-top:2px}
.mp-card dd{margin:0;font-weight:600}

/* the three steps, with the same colours as the progress dots */
.mp-steps{list-style:none;margin:0;padding:4px 16px}
.mp-steps li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--line)}
.mp-steps li:last-child{border-bottom:none}
.mp-steps li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:14px;
  border-radius:50%;border:2px solid #cfd3da;background:#fff;box-sizing:border-box}
.mp-steps li.done::before{background:var(--green);border-color:var(--green)}
.mp-steps li.current::before{background:var(--yellow);border-color:var(--yellow)}
.mp-steps li.bad::before{background:var(--red);border-color:var(--red)}
.mp-steps b{display:block;font-size:14px;font-weight:800}
.mp-steps span{display:block;font-size:13px;color:var(--grey);margin-top:2px;line-height:1.5}

.mp-pactions{margin-top:14px;display:flex;justify-content:flex-end}
.mp-pactions form{margin:0}
.mp-back-link{background:none;border:none;padding:4px 0;font-family:inherit;font-size:12.5px;font-weight:800;
  letter-spacing:1.4px;color:var(--blue);cursor:pointer;text-transform:none}
.mp-back-link:hover{text-decoration:underline}

/* ---------- manage project ---------- */
.mp-manage{white-space:nowrap}
/* ROLES: several roles wrap rather than stretching the table. */
.mp-roles{white-space:normal;min-width:150px;max-width:240px;font-size:13px;font-weight:600;line-height:1.5}
.mp-roles b{font-weight:800}
.mp-manage form{margin:0}

/* ---------- Projects they work on without having asked for them ----------
   A team row says what the member does on the project; its details list the
   books they translate, section by section. */
.mp-pill.team{background:var(--blue-soft,#eef0fa);color:var(--blue,#2b3ea1)}
.mp-secbooks{list-style:none;margin:0;padding:4px 16px}
.mp-secbooks li{padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.55}
.mp-secbooks li:last-child{border-bottom:none}
.mp-secbooks b{display:block;font-size:11px;font-weight:800;letter-spacing:1.1px;color:var(--grey);text-transform:uppercase;margin-bottom:2px}
.mp-secbooks span{font-weight:600}
.mp-nobooks{margin:0;padding:14px 16px;font-size:13.5px;font-weight:600;color:var(--grey)}
.mp-pactions a.mp-btn{display:inline-block;text-decoration:none}

/* The reference under a request's name (AIBT-2610-7K3Q), quoted in emails. */
.mp-ref{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink-mute,#807C7E)}

/* Project reference chip (AIBT-2610-GFUB). The console pages get it from
   dashboard.css; My Account does not load that sheet, so it is repeated here,
   identical, for the project list and the open project's title. */
.proj-ref{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;
  background:#eef0fa;color:#2b3ea1;
  font-size:11px;font-weight:800;letter-spacing:.3px;line-height:1.6;
  white-space:nowrap;vertical-align:middle;font-style:normal;text-transform:none}
.proj-ref.block{display:block;width:max-content;margin:3px 0 0}
.mp-manage .mp-receipt{margin-top:6px}   /* RECEIPT (PDF) under MANAGE PROJECT */