/* Wear Impressive mail — interface layer
   Loaded after the base stylesheet, so equal-specificity rules here win. */

/* ---- palette: the accent is the exact logo hex; the chrome is a deep cut of it ---- */
:root{
  --brand:#0090c0;            /* exact hex lifted from the logo */
  --brand-ink:#006c93;        /* same hue, darkened so small text clears AA on paper */
  --brand-deep:#0e3542;       /* chrome: the brand hue taken dark enough for white text */
  --brand-deeper:#082530;
  --brand-lift:#b9dcea;
}
[data-theme=dark]{
  --brand-ink:#5cc6e8;
  --brand-deep:#0b2c38;
  --brand-deeper:#071f28;
  --brand-lift:#12414f;
}

/* ---- token corrections: colours that used to ignore the theme ----
   These were fixed hexes left over from the light theme. In dark mode they
   put light-on-white and near-invisible greys on the page. */
.msg .subj{color:var(--muted)}
.field label{color:var(--muted)}
.field input,.field select,.field textarea{background:var(--field);color:var(--fieldink)}
.sigpreview code,.optrow code,.field code{padding:1px 5px;background:var(--chip);color:var(--ink)}
p.hint code{background:var(--chip);color:var(--ink)}

/* ---- chrome on brand ---- */
.side{background:var(--brand-deep)}
[data-theme=dark] .side{background:var(--brand-deeper)}
.mobnav,.mobnav .drop{background:var(--brand-deep)}
[data-theme=dark] .mobnav,[data-theme=dark] .mobnav .drop{background:var(--brand-deeper)}
.btn{background:var(--brand-deep)}
.btn:hover{background:var(--brand-deeper)}
.optrow .opt input:checked{background:var(--brand)}
.optrow .opt input:checked::after{transform:translateX(18px)}
[data-theme=dark] .optrow .opt input{background:#3a4750}
a{color:var(--brand-ink)}
.composebtn{background:var(--brand);color:#fff}
.composebtn:hover{background:var(--brand-ink)}

/* ---- the one signature detail: a woven selvedge stripe, the coloured
   edge you find down the inside seam of a denim bolt. It marks mail
   that has not been read, the way a selvedge marks the good edge of the cloth. ---- */
.msg.unread::before{
  width:5px;
  background:
    repeating-linear-gradient(180deg,
      var(--brand) 0 2px,
      color-mix(in srgb,var(--brand) 62%,#06222c) 2px 5px),
    linear-gradient(var(--brand),var(--brand));
  box-shadow:inset -1px 0 0 rgba(255,255,255,.42);
}
[data-theme=dark] .msg.unread::before{
  background:
    repeating-linear-gradient(180deg,
      var(--brand) 0 2px,
      color-mix(in srgb,var(--brand) 55%,#000) 2px 5px),
    linear-gradient(var(--brand),var(--brand));
  box-shadow:inset -1px 0 0 rgba(255,255,255,.26);
}

/* ---- motion: continuity across page loads ----
   Every action in this app is a real navigation. Cross-document view
   transitions are what stop the interface blinking out on each click. */
@view-transition{navigation:auto}

::view-transition-old(root),::view-transition-new(root){
  animation-duration:.26s;
  animation-timing-function:cubic-bezier(.2,.8,.25,1);
}
::view-transition-old(root){animation-name:wi-out}
::view-transition-new(root){animation-name:wi-in}
@keyframes wi-out{to{opacity:0;transform:translateY(-5px)}}
@keyframes wi-in{from{opacity:0;transform:translateY(6px)}}

/* the reader is the thing that actually changes, so it carries the motion */
.view-transition-name:reader{view-transition-name:wi-reader}
.view-transition-name:msgpane{view-transition-name:wi-list}

/* ---- mail that has just arrived ----
   Only unread rows move: read mail is history and should not announce itself. */
@media(prefers-reduced-motion:no-preference){
  .msg.unread{animation:wi-arrive .34s cubic-bezier(.2,.9,.25,1) both;
              animation-delay:calc(var(--i,0) * 34ms)}
}
@keyframes wi-arrive{
  from{opacity:0;transform:translateX(-7px)}
  to{opacity:1;transform:none}
}

/* ---- interaction: pressing something should feel pressed ---- */
.btn:active{transform:translateY(1px) scale(.995)}
.composebtn:active{transform:translateY(1px)}
.msg:active{background:var(--sel)}
.msg{transition:background-color .14s ease,transform .12s ease}
@media(prefers-reduced-motion:no-preference){
  .msg:hover{transform:translateX(2px)}
}

/* a star that has just been set */
.star.pop{animation:wi-pop .34s cubic-bezier(.3,1.4,.4,1)}
@keyframes wi-pop{0%{transform:scale(1)}42%{transform:scale(1.32)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.star.pop{animation:none}}

/* ---- the mailbox you are standing in ---- */
.side a.active{background:rgba(255,255,255,.13);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--brand)}
.side a{transition:background-color .15s ease,color .15s ease}
.side a:hover{background:rgba(255,255,255,.08)}

/* ---- rows waiting on a slow mailbox ---- */
.msg.skel{pointer-events:none}
.msg.skel .from,.msg.skel .subj,.msg.skel .meta span{
  color:transparent!important;background:var(--chip);border-radius:4px;
  min-height:11px;display:inline-block;
}
@media(prefers-reduced-motion:no-preference){
  .msg.skel .from,.msg.skel .subj,.msg.skel .meta span{
    animation:wi-pulse 1.15s ease-in-out infinite;
  }
}
.msg.skel:nth-child(2n) .from,.msg.skel:nth-child(2n) .subj{animation-delay:.14s}
.msg.skel:nth-child(3n) .meta span{animation-delay:.28s}
@keyframes wi-pulse{0%,100%{opacity:.5}50%{opacity:.95}}

/* ---- touch: a phone target should be a thumb target ---- */
@media(max-width:860px){
  .mobnav a,.mobnav span,.mobnav summary{min-height:44px;display:flex;align-items:center}
  .mobnav .drop a{min-height:44px;display:flex;align-items:center}
  .msg{padding:14px 14px 14px 18px}
  .msg .from{font-size:15px}
  .msg .subj{font-size:14px}
  .mascot,.mobmascot .mascot{--ms:88px}
}

/* ---- mobile: the reader should arrive, not blink ---- */
@media(max-width:860px){
  @media(prefers-reduced-motion:no-preference){
    .pane-list-only .listpane{animation:wi-pane-in .28s cubic-bezier(.2,.8,.25,1) both}
    .pane-read-only .reader{animation:wi-reader-in .30s cubic-bezier(.2,.8,.25,1) both}
  }
}
@keyframes wi-pane-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes wi-reader-in{from{opacity:.4;transform:translateX(18px)}to{opacity:1;transform:none}}

/* ---- reduced motion: silence the lot, including the view transition ---- */
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  body::before{display:none}
}
/* ================= message rows =================
   Two lines, not three: who and when share a line, the subject sits under.
   The old row ran 77px on desktop and 137px on a phone, which showed five
   messages per screen. This shows about nine. */
.row{display:flex;align-items:stretch;min-width:0}
.row .msg{flex:1 1 auto;min-width:0;display:block;padding:9px 6px 9px 17px}
.row .line1{display:flex;align-items:baseline;gap:10px;min-width:0}
.row .from{flex:1 1 auto;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .when{flex:0 0 auto;font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.row .subj{display:block;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.msg.unread .from{font-weight:700}
.msg.unread .subj{color:var(--ink);font-weight:600}
.row .tag{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:var(--brand-ink);background:var(--brass-soft);border-radius:3px;padding:1px 5px}

/* the star was a 22px target jammed into the top corner and clipped on phones */
.starform{margin:0;display:flex;align-items:center;flex:0 0 auto;padding-right:6px}
.row .star{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  border-radius:6px;transition:color .15s ease,background-color .15s ease,transform .12s ease;
  opacity:.45;
}
.row:hover .star,.row .star:focus-visible{opacity:1}
.row .star:hover{background:var(--brass-soft);color:var(--brand-ink)}
.msg.unread + .starform .star,.row:has(.msg.unread) .star{opacity:.75}

/* dark mode needs the panes to separate, not merge into one dark field */
[data-theme=dark] .listpane{background:var(--sheet)}
[data-theme=dark] .reader{background:var(--paper)}

/* the empty state line ran past a comfortable measure */
.emptyMascot p,.emptyMascot .sub{max-width:44ch;margin:0 auto;line-height:1.55}

/* the weave was reading as a dashed rule rather than a selvedge */
.msg.unread::before{
  width:5px;
  background:
    repeating-linear-gradient(180deg,
      var(--brand) 0 1px,
      color-mix(in srgb,var(--brand) 74%,var(--sheet)) 1px 2px,
      color-mix(in srgb,var(--brand) 88%,#04202a) 2px 4px),
    var(--brand);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.3);
}

/* phones: the mascot strip was eating a quarter of the first screen */
@media(max-width:860px){
  .mobmascot{padding:6px 12px 4px;flex-direction:row;gap:10px;justify-content:center;align-items:center}
  .mobmascot .mascot{--ms:56px}
  .mobmascot span{font-size:11.5px}
  .row .msg{padding:10px 4px 10px 16px}
  .row .from{font-size:14.5px}
  .row .subj{font-size:13.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .row .star{width:44px;height:44px;font-size:17px}
  .mobnav #themeLblM{display:none}
  .mobnav .mbtn{padding:7px 10px}
  .mobnav > span:last-child{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* thread rows now share the plain-row structure */
.threadrow.row{display:flex;align-items:flex-start;gap:10px;padding:9px 12px 9px 17px}
.threadrow .tcount{flex:0 0 auto;min-width:22px;height:20px;padding:0 6px;margin-top:1px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  background:var(--brass-soft);color:var(--brand-ink);font-size:11.5px;font-weight:700}
.threadrow .line1{flex:1 1 auto}
.threadrow.unread .subj{color:var(--ink);font-weight:600}
.threadrow.unread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--brand);box-shadow:inset -1px 0 0 rgba(255,255,255,.3)}

/* the empty-state copy is a real element now, so the measure can hold */
.emptyMascot .sub{display:block;max-width:46ch;margin:0 auto;line-height:1.6;color:var(--muted)}
.emptyMascot .sub b{display:block;font-family:Georgia,serif;font-size:21px;color:var(--ink);margin-bottom:6px}

/* mobile nav: keep the state label, truncate the address instead */
@media(max-width:860px){
  .mobnav{gap:6px}
  .mobnav>span:last-child{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  .mobnav #themeLblM{display:inline}
  .mobnav .mbtn{flex:0 0 auto;padding:7px 9px;font-size:13px}
  .mobmascot{padding:4px 12px 2px}
  .mobmascot .mascot{--ms:48px}
  .mobmascot span{font-size:11px}
}

/* the global mobile rule `button{width:100%}` was stretching the nav toggle
   to the full width and pushing the mailbox address off the screen */
@media(max-width:860px){
  button.mbtn{width:auto;min-height:40px;flex:0 0 auto}
  .mobnav>span:last-child{flex:1 1 auto;min-width:0}
}

/* the switch state needs a real element; the pseudo-element alone rendered nothing */
.optrow .opt{gap:10px}
.optrow .optstate{display:inline-flex;align-items:center;justify-content:center;min-width:30px;
  padding:1px 7px;border-radius:99px;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  background:var(--chip);color:var(--muted);text-transform:none}
.optrow .optstate::after{content:"Off"}
.optrow .opt:has(input:checked) .optstate{background:var(--brass-soft);color:var(--brand-ink)}
.optrow .opt:has(input:checked) .optstate::after{content:"On"}

/* ================= full-width pages =================
   Contacts, Settings, Storage, Activity and Bulk have no reading pane, but
   the grid still reserved 860px for one and left the form in a 348px column. */
.app.pane-full{grid-template-columns:212px 1fr}
.app.pane-full .reader{display:none}
.app.pane-full .listpane{border-right:0}
.app.pane-full .msglist{padding:22px 26px;max-width:820px}
.ptitle{margin:0;padding:11px 4px;font-size:15px;font-weight:700;color:var(--ink);
  font-family:Georgia,"Noto Serif Bengali",serif}
@media(max-width:860px){
  .app.pane-full .msglist{padding:14px}
  .ptitle{padding:9px 2px;font-size:16px}
}

/* screen-reader-only heading so every page exposes one */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}