/* Voyager & Traveller tool pages (NRI calculator, colleges, news, spots,
   guides, links). Builds on styles.css tokens and components. */

/* Cards below set display:flex/grid, which would otherwise override the
   hidden attribute the filters use. */
.hub [hidden] { display: none !important; }

.page-hero.hub-hero { min-height: 320px; padding: 70px 0 60px; }
.page-hero.hub-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.hub { padding-top: 26px; padding-bottom: 90px; }
.hub-back { display: inline-block; margin-bottom: 20px; color: var(--ocean); font-weight: 700; text-decoration: none; font-size: 0.92rem; }
.hub-back:hover { text-decoration: underline; }
.hub h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; }
.hub-h2 { font-size: 1.25rem !important; margin: 34px 0 14px !important; }
.hub a { color: var(--ocean); }
/* Button-styled links keep their own colours (the rule above would turn a
   .cta's white text teal on its gradient). */
.hub a.cta { color: #fff; }
.hub a.ghost { color: var(--ink); }
.hub-muted { color: var(--muted); font-size: 0.9rem; }
.hub-note { color: var(--muted); font-size: 0.85rem; margin-top: 36px; }
.hub-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.hub-card ul { padding-left: 20px; margin: 0; }
.hub-card li { margin-bottom: 6px; color: #35485f; }
.hub-card p { color: #35485f; margin: 0 0 10px; }
.hub-card p:last-child { margin-bottom: 0; }
.hub-card ul.plain { list-style: none; padding: 0; }
.notice {
  background: rgba(20,184,166,0.08); border: 1px solid rgba(20,184,166,0.35); border-radius: 14px;
  padding: 14px 18px; color: #245a58; font-size: 0.93rem; margin-bottom: 8px;
}
.pill {
  display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: #eef3f8; color: var(--muted); white-space: nowrap;
}
.hub-btn {
  font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--ocean); background: #fff;
  border: 1px solid rgba(14,116,144,0.35); border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.hub-btn:hover { background: #f0f8fb; }

/* forms */
.hub-form { display: grid; gap: 14px; margin-bottom: 14px; }
.hub-form.two { grid-template-columns: 1fr 1fr; }
.hub label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.hub select, .hub input[type="date"], .hub input[type="time"], .hub input[type="number"] {
  font: inherit; font-size: 1rem; color: var(--ink); padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; min-width: 0;
}
.hub select:focus, .hub input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(56,189,248,0.18); }
.hub-hint { font-size: 0.88rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-hint input { padding: 6px 10px !important; font-size: 0.9rem !important; }

/* tabs */
.hub-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.hub-tab {
  font: inherit; font-weight: 700; font-size: 0.95rem; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
}
.hub-tab.active { background: var(--ocean); border-color: var(--ocean); color: #fff; }

/* clocks */
.clock-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.clock { border-radius: 16px; padding: 18px 20px; background: var(--sea-grad); color: #fff; display: flex; flex-direction: column; }
.clock + .clock { background: var(--grad); }
.clock .lbl { font-size: 0.8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.clock b { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 4px 0; font-variant-numeric: tabular-nums; }
.clock span:last-child { opacity: .85; font-size: 0.9rem; }
.clock-diff { font-weight: 700; margin: 14px 0 0 !important; color: var(--ink) !important; }
.conv-out { display: flex; flex-direction: column; justify-content: flex-end; }
.conv-out span { font-size: 0.85rem; color: var(--muted); }
.conv-out b { font-size: 2rem; font-weight: 800; color: var(--ocean); line-height: 1.1; }

/* best time to call */
.call-summary { font-size: 0.95rem; }
.call-strip { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; margin: 12px 0 10px; }
.call-strip .cell { border-radius: 6px; padding: 6px 0; text-align: center; font-variant-numeric: tabular-nums; }
.call-strip .cell span { display: block; line-height: 1.25; }
.call-strip .s { font-weight: 800; font-size: 0.78rem; }
.call-strip .h { font-size: 0.62rem; opacity: .85; }
.call-strip .good, .call-legend .good { background: rgba(20,184,166,0.22); color: #0b5e56; }
.call-strip .ok, .call-legend .ok { background: rgba(255,183,3,0.25); color: #7a5600; }
.call-strip .night, .call-legend .night { background: #e6ebf2; color: #7d8aa0; }
.call-strip .watch, .call-legend .watch {
  background-image: repeating-linear-gradient(45deg, rgba(14,35,64,0.22) 0 4px, transparent 4px 8px);
}
.call-legend { font-size: 0.8rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.call-legend .k { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; }

/* NRI days */
.trip {
  display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 12px; align-items: end;
  padding: 12px 0; border-top: 1px dashed var(--line);
}
.trip-n { font-weight: 800; font-size: 0.85rem; color: var(--ocean); padding-bottom: 12px; }
.trip label, .hub-form label, .fx-row label { min-width: 0; }
.trip input, .hub-form select, .hub-form input, .fx-row select, .fx-row input { width: 100%; box-sizing: border-box; }
.trip-x { font: inherit; border: none; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 10px; }
.trip-x:hover { color: var(--coral); }
#add-trip { margin: 6px 0 4px; }
.nri-result { margin-top: 18px; }
.nri-status { border-radius: 14px; padding: 16px 18px; font-size: 1.02rem; font-weight: 600; margin-bottom: 14px; }
.nri-status.ok { background: rgba(20,184,166,0.12); color: #0b5e56; }
.nri-status.plan { background: rgba(56,189,248,0.14); color: #0b4a6b; }
.nri-status.warn { background: rgba(255,106,61,0.12); color: #8a3312; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.stat-grid div { background: #f4f8fc; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.stat-grid b { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.stat-grid span { font-size: 0.8rem; color: var(--muted); }
.hub-prose li { margin-bottom: 10px; }

/* filters (colleges, spots) */
.hub-filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.hub-search { flex: 1; min-width: 240px; margin: 0; max-width: none; }
.hub-search input { padding: 13px 18px 13px 46px; font-size: 1rem; }
.hub-sort { flex-direction: row !important; align-items: center; gap: 8px !important; }
.hub-chips { justify-content: flex-start; margin-bottom: 12px; }
.hub-chips a.chip { text-decoration: none; }
.hub-results-head { margin-top: 30px; }

/* colleges */
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.course-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.course-card h3 { font-size: 1rem; margin: 10px 0 8px; }
.course-card p { font-size: 0.85rem; color: #35485f; margin: 0 0 6px; }
.pill.deck { background: rgba(56,189,248,0.16); color: #0b5e87; }
.pill.engine { background: rgba(255,106,61,0.14); color: #a3401b; }
.intake { margin-top: 22px; }
.college-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.college-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.cc-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cc-head h3 { margin: 0; font-size: 1.05rem; }
.cc-loc { color: var(--muted); font-size: 0.88rem; margin: 6px 0 12px; }
.course-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.course-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f4f8fc; }
.course-row.hl { background: rgba(20,184,166,0.14); }
.course-row small { display: block; color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.cname { font-weight: 700; font-size: 0.92rem; }
.cfee { text-align: right; }
.cfee b { color: var(--ocean); }
.cc-adm { font-size: 0.86rem; color: #35485f; margin: 0 0 10px; }
.cc-link { margin-top: auto; font-weight: 700; font-size: 0.9rem; text-decoration: none; }

/* news */
.hub-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--muted); margin-bottom: 14px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(20,184,166,0.2); }
.news-top-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.news-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.news-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.news-item.top { border-color: rgba(20,184,166,0.5); }
.news-item h3 { font-size: 1.02rem; margin: 8px 0 6px; line-height: 1.35; }
.news-item h3 a { color: var(--ink); text-decoration: none; }
.news-item h3 a:hover { color: var(--ocean); text-decoration: underline; }
.news-item p { color: #35485f; font-size: 0.9rem; margin: 0 0 10px; }
.ni-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ni-src { margin-top: auto; font-size: 0.8rem; color: var(--muted); }
.pill.india { background: rgba(255,153,51,0.16); color: #9a5200; }
.pill.cat-seafarers { background: rgba(20,184,166,0.16); color: #0b5e56; }
.pill.cat-safety { background: rgba(255,45,120,0.12); color: #a3134f; }
.pill.cat-regulation { background: rgba(124,58,237,0.12); color: #5b21b6; }
.pill.cat-ports { background: rgba(56,189,248,0.16); color: #0b5e87; }
.pill.cat-technology { background: rgba(59,130,246,0.14); color: #1d4ed8; }

/* weather + eSIM link */
.wx { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 700; color: var(--ink); background: #f1f6fb; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.hub-esim { display: inline-block; font-weight: 700; font-size: 0.86rem; color: #fff !important; background: var(--warm-grad); padding: 7px 14px; border-radius: 999px; text-decoration: none; }
.hub-esim:hover { filter: brightness(1.05); }

/* spots */
.spot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.spot-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.spot-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.spot-top > div { flex: 1; min-width: 0; }
.spot-top .wx { margin-top: 8px; }
.spot-flag { font-size: 28px; line-height: 1; }
.spot-card h3 { margin: 0; font-size: 1.02rem; }
.spot-country { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; }
.spot-card > p { color: #35485f; font-size: 0.9rem; margin: 0 0 10px; }
.spot-tip { background: #f7f5ee; border-radius: 10px; padding: 10px 12px; font-size: 0.86rem !important; }
.spot-meta { display: flex; flex-direction: column; gap: 8px; font-size: 0.82rem; color: var(--muted); margin: 4px 0 14px; }
.spot-meta .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.spot-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.spot-guide { font-weight: 700; font-size: 0.86rem; text-decoration: none; }

/* guides */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.guide-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit !important; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s;
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gc-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.gc-top h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.gc-flag { font-size: 28px; }
.guide-card p { color: #35485f; font-size: 0.88rem; margin: 10px 0 14px; }
.gc-live { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; }
.gc-foot { display: flex; justify-content: flex-end; font-size: 0.86rem; }
.gc-foot .go { color: var(--ocean); font-weight: 700; }
.visa-pill { display: inline-block; align-self: flex-start; font-size: 0.78rem; font-weight: 700; padding: 5px 10px; border-radius: 10px; }
.visa-pill.free, .visa-card.free .visa-sum { background: rgba(20,184,166,0.14); color: #0b5e56; }
.visa-pill.easy, .visa-card.easy .visa-sum { background: rgba(56,189,248,0.16); color: #0b4a6b; }
.visa-pill.req, .visa-card.req .visa-sum { background: rgba(255,183,3,0.2); color: #7a5600; }
.visa-sum { display: inline-block; font-weight: 800; padding: 6px 12px; border-radius: 10px; }
.guide-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.guide-intro { font-size: 1.1rem; color: #35485f; margin: 0 0 18px; }
.wish { background: #fffaf0; }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 0.9rem; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; color: var(--ink); }
.forecast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.forecast div { background: #f4f8fc; border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; font-size: 0.78rem; color: var(--muted); }
.forecast b { font-size: 1.3rem; }
.esim-side { background: linear-gradient(160deg, #fff 0%, #fff4ef 100%); }
.spot-mini li { margin-bottom: 10px; }

/* links */
.fx-card .fx-row { display: grid; grid-template-columns: 1.2fr 1fr auto 1fr; gap: 12px; align-items: end; }
.fx-swap { height: 44px; font-size: 1.1rem; }
.fx-out { display: flex; flex-direction: column; margin: 14px 0 8px; }
.fx-out b { font-size: 1.8rem; font-weight: 800; color: var(--ocean); letter-spacing: -0.02em; }
.fx-out span { font-size: 0.85rem; color: var(--muted); }
.link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.link-card {
  display: flex; flex-direction: column; text-decoration: none; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
.link-card:hover { transform: translateY(-3px); border-color: var(--sky); }
.link-card.own { border-color: rgba(20,184,166,0.45); }
.link-card h3 { margin: 0 0 6px; font-size: 0.98rem; color: var(--ink); }
.link-card p { margin: 0 0 10px; font-size: 0.86rem; color: #35485f; }
.link-card .dom { margin-top: auto; font-size: 0.78rem; color: var(--ocean); font-weight: 600; }

@media (max-width: 900px) {
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .spot-grid, .guide-grid, .link-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hub-form.two, .clock-pair, .college-grid, .news-list, .news-top-grid,
  .spot-grid, .guide-grid, .link-grid, .course-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .trip { grid-template-columns: 1fr 1fr; }
  .trip-n { grid-column: 1 / -1; padding-bottom: 0; }
  .trip-x { grid-column: 1 / -1; justify-self: end; padding: 0 4px; }
  .call-strip { grid-template-columns: repeat(12, 1fr); }
  .fx-card .fx-row { grid-template-columns: 1fr 1fr; }
  .fx-swap { grid-column: 1 / -1; justify-self: center; width: auto; height: auto; }
  .hub-card { padding: 20px 18px; }
  .clock b { font-size: 2.1rem; }
}
@media (max-width: 480px) {
  .trip { grid-template-columns: 1fr; gap: 8px; }
}

/* compact pages (review form) */
.hub-compact-head { max-width: 680px; margin: 30px auto 20px; text-align: center; }
.hub-compact-head h1 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 10px; }
.hub-compact-head p { color: var(--muted); margin: 0; font-size: 1.05rem; }
.hub-compact-head ~ .hub-card, .hub-compact-head ~ .notice { max-width: 680px; margin-left: auto; margin-right: auto; }
.notice.warn { background: rgba(255,106,61,0.1); border-color: rgba(255,106,61,0.4); color: #8a3312; margin-bottom: 14px; }
.review-form { display: flex; flex-direction: column; gap: 16px; }
.review-form textarea {
  font: inherit; font-size: 1rem; color: var(--ink); padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; resize: vertical; width: 100%; box-sizing: border-box;
}
.review-form textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(56,189,248,0.18); }
.review-form .hub-form { margin: 0; }
.review-form .cta { align-self: flex-start; border: none; cursor: pointer; font: inherit; font-weight: 700; }
.review-form .hub-note { margin-top: 0; }
.star-field, .seg-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label { font-size: 2rem; line-height: 1; color: #d6dde6; cursor: pointer; transition: color .1s; display: inline; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #f59e0b; }
.stars input:focus-visible + label { outline: 2px solid var(--sky); border-radius: 4px; }
.seg-field label { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); cursor: pointer; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.review-form input:not([type="radio"]):not([type="hidden"]):not(.hp) {
  font: inherit; font-size: 1rem; color: var(--ink); padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; width: 100%; box-sizing: border-box;
}
.review-form input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(56,189,248,0.18); }

/* membership page */
.mem-status { margin: 4px 0 8px; }
.mem-cta h2 { margin-bottom: 8px; }
.mem-yes { border-color: rgba(255,183,3,0.55); background: linear-gradient(160deg, #fffaf0 0%, #fff 70%); }
.mem-seats { display: inline-block; font-size: 0.82rem; font-weight: 700; color: #a3401b; background: rgba(255,106,61,0.1);
  border-radius: 999px; padding: 4px 12px; margin: 2px 0 6px; }
.mem-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px !important; }
.mem-btns .cta, .mem-btns .ghost { border: none; cursor: pointer; font: inherit; font-weight: 700; }
.mem-btns .ghost { border: 1px solid var(--line); }
.mem-err { color: #c02626; font-weight: 600; font-size: 0.9rem; min-height: 1em; }
.mem-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mem-perks .hub-card { margin: 0; }
.mem-perks h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.mem-ic { font-size: 1.8rem; }
.mem-steps { padding-left: 20px; }
.mem-steps li { margin-bottom: 10px; }
@media (max-width: 760px) { .mem-perks { grid-template-columns: 1fr; } }

/* institutes & courses (training.py) */
.pill.course-presea { background: rgba(56,189,248,0.16); color: #0b5e87; }
.pill.course-coc { background: rgba(20,184,166,0.16); color: #0b5e56; }
.pill.course-basic { background: rgba(180,83,9,0.14); color: #92400e; }
.pill.course-modular { background: rgba(194,65,12,0.14); color: #9a3412; }
.pill.course-tanker { background: rgba(124,58,237,0.14); color: #5b21b6; }
.pill.course-sim { background: rgba(3,105,161,0.14); color: #075985; }
.pill.course-refresh { background: rgba(77,124,15,0.16); color: #3f6212; }
.pill.course-dev { background: rgba(190,24,93,0.14); color: #9d174d; }

.institute-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.institute-card .cat-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.institute-card .cc-loc { margin-bottom: 6px; }

.fact-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 18px 0; }
.fact-box { background: #f4f8fc; border-radius: 12px; padding: 12px 16px; }
.fact-box b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.fact-box span { font-size: 0.8rem; color: var(--muted); }

.group-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.group-label:first-child { margin-top: 4px; }

.ladder { display: grid; gap: 14px; margin: 8px 0 30px; }
.track { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.track-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.steps { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.step { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #f8fafc; text-decoration: none; color: inherit; display: block; }
.step:hover { border-color: var(--sky); background: #f0f8fb; }
.step .rank { display: block; font-weight: 800; font-size: 0.92rem; color: var(--ink); }
.step .coc-name { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ocean); margin: 3px 0; }
.step .needs { display: block; font-size: 0.76rem; color: var(--muted); line-height: 1.4; }
.step.current { border-color: var(--ocean); background: rgba(20,184,166,0.1); }

.related-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.related-chips a.chip { text-decoration: none; }

@media (max-width: 760px) { .institute-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } }

/* ship types (seamanship.py) */
.pill.grp-dry-cargo { background: rgba(180,131,9,0.14); color: #92620e; }
.pill.grp-liquid { background: rgba(220,38,38,0.12); color: #a11d1d; }
.pill.grp-gas { background: rgba(3,105,161,0.14); color: #075985; }
.pill.grp-box-vehicle { background: rgba(56,189,248,0.16); color: #0b5e87; }
.pill.grp-offshore { background: rgba(124,58,237,0.14); color: #5b21b6; }
.pill.grp-passenger { background: rgba(219,39,119,0.13); color: #9d174d; }
.ship-grid .cc-head { align-items: flex-start; }

/* navigation reference (navigation.py) */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.tool-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.tool-card:hover { border-color: var(--sky); }
.tool-ic { font-size: 2rem; margin-bottom: 6px; }
.tool-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.tool-card p { flex: 1; }
.tool-card .go { font-weight: 700; font-size: 0.88rem; margin-top: 10px; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tool-grid { grid-template-columns: 1fr; } }

.rule-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.rule-row { display: grid; grid-template-columns: 40px 1fr; gap: 14px; background: var(--card); padding: 14px 18px; scroll-margin-top: 20px; }
.rule-row .rule-no { font-weight: 800; color: var(--ocean); font-size: 1.1rem; }
.rule-row h3 { margin: 0 0 4px; font-size: 0.98rem; }
.rule-row p { margin: 0; color: #35485f; font-size: 0.92rem; }

.ls-tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 14px; }
.ls-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ls-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.ls-display { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.ls-stage-wrap { display: flex; justify-content: center; background: #f4f8fc; border-radius: 12px; padding: 10px; }
.ls-stage svg { display: block; }
.ls-empty { padding: 50px 10px; text-align: center; }
.ls-info h3 { margin: 0 0 6px; font-size: 1.1rem; min-height: 1.3em; }
.ls-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #1a1a1a; margin-right: 8px; vertical-align: middle; }
.ls-legend-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }
.ls-also { color: var(--muted); font-size: 0.85rem; padding-top: 6px; border-top: 1px dashed var(--line); }
.ls-quiz-result { font-weight: 600; margin-top: 10px; }
.ls-quiz-result.ok { color: #1a7a3c; }
.ls-quiz-result.err { color: #c02626; }
@media (max-width: 700px) { .ls-display { grid-template-columns: 1fr; } .ls-stage-wrap { max-width: 200px; margin: 0 auto; } }

.buoy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.buoy-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.buoy-card h3 { margin: 8px 0 6px; }
.buoy-card p { margin: 0 0 6px; font-size: 0.88rem; }
.buoy-svg { display: flex; justify-content: center; }
@media (max-width: 900px) { .buoy-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .buoy-grid { grid-template-columns: 1fr; } }

.flag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.flag-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px; }
.flag-card h3 { margin: 4px 0 0; font-size: 0.95rem; }
.flag-card p { margin: 0; font-size: 0.82rem; color: #35485f; }
.flag-svg { border: 1px solid var(--line); border-radius: 3px; }
@media (max-width: 900px) { .flag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .flag-grid { grid-template-columns: 1fr; } }

.calc-result { font-size: 1.05rem; font-weight: 700; color: var(--ink); background: #f4f8fc; border-radius: 10px; padding: 12px 16px; margin: 10px 0 0; }

/* study group (study_group.py) */
.sg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sg-card { display: flex; flex-direction: column; margin: 0; scroll-margin-top: 20px; }
.sg-card h3 { margin: 0 0 10px; font-size: 1.02rem; }
.sg-card .related-chips { margin-bottom: 12px; }
.sg-disclaimer { font-size: 0.76rem; margin: 0 0 12px !important; }
.sg-cta { margin-top: auto; }
.sg-cta .cta { width: 100%; justify-content: center; }
.sg-cta .pill { background: #eef3f8; color: var(--muted); }
@media (max-width: 900px) { .sg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sg-grid { grid-template-columns: 1fr; } }