/* Projects first: an XP-style Explorer window — a left task pane plus a Tiles grid. */
#portfolio-window{--projects-text:#202b35;--projects-muted:#596873;--projects-edge:#d8dfe5;--projects-accent:#215c89;--projects-surface:#f4f6f8}
:root[data-os] #portfolio-window .explorer-layout{display:flex;align-items:stretch;min-width:0;margin:0;overflow:hidden}
:root[data-os] #portfolio-window .task-pane{display:none;flex:0 0 190px;width:190px;min-height:0;box-sizing:border-box;padding:16px 12px;flex-direction:column;gap:14px;overflow-x:hidden;overflow-y:auto;background:var(--sidebar,#eef1f4);border-right:1px solid var(--projects-edge)}
:root[data-family=windows] #portfolio-window .task-pane{display:flex}
:root[data-os] #portfolio-window .task-box{flex:none;border:1px solid var(--projects-edge);border-radius:4px;overflow:hidden;background:#fff}
:root[data-os] #portfolio-window .task-box>.task-title{display:block;margin:0;padding:7px 10px;font:700 11px/1.3 var(--os-font,Tahoma,Arial,sans-serif);letter-spacing:.3px;text-transform:uppercase;color:#0a3d73;background:none}
:root[data-os] #portfolio-window .task-box-body{background:#eef1f4;padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px}
:root[data-os] #portfolio-window .task-link{display:flex;align-items:center;gap:6px;width:100%;min-height:30px;background:none;border:0;padding:4px 2px;color:#0a3d73;font:12px/1.4 var(--os-font,Tahoma,Arial,sans-serif);text-decoration:none;text-align:left;cursor:pointer}
:root[data-os] #portfolio-window .task-link:hover{text-decoration:underline;text-underline-offset:2px}
:root[data-os] #portfolio-window .task-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
:root[data-os] #portfolio-window .details-title{margin:0;font:700 13px/1.3 var(--os-font,Tahoma,Arial,sans-serif);color:#0a3d73;overflow-wrap:anywhere}
:root[data-os] #portfolio-window .details-meta{margin:3px 0 0;font:11px/1.4 var(--os-font,Tahoma,Arial,sans-serif);color:var(--projects-muted)}
:root[data-os] #portfolio-window .details-text{margin:8px 0 0;font:12px/1.6 var(--os-font,Tahoma,Arial,sans-serif);color:var(--projects-text)}
/* The classic XP Explorer bar: blue task pane, white-to-blue header boxes. */
:root[data-os=xp] #portfolio-window .task-pane{background:linear-gradient(180deg,#7BA2E7,#6375D6);color:#fff}
:root[data-os=xp] #portfolio-window .task-box{background:linear-gradient(180deg,#ffffff,#C6D3F7);border-color:#7C93DA}
:root[data-os=xp] #portfolio-window .task-box>.task-title{color:#15419C}
:root[data-os=xp] #portfolio-window .task-box-body{background:#D6DFF7}
:root[data-os=xp] #portfolio-window .task-link{color:#15419C}
:root[data-os=xp] #portfolio-window .details-title{color:#15419C}
:root[data-os=xp] #portfolio-window .details-meta{color:#33417a}
:root[data-os=xp] #portfolio-window .details-text{color:#1c2c58}
:root[data-os] #portfolio-window .workspace{flex:1 1 auto;min-width:0;height:100%;padding:0;background:var(--projects-surface);container-type:inline-size;container-name:project-space;scrollbar-gutter:stable}
:root[data-os] #portfolio-window .project-collection{width:100%;max-width:1040px;margin:0 auto;padding:32px 34px 0!important;color:var(--projects-text);font-family:var(--os-font,Tahoma,Arial,sans-serif);box-sizing:border-box}
#portfolio-window .projects-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px;padding:0}
#portfolio-window .projects-heading h1{display:block;margin:0;font:600 25px/1.2 var(--os-font,Tahoma,Arial,sans-serif);letter-spacing:-.5px;color:var(--projects-text)}
#portfolio-window .projects-heading .search-box{display:flex;flex:0 1 238px;align-items:center;min-width:0;gap:8px;min-height:36px;padding:0 10px;border:1px solid var(--projects-edge);border-radius:3px;background:#fff;box-shadow:none;margin:0}
#portfolio-window .projects-heading .search-box:focus-within{outline:2px solid var(--projects-accent);outline-offset:1px}
#portfolio-window .projects-intro{margin:-8px 0 20px;max-width:62ch;font:14px/1.5 var(--os-font,Tahoma,Arial,sans-serif);color:var(--projects-text)}
#portfolio-window .projects-intro a{color:var(--projects-accent);text-decoration:underline;text-underline-offset:2px}
#portfolio-window .project-group{grid-column:1/-1;margin:14px 0 2px;padding:0 0 5px;border-bottom:1px solid var(--projects-edge);font:700 12px/1.3 var(--os-font,Tahoma,Arial,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--projects-muted)}
#portfolio-window #group-try{margin-top:0}
#portfolio-window .project-group[hidden]{display:none}
#portfolio-window .projects-heading .search-box>svg{width:15px;height:15px;flex:none;color:#7a8996}
#portfolio-window #project-search{min-width:0;width:100%;height:36px;border:0;padding:5px 0;background:transparent;font:14px/1.4 var(--os-font,Tahoma,Arial,sans-serif);color:var(--projects-text);outline:none}
#portfolio-window #project-search::placeholder{color:#72808c;opacity:1}
:root[data-os] #portfolio-window .project-grid,:root[data-os] #portfolio-window .project-grid.is-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));align-items:stretch;gap:10px;margin:0;padding:0}
:root[data-os] #portfolio-window .project-card{display:block;min-width:0;max-width:100%;padding:0;margin:0;background:none;border:0;box-shadow:none;color:var(--projects-text)}
:root[data-os] #portfolio-window .project-card[hidden]{display:none!important}
:root[data-os] #portfolio-window .project-tile{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;padding:8px;box-sizing:border-box;border:1px solid transparent;border-radius:3px;background:none;text-align:left;color:inherit;text-decoration:none;cursor:pointer}
:root[data-os] #portfolio-window .project-tile:hover{background:#e8f0fb;border-color:#cfe0f5}
:root[data-os] #portfolio-window .project-tile:focus-visible{outline:2px solid var(--projects-accent);outline-offset:-3px}
:root[data-os] #portfolio-window .project-card.selected-project .project-tile:focus-visible{outline-color:#fff}
:root[data-os] #portfolio-window .tile-thumb{flex:none;width:64px;height:64px;border-radius:3px;overflow:hidden;background:#e4e9ee;box-shadow:0 0 0 1px #c9d2da inset}
:root[data-os] #portfolio-window .tile-thumb>img{display:block;width:100%;height:100%;object-fit:cover}
:root[data-os] #portfolio-window .tile-body{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
:root[data-os] #portfolio-window .tile-name{font:700 13px/1.3 var(--os-font,Tahoma,Arial,sans-serif);overflow-wrap:anywhere}
:root[data-os] #portfolio-window .tile-meta{font:11px/1.4 var(--os-font,Tahoma,Arial,sans-serif);color:var(--projects-muted);text-transform:uppercase;letter-spacing:.3px}
:root[data-os] #portfolio-window .project-card.selected-project .tile-meta{color:#fff}
:root[data-os] #portfolio-window .project-card.selected-project .project-tile{background:var(--projects-accent);border-color:var(--projects-accent)}
:root[data-os] #portfolio-window .project-card.selected-project .tile-name{color:#fff}
:root[data-os=xp] #portfolio-window .project-card.selected-project .project-tile{background:#316AC5;border-color:#316AC5}
/* XP Explorer shows tiles on plain white. */
:root[data-os=xp] #portfolio-window{--projects-surface:#fff}
#portfolio-window .file-extension,#portfolio-window .preview-label{display:none}
#portfolio-window .projects-explore{max-width:1040px;padding:28px 34px 12px;margin:auto;box-sizing:border-box;text-align:center}
#portfolio-window .projects-explore>button{display:inline-flex;gap:12px;align-items:center;min-height:42px;padding:0 9px;background:none;color:var(--projects-accent);border:0;box-shadow:none;font:13px var(--os-font,Tahoma,Arial,sans-serif);cursor:pointer}
#portfolio-window .projects-explore>button:hover{text-decoration:underline;text-underline-offset:4px}
#portfolio-window .projects-explore>button:focus-visible{outline:2px solid var(--projects-accent)}
:root[data-os] #portfolio-window .portfolio-footer{max-width:1040px;padding:10px 34px 26px;margin:auto;border:0;text-align:center;background:none;color:#687680;font:11px var(--os-font,Tahoma,Arial,sans-serif)}
:root[data-os] #portfolio-window .portfolio-footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@container project-space (max-width:700px){
 :root[data-os] #portfolio-window .project-collection{padding:22px 20px 0!important}
 #portfolio-window .projects-heading h1{font-size:23px}
}
@container project-space (max-width:500px){
 :root[data-os] #portfolio-window .project-collection{padding:18px 13px 0!important}
 #portfolio-window .projects-heading{gap:10px;margin-bottom:15px;align-items:center}
 #portfolio-window .projects-heading h1{font-size:20px;letter-spacing:-.4px;white-space:nowrap}
 #portfolio-window .projects-heading .search-box{flex:0 1 157px;min-height:34px;padding:0 7px;gap:6px}
 #portfolio-window #project-search{font-size:16px;height:34px;width:100%}
}
@container project-space (max-width:350px){
 #portfolio-window .projects-heading{flex-wrap:wrap}#portfolio-window .projects-heading .search-box{flex:1 0 100%}
}
/* Phones and narrow windows: the task pane steps aside, tiles go single column and stay easy to tap. */
@media(max-width:820px){
 :root[data-os] #portfolio-window .project-card.selected-project .project-tile{background:none;border-color:transparent}
 :root[data-os] #portfolio-window .project-card.selected-project .tile-name{color:var(--projects-text)}
 :root[data-os] #portfolio-window .project-card.selected-project .tile-meta{color:var(--projects-muted)}
 :root[data-os] #portfolio-window .project-card.selected-project .project-tile:focus-visible{outline-color:var(--projects-accent)}
 :root[data-os] #portfolio-window .task-pane{display:none!important}
 :root[data-os] #portfolio-window .project-grid,:root[data-os] #portfolio-window .project-grid.is-list{grid-template-columns:1fr;gap:8px}
 :root[data-os] #portfolio-window .project-tile{min-height:44px;padding:10px 8px;gap:12px}
 :root[data-os] #portfolio-window .tile-thumb{width:56px;height:56px}
 :root[data-os] #portfolio-window .tile-name{font-size:14px}
 #portfolio-window .projects-heading .search-box{min-height:44px}
 #portfolio-window #project-search{height:44px}
}
/* The selected era frames the content; it changes chrome and corners, never the tile's text size or contrast. */
:root:is([data-os="95"],[data-os="98"],[data-os="2000"],[data-os="system7"]) #portfolio-window .project-tile{border-radius:0}
:root[data-os="11"] #portfolio-window .project-tile{border-radius:6px}
:root[data-os="system7"] #portfolio-window{--projects-accent:#222;--projects-edge:#aaa}
@media(prefers-reduced-motion:reduce){#portfolio-window .project-tile{transition:none}}
@media(forced-colors:active){#portfolio-window .project-tile{border:1px solid CanvasText!important}#portfolio-window{--projects-text:CanvasText;--projects-muted:CanvasText;--projects-accent:LinkText;--projects-surface:Canvas}#portfolio-window .workspace{forced-color-adjust:auto}#portfolio-window .task-pane{forced-color-adjust:auto}}
/* High contrast: selection uses system Highlight colours, not the author blue. */
@media(forced-colors:active) and (min-width:821px){
 :root[data-os] #portfolio-window .project-card.selected-project .project-tile{outline:3px solid Highlight;outline-offset:-3px;background:Highlight!important;forced-color-adjust:none}
 :root[data-os] #portfolio-window .project-card.selected-project .tile-name,:root[data-os] #portfolio-window .project-card.selected-project .tile-meta{color:HighlightText!important}
}
@media(forced-colors:active){#portfolio-window .project-tile:focus-visible{outline:3px solid Highlight;outline-offset:-3px}}
@media print{#portfolio-window .projects-heading .search-box,#portfolio-window .projects-explore,#portfolio-window .task-pane{display:none!important}#portfolio-window .workspace{height:auto!important;overflow:visible!important;container-type:normal}#portfolio-window .project-collection{padding:0!important}#portfolio-window .explorer-layout{display:block!important}.project-card{break-inside:avoid}}