/* =====================================================================
   CIC Connect | assets/mobile.css
   Loaded by render.php after app.css and theme-fix.css.

   app.css reflows at fourteen different widths: 400, 420, 520, 560,
   640, 700, 760, 820, 860, 900, 960, 980, 1024, and a band from 721 to
   1024. Nobody chose that. Each component got its own breakpoint as
   somebody fixed it on the day, so at any real phone width some parts
   of a page are in their mobile form and others are not. That is what
   the team is describing when they say it looks wrong rather than
   broken.

   This file adds two, and only two:
     up to 760px   a phone
     761 to 1024   a tablet, where the sidebar is still hidden

   It does not delete anything in app.css. It sits after it and settles
   the things that disagreed.
   ===================================================================== */

:root{
  --m-bar:60px;                        /* the bottom bar, without inset */
  --m-tap:44px;                        /* nothing tappable below this   */
}

/* --- the bottom bar --------------------------------------------------
   Four places people go every day, then More. It used to carry all
   eleven destinations as bare words and scroll sideways, which means
   the last five were invisible unless you knew to swipe a navigation
   bar. Fixed items with icons, and the remainder keep their place in
   the side menu that already lists them.

   No sideways scrolling, no wrapping, no hidden destinations. */
.cc-tabs{
  overflow:visible;
  background:var(--white);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 12px rgba(10,20,18,.07)}

.cc-tabs a,
.cc-tabs .cc-tabmore{
  flex:1 1 0;min-width:0;                /* five equal shares, no scroll */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:7px 2px 8px;
  min-height:var(--m-tap);
  background:none;border:0;cursor:pointer;
  color:var(--muted);text-decoration:none;
  font:500 10.5px/1.2 inherit;letter-spacing:0;
  -webkit-tap-highlight-color:transparent;
  /* app.css styles the active tab as a solid teal pill on the link
     itself, further down the file than the rules above. Left standing,
     its background survived while the colour below was overridden, and
     the result was a teal icon and a teal label on a teal ground:
     a blank green blob. The pill moved to the icon, so the link itself
     carries no background at all. */
  background:none;box-shadow:none;border-radius:12px;margin:0}

