/* /skills: Skill Shareware. A shelf of floppy disks in the site's Windows 95 shell. */
.skills-page .win.skills-win { max-width: 1060px; }
.skills-page .activation-offer { font-size: 15px; }

/* toolbar: tab strip + find field */
.skills-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 18px 0 4px; border-bottom: 2px solid #808080; }
.tabs95 { display: flex; flex-wrap: wrap; gap: 2px; }
.tab95 { position: relative; top: 2px; min-height: 28px; padding: 4px 12px; font: 13px var(--font); color: #000; background: var(--face); border: 0; border-radius: 4px 4px 0 0; box-shadow: inset 1px 1px var(--light), inset -1px 0 var(--dark), inset -2px 0 var(--shadow); cursor: pointer; }
.tab95 span { color: #444; }
.tab95[aria-selected="true"] { top: 0; padding-bottom: 6px; font-weight: bold; background: #fff; box-shadow: inset 1px 1px var(--light), inset -1px 0 var(--dark), inset -2px 0 var(--shadow), 0 2px #fff; z-index: 1; }
.tab95:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.find95 { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; font-size: 13px; }
.field95 { min-height: 26px; width: 220px; max-width: 60vw; padding: 3px 6px; font: 13px var(--font); border: 0; background: #fff; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--light), inset 2px 2px var(--dark), inset -2px -2px #dfdfdf; }
.field95:focus { outline: 1px dotted #000; outline-offset: 2px; }

/* shelves */
.shelf { margin-top: 26px; }
.shelf[hidden] { display: none; }
.activation-offer .shelf-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; padding: 5px 10px; color: #fff; background: var(--navy); font: bold 19px/1.3 var(--font); border-left: 10px solid var(--shelf); }
.activation-offer .shelf-title span { font: 12px var(--mono); color: #ffff9c; }
.shelf-red { --shelf: #b00000; --disk: #a01010; --stripe: #ffd040; }
.shelf-blue { --shelf: #00a0a0; --disk: #000080; --stripe: #40e0d0; }
.shelf-green { --shelf: #008000; --disk: #1d5c1d; --stripe: #c0ff80; }

.install-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; margin: 0 0 14px; padding: 8px 10px; background: #ffffe1; border: 1px solid #808080; }
.install-label { grid-column: 1 / -1; font: bold 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: #444; }
.install-code { margin: 0; min-width: 0; overflow-x: auto; padding: 6px 8px; font: 13px/1.5 var(--mono); background: #000; color: #c0ffc0; white-space: pre; }
.copy-btn, .reader-link { min-height: 30px; padding: 4px 14px; font: 13px var(--font); color: #000; text-decoration: none; display: inline-grid; place-items: center; cursor: pointer; border: 0; }
.copy-btn.copied { font-weight: bold; }

/* disks */
.activation-offer .disk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.activation-offer .disk-slot { margin: 0; }
.disk-slot[hidden] { display: none; }
.disk { height: 100%; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto 1fr; gap: 2px 10px; padding: 12px 12px 14px; color: #000; text-decoration: none; background: var(--face); box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px #dfdfdf; animation: disk-drop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.disk:active { box-shadow: inset 1px 1px var(--dark), inset -1px -1px var(--light), inset 2px 2px var(--shadow); }
.disk:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.floppy { grid-row: 1 / 4; width: 56px; height: 56px; image-rendering: pixelated; transition: transform .18s steps(3); }
.floppy .f-body { fill: var(--disk); }
.floppy .f-label { fill: var(--stripe); }
.floppy .f-shutter { transition: transform .2s steps(4); }
.disk:hover .floppy, .disk:focus-visible .floppy { transform: translateY(-4px) rotate(-6deg); }
.disk:hover .f-shutter, .disk:focus-visible .f-shutter { transform: translateX(-5px); }
.disk-sheet { font: bold 11px var(--mono); color: var(--shelf); }
.disk-name { font: bold 15px/1.25 var(--font); }
.disk-pitch { font-size: 13px; line-height: 1.45; color: #222; }
.disk:hover .disk-name, .disk:focus-visible .disk-name { background: var(--navy); color: #fff; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.disk.spinning .floppy { animation: disk-spin .6s steps(8) infinite; }
@keyframes disk-drop { from { transform: translateY(-10px); } to { transform: none; } }
@keyframes disk-spin { to { transform: rotate(360deg); } }
.no-results { padding: 18px; text-align: center; background: #ffffe1; border: 1px dashed #808080; }

/* dialogs */
.overlay95 { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: repeating-conic-gradient(rgba(0, 0, 0, .18) 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.overlay95[hidden] { display: none; }
.overlay95 .win { margin: 0; width: 100%; }
.tbtns { margin-left: auto; display: flex; }
.overlay95 .win.setup-win { max-width: 420px; }
.setup-body { padding: 18px 18px 14px; display: grid; gap: 12px; font-size: 13px; }
.copy-anim { position: relative; height: 54px; }
.folder95 { position: absolute; top: 14px; width: 40px; height: 30px; background: #ffd040; box-shadow: inset 0 3px #fff8c0, inset -1px -1px #805000; }
.folder95::before { content: ""; position: absolute; left: 0; top: -6px; width: 16px; height: 6px; background: #d8a020; }
.folder95.from { left: 8px; } .folder95.to { right: 8px; }
.paper95 { position: absolute; left: 22px; top: 18px; width: 14px; height: 18px; background: #fff; border: 1px solid #000; box-shadow: inset 0 4px #fff, inset 0 5px #0000c0, inset 0 9px #fff, inset 0 10px #0000c0; opacity: 0; animation: paper-fly 1.1s linear infinite; }
.paper95.p2 { animation-delay: .37s; } .paper95.p3 { animation-delay: .74s; }
@keyframes paper-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  50% { transform: translate(calc((min(420px, 100vw) - 140px) / 2), -26px) rotate(160deg); opacity: 1; }
  100% { transform: translate(calc(min(420px, 100vw) - 140px), 0) rotate(330deg); opacity: 1; }
}
.setup-line { margin: 0; font-family: var(--mono); min-height: 1.4em; }
.progress95 { height: 22px; padding: 3px; background: #fff; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--light), inset 2px 2px var(--dark), inset -2px -2px #dfdfdf; }
.progress95 span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--navy) 0 10px, transparent 10px 12px); transition: width .12s steps(1); }
.setup-actions { display: flex; justify-content: flex-end; }
.setup-actions .b95 { min-height: 28px; padding: 3px 18px; border: 0; font: 13px var(--font); cursor: pointer; }

.overlay95 .win.reader-win { max-width: 880px; height: min(88vh, 940px); display: flex; flex-direction: column; }
.reader-win .tbar { flex: none; }
.reader-tabs { flex: none; padding: 6px 6px 0; border-bottom: 2px solid #808080; }
.reader-pane { flex: 1; min-height: 0; overflow: auto; background: #fff; box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--light), inset 2px 2px var(--dark), inset -2px -2px #dfdfdf; }
.reader-pane:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.reader-pane pre.source { margin: 0; padding: 16px 18px; font: 13px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 4px 4px; }
.reader-foot .install-code { flex: 1 1 260px; }
.zoom95 { position: fixed; z-index: 60; border: 2px dotted #000; pointer-events: none; }
.zoom95[hidden] { display: none; }

/* article */
.reader-doc { padding: 18px 24px 28px; max-width: 74ch; font: 15px/1.6 var(--font); }
.reader-doc.standalone { padding: 4px 0 0; max-width: none; }
.reader-doc.standalone .article, .reader-doc.standalone > p { max-width: 70ch; }
.reader-meta { margin: 0 0 6px; font: bold 12px var(--mono); color: #800080; }
.activation-offer .reader-doc h1 { margin: 0 0 8px; font: italic bold clamp(24px, 3.4vw, 32px)/1.2 "Times New Roman", Times, serif; color: var(--navy); text-wrap: balance; }
.reader-dek { margin: 0 0 12px; font-size: 16px; color: #333; }
.reader-origin { margin: 0 0 18px; padding: 8px 10px; background: #ffffe1; border: 1px solid #000; font-size: 14px; }
.activation-offer .article h3 { margin: 28px -8px 10px; padding: 3px 8px; font: bold 16px/1.3 var(--font); color: #fff; background: var(--navy); }
.article h4 { margin: 20px 0 6px; font: bold 15px var(--font); }
.activation-offer .article p, .activation-offer .article li { margin: 0 0 12px; }
.activation-offer .article ul, .activation-offer .article ol { padding-left: 22px; margin: 0 0 14px; }
.article blockquote { margin: 0 0 14px; padding: 8px 12px; border-left: 4px solid var(--navy); background: #f0f0f0; }
.article code { font: 13px var(--mono); background: #eee; padding: 0 3px; }
.article pre { margin: 0 0 14px; padding: 10px 12px; overflow-x: auto; background: #000; color: #c0ffc0; }
.article pre code { background: none; color: inherit; padding: 0; }
.table-scroll { overflow-x: auto; margin: 0 0 14px; }
.article table { border-collapse: collapse; font-size: 13.5px; }
.article th, .article td { border: 1px solid #808080; padding: 4px 8px; text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }
.article th { background: var(--face); }
.source95 { margin-top: 18px; }
.source95 summary { cursor: pointer; font-weight: bold; padding: 6px 0; }
.source95 pre { margin: 0; padding: 12px; max-height: 480px; overflow: auto; background: #fff; border: 2px inset #c0c0c0; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; }

.motion-paused .disk, .motion-paused .paper95 { animation: none; }
@media (max-width: 720px) {
  .skills-toolbar { align-items: stretch; }
  .find95, .field95 { width: 100%; max-width: none; }
  .disk-grid { grid-template-columns: 1fr; }
  .reader-doc { padding: 14px 14px 22px; }
  .reader-win { height: 92vh; }
}
@media (prefers-reduced-motion: reduce) {
  .disk, .paper95, .disk.spinning .floppy { animation: none; }
  .floppy, .f-shutter { transition: none; }
}

/* Field Kit extras: status, inputs and outputs, example request, downloads */
.draft-note { margin: 0 0 4px; padding: 6px 10px; font-size: 13px; background: #fff; border: 1px dashed #808080; }
.status95 { margin: 0 0 14px; font-size: 13px; color: #444; }
.io95 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.io95 > div { padding: 8px 12px; background: #f4f4f4; border: 1px solid #808080; min-width: 0; }
.activation-offer .io95 h4 { margin: 0 0 4px; font: bold 13px var(--font); color: var(--navy); }
.activation-offer .io95 ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.activation-offer .io95 li { margin: 0 0 2px; }
.try95 { margin: 18px 0 0; padding: 10px 12px; background: #ffffe1; border: 1px solid #000; }
.activation-offer .try95 p { margin: 6px 0 0; font: 13.5px/1.55 var(--mono); }
.install-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.install-box .download-btn { min-height: 30px; padding: 4px 14px; font: 13px var(--font); color: #000; text-decoration: none; display: inline-grid; place-items: center; }
@media (max-width: 720px) { .io95 { grid-template-columns: 1fr; } }
.read-on { margin: 4px 0 8px; }
.read-on-btn { display: inline-grid; place-items: center; min-height: 34px; padding: 6px 16px; font: bold 14px var(--font); color: #000; text-decoration: none; }