/* ============================================================
   Polymath shared action dock — single source of truth for the
   site-wide button island: Cart, Favorites, Projects, Qasra,
   Zeitgeist, Account, Back to Top.

   Loaded identically by index.html, market.html, projects.html,
   and qasra.html. Relies on the same CSS custom properties
   (--ink, --paper, --line, --line-strong, --stone, --slate,
   --seal, --verdigris-bright, --ink-2) already defined in each
   page's :root — those stay page-local since the rest of each
   page's design also depends on them.

   qasra.html additionally defines a couple of page-specific rules
   that are NOT here (.dock-reading-card, .dock-progress-*),
   since "Continue reading" only exists on that page.
   ============================================================ */

.action-dock{
  position:fixed; right:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column;
  background:var(--ink); border:1px solid var(--line-strong);
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  border-radius:14px; overflow:visible; z-index:40;
  transition:right .2s ease;
}
.dock-btn{
  position:relative; display:flex; align-items:center; justify-content:flex-end;
  min-width:52px; height:52px; border:none; background:none; cursor:pointer;
  border-bottom:1px solid var(--line); padding:0 16px;
}
.dock-btn:last-child{border-bottom:none;}
.dock-btn:first-child{border-radius:14px 14px 0 0;}
.dock-btn:last-child{border-radius:0 0 14px 14px;}
.dock-btn svg{width:18px; height:18px; stroke:var(--paper); fill:none; stroke-width:2; flex:0 0 auto;}
.dock-btn.account-btn svg{stroke:var(--stone);}
.dock-badge{
  position:absolute; top:6px; right:6px; min-width:15px; height:15px; border-radius:8px;
  background:var(--seal); color:#fff; font-size:9px; font-family:'IBM Plex Mono',monospace;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.dock-label{
  font-size:11.5px; color:var(--paper); white-space:nowrap;
  max-width:0; overflow:hidden; opacity:0; transition:max-width .2s ease, opacity .15s ease;
  margin-right:0;
}
.action-dock:hover .dock-label{max-width:120px; opacity:1; margin-right:10px;}
.account-avatar-dot{width:9px; height:9px; border-radius:50%; background:var(--verdigris-bright); position:absolute; bottom:8px; right:8px;}

.dock-popover{
  position:fixed; right:80px; top:50%; transform:translateY(-50%);
  width:280px; max-height:400px; overflow-y:auto;
  background:var(--ink); border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,0.18); padding:18px; display:none; z-index:41;
}
.dock-popover.open{display:block;}
.dock-popover h4{font-family:'Fraunces',serif; font-size:14px; margin-bottom:12px;}
.dock-popover-empty{font-size:12px; color:rgba(26,26,26,0.45); font-family:'IBM Plex Mono',monospace;}
.dock-popover-subhead{
  font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--stone); margin:14px 0 10px;
}
.dock-popover-subhead:first-child{margin-top:0;}

.zeitgeist-popover{width:320px;}
.zeitgeist-prompt{font-size:12px; color:rgba(26,26,26,0.55); margin:-4px 0 14px;}
.zeitgeist-bubbles{position:relative; width:100%; height:260px; margin:2px 0 6px;}
.zeitgeist-bubbles.is-empty{display:flex; align-items:center; justify-content:center;}
.zeitgeist-bubble{
  position:absolute; top:0; left:0; transform:translate(-50%, -50%);
  border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--ink-2); border:1.5px solid var(--line-strong); cursor:pointer; color:var(--paper);
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; line-height:1.15; padding:4px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.zeitgeist-bubble:hover{border-color:var(--paper);}
.zeitgeist-bubble.selected{background:var(--seal); border-color:var(--seal); color:#fff;}
.zeitgeist-note{margin-top:12px; font-size:10.5px; color:rgba(26,26,26,0.45); text-align:center;}

.zeitgeist-title-btn{
  display:flex; align-items:center; gap:6px; width:100%; text-align:left; border:none; background:none; cursor:pointer;
  font-family:'Fraunces',serif; font-weight:600; font-size:15px; color:var(--paper); padding:0 0 12px; margin:0;
}
.zeitgeist-title-btn:hover{color:var(--seal);}
.zeitgeist-title-btn svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4; transition:transform .2s ease;}

