/* ============================================================================
   /cruise-map — the Caribbean cruise network.

   Loaded AFTER island-hopping.css and adds only what the cruise map does that the air and ferry maps
   do not. The map frame, nodes, edges, port list, chips, panels, tables, pills and the phone bottom
   sheet are the shared ih-* classes: one look for the Caribbean connectivity maps.
   ========================================================================= */

.cm .ih-hubrow { grid-template-columns: 22px minmax(0, 1.5fr) minmax(0, 1fr) 38px; }
.cm .cm-cd { font: 600 13px var(--ih-font); overflow-wrap: anywhere; }

.cm-crumbs { margin: 10px 0 0; font: 500 12px var(--ih-font); color: var(--ih-muted); }
.cm-crumbs a { color: var(--ih-ink); }

/* The answer-first paragraph, and the "data as of" line under it. */
.cm-answer { max-width: 68ch; margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--ih-ink); }
.cm-asof { max-width: 72ch; margin: 6px 0 0; font: 500 12px/1.5 var(--ih-font); color: var(--ih-muted); }

.cm-static { display: block; width: 100%; height: auto; }

/* Controls */
.cm-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 14px 0 6px; }
.cm-controls label, .cm-field { display: flex; flex-direction: column; gap: 4px; font: 600 11px var(--ih-font); color: var(--ih-muted); text-transform: uppercase; letter-spacing: .04em; }
.cm-controls select, .cm-field select {
    min-width: 170px; max-width: 100%; padding: 8px 10px; font: 500 14px var(--ih-font);
    color: var(--ih-ink); background: #fff; border: 1px solid var(--ih-rule); border-radius: 8px;
}
.cm-apply, .cm-btn {
    padding: 8px 14px; font: 600 13px var(--ih-font); color: var(--ih-ink); background: #fff;
    border: 1px solid var(--ih-ink); border-radius: 999px; cursor: pointer;
}
.cm-apply:hover, .cm-btn:hover { background: var(--ih-row-hover); }

/* Region chips: real links, so they filter the table with no JavaScript. */
.cm-regions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cm-regions a {
    padding: 6px 12px; font: 600 12px var(--ih-font); color: var(--ih-ink); text-decoration: none;
    background: #fff; border: 1px solid var(--ih-rule); border-radius: 999px;
}
.cm-regions a[aria-current="true"] { background: var(--ih-ink); color: var(--ih-paper); border-color: var(--ih-ink); }

