/* 操作ガイドのツールチップ幅・位置の是正 (task giip-1833).

   NEW FILE, NEW CLASS. Nothing here edits .zc-guide-tip or any other selector
   that already exists in zc-guide.css; the fix is a second class that
   zc-guide.js puts on the same element, so the compound selector wins on
   specificity without touching a byte of the original
   (rules/31_css_immutability_rule.md). Like zc-guide.css, every selector below
   only ever matches an element zc-guide.js creates at run time, so a screen
   opened without ?zc_guide is untouched.

   WHAT WAS WRONG. .zc-guide-tip is position:absolute inside .zc-guide-layer,
   and the layer is deliberately width:0;height:0 (it is a positioning origin,
   not a box). An absolutely positioned box sizes itself shrink-to-fit against
   its containing block, so the available width was 0 and the used width
   collapsed to the min-content width -- for Japanese text, one character. The
   tip rendered as a one-character-wide column and the 閉じる button with it.
   max-width:320px cannot help: it is an upper bound, and the box was already
   far below it.

   THE FIX IS THE CONTAINING BLOCK, NOT THE WIDTH. position:fixed makes the
   viewport the containing block, so the box has room to lay out even if a
   browser ignores width:max-content. zc-guide.js positions it in viewport
   coordinates to match and keeps it inside the screen.

   This file is byte-identical between SMART ORDER and SMART STOCK. */

.zc-guide-tip.zc-guide-tip-fit {
    position: fixed;
    box-sizing: border-box;
    width: max-content;
    min-width: 280px;
    max-width: 360px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;   /* a long URL wraps instead of widening the box */
    text-align: left;
}

/* 閉じる is three characters; in a box this narrow it must never be the thing
   that wraps. Same for the STEP badge. */
.zc-guide-tip.zc-guide-tip-fit .zc-guide-close,
.zc-guide-tip.zc-guide-tip-fit .zc-guide-step {
    white-space: nowrap;
    width: auto;
}

/* Phone widths: the desktop minimum still fits a 390px screen, so keep it and
   only give way on the narrow ones where 280px + margins would not fit. */
@media (max-width: 480px) {
    .zc-guide-tip.zc-guide-tip-fit {
        min-width: min(280px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
}