/* Wissem OS: shared sizing and responsive application layouts. */
html, body { box-sizing: border-box; }
#xp-portfolio { border:0; font-size:15px; }
#xp-portfolio button:focus-visible, #xp-portfolio a:focus-visible { outline:3px solid #f1b52f; outline-offset:3px; }
#xp-portfolio .desktop-intro { position:absolute; top:12%; left:14%; max-width:590px; padding:28px; color:white; text-shadow:0 2px 8px #16375f; background:#143a665c; border:1px solid #ffffff5c; border-radius:12px; backdrop-filter:blur(12px); }
#xp-portfolio .desktop-intro>span { font-size:11px; letter-spacing:.13em; }
#xp-portfolio .desktop-intro h1 { font-size:clamp(28px,3.2vw,46px); line-height:1.1; margin:16px 0; }
#xp-portfolio .desktop-intro p { line-height:1.6; }
#xp-portfolio .desktop-intro>div, #xp-portfolio .welcome-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
#xp-portfolio .desktop-intro button, #xp-portfolio .welcome-actions button { min-height:44px; padding:10px 16px; border:1px solid #8bb6e3; border-radius:5px; background:linear-gradient(#fff,#e4eef9); color:#134b89; font:600 14px Tahoma,sans-serif; text-shadow:none; }
#xp-portfolio .desktop-intro button:first-child, #xp-portfolio .welcome-actions button:first-child { background:linear-gradient(#358df4,#095fc6); color:white; border-color:#88c2ff; }
#xp-portfolio .icons { max-height:calc(100% - 56px); overflow:auto; width:94px; gap:4px; }
#xp-portfolio .xp-icon { width:88px; min-height:72px; font-size:12px; }
#xp-portfolio .titlebar { min-width:0; gap:8px; }
#xp-portfolio .title-name { min-width:0; }
#xp-portfolio .xp-brand, #xp-portfolio .wincontrols { flex-shrink:0; }
#xp-portfolio .mainwin, #xp-portfolio .projectwin, #xp-portfolio .contactwin, #xp-portfolio .howardwin { container-type:inline-size; max-height:calc(100% - 60px); max-width:calc(100% - 16px); }
#xp-portfolio .mainwin .appbody { min-width:0; grid-template-columns:minmax(0,1fr); }
#xp-portfolio .contactwin { width:420px; height:360px; grid-template-rows:43px 34px minmax(0,1fr); }
#xp-portfolio .contactbody { overflow:auto; font-size:15px; line-height:1.65; padding:20px; min-width:0; overflow-wrap:anywhere; }
#xp-portfolio .projectwin { width:min(740px,75%); height:440px; grid-template-rows:43px 34px minmax(0,1fr) 25px; }
#xp-portfolio .projectgrid { gap:14px; padding:16px; }
#xp-portfolio .projectcard { padding:10px; min-height:150px; }
#xp-portfolio .projectcard b { font-size:15px; white-space:normal; }
#xp-portfolio .projectcard small { font-size:13px; line-height:1.5; }
#xp-portfolio .projectthumb { height:70px; }
#xp-portfolio .projectfoot { font-size:12px; }
#xp-portfolio .mainwin.maximized, #xp-portfolio .projectwin.maximized, #xp-portfolio .contactwin.maximized, #xp-portfolio .howardwin.maximized { left:8px; top:8px; right:auto; bottom:auto; width:calc(100% - 16px); height:calc(100% - 68px); }
#xp-portfolio .taskbar { z-index:100000; height:48px; gap:6px; }
#xp-portfolio .start { min-height:38px; }
#xp-portfolio .tasktab { min-width:0; flex:0 1 200px; height:36px; }
#xp-portfolio .tray { flex-shrink:0; }
#xp-portfolio .startmenu { z-index:100001; bottom:47px; }
#xp-portfolio .startlink { min-height:44px; }
#xp-portfolio .notepad-content { padding:24px; }
#xp-portfolio .welcome-copy p { font-size:16px; line-height:1.65; }
#xp-portfolio .welcome-hero { grid-template-columns:minmax(0,1fr) minmax(160px,26%); gap:24px; padding:8px 0 26px; }
#xp-portfolio .welcome-copy h1 { font-size:clamp(28px,3vw,40px); letter-spacing:-.02em; }
#xp-portfolio .welcome-panels { gap:16px; margin-bottom:16px; }
#xp-portfolio .welcome-lower { gap:16px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
#xp-portfolio .welcome-panel h2 { font-size:18px; height:auto; min-height:48px; }
#xp-portfolio .panel-copy { font-size:15px; line-height:1.65; padding:16px; }
#xp-portfolio .build-list { font-size:14px; padding:16px; gap:12px; }
#xp-portfolio .build-list li { flex-wrap:wrap; gap:6px; }
#xp-portfolio .build-list b { white-space:normal; }
#xp-portfolio .build-list span { flex:1 1 110px; }
#xp-portfolio .experience-list { padding:12px 16px; }
#xp-portfolio .experience-list b { font-size:14px; }
#xp-portfolio .experience-list small, #xp-portfolio .panel-meta { font-size:12px; line-height:1.6; }
#xp-portfolio .selected-list button { min-height:88px; }
#xp-portfolio .selected-list small { font-size:13px; }
#xp-portfolio .selected-list em { font-size:12px; }
#xp-portfolio .welcome-contact a, #xp-portfolio .welcome-contact button { font-size:14px; min-height:44px; overflow-wrap:anywhere; }
#xp-portfolio .caseview { font-size:16px; line-height:1.7; padding:12px 4px; }
#xp-portfolio .caseview h2 { font-size:27px; line-height:1.25; }
#xp-portfolio .caseview h3 { font-size:18px; }
#xp-portfolio .case-step { padding:14px; }
#xp-portfolio .case-step span, #xp-portfolio .casefacts div { font-size:14px; }
#xp-portfolio .case-step b, #xp-portfolio .casefacts b { font-size:15px; }
#xp-portfolio .lens-content { max-width:760px; }
#xp-portfolio .lens-tab { min-height:44px; font-size:14px; }
#xp-portfolio .howardwin { min-width:300px; }
#xp-portfolio .prime-app { height:auto; display:block; padding:24px; }
#xp-portfolio .prime-heading { grid-template-columns:68px minmax(0,1fr) auto; margin-bottom:20px; }
#xp-portfolio .prime-heading-copy p { font-size:18px; }
#xp-portfolio .prime-deck { font-size:14px; line-height:1.6; }
#xp-portfolio .prime-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr); grid-template-rows:auto; gap:18px; align-items:stretch; }
#xp-portfolio .prime-request, #xp-portfolio .prime-output { overflow:visible; }
#xp-portfolio .prime-card { padding-bottom:16px; }
#xp-portfolio .prime-card h2 { height:auto; min-height:54px; flex-wrap:wrap; font-size:16px; }
#xp-portfolio .prime-request blockquote { font-size:15px; line-height:1.6; }
#xp-portfolio .request-sources { font-size:13px; gap:8px; }
#xp-portfolio .request-sources small, #xp-portfolio .demo-note { font-size:12px; line-height:1.5; }
#xp-portfolio .prime-run { min-height:44px; font-size:14px!important; }
#xp-portfolio .prime-flow { grid-template-columns:minmax(100px,.7fr) minmax(0,1fr); gap:18px; padding:24px 8px; }
#xp-portfolio .flow-start, #xp-portfolio .flow-result { display:none; }
#xp-portfolio .agent-node { grid-template-columns:28px minmax(0,1fr); padding:10px 8px; }
#xp-portfolio .agent-node>i { display:none; }
#xp-portfolio .agent-node b { font-size:13px; white-space:normal; }
#xp-portfolio .agent-node small { font-size:12px; white-space:normal; line-height:1.4; }
#xp-portfolio .orchestrator-node>small { font-size:13px; }
#xp-portfolio .orchestrator-node>em { font-size:12px; }
#xp-portfolio .result-checks li { font-size:14px; line-height:1.6; }
#xp-portfolio .artifact-row { min-height:62px; }
#xp-portfolio .artifact-row b { font-size:14px; }
#xp-portfolio .artifact-row small { font-size:12px; }
#xp-portfolio .prime-tabs { margin-top:24px; flex-wrap:wrap; gap:6px; padding-bottom:8px; }
#xp-portfolio .prime-tab { min-height:44px; font-size:14px!important; border-radius:6px; border-bottom:1px solid #284672!important; }
#xp-portfolio .prime-open-project { min-height:44px; font-size:14px!important; }
#xp-portfolio .prime-lower { overflow:visible; margin-top:16px; }
#xp-portfolio .prime-summary-col { padding:18px; }
#xp-portfolio .prime-summary-col p, #xp-portfolio .prime-view-heading p { font-size:15px; line-height:1.65; }
#xp-portfolio .prime-summary-col h3 { font-size:18px; }
#xp-portfolio .prime-focus-list, #xp-portfolio .prime-principles b, #xp-portfolio .prime-agent-card>p, #xp-portfolio .prime-usecases span, #xp-portfolio .prime-tech-grid p { font-size:14px; line-height:1.6; }
#xp-portfolio .prime-principles small, #xp-portfolio .prime-chips span, #xp-portfolio .prime-agent-card>small, #xp-portfolio .prime-agent-card>em, #xp-portfolio .prime-tech-grid small, #xp-portfolio .prime-stack-note, #xp-portfolio .prime-project-facts small { font-size:12px; }
#xp-portfolio .prime-agent-card>b, #xp-portfolio .prime-tech-grid h3, #xp-portfolio .prime-usecases b, #xp-portfolio .prime-project-facts b { font-size:16px; }
#xp-portfolio .prime-detail { position:fixed; inset:8px 8px 56px; z-index:100002; padding:20px; }
#xp-portfolio .prime-detail-panel { max-height:100%; width:min(580px,100%); padding:28px; }
#xp-portfolio .prime-detail-close { width:44px; height:44px; }
#xp-portfolio .prime-detail-kicker { display:block; padding-right:44px; font-size:12px; }
#xp-portfolio .prime-detail-content>p, #xp-portfolio .prime-detail-content dd { font-size:15px; }
#xp-portfolio .prime-detail-content dt, #xp-portfolio .detail-callout { font-size:13px; line-height:1.6; }
#xp-portfolio .prime-toast { white-space:normal; font-size:13px; position:sticky; top:0; left:auto; transform:none; margin-top:12px; }
@container (max-width:1000px) {
  #xp-portfolio .welcome-panels { grid-template-columns:1fr 1fr; }
  #xp-portfolio .experience-panel { grid-column:1/-1; }
  #xp-portfolio .prime-workspace { grid-template-columns:1fr 1fr; }
  #xp-portfolio .prime-flow { grid-column:1/-1; grid-row:2; grid-template-columns:150px minmax(0,1fr); }
  #xp-portfolio .agent-stack { grid-template-columns:1fr 1fr; }
  #xp-portfolio .agent-node:before, #xp-portfolio .prime-flow:before, #xp-portfolio .prime-flow:after, #xp-portfolio .agent-stack:before { display:none; }
  #xp-portfolio .prime-heading { grid-template-columns:56px minmax(0,1fr); }
  #xp-portfolio .prime-state { grid-column:2; grid-row:auto; margin-top:10px; }
  #xp-portfolio .prime-logo { width:50px; height:50px; }
  #xp-portfolio .prime-deck { grid-column:1/-1; }
  #xp-portfolio .prime-lower { grid-template-columns:1fr; }
  #xp-portfolio .prime-summary-col { border-right:0; border-bottom:1px solid #203d66; }
}
@container (max-width:620px) {
  #xp-portfolio .welcome-hero { grid-template-columns:1fr; }
  #xp-portfolio .welcome-illustration { display:none; }
  #xp-portfolio .welcome-panels, #xp-portfolio .welcome-lower { grid-template-columns:1fr; }
  #xp-portfolio .experience-panel { grid-column:auto; }
  #xp-portfolio .selected-list button { grid-template-columns:38px minmax(0,1fr); gap:10px; padding:14px 0; }
  #xp-portfolio .selected-list em { grid-column:2; justify-self:start; }
  #xp-portfolio .project-mark { width:36px; height:36px; font-size:20px; }
  #xp-portfolio .caseflow, #xp-portfolio .casefacts { grid-template-columns:1fr; }
  #xp-portfolio .case-step:after { display:none; }
  #xp-portfolio .projectgrid { grid-template-columns:1fr 1fr; }
  #xp-portfolio .prime-workspace, #xp-portfolio .prime-agent-cards, #xp-portfolio .prime-usecases, #xp-portfolio .prime-tech-grid, #xp-portfolio .prime-project-facts { grid-template-columns:1fr; }
  #xp-portfolio .prime-flow { grid-column:auto; grid-row:auto; grid-template-columns:1fr; padding:12px 0; }
  #xp-portfolio .orchestrator-node { min-height:110px; }
  #xp-portfolio .agent-stack { grid-template-columns:1fr; }
  #xp-portfolio .prime-tabs { display:grid; grid-template-columns:1fr 1fr; }
  #xp-portfolio .prime-open-project { grid-column:1/-1; margin:0; }
}
@media (max-width:700px) {
  #xp-portfolio .desktop-intro { top:20px; left:16px; right:16px; padding:20px; }
  #xp-portfolio .desktop-intro h1 { font-size:30px; }
  #xp-portfolio .icons { top:300px; left:12px; right:12px; bottom:60px; width:auto; max-height:none; grid-template-columns:repeat(3,minmax(0,1fr)); align-content:start; gap:10px; padding:4px; }
  #xp-portfolio .xp-icon { width:100%; min-height:84px; border-radius:8px; background:#123b686b; border:1px solid #ffffff60; font-size:13px; }
  #xp-portfolio .mainwin, #xp-portfolio .notepad-window, #xp-portfolio .projectwin, #xp-portfolio .contactwin, #xp-portfolio .howardwin,
  #xp-portfolio .mainwin.maximized, #xp-portfolio .projectwin.maximized, #xp-portfolio .contactwin.maximized, #xp-portfolio .howardwin.maximized { left:0!important; top:0!important; right:auto!important; bottom:auto!important; width:100%!important; height:calc(100% - 54px)!important; min-width:0; min-height:0; max-width:none; max-height:none; border-radius:0; }
  #xp-portfolio .titlebar { min-height:52px; padding:6px 8px; font-size:14px; }
  #xp-portfolio .wincontrol { width:44px; height:40px; }
  #xp-portfolio .wincontrol[aria-label^="Maximize"] { display:none; }
  #xp-portfolio .mainwin, #xp-portfolio .notepad-window, #xp-portfolio .contactwin, #xp-portfolio .howardwin { grid-template-rows:52px minmax(0,1fr)!important; }
  #xp-portfolio .projectwin { grid-template-rows:52px minmax(0,1fr) 28px; }
  #xp-portfolio .menubar, #xp-portfolio .projecttools, #xp-portfolio .resize-grip { display:none; }
  #xp-portfolio .notepad-content { padding:20px 16px; }
  #xp-portfolio .projectgrid { gap:10px; padding:12px; }
  #xp-portfolio .projectcard { min-height:164px; padding:8px; }
  #xp-portfolio .prime-app { padding:16px; }
  #xp-portfolio .prime-heading-copy h1 { font-size:26px; }
  #xp-portfolio .prime-heading-copy p { font-size:14px; }
  #xp-portfolio .prime-deck { display:block; }
  #xp-portfolio .prime-detail { inset:0 0 54px; padding:12px; }
  #xp-portfolio .prime-detail-panel { padding:20px; }
  #xp-portfolio .taskbar { height:54px; }
  #xp-portfolio .start { min-width:92px; height:44px; font-size:15px!important; }
  #xp-portfolio .tray { display:none; }
  #xp-portfolio .tasktab { flex:1 1 0; padding:5px; font-size:11px!important; height:44px; }
  #xp-portfolio .startmenu { bottom:53px; }
  #xp-portfolio[data-active-window] .desktop-intro, #xp-portfolio[data-active-window] .icons { visibility:hidden; }
}
@media (max-height:620px) and (max-width:700px) {
  #xp-portfolio .desktop-intro { top:12px; padding:14px; }
  #xp-portfolio .desktop-intro h1 { font-size:23px; margin:10px 0; }
  #xp-portfolio .desktop-intro p { display:none; }
  #xp-portfolio .desktop-intro>div { margin-top:10px; }
  #xp-portfolio .icons { top:205px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  #xp-portfolio .xp-icon { min-height:76px; font-size:12px; }
}
@media (max-height:620px) and (min-width:701px) {
  #xp-portfolio .icons { grid-template-columns:repeat(2,88px); width:190px; }
  #xp-portfolio .desktop-intro { left:25%; top:8%; padding:20px; }
}
@media (prefers-reduced-motion:reduce) {
  #xp-portfolio *, #xp-portfolio *:before, #xp-portfolio *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Explicit grid placement avoids implicit tracks in narrow app headers. */
#xp-portfolio .prime-logo { grid-column:1; grid-row:1 / 3; }
#xp-portfolio .prime-heading-copy { grid-column:2; grid-row:1; min-width:0; }
@container (max-width:1000px) {
  #xp-portfolio .prime-logo { grid-column:1; grid-row:1; }
  #xp-portfolio .prime-heading-copy { grid-column:2; grid-row:1; }
  #xp-portfolio .prime-state { grid-column:1 / -1; grid-row:2; justify-self:start; }
  #xp-portfolio .prime-deck { grid-column:1 / -1; grid-row:3; max-width:none; margin-top:12px; }
}
@media (max-width:700px) and (min-height:621px) {
  #xp-portfolio .icons { top:345px; }
}
@container (max-width:620px) {
  #xp-portfolio .prime-flow .orchestrator-node, #xp-portfolio .prime-flow .agent-stack { grid-column:1; grid-row:auto; }
}
@media (max-width:360px) {
  #xp-portfolio .desktop-intro { padding:16px; }
  #xp-portfolio .desktop-intro>span { font-size:10px; letter-spacing:.07em; }
  #xp-portfolio .desktop-intro h1 { font-size:26px; }
  #xp-portfolio .desktop-intro button { padding:9px 10px; font-size:13px; }
}
@media (max-width:700px) {
  #xp-portfolio:not([data-active-window]) { overflow-y:auto; padding-bottom:70px; }
  #xp-portfolio .desktop-intro { position:relative; inset:auto; margin:16px; }
  #xp-portfolio .icons { position:relative; inset:auto; width:auto; max-height:none; margin:16px 12px; overflow:visible; }
  #xp-portfolio .taskbar { position:fixed; }
}
#xp-portfolio { box-sizing:border-box; }
@media (min-width:701px) {
  #xp-portfolio .mainwin:not(.maximized), #xp-portfolio .howardwin:not(.maximized) { top:24px; height:calc(100% - 96px); }
  #xp-portfolio .projectwin:not(.maximized), #xp-portfolio .contactwin:not(.maximized) { bottom:64px; max-height:calc(100% - 96px); }
}
@media (max-width:700px) {
  #xp-portfolio .startmenu { position:fixed; max-height:calc(100dvh - 70px); overflow:auto; }
}