/* Client filters */
.cm-client { margin-top: 10px; display: grid; gap: 12px; }
.cm-flabel { font: 600 11px var(--ih-font); color: var(--ih-muted); text-transform: uppercase; letter-spacing: .04em; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-chips .ih-chip:disabled { opacity: .35; cursor: not-allowed; }
.cm-toggles { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.cm-toggles label { flex-direction: row; align-items: center; gap: 6px; font: 500 13px var(--ih-font); color: var(--ih-ink); text-transform: none; letter-spacing: 0; }

/* Map layers */
.cm-leg { stroke: var(--ih-route); stroke-opacity: .35; fill: none; }
.cm-leg[data-hot="1"] { stroke: var(--ih-hub-ink); stroke-opacity: .85; }
.cm-startline { fill: none; stroke: var(--ih-hub-ink); stroke-dasharray: 5 4; stroke-opacity: .85; }
.cm-startline[data-quiet="1"] { stroke-opacity: .22; }
.cm-offline { stroke-dasharray: 2 4; }

.cm-node .cm-dot { fill: var(--ih-hub); stroke: var(--ih-paper); stroke-width: 1.6; }
.cm-node.cm-unloaded .cm-dot { fill: var(--ih-paper); stroke: var(--ih-muted); stroke-width: 1.2; }
.cm-node .cm-ring { fill: none; stroke: #B7791F; stroke-width: 2.2; }
.cm-node .cm-ink { fill: none; stroke: var(--ih-ink); stroke-width: 2; }
.cm-node[data-selected="1"] .cm-dot { stroke: var(--ih-ink); stroke-width: 3; }
.cm-node[data-dim="1"] { opacity: .2; }

.cm-badge { cursor: pointer; }
.cm-badge rect { fill: #FFF4E0; stroke: #B7791F; stroke-width: 1.2; }
.cm-badge-t { font: 700 12px var(--ih-font); fill: var(--ih-hub-ink); }
.cm-badge-n { font: 500 10px var(--ih-mono); fill: var(--ih-muted); }
.cm-badge[data-dim="1"] { opacity: .3; }
.cm-badge:focus-visible { outline: none; }
.cm-badge:focus-visible rect { stroke: var(--ih-ink); stroke-width: 2.4; }

.cm-k-home { fill: none; stroke: #B7791F; stroke-width: 2.2; }

/* Cards */
.cm-card-host { margin-top: 4px; }
.cm-card { padding: 14px; background: #fff; border: 1px solid var(--ih-rule); border-radius: 12px; }
.cm-card + .cm-card { margin-top: 10px; }
.cm-card-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 16px; }
.cm-card h3, .cm-h3 { margin: 12px 0 4px; font: 700 13px var(--ih-font); color: var(--ih-ink); }
.cm-card ul, .cm-homelist ul { margin: 4px 0; padding-left: 18px; }
.cm-card li { margin: 3px 0; }
.cm-sub { font: 500 12px var(--ih-font); color: var(--ih-muted); }
.cm-src { font-size: 12px; }
.cm-facts { display: flex; gap: 20px; margin: 6px 0; }
.cm-facts dt { font: 500 10.5px var(--ih-mono); color: var(--ih-muted); text-transform: uppercase; }
.cm-facts dd { margin: 0; font: 700 20px var(--ih-font); }
.cm-ships { list-style: none; padding-left: 0 !important; }
.cm-voy { padding-left: 20px; }
.cm-links-row { margin: 10px 0 0; font-size: 13px; }

.cm-pop { color: var(--ih-ink); text-decoration: underline dotted; cursor: pointer; }
.cm-pop:hover, .cm-pop:focus-visible { color: var(--ih-hub-ink); }

.cm-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0; }
.cm-strip button {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px;
    height: 74px; padding: 4px 0; background: transparent; border: 1px solid var(--ih-rule); border-radius: 6px; cursor: pointer;
    font: 600 10px var(--ih-font); color: var(--ih-muted);
}
.cm-strip button i { display: block; width: 60%; background: var(--ih-hub); border-radius: 2px 2px 0 0; min-height: 2px; }
.cm-strip button[aria-pressed="true"] { border-color: var(--ih-ink); background: var(--ih-row-hover); }
.cm-strip b { font: 700 11px var(--ih-font); color: var(--ih-ink); }

.cm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 8px 0; }
.cm-cal button { padding: 6px 0; font: 600 11px var(--ih-font); color: var(--ih-ink); background: #fff; border: 1px solid var(--ih-rule); border-radius: 4px; cursor: pointer; }
.cm-cal button[data-n="1"] { background: #FFE9CC; }
.cm-cal button[data-n="2"] { background: #FFD59C; }
.cm-cal button[data-n="3"] { background: #FFBE6B; }
.cm-cal button[data-n="4"], .cm-cal button[data-n="5"], .cm-cal button[data-n="6"] { background: #FF9F36; }
.cm-cal button[aria-pressed="true"] { outline: 2px solid var(--ih-ink); }

.cm-start-block { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--ih-rule); }

/* Server-rendered tables and lists */
.cm-ports td { vertical-align: top; }
.cm-ports .cm-sub { display: block; margin-top: 2px; }
.cm-ports tr.cm-flash { background: #FFF4E0; }
.cm-homelist { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cm-attr { display: block; }
.cm-links ul { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; padding: 0; margin: 8px 0; font-size: 13px; }

@media (max-width: 639px) {
    .cm-controls select, .cm-field select { min-width: 0; width: 100%; }
    .cm-controls label { flex: 1 1 100%; }
}

/* NO LAYOUT SHIFT when the script mounts. The filter panel is hidden until the script fills it; with the
   cm-js class (set by a one-line script at the top of the page, so only when scripting is on) its space
   is reserved from the first paint, so nothing below it jumps when it appears. Without scripting the
   class is never set and the panel takes no room at all. The map itself cannot shift: its SVG is in the
   server HTML with a viewBox, and the script only draws inside it. */
.cm-js .cm-client[hidden] { display: block; visibility: hidden; min-height: 360px; }
@media (max-width: 639px) { .cm-js .cm-client[hidden] { min-height: 480px; } }