/* ===========================================================================
   MARID ON A PHONE — 5 Oct 2026.
   Loads after app.css, chrome.css and theme.css. Width-driven: everything in
   the first block is for a phone (under 760px); the second block is for any
   touch screen, whatever its width. The desktop layout is not touched: not one
   rule here applies above 759px except the touch block, which only removes
   blur and keeps every colour and shape.

   What a phone gets, and why:
     ONE BAR, STICKY, OUT OF THE WAY. The desktop bar carries the logo, the
       product switch, the nav, the agency/client switch, the account pill and
       the text-size and day/night controls. On a phone that stacked into four
       rows before the screen began. Now: logo · Social/Assistant · one round
       button. That button opens a bottom sheet holding the account, who is
       looking, text size and day/night — the same controls, folded. js/mobile.js
       moves them in there and moves them back on a wide screen.
     ONE COLUMN. Every grid is one column; nothing is squeezed side by side.
     THE HOME IS ROWS. Each count is a row — big number, title, one line — so
       the whole day fits on a screen and a half. The one that needs a person
       stays a full tile at the top, in its colour.
     SHEETS SLIDE UP. The app already does this under 760px; the sheet gets a
       taller reach, bigger buttons and the safe area.
     THE TAB BAR FITS THE THUMB. Five words, never clipped, never crowded,
       above the home indicator.
     NO BLUR ON TOUCH. Every glass panel paints near-solid instead of sampling
       the world through a backdrop-filter. On iOS Safari, dozens of
       backdrop-filter layers over a background that repaints on every scroll
       frame is what produces a solid white block over the page; and the blur
       itself is the dearest thing a phone GPU can be asked for per frame.
   The vocabulary is hers throughout: the same tokens, the same pills, glass
   and ink, Jost. Nothing new is invented.
   ======================================================================== */

