/* 設備・特徴 chips (required-293)
 *
 * Rendered by js/common/portal-features.js from the flag map the portal
 * crawlers store on company_matchings.strengths. Used by the 企業詳細 drawer,
 * the 企業データ list table and the ポータル固有条件 filter, so the rules live in
 * their own global stylesheet rather than inside any one screen's CSS.
 *
 * One neutral chip style for every flag. These facets carry no ranking — 駐車場
 * is not more urgent than Wi-Fi — so a per-flag hue would be decoration, and a
 * dozen hues inside a dense table is noise. Colour stays reserved for state
 * that means something: selected, disabled, unavailable.
 *
 * Tokens are declared locally because the app ships a static tailwind build
 * (no JIT): a generated utility class would never reach the stylesheet.
 */

:root {
    --pf-surface: #f1f5f9;   /* slate-100 — chip ground                  */
    --pf-border:  #e2e8f0;   /* slate-200 — 1px hairline                 */
    --pf-text:    #334155;   /* slate-700 — 9.0:1 on the chip ground     */
    --pf-icon:    #64748b;   /* slate-500 — quieter than the label       */
    --pf-on-bg:   #e0f2fe;   /* sky-100  — selected ground               */
    --pf-on-bd:   #0369a1;   /* sky-700  — selected border + text        */
    --pf-muted:   #94a3b8;   /* slate-400 — "+N" overflow marker         */
}

.pf-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--pf-border);
    border-radius: 6px;
    background: var(--pf-surface);
    color: var(--pf-text);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    /* Japanese labels are full-width; the default tracking reads cramped at
       this size, so give them a hair of breathing room. */
    letter-spacing: .01em;
}

.pf-chip i {
    font-size: 10px;
    color: var(--pf-icon);
}

/* "+3" overflow marker — no icon, quieter still, so it never reads as a
   thirteenth facility. Tabular figures keep the column from twitching. */
.pf-chip--more {
    background: transparent;
    border-color: transparent;
    color: var(--pf-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding-left: 2px;
}

/* ---- Interactive variant (ポータル固有条件 filter) ---------------------- */

.pf-chip--btn {
    cursor: pointer;
    background: #fff;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    /* 28px tall + the 4px grid gap keeps neighbouring targets apart. */
    padding: 5px 10px;
    font-size: 12px;
}

.pf-chip--btn:hover { background: var(--pf-surface); }

.pf-chip--btn:focus-visible {
    outline: 2px solid var(--pf-on-bd);
    outline-offset: 2px;
}

.pf-chip--on,
.pf-chip--on:hover {
    background: var(--pf-on-bg);
    border-color: var(--pf-on-bd);
    color: #0c4a6e;
}

.pf-chip--on i { color: var(--pf-on-bd); }

@media (prefers-reduced-motion: reduce) {
    .pf-chip--btn { transition: none; }
}

/* ---- ポータル固有条件 modal (required-293) --------------------------------
 *
 * Rendered by js/list-company/portal-conditions.js into the shared selection
 * modal, so it borrows that shell and only styles what is new: the tri-state
 * facet rows and the numeric input groups.
 */

.pfx-banner {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 8px;
    padding: 11px 13px;
    margin-bottom: 20px;
    color: #475569;
    font-size: 11.5px;
    line-height: 1.8;
    max-width: 720px;
}

.pfx-banner i { color: var(--pf-icon); margin-top: 3px; }

.pfx-sec + .pfx-sec {
    border-top: 1px solid #f1f5f9;
    margin-top: 20px;
    padding-top: 20px;
}

.pfx-h {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.pfx-h b { font-size: 14px; color: #0f172a; letter-spacing: .01em; }

.pfx-src {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1px solid var(--pf-border);
    border-radius: 5px;
    background: #f8fafc;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
}

/* The availability note sits right-aligned so the eye finds every count in one
   column instead of hunting along each heading. */
.pfx-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #64748b;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.pfx-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pfx-dot--ok { background: #059669; }

.pfx-desc {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 11px;
    max-width: 660px;
}

/* ---- 設備・特徴: one tri-state row per facet ---------------------------- */

.pfx-facets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 4px 18px;
    margin-bottom: 12px;
}

.pfx-facet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.pfx-facet-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 104px;
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

.pfx-facet-name i { font-size: 10px; color: var(--pf-icon); }

/* A facet almost no company carries still renders — its 「記載なし」 side is
   exactly where it is useful — but it is dimmed so the eye goes to the
   facets with a real population first. */
.pfx-facet--thin .pfx-facet-name,
.pfx-facet--thin .pfx-facet-count { opacity: .55; }

.pfx-facet-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--pf-muted);
    font-variant-numeric: tabular-nums;
}

