/* ==========================================================================
   INTERNETCORE — Build with it (Design Completion Campaign, 2026-09-29).
   Sits at the end of the page's 02 Build. Each field is a small window: the
   silver frame and two-step bevel, a selection-blue title bar carrying the
   field's name, a white body. Faces are the page's (default serif, Verdana,
   "IC Bitmap" from x-internetcore.css). Every class is gic- or scoped to
   .gm--internetcore. Nothing on the board moves.
   ========================================================================== */
.gm--internetcore {
  --gm-tag-inverse: var(--gm-color-paper);
  max-width: none; margin: 56px 0 0; padding: 0;
  color: var(--gm-color-ink); font-family: var(--gm-font);
  border-top: 1px solid var(--gm-color-ink); padding-top: 10px;
}
.gm--internetcore .gm__title { font: 700 clamp(1.625rem, 3.2vw, 2.25rem)/1.1 var(--gm-font); }
.gm--internetcore .gm__lede { font-size: 1.0625rem; }
.gm--internetcore .gm__key, .gm--internetcore .gm__get, .gm--internetcore .gm-more, .gm--internetcore .gm-f__note, .gm--internetcore .gm-t { font-family: var(--gm-font-ui); }
.gm--internetcore .gm__get a, .gm--internetcore .gm-f a { color: var(--gm-color-link); }
.gm--internetcore .gm-t[data-g="translation"] { color: var(--gm-color-link); }
.gm--internetcore .gm-more summary { color: var(--gm-color-link); text-decoration: underline; }
.gm--internetcore .gm-ls li { font-size: 0.8125rem; }

.gic-desk { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; align-items: start; }
.gic-f { background: var(--gm-color-chrome); padding: 3px; box-shadow: var(--gm-bevel-out); }
.gic-f--ui { grid-column: 1 / -1; }
/* No holes on the desktop: at three columns colour and layout take two cells each (9 cells, 7 windows);
   at two, they and the sources window take the full row. Dense flow backfills around the components window. */