/* ======================================================= THE PHONE ====== */
@media (max-width:759px){
  /* the gutter. A brand may write its own on <html> inline for the wide
     layout (48–72px); on a phone that is a third of the screen. */
  html{--gutter:16px !important}

  /* ---- the bar: one row, sticky, a wash so what scrolls under it stays legible ---- */
  .bar{position:sticky;top:0;z-index:40;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;
    padding:8px var(--gutter);min-height:60px;
    background:linear-gradient(rgba(4,20,23,.84),rgba(4,20,23,.66));border-bottom:1px solid rgba(255,255,255,.08)}
  html[data-theme="day"] .bar{background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.76));border-bottom-color:rgba(13,26,29,.09)}
  html[data-brand][data-brand] .bar{background:var(--glass-soft);border-bottom:1px solid var(--glass-line)}
  .bar .wm{font-size:.95rem;letter-spacing:.24em;padding:0}
  .bar .whose{gap:0;min-height:44px;display:flex;align-items:center}
  .bar .whose img{height:30px}
  .bar .whose .who-t{display:none}
  /* on a phone the bar carries the mark alone; the business's name is in the band and on every screen */
  .bar .whose .mk{width:32px;height:32px;flex:0 0 auto;display:block}
  @media (max-width:420px){ .bar .whose .wmk{display:none} .bar .whose .mk{margin:0} }
  .bar .seg{display:none !important}
  .bar .prod{margin:0 auto;padding:0;flex:0 1 auto;min-width:0}
  .bar .prod button{height:44px;padding:0 14px;font-size:.92rem}
  /* the one button that opens the folded controls */
  .mb-more{margin-left:auto;flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    background:var(--on-world);border:1px solid var(--on-world-line);color:inherit;cursor:pointer;padding:0}
  .mb-more[hidden]{display:none}
  .mb-more svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
  .mb-more svg circle{fill:var(--glass);stroke:currentColor}
  .mb-more:focus-visible{outline:2px solid currentColor;outline-offset:2px}
  /* if the script never ran, the controls are still in the bar: let them wrap rather than vanish */
  .bar .mode,.bar .client,.bar .chrome{flex:0 0 auto}
  .bar:has(.mode, .client, .chrome){flex-wrap:wrap}

  /* ---- the folded controls: a bottom sheet in the app's own sheet shape ---- */
  .mb-menu{position:fixed;inset:0;z-index:310}
  .mb-menu[hidden]{display:none}
  .mb-menu .veil{position:absolute;inset:0;background:rgba(2,10,14,.55)}
  .mb-menu .pan{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;color:var(--ink);
    background:var(--glass);border-radius:var(--r) var(--r) 0 0;box-shadow:0 -20px 80px rgba(0,0,0,.4);
    padding:0 0 calc(14px + env(safe-area-inset-bottom))}
  .mb-menu .grab{width:44px;height:5px;border-radius:999px;background:rgba(10,20,22,.18);margin:12px auto 0;
    background:color-mix(in srgb,var(--ink) 18%,transparent)}
  .mb-menu .hd{display:flex;align-items:center;gap:12px;padding:12px 20px 8px}
  .mb-menu .hd h2{flex:1;font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.05}
  .mb-menu .x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
    background:rgba(10,20,22,.07);background:color-mix(in srgb,var(--ink) 8%,transparent)}
  .mb-menu .x svg{width:20px;height:20px}
  .mb-menu .mrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;min-height:64px;padding:12px 20px;
    border-top:1px solid rgba(10,20,22,.08);border-top-color:color-mix(in srgb,var(--ink) 9%,transparent)}
  .mb-menu .mrow:has([hidden]:only-child),.mb-menu .mrow:not(:has(.mode,.client,.chrome)){display:none}
  .mb-menu .mrow .t{flex:1 1 150px;min-width:0}
  .mb-menu .mrow .t b{display:block;font-weight:600;font-size:1.02rem;line-height:1.25}
  .mb-menu .mrow .t span{display:block;color:var(--ink-2);font-size:.9rem}
  /* the controls themselves, recoloured for a sheet instead of the world */
  .mb-menu .mode,.mb-menu .client,.mb-menu .chrome .grp{
    background:rgba(10,20,22,.06);border:1px solid rgba(10,20,22,.1);
    background:color-mix(in srgb,var(--ink) 7%,transparent);border-color:color-mix(in srgb,var(--ink) 12%,transparent);
    color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none;margin:0}
  .mb-menu .mode{order:0}
  .mb-menu .mode button,.mb-menu .chrome button{color:var(--ink);height:40px}
  .mb-menu .mode button:hover,.mb-menu .chrome button:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
  .mb-menu .mode button.on{background:var(--ink);color:var(--glass)}
  .mb-menu .client{height:48px;padding:0 16px 0 10px;font-size:.98rem;max-width:100%}
  .mb-menu .client .name{display:inline;overflow:hidden;text-overflow:ellipsis}
  .mb-menu .client .name-s{display:none}
  .mb-menu .client.locked{opacity:.78}
  .mb-menu .chrome{margin:0;gap:8px;flex-wrap:wrap}

  /* ---- screens: one column, tighter, room for the tab bar ---- */
  .screen{padding:6px var(--gutter) calc(96px + env(safe-area-inset-bottom))}
  .screen>header{margin:12px 0 16px;gap:6px 12px;align-items:center}
  .screen>header h1{font-size:2rem;flex:1 1 auto}
  .screen>header p{font-size:.98rem;padding-bottom:0;flex:1 1 100%;order:5}
  .screen>header .info,.screen>header .back{align-self:center;margin-left:auto}
  .screen>header .back{height:40px;padding:0 14px 0 10px;font-size:.9rem}
  .back{margin-left:auto}

  /* a long label wraps inside its pill rather than forcing the screen wider; a fixed
     height elsewhere (.decide, .sheet .ft, .ib .acts) still wins by specificity */
  .go,.no{height:auto;min-height:48px;padding:10px 18px;font-size:1.02rem;white-space:normal;text-align:center;line-height:1.2;max-width:100%}
  /* the grid column and the text field may be narrower than the field's own idea of itself */
  .ask{margin-bottom:16px;gap:8px;grid-template-columns:minmax(0,1fr)}
  .askin{width:0}
  .ask>.label{font-size:.8rem}
  .askrow{padding:5px 5px 5px 16px}
  .askin{height:46px;font-size:1rem}
  .askrow .go{height:44px;padding:0 16px;font-size:.95rem}
  .ask.compact .askin{height:44px;font-size:1rem}
  .ask.compact .askrow .go{height:42px;padding:0 14px}

  /* ---- home: rows, not tiles. The number, the title, one line. ---- */
  .tiles{grid-template-columns:1fr;gap:10px}
  .tile{min-height:0;padding:14px 16px;border-radius:var(--r2);
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 14px}
  .tile:hover{transform:none}
  .tile>.big,.tile>.num{order:1;flex:0 0 auto;font-size:2.2rem;line-height:1;min-width:2.3ch;letter-spacing:-.04em}
  .tile>.num{font-size:1.4rem;min-width:0}
  .tile>span:last-child{order:2;flex:1 1 0;min-width:0}
  .tile>.art{order:3;position:static;flex:0 0 auto;max-width:36%}
  .tile>.week,.tile>.rulechips,.tile>.sts,.tile>.stack,.tile>.swatch,.tile>.strip{order:4;flex:1 1 100%}
  .tile h2{font-size:1.08rem;line-height:1.15}
  .tile p{font-size:.9rem;line-height:1.35;margin-top:2px;max-width:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tile .fan{gap:6px}
  .tile .fan .frame{width:28px;height:48px;border-radius:7px}
  .tile .fan .frame:nth-child(2){transform:translateY(5px)}
  .tile .fan .frame:nth-child(3){transform:translateY(10px)}
  .tile .week{gap:6px}
  .tile .week .frame{width:22px;height:38px;border-radius:5px}
  .tile .week b{font-size:.72rem;gap:4px}
  .tile .week .th.ph,.tile .week .th.ml{width:30px;height:30px}
  .tile .plus{width:56px;height:56px;font-size:2rem;border-width:2px}
  .tile .strip .frame{width:48px;height:32px}
  .rulechips i{font-size:.82rem;padding:6px 10px}
  /* the one that needs a person keeps its full tile, in its colour */
  .tile.hero,.tile.hero.needs{flex-direction:column;flex-wrap:nowrap;align-items:stretch;min-height:0;padding:18px 18px 16px;gap:10px}
  .tile.hero>.big{font-size:3.2rem;min-width:0}
  .tile.hero>.art,.asst .tile.hero .art,.tile.hero.needs .art{position:absolute;right:14px;top:14px;max-width:58%}
  .tile.hero>span:last-child{flex:0 0 auto}
  .tile.hero h2{font-size:1.25rem}
  .tile.hero p{-webkit-line-clamp:3}
  .tile .stack i{font-size:.78rem;padding:6px 10px}
  .tile.wide{flex-direction:row;align-items:center;gap:14px;padding:14px 16px;min-height:0}
  .tile.wide .big{font-size:2.2rem}

  /* ---- ready for you ---- */
  .cuts{gap:28px}
  .cut{grid-template-columns:1fr;gap:16px}
  .stage .frame{width:min(100%,320px);max-height:none;height:auto}
  .stage .cap i{font-size:1.3rem}
  .stage .play{width:68px;height:68px}
  .say{gap:12px}
  .say h2{font-size:1.5rem}
  .say blockquote{font-size:1.05rem}
  .held{margin-top:14px;min-height:52px;padding:8px 16px;gap:8px 12px}
  .held .note{margin-left:0;flex:1 1 100%;font-size:.88rem}
  .decide{margin-top:14px;gap:8px}
  .decide .go,.decide .no{flex:1 1 100%;min-width:0;height:54px}
  .picks{gap:8px}
  .pick{min-height:96px;padding:12px 14px 10px}
  .pick b{font-size:1.05rem}

  /* ---- add footage ---- */
  .drop{padding:28px 18px 24px;gap:10px}
  .drop .plus{width:72px;height:72px;font-size:2.4rem;margin-bottom:2px}
  .drop b{font-size:1.4rem}
  .drop p{font-size:.95rem}
  .drop .go{min-width:0;width:100%;margin-top:8px}
  .lib{padding:10px 14px;gap:6px 12px;font-size:.92rem;margin-top:12px}
  .lib .frames .frame{width:30px;height:52px}
  .steps{gap:8px;margin-top:16px}
  .step{padding:14px 16px;min-height:0;column-gap:14px}
  .step b{font-size:2rem}
  .step h3{font-size:1.02rem}
  .step p{font-size:.9rem}

  /* ---- pick the bits ---- */
  .moments{gap:10px}
  .mo .frame .t{font-size:1.05rem;padding-right:56px}
  .mo .bd{padding:12px 10px 6px;gap:8px}
  .mo .bd p{font-size:.92rem}

  /* ---- the plan ---- */
  .week{gap:14px}
  .day{gap:8px}
  .day h3{font-size:1.25rem}
  .slot{padding:14px 16px 12px;min-height:0;column-gap:12px;row-gap:6px}
  .slot .when{font-size:1.5rem}
  .slot .t{font-size:1rem}
  .slot>.th{width:48px;height:84px}
  .slot>.th.ph,.slot>.th.ml{width:56px;height:56px}
  .empty{min-height:72px;font-size:.95rem}

  /* ---- your brand · what it knows · the number ---- */
  .answers{gap:10px}
  .ans{min-height:0;padding:16px 18px;border-radius:var(--r2);gap:10px}
  .ans:hover{transform:none}
  .ans b{font-size:1.2rem}
  .ans span.sub{font-size:.92rem}
  .ans .swr i{width:40px;height:40px}

  /* ---- inbox ---- */
  .chan{gap:6px;margin:-2px 0 14px}
  .chp{height:38px;padding:0 12px;font-size:.88rem}
  .ibs{gap:10px}
  .ib{padding:16px 16px 14px;border-radius:var(--r2);gap:10px}
  .ib.needs,.ib.drafted,.ib.buying{padding-left:22px}
  .ib .who b{font-size:1.05rem}
  .ib .msg{font-size:1.05rem}
  .ib .draft{padding:12px 14px}
  .ib .draft p{font-size:.98rem}
  .ib .acts{gap:8px}
  .ib .acts .go{height:48px;flex:1 1 100%}
  .ib .acts .no{height:46px;flex:1 1 auto;padding:0 14px}
  .rules summary{min-height:56px;padding:12px 16px;font-size:1rem}

  /* ---- funnels · conversations: the list, then the one you opened ---- */
  .convo{gap:12px}
  .cv{padding:14px 16px 12px;border-radius:var(--r2)}
  .cv:hover{transform:none}
  .cv.isheld,.cv.mine{padding-left:22px}
  .fd-top,.thread .top{padding:12px 16px;gap:8px 12px}
  .fd-top h2,.thread .top h2{font-size:1.3rem}
  .fd-body{padding:16px 16px 6px;gap:16px}
  .fstep{padding:10px 12px;gap:12px}
  .thread .top .go.take{height:46px;padding:0 18px;font-size:.98rem}
  .msgs{padding:14px 16px}
  .m{max-width:88%}
  .m .b{font-size:1rem;padding:10px 14px}
  .thread .foot{padding:12px 16px 16px}
  .compose{padding:5px 5px 5px 16px}
  .compose input{height:46px;font-size:1rem}
  .compose .go{height:44px;padding:0 16px}
  .have{min-height:52px;padding:6px 6px 6px 16px}
  .have .no{height:44px}

  /* ---- your own AI ---- */
  .aigrid{gap:20px}
  .aicards{gap:10px}
  .aic{min-height:0;padding:16px 18px}
  .aic b{font-size:1.15rem}
  .jobrow{min-height:60px;padding:10px 14px}
  .tier,.uses{font-size:.95rem}

  /* ---- the sheet: slides up, reaches further, bigger buttons, safe area ---- */
  .sheet .pan{max-height:92vh;border-radius:var(--r2) var(--r2) 0 0}
  .sheet .hd{padding:12px 18px 8px}
  .sheet .hd h2{font-size:1.4rem}
  .sheet .x{width:44px;height:44px}
  .sheet .sc{padding:4px 16px 16px;font-size:1rem;gap:8px}
  .sheet .ft{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:8px}
  .sheet .ft .go,.sheet .ft .no{height:52px}
  .sheet .ft .no{min-width:0;flex:0 1 40%}
  .sheet .big{font-size:1.8rem}
  .sheet .act{height:48px;padding:0 18px}
  .row{min-height:56px;padding:10px 12px 10px 14px;gap:12px}
  .row .t b{font-size:1rem}
  .opt{padding:12px 14px;min-height:64px}
  .opt b{font-size:1.05rem}
  .cl button{min-height:84px;padding:14px 16px}
  .cl button b{font-size:1.2rem}
  .cl.hues button{min-height:72px;padding:12px 14px}
  details summary{min-height:52px;padding:10px 16px;font-size:.98rem}
  details .in{padding:0 14px 14px}

  /* ---- the toast, above the tab bar ---- */
  .toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:92vw;border-radius:22px;padding:12px 16px;font-size:.95rem}
  .toast.show{transform:translate(-50%,0)}

  /* ---- the tab bar: five words that always fit, above the home indicator ---- */
  .tabs{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:5px;gap:2px}
  .tabs a,html[data-brand][data-brand] .tabs a{height:50px;font-size:.8rem;letter-spacing:0;padding:0 2px;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .tabs a .n{min-width:18px;height:18px;font-size:.7rem;padding:0 4px}
}
@media (max-width:359px){
  .tabs{padding:4px;gap:0}
  .tabs a,html[data-brand][data-brand] .tabs a{font-size:.75rem;gap:2px;padding:0 1px}
  .tabs a .n{min-width:16px;height:16px;padding:0 3px;font-size:.75rem}
  .bar .prod button{padding:0 10px;font-size:.86rem}
  .screen>header h1{font-size:1.8rem}
}