.zeitgeist-trait-menu{display:none; flex-direction:column; gap:2px; margin:-6px 0 14px; border:1px solid var(--line-strong); border-radius:8px; overflow-y:auto; max-height:220px;}
.zeitgeist-trait-menu.open{display:flex;}
.zeitgeist-trait-option{
  border:none; background:none; cursor:pointer; text-align:left; padding:8px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:rgba(26,26,26,0.6);
}
.zeitgeist-trait-option:hover:not(:disabled){background:rgba(26,26,26,0.06); color:var(--paper);}
.zeitgeist-trait-option.picked{background:var(--paper); color:var(--ink); font-weight:600;}
.zeitgeist-trait-option:disabled{opacity:0.4; cursor:not-allowed;}
.zeitgeist-trait-hint{font-size:9.5px; color:rgba(26,26,26,0.4); flex-shrink:0;}
.zeitgeist-trait-option.picked .zeitgeist-trait-hint{color:rgba(26,26,26,0.5);}

.zeitgeist-timeline{display:flex; align-items:flex-start; gap:2px; margin:0 0 14px;}
.zeitgeist-timeline-arrow{
  border:none; background:none; cursor:pointer; color:rgba(26,26,26,0.5); font-size:17px; line-height:1;
  padding:5px 3px 0; flex-shrink:0;
}
.zeitgeist-timeline-arrow:hover:not(:disabled){color:var(--paper);}
.zeitgeist-timeline-arrow:disabled{opacity:0.25; cursor:default;}
.zeitgeist-timeline-track{
  flex:1; display:flex; justify-content:flex-start; gap:16px; position:relative; padding-top:7px;
  overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none;
}
.zeitgeist-timeline-track::-webkit-scrollbar{display:none;}
.zeitgeist-timeline-track::before{content:''; position:absolute; top:10px; left:8px; right:8px; height:1px; background:var(--line-strong);}
.zeitgeist-timeline-item{
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  position:relative; z-index:1; border:none; background:none; padding:0; flex:0 0 auto;
}
.zeitgeist-timeline-dot{width:7px; height:7px; border-radius:50%; background:var(--line-strong); border:2px solid var(--ink); box-sizing:content-box;}
.zeitgeist-timeline-item.active .zeitgeist-timeline-dot{background:var(--paper); width:8px; height:8px;}
.zeitgeist-timeline-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:rgba(26,26,26,0.5); white-space:nowrap;}
.zeitgeist-timeline-item.active .zeitgeist-timeline-label{color:var(--paper); font-weight:600;}
.zeitgeist-timeline-item:hover .zeitgeist-timeline-label{color:var(--paper);}

.zeitgeist-empty{font-size:12px; color:rgba(26,26,26,0.45); text-align:center; padding:20px 6px;}
.zeitgeist-bubble.readonly{cursor:default;}

.projects-popover{width:300px;}
.projects-popover-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.projects-popover-head h4{margin:0;}
.projects-yours-btn{
  border:1px solid var(--line-strong); background:none; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.03em;
  padding:5px 12px; border-radius:14px; color:rgba(26,26,26,0.6);
}
.projects-yours-btn:hover{border-color:var(--paper); color:var(--paper);}
.projects-yours-btn.active{background:var(--paper); color:var(--ink); border-color:var(--paper);}

