/* Gantry · instagram.css
   Instagram Multi-Account Posting (#panel-instagram).

   This file is deliberately small. The workspace is built out of components that
   already exist: cards, clusters, prompt blocks, filter pills, the KB panel, the
   modals, pagination, status lines and the start gate come from
   cards.css / hitec.css / shell.css, and the account selector (.acct-*), the
   personality bar (.personality-*) and the Add Account modal (.aa-*) come from
   salman-lm.css, which defines them by class rather than by id precisely so a
   second multi-account workspace can use them unchanged.

   What is left here is only what is genuinely this workspace's own: the account
   row's layout id, the Instagram accent on its start gate, and the mount-wrapper
   rule every tab needs for its floating Add button. */

  .ig-acct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}

  /* The shared start gate, drawn in Instagram's gradient rather than the
     default accent, so the workspace reads as Instagram's at a glance. */
  #panel-instagram .start-icon{
    background:linear-gradient(135deg,rgba(240,148,51,.16),rgba(220,39,67,.16) 45%,rgba(188,24,136,.16));
    border-color:rgba(220,39,67,.35);
    color:#e1306c;
  }

  /* Which account the personality on screen belongs to. Sits between the label
     and the text so the bar reads as one sentence: Personality, of whom, which. */
  /* flex:0 1 auto + min-width:0 so a long "Name (email)" ellipsises instead of
     holding the bar open. Without the min-width the chip keeps its full content
     width no matter what max-width says, and the page scrolls sideways on a
     phone: the same flex trap the account selector fell into. */
  .personality-who{
    flex:0 1 auto;min-width:0;max-width:260px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:.76rem;font-weight:700;color:var(--ink-2);
    padding:2px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);
  }
  /* On a phone the chip takes a line of its own rather than sharing one with
     the label. Sharing meant the two together were wider than the bar, and
     because the chip only shrinks down to its own content when it has room to
     wrap, the surplus became horizontal scroll on the whole page. A full-width
     basis removes the competition: it fills the line and ellipsises inside it. */
  @media (max-width:600px){
    .personality-who{flex:1 1 100%;max-width:100%}
  }

  /* ---- the stage gate ----
     A card is worked in order and each stage stays locked until the one before
     it is done. Disabling the control is what actually enforces that; these two
     rules are what make the lock legible, so an operator is never left clicking
     a dead button with no idea why it is dead. */
  .gate-note{
    display:flex;align-items:flex-start;gap:7px;margin:0 0 10px;padding:8px 11px;
    border:1px solid rgba(251,191,36,.32);border-radius:9px;background:rgba(251,191,36,.07);
    color:var(--amber);font-size:.79rem;font-weight:600;line-height:1.45;
  }
  .gate-note[hidden]{display:none}
  /* Dim a prompt block whose stage has not been reached yet. Deliberately only
     a visual cue: the buttons inside are genuinely disabled, because
     pointer-events alone would still leave them reachable by keyboard. */
  .prompt-block.stage-locked{opacity:.55}
  .prompt-block.stage-locked .prompt-note{color:var(--amber)}

  /* The Add button's wrapper is empty until mountIgAddInfo() fills it. Without
     this it would still occupy a row of the layout, exactly as Media Post's own
     mount does (cards.css); scoped to this workspace's id so the mounts never
     collide. */
  #igAddInfoMount{display:contents}
  #igAddInfoMount:empty{display:none}

  /* ---- the status filter, in two shapes ----
     Both shapes are always in the DOM; only these rules decide which is shown.
     Above 760px the pill row fits on one or two lines and is faster to use,
     being one tap per status with the counts visible at a glance. Below it the
     pills wrapped to as many as six rows on a 320px screen, pushing the first
     card almost a full screen down, so the select takes over. */
  #igFilterBar{display:block}
  #igFilterBar .li-filter-pills{display:flex;flex-wrap:wrap;gap:8px}
  #igFilterBar .li-filter-select{display:none;align-items:center;gap:10px}
  #igFilterBar .li-filter-select label{
    flex:none;font-size:.7rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);
  }
  #igFilterBar .li-filter-select select{
    flex:1;min-width:0;font:inherit;font-size:.88rem;font-weight:600;
    color:var(--ink-1);background:var(--surface-1);
    border:1px solid var(--border);border-radius:10px;
    padding:10px 12px;   /* 40px tall: a comfortable touch target */
  }
  #igFilterBar .li-filter-select select:focus{
    outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(25,103,255,.18);
  }
  @media (max-width:760px){
    #igFilterBar .li-filter-pills{display:none}
    #igFilterBar .li-filter-select{display:flex}
  }

  @media (max-width:600px){
    .ig-acct-row{flex-direction:column;align-items:stretch}
    #panel-instagram .acct-selector{justify-content:space-between}
    /* Full-width, thumb-sized controls rather than pill-sized ones. */
    #panel-instagram .btn-add-acct,
    #panel-instagram .btn-edit-personality{justify-content:center;padding:10px 14px}
    #panel-instagram .personality-bar{align-items:flex-start}
    /* A modal on a phone is the screen, not a card floating on it. */
    #panel-instagram .aa-card,
    #igPersonalityModalMount .li-modal-card,
    #igAddInfoMount .li-modal-card,
    #igTopicPickerMount .li-modal-card,
    #igPromptMount .li-modal-card{width:100%;max-width:100%}
    /* Stack the publish controls: the segmented mode switch and Confirm side by
       side leave neither wide enough to read at this size. */
    #panel-instagram .publish-row{flex-direction:column;align-items:stretch;gap:10px}
    #panel-instagram .publish-row .seg{width:100%}
    #panel-instagram .publish-row .seg button{flex:1}
    #panel-instagram .sched-fields.show{grid-template-columns:1fr}
  }

  /* Very small phones: the card head's row/uuid block and the status flag stop
     competing for one line. */
  @media (max-width:380px){
    #panel-instagram .card-head{flex-wrap:wrap;row-gap:6px}
    #panel-instagram .card-flag{order:3;width:100%}
  }

  /* Large screens: the grid is two columns from 1100px in cards.css. Past very
     wide viewports the shell's own max-width already centres the content, so
     nothing extra is needed here; this rule only stops a single card stretching
     to an unreadable line length when it is the only one on its row. */
  @media (min-width:1600px){
    #panel-instagram .prompt-text,
    #panel-instagram .caption{max-width:none}
  }