/* ======================================================== TOUCH ========= */
/* Any touch screen, any width: the same look painted without backdrop blur. */
@media (pointer:coarse){
  *,*::before,*::after{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  :root{--glass:rgba(255,255,255,.965);--glass-soft:rgba(255,255,255,.92);--on-world:rgba(255,255,255,.17);--on-world-line:rgba(255,255,255,.3);--dark-glass:rgba(6,14,16,.86)}
  html[data-theme="day"]{--glass:#ffffff;--glass-soft:rgba(255,255,255,.96);--on-world:rgba(13,26,29,.06);--on-world-line:rgba(13,26,29,.13);--dark-glass:rgba(13,26,29,.08)}
  .tabs{background:rgba(6,14,16,.92)}
  .toast{background:rgba(6,14,16,.94)}
  .sheet .veil{background:rgba(2,10,14,.58)}
  .sheet .pan{background:var(--glass)}
  @media (min-width:760px){
    .bar{background:linear-gradient(rgba(4,20,23,.84),rgba(4,20,23,.66))}
    html[data-theme="day"] .bar{background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.76))}
  }
  /* the two soft lights in the world: gradients, not 90px blurs. Same size on
     screen, same colour, nothing to re-blur on every frame. */
  .world i{filter:none}
  .world .a{width:92vw;height:92vw;left:-32vw;top:26vh;background:radial-gradient(closest-side,var(--c2),transparent)}
  .world .b{width:74vw;height:74vw;right:-26vw;top:-22vh;background:radial-gradient(closest-side,var(--c3),transparent)}
  .world::after{display:none}
  .stage .glow{filter:none;opacity:.42;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}

  /* ======================================================================
     Found by looking at it on a phone rather than by counting rectangles.
     Four things were printing on top of each other.
     ================================================================== */

  /* 1. The message bubbles were absolutely positioned over the tile, so
        "Needs you" and its paragraph were printed underneath them. The old
        override used `.tile > .art`, which misses when the block is nested.
        Put it back in the flow, full width, below the words. */
  .tile .art{position:static;right:auto;top:auto;max-width:none;width:100%;
    order:4;flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .tile .art>*{max-width:100%}

  /* 2. The clip strip was clipping its own duration badge — "0:32" read
        ":32" — because a 28px frame cannot hold it. Give the strip room and
        drop the badge when the frame is too small to carry it honestly. */
  .tile .fan,.tile .strip{order:4;flex:1 1 100%;margin-top:10px;overflow:visible}
  .tile .fan .frame{width:56px;height:96px;border-radius:10px}
  .tile .fan .frame:nth-child(2),
  .tile .fan .frame:nth-child(3){transform:none}
  .tile .strip .frame{width:70px;height:48px}
  .tile .fan .frame .dur,.tile .strip .frame .dur{right:4px;bottom:4px;padding:2px 6px;font-size:.72rem}
  .tile .fan .frame .pl,.tile .strip .frame .pl{width:30px;height:30px;margin:-15px 0 0 -15px}

  /* 3. The tab bar floats over the page, so the last card was underneath it.
        Clear its real height plus the home indicator. */
  .screen{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

  /* 4. "Build it" sat on top of the text being typed: a flex row cannot hold
        a 1rem field and a button on a 375px screen. Stack them. */
  .askrow{flex-wrap:wrap;border-radius:22px;padding:10px 14px;gap:8px}
  .askin{flex:1 1 100%;width:auto;height:42px}
  .askrow .go{flex:1 1 100%;height:46px}

  /* The tile is a nowrap flex row and `.tile .art` is set absolute in app.css,
     which loads after this file — so an equal-specificity override lost, and
     the message bubbles kept printing over "Needs you". Beat it on specificity
     and let the row wrap, which is what puts the bubbles underneath the words. */
  /* !important because nothing else has beaten it: this is a decoration that
     app.css pins to the corner of a wide tile, and on a phone it has to be a
     block under the words instead. A phone-only override of a desktop-only
     position is exactly what important is for. */
  /* A phone tile is a block, not a row. The desktop tile is a flex row with the
     number, the words and a decoration side by side; at 343px there is no room
     for three columns, and a non-wrapping row pushed the decoration off the
     card. Blocks stack, which is all a phone needs. */
  html body .tile{display:flex !important;flex-direction:column !important;align-items:stretch !important}
  html body .tile>.big,html body .tile>.num{order:1}
  html body .tile>h2,html body .tile>span:last-child{order:2}
  html body .tile .art{order:3 !important}
  html body .tile>*{float:none !important}
  html body .tile>.big,html body .tile>.num{display:block !important;margin-bottom:4px}
  html body .tile .art{position:static !important;right:auto !important;top:auto !important;
    order:4 !important;flex:1 1 100% !important;width:100% !important;max-width:none !important;margin-top:12px !important}
  /* the stack inside it is fanned out and pinned too; on a phone it is simply
     three lines of what people asked, stacked under the words. */
  html body .tile .art .stack{position:static !important;display:flex !important;
    flex-direction:column !important;align-items:stretch !important;
    width:100% !important;max-width:none !important;transform:none !important;
    inset:auto !important;gap:6px !important}
  html body .tile .art .stack>*{position:static !important;transform:none !important;
    width:auto !important;max-width:100% !important;margin:0 !important;
    white-space:normal !important;text-overflow:clip !important}
}