.projects-updates-strip{display:flex; flex-direction:column; gap:12px; margin-bottom:16px;}
.projects-update-item{display:flex; align-items:flex-start; gap:10px; font-size:12px; line-height:1.4;}
.projects-update-thumb{
  width:44px; height:44px; border-radius:6px; flex-shrink:0; background-size:cover;
  background-position:center; background-color:var(--ink-2); border:1px solid var(--line-strong);
}
.projects-update-body{min-width:0; flex:1;}
.projects-update-project{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--stone); margin-bottom:3px;
}
.projects-update-text{
  color:rgba(26,26,26,0.75); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.projects-carousel{position:relative; width:100%; aspect-ratio:16/10; border-radius:8px; overflow:hidden; margin-bottom:10px; background:var(--ink-2);}
.projects-carousel-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity .7s ease; display:flex; align-items:flex-end;
}
.projects-carousel-slide.active{opacity:1;}
.projects-carousel-slide::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,20,20,0.82), transparent 65%);}
.projects-carousel-slide-info{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:10px; width:100%; padding:12px 14px; color:#fff;}
.projects-carousel-title{font-family:'Fraunces',serif; font-weight:600; font-size:13.5px; line-height:1.25;}
.projects-carousel-hearts{font-family:'IBM Plex Mono',monospace; font-size:11px; opacity:0.9; flex-shrink:0; white-space:nowrap;}
.projects-carousel-dots{display:flex; justify-content:center; gap:6px; margin-bottom:18px;}
.projects-carousel-dot{width:6px; height:6px; border-radius:50%; border:none; background:var(--line-strong); cursor:pointer; padding:0;}
.projects-carousel-dot.active{background:var(--paper); width:16px; border-radius:3px;}

.projects-contributors-label{
  font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--stone); margin:0 0 10px;
}
.projects-contributors-row{display:flex; align-items:center; margin-bottom:18px;}
.projects-contributor-bubble{
  width:32px; height:32px; border-radius:50%; border:2px solid var(--ink);
  background:var(--ink-2); margin-left:-10px; overflow:hidden; flex-shrink:0;
}
.projects-contributor-bubble:first-child{margin-left:0;}
.projects-contributor-bubble img{width:100%; height:100%; object-fit:cover; display:block;}

.projects-list{display:flex; flex-direction:column; gap:9px;}
.projects-list-item{display:flex; align-items:center; gap:10px; font-size:12.5px;}
.projects-item-thumb{
  width:36px; height:36px; border-radius:6px; flex-shrink:0; background-size:cover;
  background-position:center; background-color:var(--ink-2); border:1px solid var(--line-strong);
}
.projects-item-title{color:var(--paper); font-weight:500; flex:1; min-width:0;}
.projects-item-meta{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(26,26,26,0.45); flex-shrink:0; white-space:nowrap;}

.projects-footer-link{
  display:block; text-align:center; margin-top:16px; padding-top:12px;
  border-top:1px solid var(--line-strong); font-size:11.5px; color:var(--paper); text-decoration:none;
}
.projects-footer-link:hover{color:var(--seal);}
.dock-popover a{color:var(--verdigris-bright); text-decoration:none;}
.dock-cart-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:12.5px;}
.dock-cart-row:first-of-type{border-top:none;}
.dock-cart-row-media{width:32px; height:32px; border-radius:6px; overflow:hidden; background:var(--ink-2); flex:0 0 auto;}
.dock-cart-row-media img{width:100%; height:100%; object-fit:cover; display:block;}
.dock-fav-row-media{width:32px; height:32px; border-radius:6px; overflow:hidden; background:var(--ink-2); flex:0 0 auto;}
.dock-fav-row-media img{width:100%; height:100%; object-fit:cover; display:block;}
.dock-cart-row > span:first-of-type{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dock-cart-row .qty-tag{color:rgba(26,26,26,0.45); font-family:'IBM Plex Mono',monospace; font-size:11px; flex:0 0 auto;}

/* ---- Cart popover footer: subtotal + checkout ---- */
.dock-cart-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.dock-cart-head h4{margin:0;}
.dock-orders-btn{
  border:1px solid var(--line-strong); background:none; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.03em;
  padding:5px 12px; border-radius:14px; color:rgba(26,26,26,0.6); flex:0 0 auto;
}
.dock-orders-btn:hover{border-color:var(--paper); color:var(--paper);}

.dock-cart-footer{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-strong);}
.dock-cart-subtotal{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; color:var(--paper); margin-bottom:12px;
}
.dock-cart-subtotal span:first-child{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--stone);}
.dock-cart-subtotal span:last-child{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px;}
.dock-checkout-btn{
  display:block; width:100%; text-align:center; border:none; cursor:pointer;
  background:var(--paper); color:var(--ink); padding:12px 0; border-radius:22px;
  font-size:13px; font-weight:600; letter-spacing:0.02em;
  font-family:'IBM Plex Sans',sans-serif; transition:background .15s ease, opacity .15s ease;
}
.dock-checkout-btn:hover{background:var(--seal);}
.dock-checkout-btn:disabled{opacity:0.35; cursor:not-allowed; background:var(--paper);}