.pfx-tri-group {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.pfx-tri-group button {
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    color: #64748b;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.pfx-tri-group button + button { border-left: 1px solid #e2e8f0; }
.pfx-tri-group button:hover { background: var(--pf-surface); }
.pfx-tri-group button.is-on { background: var(--pf-on-bd); color: #fff; }
.pfx-tri-group button:focus-visible { outline: 2px solid var(--pf-on-bd); outline-offset: -2px; }

/* ---- numeric rows ------------------------------------------------------ */

.pfx-ctl { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.pfx-ig {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}

.pfx-ig input {
    width: 84px;
    border: 0;
    padding: 7px 10px;
    font-size: 13px;
    text-align: right;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    outline: none;
    background: transparent;
}

.pfx-ig input::placeholder { color: #cbd5e1; font-size: 12px; }
.pfx-ig:focus-within { border-color: var(--pf-on-bd); }

.pfx-ig .pfx-suffix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #f8fafc;
    border-left: 1px solid var(--pf-border);
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.pfx-tilde { color: var(--pf-muted); }
.pfx-lbl { font-size: 11.5px; font-weight: 700; color: #64748b; }

.pfx-seg {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}

.pfx-seg button {
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    color: #64748b;
    border: 0;
    cursor: pointer;
}

.pfx-seg button + button { border-left: 1px solid var(--pf-border); }
.pfx-seg button.is-on { background: var(--pf-on-bd); color: #fff; }

.pfx-chipwrap { display: flex; flex-wrap: wrap; gap: 7px; }

@media (max-width: 640px) {
    .pfx-facets { grid-template-columns: 1fr; }
    .pfx-facet { flex-wrap: wrap; }
}

/* required-293 — ポータル情報 row, shared by the 企業詳細 drawer and the 架電
 * call modal. It lives here rather than in company-detail-shared.css because
 * the call modal does not load that file, and the snapshot has to read the same
 * on the screen a rep browses and the screen they dial from.
 *
 * Data-dense dashboard register, same slate tokens the rest of the drawer uses.
 * One card, two zones:
 *   · a metric strip for the numbers a rep scans for, split by hairlines
 *     instead of a box per value — seven bordered tiles read as clutter;
 *   · a definition list for the prose (営業時間 / アクセス …), which is read as
 *     sentences and needs a stable label column, not a tile.
 *
 * Not a fixed grid: the fields differ per portal (a salon has スタッフ数, a
 * restaurant 席数), so a fixed grid would be mostly empty cells.
 */
.ccd-pa {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

/* ---- metric strip ---- */
.ccd-pa-metrics {
    display: flex;
    flex-wrap: wrap;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f6;
}

.ccd-pa-m {
    /* Share the row rather than sitting at content width. Four tiles used to
       stop at ~40% of a 1,430px modal and leave the rest of the strip blank,
       which read as a truncated card rather than a deliberate one. They still
       never shrink past a legible 92px, so a seven-field portal wraps instead
       of squeezing. */
    flex: 1 1 auto;
    min-width: 92px;
    padding: 7px 14px;
    /* Hairline between metrics instead of a border per tile. The right edge
       carries it so a wrapped row never ends on a dangling divider. */
    border-right: 1px solid #eef2f6;
}
.ccd-pa-m:last-child { border-right: 0; }

.ccd-pa-m-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    /* slate-500 on slate-50 — 4.8:1, readable rather than decorative. */
    color: #64748b;
    white-space: nowrap;
}
.ccd-pa-m-label i {
    font-size: 9.5px;
    color: #94a3b8;
    width: 11px;
    text-align: center;
}

.ccd-pa-m-value {
    margin-top: 1px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    /* Tabular figures so counts and prices line up across the strip. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.35;
}

/* The unit rides at a lower weight so the digits keep the emphasis. */
.ccd-pa-m-unit {
    margin-left: 1px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.ccd-pa-m-sub {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    line-height: 1.4;
}

/* ---- prose facts ---- */
/* Two columns on a wide card. Each fact is a label plus a short phrase —
   営業時間 is 「11:00〜20:00」, 定休日 is 「月曜日」 — so one fact per full-width row
   spent about a fifth of the line and stacked four near-empty rows. Paired up,
   the block is half as tall and the eye still reads down a single label edge
   per column. The 900px query below drops it back to one column, where a
   second column would leave no room for the value. */
.ccd-pa-facts {
    margin: 0;
    padding: 7px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Row gap stays tight; the column gap is what separates the two pairs. */
    gap: 3px 24px;
}

.ccd-pa-fact {
    display: flex;
    align-items: baseline;
    gap: 10px;
    /* min-width:0 so a long アクセス wraps inside its column instead of
       widening the track and pushing the second column off the card. */
    min-width: 0;
    font-size: 12px;
    line-height: 1.6;
}

/* Fixed label column — wide enough for the longest of them (予約代行番号) on
   one line, so every value starts on the same edge. */
.ccd-pa-fact dt {
    flex: 0 0 96px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}
.ccd-pa-fact dt i {
    font-size: 9.5px;
    color: #94a3b8;
    width: 11px;
    text-align: center;
}

.ccd-pa-fact dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #334155;
    font-weight: 500;
    /* アクセス can be a whole sentence — wrap it instead of pushing the row
       into a horizontal scroll. */
    overflow-wrap: anywhere;
}

/* ---- footer ---- */
/* Source and capture date close the card: these are a point-in-time reading,
   not a live value, and the requirement is explicit about saying so. */
.ccd-pa-foot {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-top: 1px solid #f1f5f9;
    background: #fcfdfe;
    font-size: 10.5px;
    color: #94a3b8;
}
.ccd-pa-foot i { font-size: 9.5px; }

@media (max-width: 900px) {
    /* Narrow drawer: let each metric claim a share of the row rather than
       leaving a ragged tail of one-per-line. Once the strip wraps it reads as
       a grid, so every cell carries its own bottom hairline and the container
       drops the single one it uses on a one-line strip. */
    .ccd-pa-metrics { border-bottom: 0; }
    .ccd-pa-m {
        flex: 1 1 33%;
        min-width: 0;
        border-bottom: 1px solid #eef2f6;
    }
    /* One column: at this width a second track leaves nothing for the value. */
    .ccd-pa-facts { grid-template-columns: 1fr; }
    /* Stacked label/value: a 96px label column wastes half a narrow row. */
    .ccd-pa-fact { flex-direction: column; gap: 0; }
    .ccd-pa-fact dt { flex-basis: auto; }
}

/* The 「ポータル情報」/「設備・特徴」 labels no longer need a wrap-and-shrink
   climbdown: col l1 is 88px, wide enough for six full-width characters
   on one line. See call-queue-v5-exact.css. */



/* ---- fb-288 #1: 法人名 / 屋号 → Google search ------------------------------
   The name links to a Google search for that name, NOT to the company website
   (the site keeps its own 「サイト」 row in the 企業情報 table). The chip states
   the destination so the link is never mistaken for the company's own page. */
.ccd-gsearch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    max-width: 100%;
}
.ccd-gsearch-text {
    text-decoration: underline;
    text-decoration-color: rgba(66, 133, 244, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccd-gsearch:hover .ccd-gsearch-text { text-decoration-color: #4285F4; }
.ccd-gsearch-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 0 6px;
    border: 1px solid #dadce0;
    border-radius: 9999px;
    background: #fff;
    color: #5f6368;
    font-size: 10px;
    font-weight: 500;
    line-height: 17px;
    white-space: nowrap;
}
.ccd-gsearch-chip .fa-google { color: #4285F4; font-size: 9px; }
.ccd-gsearch:hover .ccd-gsearch-chip { border-color: #4285F4; background: #f1f5fd; }

/* ---- two-line clamp (js/common/text-clamp.js) ---------------------------
   Free prose from the portals — アクセス is a sentence, 支払方法 a slash-joined
   list, 事業内容 a paragraph. Two lines is enough to recognise the content;
   past that it pushes the work area of the 架電 modal below the fold.
   The toggle is added by JS only when the text really overflows. */
.tc-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Cleared once measured as fitting, and when the reader opens it. */
.tc-clamp--fits,
.tc-clamp.is-open {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.tc-more {
    margin-top: 1px;
    padding: 0;
    border: 0;
    background: none;
    color: #2563eb;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
}
.tc-more:hover { text-decoration: underline; }
.tc-more:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 3px; }