/* =====================================================================================================
   The Platform on every screen size (Ava's device check, 21 Oct 2026: ops/platform-devices-check-21oct.html).
   Her yeses, by the number on that page:
     1  short screens (a phone turned sideways): a slim header, and the menu tucks away as you scroll down
     2  the logo alone when "The Seeker Platform" does not fit
     3  the menu's ‹ › sit beside the menu instead of on top of its first and last items
     4  her note: the Messages and Emails tabs stay hidden at the right edge and slide out when the mouse reaches them
     5  phones and tablets: the boxes on Home and the Emails list grow to their full length, one scroll for the page
     6  phones and short screens: a slim photo band that keeps the page title
     7  a tab row cut at the edge fades out under a small arrow
     9  phones: buttons a little taller (32px, her "only slightly bigger")
     10 phones: no label under 11px; a record's facts in two columns (her note: "not supposed to be vertical")
     11 diary task names on two lines (home2.css and relax() in home2.js)
     12 large screens: the page stops near 1,280px, and a list row's details sit beside the name
   devices.js does the parts that need measuring (2, 1's scrolling, 7, 9, 10). 8 was a No (the Lists page is retired).
   Rollback: delete this file's <link> and devices.js's <script> in index.html.
   ===================================================================================================== */

/* ── 1 · short screens: one slim line of header; the menu strip tucks away as you scroll (devices.js adds .dv-tuck) ── */
@media (min-width:641px) and (max-height:560px){
  html[data-theme="light"] .rk-masthead{padding:4px 0!important;gap:8px;grid-template-columns:auto minmax(0,1fr) auto}
  html[data-theme="light"] .rk-title b{display:none}
  html[data-theme="light"] .rk-mark{height:26px}
  html[data-theme="light"] .rk-mast-left{gap:8px}
  html[data-theme="light"] .rk-mast-right{gap:6px}
  html[data-theme="light"] .rk-status{padding:4px 5px 4px 11px;font-size:12px}
  html[data-theme="light"] .rk-status .go{width:22px;height:22px}
  html[data-theme="light"] .rk-pill{padding:6px 11px;font-size:12px}
  html[data-theme="light"] .rk-pill.solid{font-size:0;gap:0;padding:7px 9px}
  html[data-theme="light"] .rk-avatar{width:30px;height:30px;font-size:11px}
  html[data-theme="light"] .rk-iconbtn:not(.sm){width:32px;height:32px}
  html[data-theme="light"] #rk-nav .rk-item>button{padding:4px 10px;font-size:13px;min-height:34px}
  html[data-theme="light"] #rk-nav .rk-menu,html[data-theme="light"] #rk-nav.rk-menu-x .rk-menu{padding-top:2px;padding-bottom:3px}
  html[data-theme="light"] #rk-nav.dv-tuck .rk-menuwrap{display:none}
  /* the news strip rides in the Home band on a laptop; on a short screen the band is one line, so it stands down */
  html[data-theme="light"] #sk-bandslot .rk-ticker.in-hero{display:none!important}
}

/* ── 2 · the logo alone when the name would be cut (devices.js measures it) ── */
html[data-theme="light"] #rk-nav .rk-title.dv-tight b{display:none}

/* ── 3 · the menu's arrows sit in their own space; the strip ends beside them and settles on a whole item ── */
html[data-theme="light"] #rk-nav.rk-menu-x .rk-menuwrap{border-top:1px solid var(--b-rule,#dfe2e8);border-bottom:1px solid var(--b-rule,#dfe2e8)}
html[data-theme="light"] #rk-nav.rk-menu-x .rk-menu{margin:0 34px;padding-left:0;padding-right:0;border-top:0;border-bottom:0;
  scroll-snap-type:x proximity;scroll-padding:0 4px}
html[data-theme="light"] #rk-nav.rk-menu-x .rk-item{scroll-snap-align:start}
html[data-theme="light"] #rk-nav.rk-menu-x .rk-menuwrap::before{left:34px;width:32px}
html[data-theme="light"] #rk-nav.rk-menu-x .rk-menuwrap::after{right:34px;width:32px}
html[data-theme="light"] #rk-nav.rk-menu-x .rk-menuwrap::before{background:linear-gradient(to right,#fff,rgba(255,255,255,0))}
html[data-theme="light"] #rk-nav.rk-menu-x .rk-menuwrap::after{background:linear-gradient(to left,#fff,rgba(255,255,255,0))}