/* ============================================================
   Checkout overlay — opened from the Checkout button inside the
   cart popover. UI only: nothing here is wired up to a real order
   submission yet.
   ============================================================ */
.checkout-overlay{
  position:fixed; inset:0; background:rgba(26,26,26,0.45);
  display:none; align-items:center; justify-content:center; z-index:70; padding:24px;
}
.checkout-overlay.open{display:flex;}
.checkout-panel{
  background:var(--ink); border-radius:14px; max-width:940px; width:100%;
  max-height:88vh; overflow-y:auto; padding:36px 40px 40px;
  box-shadow:0 24px 60px rgba(0,0,0,0.3);
}
.checkout-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px;}
.checkout-eyebrow{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.16em; font-size:10.5px; color:var(--stone); margin-bottom:6px;}
.checkout-title{font-family:'Fraunces',serif; font-size:26px; font-weight:600;}
.checkout-close{
  border:none; background:none; font-size:11px; letter-spacing:0.05em;
  color:rgba(26,26,26,0.5); cursor:pointer; font-family:'IBM Plex Mono',monospace; padding:6px 0;
}
.checkout-close:hover{color:var(--paper);}

.checkout-columns{display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:start;}

.checkout-section{margin-bottom:26px;}
.checkout-section:last-child{margin-bottom:0;}
.checkout-section-title{
  font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:0.1em;
  font-size:10.5px; color:var(--stone); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.checkout-section-title .step-num{
  width:16px; height:16px; border-radius:50%; background:var(--paper); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; font-size:9px; flex:0 0 auto;
}
.checkout-field-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.checkout-field{display:flex; flex-direction:column; gap:5px;}
.checkout-field.full{grid-column:1/-1;}
.checkout-field label{font-size:10.5px; color:rgba(26,26,26,0.55); font-family:'IBM Plex Mono',monospace;}
.checkout-field input, .checkout-field select{
  border:1.5px solid rgba(26,26,26,0.3); border-radius:8px; padding:10px 12px;
  font-size:13px; font-family:'IBM Plex Sans',sans-serif; background:#ECEBE7; color:var(--paper);
  width:100%;
}
.checkout-field input:focus, .checkout-field select:focus{outline:none; border-color:var(--paper);}
.checkout-field input::placeholder{color:rgba(26,26,26,0.4);}

.checkout-shipmethods{display:flex; flex-direction:column; gap:8px;}
.checkout-shipmethod{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1.5px solid rgba(26,26,26,0.2); border-radius:8px; padding:11px 14px; cursor:pointer;
}
.checkout-shipmethod.selected{border-color:var(--paper); background:var(--ink-2);}
.checkout-shipmethod-left{display:flex; align-items:center; gap:10px; font-size:12.5px;}
.checkout-shipmethod-left input{margin:0;}
.checkout-shipmethod-name{font-weight:600;}
.checkout-shipmethod-eta{color:rgba(26,26,26,0.5); font-size:11.5px; margin-left:4px;}
.checkout-shipmethod-price{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;}

.checkout-cardicons{display:flex; gap:6px;}
.checkout-cardicons span{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.04em; color:var(--stone);
  border:1px solid var(--line-strong); border-radius:4px; padding:2px 5px;
}

.checkout-summary{
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:12px;
  padding:20px; position:sticky; top:0;
}
.checkout-summary-title{font-family:'Fraunces',serif; font-size:15px; font-weight:600; margin-bottom:14px;}
.checkout-items{display:flex; flex-direction:column; max-height:220px; overflow-y:auto; margin-bottom:14px;}
.checkout-item-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line);}
.checkout-item-row:first-child{border-top:none;}
.checkout-item-thumb{
  width:38px; height:38px; border-radius:6px; flex:0 0 auto; background:var(--ink);
  border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:13px; color:var(--slate);
}
.checkout-item-info{flex:1; min-width:0;}
.checkout-item-name{font-size:12.5px; font-weight:500; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.checkout-item-qty{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(26,26,26,0.45);}
.checkout-item-price{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; flex:0 0 auto;}
.checkout-empty-note{font-size:12px; color:rgba(26,26,26,0.45); font-family:'IBM Plex Mono',monospace; padding:6px 0 14px;}

.checkout-totals{border-top:1px solid var(--line-strong); padding-top:12px; display:flex; flex-direction:column; gap:8px;}
.checkout-total-row{display:flex; justify-content:space-between; font-size:12.5px; color:rgba(26,26,26,0.65);}
.checkout-total-row.grand{font-size:15px; font-weight:700; color:var(--paper); padding-top:6px; border-top:1px solid var(--line-strong); margin-top:2px;}
.checkout-total-row .mono-val{font-family:'IBM Plex Mono',monospace;}

.checkout-card-element{
  border:1.5px solid rgba(26,26,26,0.3); border-radius:8px; padding:12px;
  background:#ECEBE7;
}
.checkout-card-element.StripeElement--focus{border-color:var(--paper);}
.checkout-card-element.StripeElement--invalid{border-color:#a83232;}
.checkout-card-error, .checkout-form-error{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:#a83232;
  min-height:14px; margin-top:6px;
}
.checkout-form-error:empty{margin-top:0;}

.checkout-place-btn{
  display:block; width:100%; text-align:center; border:none; cursor:pointer;
  background:var(--seal); color:#fff; padding:14px 0; border-radius:22px;
  font-size:14px; font-weight:600; letter-spacing:0.02em; margin-top:18px;
  font-family:'IBM Plex Sans',sans-serif;
}
.checkout-place-btn:hover{background:#732520;}
.checkout-place-btn:disabled{opacity:0.6; cursor:default;}

.checkout-success{text-align:center; padding:60px 20px;}
.checkout-success-title{font-family:'Fraunces',serif; font-size:22px; font-weight:600; margin-bottom:10px;}
.checkout-success-note{font-size:13px; color:rgba(26,26,26,0.6); margin-bottom:24px; max-width:380px; margin-left:auto; margin-right:auto;}
.checkout-success .checkout-place-btn{max-width:240px; margin-left:auto; margin-right:auto;}
.checkout-secure-note{
  display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:rgba(26,26,26,0.4);
}
.checkout-secure-note svg{width:11px; height:11px; stroke:rgba(26,26,26,0.4); fill:none; stroke-width:2;}

@media (max-width:760px){
  .checkout-columns{grid-template-columns:1fr;}
  .checkout-field-grid{grid-template-columns:1fr;}
  .checkout-panel{padding:26px 20px 30px;}
  .checkout-summary{position:static;}
}

/* My Orders overlay — reuses .checkout-overlay/.checkout-panel/.checkout-head
   chrome, just its own body content below. */
.orders-panel{max-width:640px;}
.orders-loading, .orders-empty{
  font-size:12px; color:rgba(26,26,26,0.45); font-family:'IBM Plex Mono',monospace;
  padding:26px 0; text-align:center;
}
.orders-error{
  font-size:12px; color:#a83232; font-family:'IBM Plex Mono',monospace; padding:14px 0;
}
.orders-list{display:flex; flex-direction:column; gap:16px;}
.order-card{border:1px solid var(--line-strong); border-radius:12px; padding:18px 20px; background:var(--ink-2);}
.order-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px;}
.order-card-id{font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(26,26,26,0.5); letter-spacing:0.03em;}
.order-card-date{font-size:11.5px; color:rgba(26,26,26,0.45); margin-top:3px;}
.order-status{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase;
  padding:4px 10px; border-radius:12px; flex:0 0 auto; white-space:nowrap;
}
.order-status.pending{background:rgba(200,150,40,0.18); color:#a87c1f;}
.order-status.confirmed, .order-status.paid, .order-status.delivered{background:rgba(60,140,90,0.18); color:#2e7d4f;}
.order-status.shipped{background:rgba(60,100,180,0.18); color:#2e5ba8;}
.order-status.cancelled, .order-status.failed{background:rgba(168,50,50,0.18); color:#a83232;}
.order-card-items{display:flex; flex-direction:column;}
.order-card-total{
  display:flex; justify-content:space-between; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line-strong); font-size:13px; font-weight:700; color:var(--paper);
}
.order-card-total .mono-val{font-family:'IBM Plex Mono',monospace;}

@media (max-width:640px){
  .action-dock{
    right:auto; left:50%; top:auto; bottom:14px;
    transform:translateX(-50%);
    flex-direction:row;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(0,0,0,0.22);
  }
  .dock-btn{
    width:58px; height:58px; min-width:58px;
    border-bottom:none; border-right:1px solid var(--line);
    justify-content:center; padding:0;
  }
  .dock-btn svg{width:22px; height:22px;}
  .dock-btn:last-child{border-right:none;}
  .dock-btn:first-child{border-radius:18px 0 0 18px;}
  .dock-btn:last-child{border-radius:0 18px 18px 0;}
  .action-dock:hover .dock-label{max-width:0; opacity:0; margin-right:0;}
  .dock-badge{top:8px; right:8px; min-width:16px; height:16px; font-size:9.5px;}

  .dock-popover{
    right:10px; left:10px; top:auto; bottom:82px;
    width:auto; transform:none; max-height:65vh;
  }
}
@media (max-width:380px){
  .dock-btn{width:50px; height:50px; min-width:50px;}
  .dock-btn svg{width:20px; height:20px;}
}

/* ============================================================
   Account / Mail popover — opened from dockAccountBtn once a
   session exists. Header (avatar+name) + inbox switcher/Write +
   letter list, same chrome as the other dock popovers. Compose
   and letter-detail reuse the .checkout-overlay/.checkout-panel
   overlay, same as My Orders.
   ============================================================ */
.dock-account-head{display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line-strong);}
.dock-account-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--ink-2); background-size:cover; background-position:center;
  border:1.6px solid var(--line-strong); flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:14px; color:var(--slate);
}
.dock-account-name{font-family:'Fraunces',serif; font-size:15px; color:var(--paper); line-height:1.25;}
.dock-account-address{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(26,26,26,0.5); margin-top:2px;}

.dock-inbox-row{display:flex; align-items:center; gap:8px; margin-bottom:12px;}
.dock-inbox-switcher{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 auto;}
.dock-inbox-pill{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.02em;
  padding:5px 10px; border-radius:12px; border:1px solid var(--line-strong); background:none;
  color:rgba(26,26,26,0.55); cursor:pointer; white-space:nowrap;
}
.dock-inbox-pill.active{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.dock-inbox-current{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(26,26,26,0.55); flex:1 1 auto;}
.dock-inbox-select-wrap{position:relative; flex:1 1 auto;}
.dock-inbox-select-btn{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.02em;
  padding:6px 10px; border-radius:10px; border:1px solid var(--line-strong); background:none;
  color:rgba(26,26,26,0.7); cursor:pointer; width:100%; text-align:left;
}
.dock-inbox-select-btn:hover{border-color:var(--paper);}
.dock-inbox-select-caret{font-size:9px; opacity:0.6;}
.dock-inbox-dropdown{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:5;
  background:var(--ink); border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.35); overflow:hidden;
}
.dock-inbox-dropdown-item{
  display:block; width:100%; text-align:left; padding:9px 12px; border:none; background:none;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(26,26,26,0.65); cursor:pointer;
}
.dock-inbox-dropdown-item:hover{background:rgba(255,255,255,0.04);}
.dock-inbox-dropdown-item.active{color:var(--paper); font-weight:700;}
.dock-mail-write-btn{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  padding:6px 12px; border-radius:12px; border:none; background:var(--verdigris-bright); color:var(--ink);
  cursor:pointer; flex:0 0 auto;
}
.dock-mail-write-btn:hover{opacity:0.85;}

.dock-mail-list{display:flex; flex-direction:column; gap:2px; max-height:320px; overflow-y:auto;}
.dock-mail-row{
  display:flex; align-items:flex-start; gap:10px; padding:10px 4px; border-radius:8px; cursor:pointer;
  border-bottom:1px solid rgba(26,26,26,0.06);
}
.dock-mail-row:hover{background:rgba(255,255,255,0.03);}
.dock-mail-row:last-child{border-bottom:none;}
.dock-mail-avatar{
  width:28px; height:28px; border-radius:50%; background:var(--ink-2); background-size:cover; background-position:center;
  border:1.4px solid var(--line-strong); flex:0 0 auto; margin-top:2px;
}
.dock-mail-body{flex:1 1 auto; min-width:0;}
.dock-mail-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.dock-mail-from{font-size:12.5px; color:rgba(26,26,26,0.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dock-mail-row.unread .dock-mail-from{color:var(--paper); font-weight:700;}
.dock-mail-date{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:rgba(26,26,26,0.4); flex:0 0 auto;}
.dock-mail-subject{font-size:12px; color:rgba(26,26,26,0.55); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dock-mail-row.unread .dock-mail-subject{color:rgba(26,26,26,0.8);}
.dock-mail-preview{font-size:11px; color:rgba(26,26,26,0.4); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dock-mail-unread-dot{width:7px; height:7px; border-radius:50%; background:var(--verdigris-bright); flex:0 0 auto; margin-top:5px;}

/* Compose / detail overlay — reuses .checkout-overlay/.checkout-panel/.checkout-head/.checkout-close */
.mail-panel{max-width:600px;}
.checkout-field textarea{
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:8px; color:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:9px 11px; resize:vertical; min-height:140px;
}
.checkout-field textarea:focus{outline:none; border-color:var(--paper);}
.mail-detail-meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(26,26,26,0.5); margin-bottom:6px;}
.mail-detail-subject{font-family:'Fraunces',serif; font-size:19px; color:var(--paper); margin-bottom:14px;}
.mail-detail-body{font-size:13.5px; line-height:1.6; color:rgba(255,255,255,0.85); white-space:pre-wrap; margin-bottom:22px;}
.mail-detail-reply-btn{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  padding:8px 16px; border-radius:12px; border:none; background:var(--verdigris-bright); color:var(--ink); cursor:pointer;
}

/* ---- Qasra deactivated site-wide (for now) ----
   Button + popover markup and their JS are left in place on every page
   so this is a one-line revert: just delete the rule below to bring
   Qasra back into the action dock. */
#dockQasraBtn, #dockQasraPopover{display:none !important;}

/* ---- Subscribed studios (Qasra dock popover) ---- */
.dock-studio-bubbles{display:flex; flex-wrap:wrap; gap:8px;}
.dock-studio-bubble{
  width:41px; height:41px; border-radius:50%; background:var(--ink-2);
  border:1.8px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:13px; color:var(--slate);
  background-size:cover; background-position:center; flex:0 0 auto;
}