.cc-tabs a b,
.cc-tabs .cc-tabmore b{
  font-weight:500;font-size:10.5px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A fixed pill, sized here rather than guessed at with negative insets
   off an element whose width I had assumed. The icon is the pill's own
   content, so it paints on top of it by definition.

   The first attempt drew the pill as a ::before on a positioned parent.
   Positioned descendants paint above the parent's normal flow content,
   so it covered the icon and the label completely: a solid teal blob
   with nothing readable on it. */
.cc-tabi{
  position:relative;display:grid;place-items:center;line-height:0;
  width:46px;height:28px;border-radius:999px;
  background:transparent;transition:background .14s ease}

.cc-tabs a.on,
.cc-tabs .cc-tabmore.on{
  color:var(--teal);background:none;box-shadow:none}
.cc-tabs a.on b,
.cc-tabs .cc-tabmore.on b{font-weight:600}
.cc-tabs a.on .cc-tabi,
.cc-tabs .cc-tabmore.on .cc-tabi{background:rgba(11,77,74,.13)}

[data-theme="dark"] .cc-tabs a.on,
[data-theme="dark"] .cc-tabs .cc-tabmore.on{color:var(--gold)}
[data-theme="dark"] .cc-tabs a.on .cc-tabi,
[data-theme="dark"] .cc-tabs .cc-tabmore.on .cc-tabi{background:rgba(212,168,32,.22)}
@media(prefers-color-scheme:dark){
  [data-theme="auto"] .cc-tabs a.on,
  [data-theme="auto"] .cc-tabs .cc-tabmore.on{color:var(--gold)}
  [data-theme="auto"] .cc-tabs a.on .cc-tabi,
  [data-theme="auto"] .cc-tabs .cc-tabmore.on .cc-tabi{background:rgba(212,168,32,.22)}
}

/* Anchored to the pill, which now has a known size. The selector
   carries the same element part as app.css's .cc-tabs a .cc-navbadge,
   or that rule keeps winning and the count stays gold on a gold pill. */
.cc-tabs a .cc-navbadge,
.cc-tabs .cc-tabmore .cc-navbadge,
.cc-tabs a.on .cc-navbadge{
  position:absolute;top:-4px;right:-2px;
  display:grid;place-items:center;min-width:16px;height:16px;
  background:var(--danger);color:#fff;border-radius:999px;
  font:700 9.5px/1 sans-serif;padding:0 4px;
  border:2px solid var(--white);margin:0}

.cc-tabs a:focus-visible,
.cc-tabs .cc-tabmore:focus-visible{
  outline:2px solid var(--teal);outline-offset:-3px;border-radius:10px}

/* --- phones ---------------------------------------------------------- */
@media(max-width:760px){

  /* Room for the bar, once, here, rather than in four places that
     disagreed about how tall it is. */
  .cc-main{padding:14px 13px calc(var(--m-bar) + 18px + env(safe-area-inset-bottom))}
  .cc-main-bare,
  .cc-full .cc-main{padding-bottom:env(safe-area-inset-bottom)}

  /* iOS zooms a page in when a field smaller than 16px takes focus and
     never zooms back out. Every input on the platform, once. */
  input[type=text],input[type=email],input[type=password],input[type=tel],
  input[type=number],input[type=search],input[type=date],
  input[type=datetime-local],select,textarea{font-size:16px}

  /* A thumb is about 9mm. Anything that can be pressed clears 44px. */
  .cc-menu a,.cc-chan,.cc-thread,.cc-ev,.cc-hact,.cc-ctab,
  .btn,.cc-cp-btn,.cc-post-act{min-height:var(--m-tap)}
  .cc-hact,.cc-cp-btn{min-width:var(--m-tap)}
  .btn{padding:11px 16px}

  /* The drawer is a whole page on a phone, not a 260px column with the
     page showing through beside it. */
  .cc-side{width:min(310px,86vw)}

  .cc-top{padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top))}
  .cc-burger{padding:9px 8px}

  /* Cards ran edge to edge with 14px of air and a radius sized for a
     desktop column. */
  .cc-card{border-radius:14px;padding:15px 14px;margin-bottom:12px}

  /* Horizontal scrolling is for content, never for chrome. Anything
     that scrolls sideways gets momentum and no visible scrollbar. */
  .cc-chat-tabs,.cc-ctabs,.cc-emoji-tabs{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap}
  .cc-chat-tabs::-webkit-scrollbar,
  .cc-ctabs::-webkit-scrollbar{display:none}
  .cc-ctab{flex:0 0 auto}

  /* One pane at a time. app.css already does this at 760px for the
     chat; this keeps the feed and the inbox to the same line rather
     than 900px and 860px. */
  .cc-feedwrap,.cc-homegrid,.cc-meetgrid,.cc-inbox{
    grid-template-columns:1fr!important;display:block}
  .cc-feedside,.cc-inbox-side{display:none}

  /* A modal on a phone is a sheet that comes up from the bottom. A
     centred box with margins is a desktop habit. */
  .cc-picker,.cc-wp-panel,.cc-poll-panel,.cc-emoji{
    border-radius:18px 18px 0 0;max-height:82vh}
}

/* --- tablets ---------------------------------------------------------
   app.css shows the sidebar at 900px and up. Between 761 and 1024 the
   bar is still the navigation, so the room below it has to be there. */
@media(min-width:761px) and (max-width:1023px){
  .cc-main{padding-bottom:calc(var(--m-bar) + 20px + env(safe-area-inset-bottom))}
  .cc-full .cc-main{padding-bottom:0}
}

/* --- in a call -------------------------------------------------------
   The room is full screen and draws its own controls. A tab bar over
   the top of them is the one place this must not appear. */
.cc-in-call .cc-tabs{display:none}

/* --- installed to the home screen ------------------------------------
   No browser chrome to pull down, so the header has to hold the safe
   area itself or the notch eats the logo. */
@media(display-mode:standalone){
  .cc-top{padding-top:calc(12px + env(safe-area-inset-top))}
}

@media(prefers-reduced-motion:reduce){
  .cc-side,.cc-scrim{transition-duration:.01ms!important}
}