/* ── 4 · Messages and Emails: a 4px edge until the mouse reaches them, then both slide out together ── */
html[data-theme="light"] #ch-handle{transform:translate(calc(100% - 4px),-50%);transition:transform .18s ease}
html[data-theme="light"] #em-handle{transform:translateX(calc(100% - 4px));transition:transform .18s ease}
/* the reach: a strip of the edge wider than the 4px that shows, and over the gap between the two tabs */
html[data-theme="light"] :is(#ch-handle,#em-handle)::before{content:"";position:absolute;top:-6px;bottom:-6px;right:100%;width:14px}
html[data-theme="light"] :is(#ch-handle,#em-handle) .n{opacity:0;transition:opacity .18s ease}
html[data-theme="light"] body:has(#ch-handle:is(:hover,:focus-visible),#em-handle:is(:hover,:focus-visible)) #ch-handle{transform:translate(0,-50%)}
html[data-theme="light"] body:has(#ch-handle:is(:hover,:focus-visible),#em-handle:is(:hover,:focus-visible)) #em-handle{transform:none}
html[data-theme="light"] body:has(#ch-handle:is(:hover,:focus-visible),#em-handle:is(:hover,:focus-visible)) :is(#ch-handle,#em-handle) .n{opacity:1}
@media (prefers-reduced-motion:reduce){html[data-theme="light"] :is(#ch-handle,#em-handle),html[data-theme="light"] :is(#ch-handle,#em-handle) .n{transition:none}}

/* ── 5 · phones and tablets: one scroll for the page ── */
/* Home: the boxes grow to their full length; Your day takes one screen (fitDay in home2.js sees the open box) */
@container (max-width:1100px){
  #home2 .h2-frame:not(.h2-help):not(.h2-one){height:auto;align-items:start}
  #home2 .h2-frame:not(.h2-help):not(.h2-one)>.h2-box,
  #home2 .h2-frame:not(.h2-help):not(.h2-one)>.h2-stack>.h2-box{height:auto}
  #home2 .h2-frame:not(.h2-help):not(.h2-one)>.h2-stack{grid-template-rows:none;align-content:start}
  #home2 .h2-frame:not(.h2-help):not(.h2-one) .h2-body{overflow:visible;flex:none}
  #home2 .h2-frame:not(.h2-help):not(.h2-one) .h2-box.more::after{display:none}
}
/* Emails: the list of emails is the page (the open email keeps its own height, so its reply box stays in reach) */
@media (max-width:820px){
  .em-page:not(.roomopen){height:auto;min-height:0}
  .em-page:not(.roomopen) .em-rail{min-height:0}
  .em-page:not(.roomopen) .em-rail-scroll{overflow:visible;flex:none}
}

/* ── 6 · phones and short screens: a slim photo band that keeps the page's title ── */
@media (max-width:640px),(min-width:641px) and (max-height:560px){
  figure.band[data-band],figure.band[data-band].hero{height:auto}
  figure.band[data-band] .band-wrap{position:relative;padding:14px 16px 12px}
  figure.band[data-band]::after{background:rgba(19,27,45,.84)}
  html[data-theme="light"] figure.band[data-band] .sk-label{font-size:11px}
  html[data-theme="light"] figure.band[data-band] h1{font-size:26px;margin-top:3px;line-height:1.1}
  html[data-theme="light"] figure.band[data-band] .band-sub{font-size:14px;margin-top:4px}
  figure.band[data-band] figcaption{display:none}
}

/* ── 7 · a tab row cut at the edge: the last tab fades out under a small arrow (devices.js adds .dv-tabmore) ── */
.dv-tabmore{position:sticky;right:0;flex:0 0 34px;align-self:stretch;margin-left:-34px;display:flex;align-items:center;justify-content:flex-end;
  padding:0 2px 0 0;background:linear-gradient(to right,rgba(255,255,255,0),var(--dv-bg,#fff) 62%);cursor:pointer;z-index:1;
  color:var(--b-navy,#131b2d);font:400 20px/1 var(--b-sans,Jost,sans-serif);border:0;visibility:hidden;pointer-events:none}
[data-dv-more-r]>.dv-tabmore{visibility:visible;pointer-events:auto}

/* ── 9 + 10 · phones: buttons a little taller, no label under 11px (devices.js marks them) ── */
@media (max-width:640px){
  [data-dv-t]{min-height:32px}
  [data-dv-f]{font-size:11px!important}
}

/* ── 10 · a record's facts sit in two columns, beside the ring where there is room ── */
@media (max-width:900px){
  html[data-theme="light"] .rk .band .hbreak{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
  html[data-theme="light"] .rk .band .hbreak>.cc-col{display:contents}
}
@media (min-width:641px) and (max-width:1080px){
  html[data-theme="light"] .rk .band{grid-template-columns:auto minmax(0,1fr)}
}
@media (max-width:640px){
  html[data-theme="light"] .rk .band{gap:16px;padding:18px 16px}
  html[data-theme="light"] .rk .band .ring,html[data-theme="light"] .rk .band .ring svg{width:76px;height:76px}
  html[data-theme="light"] .rk .band .ring .c b{font-size:23px}
  html[data-theme="light"] .rk .band .hbreak .l small{font-size:11px}
}

/* ── 12 · large screens: the page stops near 1,280px, header and band edges in line with it ── */
@media (min-width:1500px){
  html[data-theme="light"] .main .view.rk{max-width:1280px}
  html[data-theme="light"] .rk-wrap{max-width:1332px}
  .band-wrap{max-width:1328px}
  /* a list row's details sit beside the name, in one column down the list, instead of at the far right */
  html[data-theme="light"] .rowlist>.rw>div[style*="flex:1"]{flex:0 1 560px!important}
  html[data-theme="light"] .rowlist>.rw>.r{margin-left:24px}
}