/* ═══════════════════════════════════════════════════════════════════════════
   Atrium inside its own Android app.

   Everything here hangs off `[data-scale="hand"]`, which auth.js stamps on the
   document when the app hands the page a session. In a browser not one rule
   below applies, so the web product is untouched by any of it.

   WHY IT EXISTS. The same page is right for both hosts in structure and wrong
   in scale. A workspace on a desktop is read at arm's length with a mouse that
   hits a 13px target every time; the same page in a hand is read at 30cm with
   a thumb, and a thumb is about 9mm across. So the app is not a different
   design — it is this design at the size a hand needs, which is roughly 15%
   more type and touch targets that clear 44px. Asked for on 2026-09-20: "more
   fit and more bolder even that web version… everything be bigger more
   touchable", and for the chat to sit at the size a messenger does.

   HOW. Almost every size in this product already comes from a token, so the
   tokens are what change; the rules after them are only for the places where
   a fixed pixel had to be spent. Scaling the scale keeps the proportions that
   were designed, rather than inflating one screen and leaving the next behind.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-scale="hand"]{
  /* The type scale, one step up. The desktop sizes are in app.css; these are
     the same intervals, multiplied, so headings stay headings. */
  --t-micro:11.5px; --t-xs:12.5px; --t-sm:14px; --t-base:15.5px; --t-md:17px;
  --t-lg:22px; --t-xl:30px; --t-display:46px;
  /* Room to breathe where a thumb lands, without moving the small steps that
     hold a row together. */
  --s3:13px; --s4:18px; --s5:24px;
  --topbar:60px;
}

/* Nothing is hyphenated or split down the middle of a word. A break mid-word
   is a desktop compromise for a narrow column; on a phone it reads as damage.
   `break-word` still rescues a URL that genuinely cannot fit — it just will
   not cut an ordinary word to save a few pixels. */
[data-scale="hand"] :where(p,span,div,li,td,th,label,button,a,h1,h2,h3,h4){
  hyphens:none;
  word-break:normal;
  overflow-wrap:break-word;
}

/* ── the bottom bar ──────────────────────────────────────────────────────── */
/* This is the app's own navigation, so it is built like one: a real 56px of
   bar, icons at 24px, and labels that can be read rather than deciphered. */
@media (max-width:700px){
  [data-scale="hand"] .rail-nav{padding:var(--s1) var(--s1) 6px}
  [data-scale="hand"] .navbtn{padding:9px 2px 7px;gap:5px;border-radius:12px}
  [data-scale="hand"] .navbtn .icon{width:25px;height:25px}
  [data-scale="hand"] .navbtn-label{font-size:11.5px;font-weight:600;letter-spacing:0}
  [data-scale="hand"] .navbtn-badge{min-width:19px;height:19px;font-size:11px;line-height:19px}
  [data-scale="hand"] .topbar-title{font-size:20px;font-weight:650}
}
/* Under 400px five apps and More leave ~57px a slot: a hair smaller, so "Calendar" still fits. */
@media (max-width:400px){
  [data-scale="hand"] .navbtn-label{font-size:11px}
}

/* ── anything you tap ────────────────────────────────────────────────────── */
/* 44px is the smallest target a thumb hits reliably. The web build's controls
   are 30-36px because a pointer is exact. */
[data-scale="hand"] .btn{min-height:44px;padding:0 var(--s4);font-size:var(--t-base);font-weight:600}
[data-scale="hand"] .btn--small{min-height:38px;padding:0 var(--s3);font-size:var(--t-sm)}
[data-scale="hand"] .iconbtn{min-width:44px;min-height:44px}
[data-scale="hand"] input,[data-scale="hand"] select,[data-scale="hand"] textarea{font-size:var(--t-base)}

/* ── the conversation list ───────────────────────────────────────────────── */
/* A messenger's row: a large face, a name you can read at a glance, and one
   line of what was said. The web row is built for a 300px column beside a
   thread; this one is the whole screen. */
[data-scale="hand"] .talk-conv{padding:11px var(--s4);gap:var(--s3);min-height:72px}
[data-scale="hand"] .talk-conv .talk-avatar{width:50px;height:50px;font-size:var(--t-md)}
[data-scale="hand"] .talk-conv .talk-avatar .talk-dot{width:15px;height:15px}
[data-scale="hand"] .talk-conv-name{font-size:var(--t-md);font-weight:600}
[data-scale="hand"] .talk-conv.is-unread .talk-conv-name{font-weight:700}
[data-scale="hand"] .talk-conv-preview{font-size:var(--t-sm)}
[data-scale="hand"] .talk-conv-when{font-size:var(--t-xs)}

/* ── the conversation itself ─────────────────────────────────────────────── */
/* Messenger proportions: 16px text, a bubble that hugs it, and a wider column
   than the desktop's 84% because there is no second pane to leave room for. */
[data-scale="hand"] .talk-msg{max-width:min(680px,88%)}
[data-scale="hand"] .talk-bubble{
  padding:9px 14px 10px;
  font-size:16px;line-height:1.45;
}
/* Long links still wrap rather than push the bubble off the screen; ordinary
   words do not break, which is the rule at the top of this file. */
[data-scale="hand"] .talk-text{overflow-wrap:break-word}
[data-scale="hand"] .talk-link{overflow-wrap:anywhere}

/* The message box, at the height a thumb expects, and 16px so the text
   somebody is typing is the size of the text they are reading. */
[data-scale="hand"] .talk-composer-box{padding:7px 7px 7px var(--s3)}
[data-scale="hand"] .talk-input{font-size:16px;padding:9px 0}
[data-scale="hand"] .talk-composer .iconbtn{min-width:42px;min-height:42px}

/* ── lists that are really menus ─────────────────────────────────────────── */
[data-scale="hand"] .menu-item{min-height:46px;font-size:var(--t-base)}
[data-scale="hand"] .talk-pop-item{min-height:46px}

/* ── the call ────────────────────────────────────────────────────────────── */
/* The controls are already round and already large; on a phone they are the
   only thing between somebody and leaving a call, so they get the last of the
   space rather than the first of the savings. */
@media (max-width:700px){
  /* The ROUND ones only. `.ac-btn` is also worn by buttons that are words —
     the way out of the lobby, and anything else marked quiet — and this rule
     outranks their own width (two selectors to one), so it squeezed "Back to
     the conversation" into a 56px circle and let the text run out of the pane,
     taking the layout and a scrollbar with it (reported 2026-09-21). */
  [data-scale="hand"] .ac-btn:not(.ac-btn--back):not(.ac-btn--quiet){width:56px;height:56px}
  [data-scale="hand"] .ac-btn:not(.ac-btn--back):not(.ac-btn--quiet) .icon,
  [data-scale="hand"] .ac-btn:not(.ac-btn--back):not(.ac-btn--quiet) svg{width:24px;height:24px}
}