/* iPAQ SoftPaq archive - styled after Compaq's 2001 "unity" support pages, written in modern CSS.
 * All images are original Wayback captures (assets/SOURCES.txt), shown at native size. */
:root {
  --cpq-red: #ff0000;          /* logo band (support-logo-band.gif) */
  --cpq-red-dark: #990000;     /* HANDHELDS tab */
  --cpq-red-text: #c8102e;
  --cpq-navy: #070736;         /* top navigation bar */
  --grey-bar: #8c8c8c;         /* header rows (greybar.gif is #999; darkened slightly for white-text contrast) */
  --grey-nav: #e6e6e6;
  --grey-line: #c0c0c0;
  --grey-rule: #dcdcdc;
  --grey-row: #f4f4f4;
  --ink: #000;
  --ink-soft: #444;
  --ink-mute: #6b6b6b;
  --link: #003399;
  --link-visited: #663399;
  --paper: #fff;
  --font: Verdana, Arial, Helvetica, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --fs: 12px;
  --fs-small: 11px;
  --fs-tiny: 10px;
  --nav-w: 184px;
  --pad: 18px;
}
:lang(zh) { --font: Verdana, Arial, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", sans-serif; }
:lang(ja) { --font: Verdana, Arial, "Meiryo", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 44px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--fs)/1.5 var(--font); }
a { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--cpq-red-text); }
:focus-visible { outline: 2px solid #1a5fd0; outline-offset: 1px; }
img { border: 0; }
/* small GIFs / JPGs are shown at their native pixel size; keep edges crisp when the browser zooms */
.masthead img, .pagehead img, .navlogo { image-rendering: pixelated; image-rendering: crisp-edges; }
.mono { font-family: var(--mono); }
button { font: inherit; }

.skip { position: absolute; left: -999px; top: 0; background: #ff0; padding: 4px 8px; z-index: 9; }
.skip:focus { left: 8px; }

/* ---- masthead ---- */
.band { background: var(--cpq-red); display: flex; align-items: center; gap: 12px; min-height: 26px; padding-right: 10px; }
.wordmark { display: block; line-height: 0; flex: 0 1 539px; min-width: 0; overflow: hidden; }
.wordmark img { display: block; width: 539px; height: 26px; max-width: none; }
.badge { color: #fff; font-weight: bold; font-size: var(--fs-tiny); border: 1px solid #fff; padding: 0 5px; line-height: 15px; letter-spacing: .03em; white-space: nowrap; }
.langsel { margin-left: auto; color: #fff; font-size: var(--fs-small); display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.langsel select { font: inherit; border: 1px solid #fff; background: #fff; color: #000; padding: 1px 2px; border-radius: 0; }
.topnav { background: var(--cpq-navy); }
.topnav ul { list-style: none; margin: 0; padding: 0 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; min-height: 22px; align-items: center; }
.topnav li { font-size: var(--fs-tiny); font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }
.topnav li + li::before { content: "|"; color: #5f5f7a; padding: 0 8px; }
.topnav a, .topnav a:visited { color: #d0d0d8; text-decoration: none; }
.topnav a:hover, .topnav a[aria-current] { color: #fff; }
.tabs { display: flex; align-items: center; border-bottom: 1px solid var(--grey-line); background: #fff; }
.tabs > img { display: block; flex: none; }
.crumbs { list-style: none; margin: 0; padding: 4px 12px; display: flex; flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink-soft); }
.crumbs li + li::before { content: ""; display: inline-block; width: 4px; height: 6px; margin: 0 7px 1px; background: url(../assets/arrow-blue.gif) no-repeat; }
.crumbs [aria-current] { color: #000; font-weight: bold; }

/* ---- two-column layout ---- */
.layout { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); }
.leftnav { background: var(--grey-nav); border-right: 1px solid var(--grey-line); padding: 0 0 18px; }
.leftnav-in { position: sticky; top: 0; }
.navhead { margin: 0; font-size: var(--fs-small); font-weight: bold; color: #fff; background: var(--grey-bar); padding: 4px 10px; border-top: 1px solid #fff; }
.carrots, .toc { list-style: none; margin: 6px 0 10px; padding: 0; }
.carrots li, .toc > li { font-size: var(--fs-small); padding: 2px 10px 2px 22px; background: url(../assets/leftnav-red-carrot.gif) no-repeat 10px .5em; }
.carrots a, .toc a { text-decoration: none; }
.carrots a:hover, .toc a:hover { text-decoration: underline; }
.carrots a[aria-current], .toc a[aria-current] { color: #000; font-weight: bold; }
.toc > li { padding-top: 3px; padding-bottom: 3px; }
.toc > li > a { font-weight: bold; }
.toc .n { color: #8a8a8a; font-size: var(--fs-tiny); }
.toc > li.empty > a { color: #8a8a8a; font-weight: normal; pointer-events: none; }
.toc .subs { list-style: none; margin: 2px 0 1px; padding: 0; }
.toc .subs li { font-size: var(--fs-tiny); line-height: 1.45; padding: 1px 0 1px 10px; background: url(../assets/arrow-blue.gif) no-repeat 0 .55em; }
.toc .subs a[aria-current] { color: #000; font-weight: bold; }
.navlogo { display: block; margin: 16px auto 0; }

main { padding: 0 var(--pad) 28px; min-width: 0; }
main:focus { outline: none; }
.pagehead { display: flex; align-items: flex-end; margin: 0 calc(var(--pad) * -1); border-bottom: 1px solid #b8b8b8; overflow: hidden; }
.pagehead img { display: block; flex: none; }
h1 { font-size: 16px; color: var(--cpq-red-text); margin: 14px 0 4px; font-weight: bold; line-height: 1.3; }
h1 small { display: block; font-size: var(--fs); color: #000; font-weight: bold; margin-top: 3px; }
.intro { max-width: 82ch; margin: 8px 0 2px; }
.note { margin: 0 0 6px; font-size: var(--fs-small); color: var(--ink-mute); }

.subbar { font-size: var(--fs-small); margin: 16px 0 0; padding: 3px 8px; color: #000; background: #e9e9e9; border-left: 4px solid var(--cpq-red); font-weight: bold; }

/* ---- model picker ---- */
.models .subbar { margin-bottom: 8px; }
.model-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.model-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px 7px; border: 1px solid var(--grey-line); background: #fff; font-size: var(--fs-small); line-height: 1.35; }
.model-card .pic { flex: 0 0 auto; height: 186px; width: 100%; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 4px; }
.model-card .pic.txt { flex: 0 0 auto; margin-top: auto; align-self: center; align-items: center; width: 96px; height: 96px; box-sizing: border-box; border: 1px solid var(--grey-line); background: #f3f3f3; color: var(--cpq-navy); font-size: 15px; font-weight: bold; line-height: 1.3; }
.model-card .cap { min-height: 2.7em; }
.model-card img { display: block; flex: none; width: auto; height: auto; max-height: 186px; max-width: 100%; } /* never upscaled: max-* only shrinks the large press shots */
.model-card .cap { font-weight: bold; display: block; }
.tag.third { background: #fff3d6; border-color: #c9a24a; color: #6b4b00; }
.c-dl a.third { color: #6b4b00; }
.model-card small { font-weight: normal; color: var(--ink-mute); font-size: var(--fs-tiny); }
.model-card:hover { border-color: #888; }
.model-card[aria-checked="true"] { border: 2px solid var(--cpq-red); padding: 5px 3px 6px; background: #fff7f7; }
.model-card:focus-visible { outline: 2px solid #1a5fd0; outline-offset: 1px; }

/* ---- filter toolbar ---- */
.toolbar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 16px 0 4px; padding: 6px 8px; background: #d9d9d9; border-top: 1px solid #999; border-bottom: 1px solid #999; font-size: var(--fs-small); }
.toolbar label { display: flex; gap: 5px; align-items: center; font-weight: bold; }
.toolbar .grow { flex: 1 1 180px; }
.toolbar .grow input { flex: 1; min-width: 0; }
.toolbar .chk { font-weight: normal; }
.toolbar select, .toolbar input[type=search], .toolbar button { font: inherit; border: 1px solid #7f7f7f; background: #fff; padding: 2px 4px; border-radius: 0; color: #000; }
.toolbar button { background: #efefef; cursor: pointer; padding: 2px 8px; }
.toolbar button:hover { background: #fff; }
#f-count { margin-left: auto; color: #333; }

/* ---- category tables ---- */
.cat { margin-top: 20px; }
.cat > h2 { margin: 0; font-size: var(--fs); color: #fff; background: var(--cpq-red-dark); padding: 4px 8px; }
.cat-note { margin: 0; padding: 4px 8px; font-size: var(--fs-small); color: #444; background: #f7f7f7; border-bottom: 1px dotted #999; }
.sub .subbar { margin: 12px 0 0; }
.cat > .sub:first-of-type .subbar { margin-top: 8px; }
table.sp { width: 100%; border-collapse: collapse; font-size: var(--fs-small); table-layout: fixed; margin-top: 2px; }
table.sp th { text-align: left; background: var(--grey-bar); color: #fff; font-weight: bold; padding: 3px 6px; white-space: nowrap; }
table.sp td { padding: 5px 6px; border-bottom: 1px solid var(--grey-rule); vertical-align: top; }
table.sp tbody.odd td { background: var(--grey-row); }
table.sp tbody:hover > tr.main td { background: #fff6dc; }
th.c-sp { width: 92px; } th.c-ver { width: 118px; } th.c-date { width: 86px; } th.c-size { width: 84px; text-align: right !important; } th.c-dl { width: 104px; }
td.c-sp { font-weight: bold; font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.c-sp .plus { font-family: var(--font); font-weight: normal; font-size: var(--fs-tiny); color: var(--ink-mute); }
td.c-sp .nonsp { font-weight: normal; color: #555; font-size: var(--fs-small); }
td.c-ver { overflow-wrap: anywhere; }
td.c-date, td.c-size { white-space: nowrap; }
td.c-size { text-align: right; }
td.c-dl a { display: block; line-height: 1.5; }
td.c-dl a.dl-main { font-weight: bold; padding-left: 11px; background: url(../assets/dark-red-carrot.gif) no-repeat 0 .3em; }
.c-title .t { font-weight: bold; display: block; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 3px; }
.chip, .os, .lc, .tag { font-size: 9.5px; line-height: 14px; padding: 0 4px; white-space: nowrap; border: 1px solid; }
.chip { border-color: #99a; color: #224; background: #eef; }
.chip.acc { border-color: #a96; color: #532; background: #fff4e5; }
.os { border-color: #8aa58a; color: #1f4a1f; background: #eef6ee; }
.langs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: 4px; }
.lc { font-family: var(--mono); font-size: 10px; border-color: #b5b5b5; background: #fff; color: var(--link); text-decoration: none; }
a.lc:visited { color: var(--link-visited); }
a.lc:hover { border-color: var(--cpq-red-text); color: var(--cpq-red-text); }
.lc.hit { background: var(--link); border-color: var(--link); color: #fff; }
.lc.miss { color: #999; border-style: dashed; text-decoration: line-through; }
.tag.missing { background: var(--cpq-red-dark); border-color: var(--cpq-red-dark); color: #fff; font-weight: bold; }
.tag.partial { border-color: var(--cpq-red-dark); color: var(--cpq-red-dark); background: #fff; }
.more-btn { all: unset; cursor: pointer; display: inline-block; margin-top: 3px; color: var(--link); font-size: var(--fs-tiny); }
.more-btn::before { content: "[+] "; font-family: var(--mono); }
.more-btn[aria-expanded="true"]::before { content: "[−] "; }
.more-btn:hover { text-decoration: underline; color: var(--cpq-red-text); }
.more-btn:focus-visible { outline: 2px solid #1a5fd0; }
tbody.is-missing > tr.main td { background: #fff3f3; }
tbody.is-missing .t { color: #800; }
.unk { color: var(--ink-mute); font-style: italic; }
.fix { border-bottom: 1px dotted #555; cursor: help; }

/* details panel */
tr.more > td { background: #fbfbfb !important; border-bottom: 1px solid #bbb; padding: 0 6px 10px; }
.more-in { border-left: 3px solid var(--grey-line); padding: 6px 0 2px 10px; }
dl.meta { margin: 0 0 6px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; font-size: var(--fs-small); }
dl.meta dt { font-weight: bold; color: #555; }
dl.meta dd { margin: 0; overflow-wrap: anywhere; }
.more-in h4 { margin: 10px 0 3px; font-size: var(--fs-small); color: #000; }
table.builds { width: 100%; border-collapse: collapse; font-size: var(--fs-tiny); background: #fff; }
table.builds th { text-align: left; background: #e4e4e4; color: #000; padding: 2px 5px; border-bottom: 1px solid #bbb; white-space: nowrap; }
table.builds td { padding: 2px 5px; border-bottom: 1px solid #e6e6e6; vertical-align: top; }
table.builds .r { text-align: right; white-space: nowrap; }
table.builds td.mono { font-size: 11px; white-space: nowrap; }
table.builds td.sha { font-size: 10px; color: #555; word-break: break-all; white-space: normal; }
table.builds td.lk { white-space: nowrap; }
table.builds tr.miss td { color: #888; }
ul.pages { margin: 0; padding-left: 16px; font-size: var(--fs-tiny); }
ul.pages li { overflow-wrap: anywhere; }
.empty { padding: 16px 4px; color: #555; }

/* ---- footer ---- */
.sitefoot { border-top: 3px solid transparent; border-image: url(../assets/header-dotted-line.gif) 0 0 3 0 repeat; padding: 12px var(--pad) 28px calc(var(--nav-w) + var(--pad)); font-size: var(--fs-small); color: #444; }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; max-width: 1100px; }
.sitefoot h2 { font-size: var(--fs-small); margin: 0 0 4px; color: #000; }
.sitefoot p { margin: 0 0 4px; }
.foot-meta { margin-top: 12px !important; color: var(--ink-mute); }
.badge-foot { color: var(--cpq-red-text); border: 1px solid var(--cpq-red-text); padding: 0 4px; font-weight: bold; font-size: var(--fs-tiny); margin-right: 6px; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .ph-photo { display: none; }
  .model-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  th.c-ver { width: 92px; } th.c-dl { width: 92px; }
}
@media (max-width: 760px) {
  :root { --fs: 13px; --fs-small: 12px; --fs-tiny: 11px; --pad: 10px; }
  .hide-sm { display: none !important; }
  .band { flex-wrap: wrap; padding-right: 8px; gap: 8px; }
  .wordmark { flex: 1 1 180px; }
  .badge { display: none; }
  .topnav ul { justify-content: flex-start; padding: 2px 10px; }
  .tabs { flex-wrap: wrap; }
  .crumbs { padding: 4px 10px; flex: 1 1 100%; border-top: 1px solid var(--grey-line); }
  .layout { grid-template-columns: 1fr; }
  .leftnav { border-right: 0; border-bottom: 1px solid var(--grey-line); padding: 0 0 4px; }
  .toc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; margin: 4px 0; }
  .toc .subs { display: none; }
  .pagehead { margin: 0 -10px; }
  .ph-title { max-width: none; }
  .model-cards { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .model-card { flex: 0 0 auto; min-width: 112px; scroll-snap-align: start; }
  .model-card .cap { min-height: 0; }
  .model-card .pic { height: 150px; }
  .model-card img { max-height: 150px; }
  .model-card small { display: none; }
  .toolbar { position: static; }
  .toolbar label { flex: 1 1 45%; }
  .toolbar label select { flex: 1; min-width: 0; }
  .toolbar .grow { flex-basis: 100%; }
  #f-count { margin-left: auto; }
  table.sp, table.sp tbody, table.sp tr, table.sp td { display: block; width: 100%; }
  table.sp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.sp tbody { border-bottom: 1px solid #bbb; }
  table.sp tr.main { display: flex; flex-wrap: wrap; align-items: baseline; padding: 8px 8px 9px; gap: 0 12px; }
  table.sp tr.main td { border: 0; padding: 0; background: none !important; width: auto; }
  table.sp tbody.odd { background: var(--grey-row); }
  table.sp tbody.is-missing { background: #fff3f3; }
  td.c-sp { order: 0; flex: 1 1 auto; font-size: 13px; }
  td.c-dl { order: 1; flex: none; display: flex !important; gap: 10px; }
  td.c-dl a { display: inline; }
  td.c-title { order: 2; flex: 1 1 100%; margin: 3px 0 4px; }
  td.c-ver, td.c-date, td.c-size { order: 3; flex: none; text-align: left; color: #444; font-size: var(--fs-small); }
  td[data-label]:not(.c-sp)::before { content: attr(data-label) ": "; color: var(--ink-mute); }
  .lc { font-size: 11px; line-height: 16px; padding: 0 5px; }
  .more-btn { font-size: 12px; padding: 4px 0; }
  table.builds th:nth-child(3), table.builds td:nth-child(3), table.builds th.sha, table.builds td.sha { display: none; }
  .sitefoot { padding-left: 10px; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media print {
  .toolbar, .models, .leftnav, .langsel, .more-btn { display: none; }
  .layout { display: block; }
  .sitefoot { padding-left: 0; }
}