.gm--internetcore { container-type: inline-size; }
.gic-desk { grid-auto-flow: row dense; }
@container (min-width: 936px) { .gic-desk > .gic-f:is(:nth-child(1), :nth-child(3)) { grid-column: span 2; } }
@container (min-width: 618px) and (max-width: 935.98px) { .gic-desk > .gic-f:is(:nth-child(1), :nth-child(3), :nth-child(8)) { grid-column: 1 / -1; } }
.gic-f > .gm-f__head { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 6px; min-height: 22px; background: var(--gm-color-title); color: #fff; }
.gic-f .gm-f__n { font: 700 0.6875rem var(--gm-font-ui); }
.gic-f .gm-f__name { font: 700 0.75rem/1 var(--gm-font-ui); }
.gic-f > .gm-f__note, .gic-f > .gm-f__spec, .gic-f > .gm-more { background: var(--gm-color-paper); margin: 0; padding: 12px 14px; }
.gic-f > .gm-f__note { padding-bottom: 0; font-size: 0.75rem; max-width: none; opacity: 1; }
.gic-f > .gm-more { border-top: 1px solid var(--gm-color-chrome); }
.gic-cap { margin: 8px 0 0; font: 0.6875rem/1.35 var(--gm-font-ui); color: #5E5E5E; }
.gic-sans { font: 0.8125rem/1.45 var(--gm-font-ui); margin: 0; }
.gic-serif { font: 700 1.75rem/1 var(--gm-font); margin: 0 0 8px; }
.gic-px { font: 1rem var(--gm-font-px); margin: 6px 0 0; }

.gic-sws { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font: 0.6875rem/1.35 var(--gm-font-ui); }
.gic-sws span { display: block; height: 28px; border: 1px solid #000; margin-bottom: 3px; }
.gic-sws code { font-size: 0.625rem; }

.gic-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font: 0.6875rem var(--gm-font-ui); text-align: center; }
.gic-meta i { display: block; height: 54px; margin-bottom: 4px; border: 1px solid #000; background: #fff; }
.gic-doc { background: linear-gradient(#000, #000) 50% 8px / 40% 3px no-repeat, repeating-linear-gradient(#fff 0 12px, #bbb 12px 13px) 50% 16px / 40% 34px no-repeat, #fff !important; }
.gic-meta i.gic-dsk { background: linear-gradient(var(--gm-color-title), var(--gm-color-title)) 6px 6px / 48% 6px no-repeat, linear-gradient(#fff, #fff) 6px 12px / 48% 22px no-repeat, linear-gradient(var(--gm-color-title), var(--gm-color-title)) 40% 22px / 48% 6px no-repeat, linear-gradient(#fff, #fff) 40% 28px / 48% 20px no-repeat, #3A6EA5 !important; display: block; }
.gic-portal { background: repeating-linear-gradient(90deg, transparent 0 31%, #000 31% calc(31% + 1px)), repeating-linear-gradient(transparent 0 12px, #000 12px 13px), #fff !important; }

.gic-bev { display: flex; gap: 14px; }
.gic-bev span { font: 0.8125rem var(--gm-font-ui); padding: 8px 16px; }
.gic-out { background: var(--gm-color-chrome); box-shadow: var(--gm-bevel-out); }
.gic-in { background: #fff; box-shadow: var(--gm-bevel-in); }

.gic-icon { width: 64px; height: 64px; image-rendering: pixelated; background:
  linear-gradient(#000, #000) 8px 16px / 48px 2px no-repeat, linear-gradient(#000, #000) 8px 16px / 2px 40px no-repeat,
  linear-gradient(#000, #000) 54px 16px / 2px 40px no-repeat, linear-gradient(#000, #000) 8px 54px / 48px 2px no-repeat,
  linear-gradient(#000, #000) 8px 8px / 20px 2px no-repeat, linear-gradient(#000, #000) 8px 8px / 2px 10px no-repeat, linear-gradient(#000, #000) 26px 8px / 2px 10px no-repeat,
  linear-gradient(#FFFF99, #FFFF99) 10px 18px / 44px 36px no-repeat; }

.gic-menu { display: flex; gap: 2px; background: var(--gm-color-chrome); padding: 2px; margin-bottom: 12px; font: 0.8125rem var(--gm-font-ui); }
.gic-menu a { color: #000 !important; text-decoration: none; padding: 5px 10px; min-height: 32px; display: inline-flex; align-items: center; }
.gic-menu a:hover { background: var(--gm-color-title); color: #fff !important; }
.gic-menu a[aria-current="page"] { background: #fff; box-shadow: var(--gm-bevel-in); }
.gic-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 620px) { .gic-ui { grid-template-columns: minmax(0, 1fr); } }
.gic-card { background: var(--gm-color-chrome); padding: 3px; box-shadow: var(--gm-bevel-out); }
.gic-card__t { margin: 0; background: var(--gm-color-title); color: #fff; font: 700 0.75rem var(--gm-font-ui); padding: 4px 6px; }
.gic-card__b { background: #fff; margin-top: 3px; padding: 10px; font: 1rem/1.4 var(--gm-font); }
.gic-card__b a { text-decoration: underline; }
.gm--internetcore .gic-visited { color: var(--gm-color-visited); }
.gic-form { display: grid; gap: 6px; font: 0.8125rem var(--gm-font-ui); }
.gic-form input { height: 30px; border: 0; border-radius: 0; background: #fff; box-shadow: var(--gm-bevel-in); padding: 0 6px; font: 0.875rem var(--gm-font-ui); min-width: 0; }
.gic-acts { display: flex; gap: 8px; }
.gic-btn { min-height: 32px; padding: 0 16px; border: 0; border-radius: 0; background: var(--gm-color-chrome); box-shadow: var(--gm-bevel-out); font: 0.8125rem var(--gm-font-ui); color: #000; cursor: pointer; }
.gic-btn:active { box-shadow: var(--gm-bevel-in); padding: 1px 15px 0 17px; }
.gic-btn--def { outline: 1px solid #000; }
.gm--internetcore .gic-btn:focus-visible, .gm--internetcore .gic-form input:focus-visible, .gm--internetcore .gic-menu a:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }

.gic-prog { display: flex; gap: 2px; height: 20px; padding: 3px; background: #fff; box-shadow: var(--gm-bevel-in); width: 12rem; }
.gic-prog i { width: 12px; background: var(--gm-color-title); }