/* Existing feature layout; all color roles come from assets/appearance.css. */
/*
 * Pressless Studio — original community / employee / customer shell.
 * Design language shares density and hierarchy with the ACP layout.
 * Declares visual-only overrides; permissions and business rules stay server-side.
 */
:root {

  --portal-radius:10px;

}
body.portal, body.portal * { box-sizing:border-box; }
body.portal {
  margin:0; min-width:320px; font:14px/1.58 Inter,"Segoe UI",system-ui,sans-serif;
  color:var(--portal-ink); background:var(--portal-bg);
  -webkit-font-smoothing:antialiased;
}
body.portal a { color:var(--portal-accent); text-decoration:none; }
body.portal a:hover { color:var(--portal-accent-hover); text-decoration:none; }
body.portal a:focus-visible,
body.portal button:focus-visible,
body.portal input:focus-visible,
body.portal textarea:focus-visible,
body.portal select:focus-visible,
body.portal summary:focus-visible {
  outline:3px solid var(--portal-focus); outline-offset:3px;
}
body.portal .skip {
  position:fixed; top:-90px; left:12px; z-index:120;
  padding:10px 16px; background:var(--pp-surface); color:var(--pp-text);
  border:2px solid var(--portal-accent); border-radius:6px; font-weight:750;
}
body.portal .skip:focus { top:12px; }
body.portal header.top {
  position:sticky; top:0; z-index:30; display:grid;
  grid-template-columns:auto minmax(0,max-content) minmax(175px,1fr) auto;
  grid-template-areas:"brand nav search account";
  gap:12px 22px; align-items:center;
  padding:12px clamp(16px,2.6vw,40px);
  background:var(--pp-surface); border-bottom:1px solid var(--portal-border);
  box-shadow:var(--pp-shadow);
}
body.portal header.top .brand {
  grid-area:brand; display:flex; gap:12px; align-items:center;
  color:var(--pp-text); min-height:42px;
}
body.portal .brand .mark {
  display:inline-grid; place-items:center; flex:none;
  width:38px; height:38px; border:1px solid var(--pp-accent);
  border-radius:8px; background:var(--pp-button-bg); color:var(--pp-button-text);
  font-size:21px; font-weight:800;
}
body.portal .brand strong { display:block; color:var(--pp-text); font-size:14px; letter-spacing:-.015em; }
body.portal .brand small {
  display:block; margin-top:3px; color:var(--pp-muted); font-size:10px;
  text-transform:uppercase; letter-spacing:.13em; font-weight:730;
}
body.portal header.top nav {
  grid-area:nav; display:flex; align-items:center; flex-wrap:nowrap;
  gap:2px; min-width:0;
}
body.portal header.top nav a {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:9px 12px; border-radius:7px;
  color:var(--pp-muted); font-size:12px; white-space:nowrap; font-weight:650;
}
body.portal header.top nav a:hover { background:var(--pp-hover); color:var(--pp-text); }
body.portal header.top nav a.on,
body.portal header.top nav a[aria-current="page"] {
  background:var(--pp-hover); color:var(--pp-accent); font-weight:750;
}
body.portal header.top .search { grid-area:search; display:flex; min-width:0; justify-content:center; }
body.portal header.top .search input {
  width:min(440px,100%); height:40px; min-height:40px;
  padding:9px 15px; color:var(--pp-text); font-size:12px;
  border:1px solid var(--pp-line); border-radius:7px; background:var(--pp-input);
}
body.portal header.top .search input::placeholder { color:var(--pp-muted); opacity:1; }
body.portal header.top .search input:focus { background:var(--pp-input); border-color:var(--pp-focus); }
body.portal header.top .account {
  grid-area:account; display:flex; align-items:center; gap:5px;
  justify-content:flex-end; min-width:0; white-space:nowrap;
}
body.portal header.top .who,
body.portal header.top .account > a {
  display:inline-flex; align-items:center; gap:8px;
  min-height:40px; padding:5px 10px; border-radius:7px;
  color:var(--pp-text); background:transparent; font-size:12px; font-weight:700;
}
body.portal header.top .who:hover,
body.portal header.top .account > a:hover { background:var(--pp-hover); }
body.portal header.top .account .avatar {
  width:30px; height:30px; border:1px solid var(--pp-line);
  border-radius:7px; background:var(--pp-soft); color:var(--pp-muted);
  font-size:10px; font-weight:780;
}
body.portal header.top .account button {
  min-height:36px; padding:7px 10px; background:transparent;
  border:1px solid transparent; color:var(--pp-muted); border-radius:6px;
  font-size:12px;
}
body.portal header.top .account button:hover {
  color:var(--pp-accent); background:var(--pp-hover); border-color:var(--pp-line);
}
body.portal .portal-mobile-nav { display:none; }
body.portal main {
  max-width:1280px; padding:clamp(24px,3.2vw,42px) clamp(16px,3vw,36px) 68px;
  margin:0 auto; min-width:0;
}
body.portal h1 {
  font-size:clamp(27px,2.5vw,34px); line-height:1.2;
  letter-spacing:-.042em; font-weight:780; margin:0 0 9px; color:var(--pp-text);
}
body.portal h2 {
  color:var(--pp-text); font-size:16px; font-weight:740; line-height:1.38;
  letter-spacing:-.02em; margin:0 0 10px;
}
body.portal h3 { color:var(--pp-text); font-size:14px; font-weight:720; }
body.portal .sub,body.portal .meta { color:var(--portal-muted); font-size:12px; line-height:1.6; }
body.portal .pagehead { margin:0 0 26px; align-items:flex-end; }
body.portal .pagehead .sub { margin-top:5px; font-size:13px; }
body.portal .crumb { font-size:11px; letter-spacing:.07em; text-transform:uppercase; font-weight:730; color:var(--pp-muted); margin-bottom:14px; }
body.portal .crumb a { color:var(--pp-muted); }
body.portal .board { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,315px); gap:18px; align-items:start; }
body.portal .board > * { min-width:0; }
body.portal .panel,
body.portal main form.stack {
  padding:22px 23px; margin:0 0 18px;
  background:var(--pp-surface); border:1px solid var(--portal-border);
  border-radius:var(--portal-radius); box-shadow:var(--portal-shadow);
}
body.portal .panel .panel { box-shadow:none; }
body.portal .panel .chead { padding-bottom:12px; border-bottom:1px solid var(--pp-line); margin-bottom:13px; }
body.portal .panel .chead h2 { margin:0; }
body.portal .feature {
  background:linear-gradient(115deg,var(--pp-soft),var(--pp-surface));
  border-color:var(--pp-line); padding:25px;
}
body.portal .feature .title { font-size:19px; letter-spacing:-.02em; font-weight:770; color:var(--pp-text); }
body.portal .feature .title:hover { color:var(--portal-accent-hover); }
body.portal .kicker {
  color:var(--pp-muted); font-size:10px; letter-spacing:.12em;
  line-height:1.3; text-transform:uppercase; font-weight:820;
}
body.portal .go,
body.portal main button[type="submit"] {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:9px 16px; font:inherit; font-size:12px;
  font-weight:750; background:var(--pp-button-bg); color:var(--pp-button-text);
  border:1px solid var(--pp-accent); border-radius:7px; cursor:pointer;
}
body.portal .go:hover,
body.portal main button[type="submit"]:hover {
  color:var(--pp-button-text); background:var(--pp-button-bg); border-color:var(--pp-accent);
}
body.portal main button { cursor:pointer; }
body.portal .go:disabled,body.portal button:disabled { cursor:not-allowed; opacity:.55; }
body.portal .toolbar { margin:0 0 21px; gap:12px; }
body.portal .fhead,
body.portal .frow { grid-template-columns:32px minmax(0,1.6fr) 78px 78px minmax(155px,1fr); gap:12px; }
body.portal .trow { grid-template-columns:32px minmax(0,1.6fr) 78px minmax(155px,1fr); }
body.portal .fhead {
  padding:4px 0 10px; font-size:10px; letter-spacing:.08em;
  color:var(--pp-muted); font-weight:800; text-transform:uppercase;
}
body.portal .frow,body.portal .trow {
  padding:16px 0; border-top:1px solid var(--pp-line);
  color:var(--pp-muted); min-width:0;
}
body.portal .frow > *,body.portal .trow > * { min-width:0; }
body.portal .frow:hover,body.portal .trow:hover { background:var(--pp-hover); }
body.portal .glyph {
  width:31px; height:31px; border:1px solid var(--pp-line);
  border-radius:8px; background:var(--pp-soft); color:var(--pp-accent);
  display:grid; place-items:center;
}
body.portal .name,body.portal .flast a { color:var(--pp-text); font-size:13px; font-weight:720; }
body.portal .name:hover,body.portal .flast a:hover { color:var(--portal-accent); }
body.portal .fstat strong { font-weight:760; font-size:17px; color:var(--pp-text); }
body.portal .fstat { color:var(--pp-muted); }
body.portal .line {
  gap:12px; padding:10px 0; border-top:1px solid var(--pp-line);
  color:var(--pp-muted); font-size:12px;
}
body.portal .line:first-child { border-top:0; }
body.portal .line + .line { border-top:1px solid var(--pp-line); }
body.portal .line a { color:var(--pp-muted); font-weight:700; }
body.portal .post,body.portal .reading { line-height:1.7; color:var(--pp-text); }
body.portal .posthead { border-bottom:1px solid var(--pp-line); padding-bottom:12px; }
body.portal .posthead .avatar { border-radius:8px; background:var(--pp-soft); color:var(--pp-muted); }
body.portal .pill {
  border:1px solid var(--pp-line); background:var(--pp-soft); color:var(--pp-muted);
  border-radius:6px; min-height:25px; font-size:11px;
  font-weight:720; padding:3px 9px;
}
body.portal .tag {
  border-radius:6px; background:var(--pp-soft); border:1px solid var(--pp-line);
  color:var(--pp-accent); font-size:12px; padding:5px 9px;
}
body.portal .tag a { color:var(--pp-accent); }
body.portal .note { padding:12px 14px; background:var(--pp-warning-bg); border:1px solid var(--pp-warning); color:var(--pp-warning); border-radius:7px; }
body.portal .empty { color:var(--pp-muted); }
body.portal .empty:not(:empty)::before { content:"— "; color:var(--pp-muted); }
body.portal .list a {
  display:block; padding:13px 0; color:var(--pp-text);
  border-top:1px solid var(--pp-line); font-size:13px; font-weight:730;
}
body.portal .list a:hover { color:var(--portal-accent); }
body.portal .person { border-top:1px solid var(--pp-line); }
body.portal .pair { border-top:1px solid var(--pp-line); }
body.portal input,body.portal select,body.portal textarea {
  max-width:100%; min-width:0; min-height:42px; font:inherit; font-size:13px;
  padding:10px 12px; background:var(--pp-input); color:var(--pp-text);
  border-radius:7px; border:1px solid var(--pp-line);
}
body.portal textarea { min-height:120px; resize:vertical; }
body.portal input:hover,body.portal select:hover,body.portal textarea:hover { border-color:var(--pp-line); }
body.portal input:focus,body.portal select:focus,body.portal textarea:focus { border-color:var(--pp-focus); }
body.portal input::placeholder,body.portal textarea::placeholder { color:var(--pp-muted); }
body.portal input[type="checkbox"] { accent-color:var(--portal-accent); min-height:0; }
body.portal label { font-size:12px; color:var(--pp-muted); font-weight:670; }
body.portal form.stack { gap:15px; max-width:720px; }
body.portal .panel form.stack { background:transparent; border:0; padding:0; box-shadow:none; }
body.portal table { width:100%; border-collapse:collapse; font-size:12px; }
body.portal th {
  background:var(--pp-soft); color:var(--pp-muted); border-top:0;
  border-bottom:1px solid var(--pp-line); padding:11px 12px;
  text-transform:uppercase; letter-spacing:.06em; font-size:10px; font-weight:800;
}
body.portal td {
  color:var(--pp-muted); border-top:0; border-bottom:1px solid var(--pp-line);
  padding:12px; vertical-align:middle;
}
body.portal tbody tr:hover { background:var(--pp-hover); }
body.portal .panel:has(table) { overflow-x:auto; }
body.portal .panel:has(table) table { min-width:440px; }
body.portal .linkrow { flex-wrap:wrap; gap:12px; }
body.portal .links summary,body.portal details.manage summary {
  min-height:39px; display:inline-flex; align-items:center;
  font-size:12px; color:var(--pp-accent); font-weight:750;
}
body.portal .pagehead form.quiet button {
  padding:9px 14px; min-height:38px; border-radius:6px;
  border:1px solid var(--pp-line); color:var(--pp-muted); font-weight:700;
}
@media (max-width: 1320px) {
  body.portal header.top { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"brand nav account" "search search search"; }
  body.portal header.top nav { justify-content:center; }
  body.portal header.top .search input { width:100%; max-width:600px; }
}
@media (max-width: 900px) {
  body.portal header.top {
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"brand menu account" "search search search";
    padding:11px 16px; gap:9px 10px;
  }
  body.portal header.top nav { display:none; }
  body.portal header.top .portal-mobile-nav {
    grid-area:menu; display:block; position:relative;
  }
  body.portal .portal-mobile-nav > summary {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:40px; padding:8px 13px; border-radius:7px;
    border:1px solid var(--pp-line); background:var(--pp-soft); color:var(--pp-text);
    list-style:none; cursor:pointer; font-size:12px; font-weight:750;
  }
  body.portal .portal-mobile-nav summary::-webkit-details-marker { display:none; }
  body.portal .portal-mobile-nav[open] > summary { background:var(--pp-soft); border-color:var(--pp-accent); }
  body.portal .portal-mobile-nav .mobile-links {
    position:absolute; top:calc(100% + 8px); right:-56px;
    width:min(285px,calc(100vw - 28px)); max-height:66dvh;
    padding:8px; overflow-y:auto; background:var(--pp-surface);
    border:1px solid var(--pp-line); border-radius:9px;
    box-shadow:var(--pp-shadow);
    z-index:40;
  }
  body.portal .portal-mobile-nav .mobile-links a {
    display:block; color:var(--pp-text); font-size:13px; font-weight:650;
    padding:12px; border-radius:6px;
  }
  body.portal .portal-mobile-nav .mobile-links a.on,
  body.portal .portal-mobile-nav .mobile-links a:hover { color:var(--pp-accent); background:var(--pp-hover); }
  body.portal .board { grid-template-columns:minmax(0,1fr); }
  body.portal .pagehead,body.portal .toolbar { flex-wrap:wrap; }
  body.portal .fhead,body.portal .frow,body.portal .trow {
    grid-template-columns:32px minmax(0,1fr) minmax(90px,.6fr);
  }
  body.portal .fhead > :nth-child(4),body.portal .frow > :nth-child(4),
  body.portal .fhead > :nth-child(5),body.portal .frow > :nth-child(5),
  body.portal .trow > :nth-child(4) { display:none; }
}
@media (max-width: 570px) {
  body.portal header.top .brand strong { font-size:13px; }
  body.portal header.top .brand small { font-size:9px; }
  body.portal .brand .mark { width:34px; height:34px; font-size:19px; }
  body.portal header.top .account { max-width:none; overflow:visible; }
  body.portal header.top .account .who { max-width:43px; overflow:hidden; padding:5px; }
  body.portal header.top .account form { display:none; }
  body.portal main { padding:22px 14px 56px; }
  body.portal .panel,body.portal main form.stack { padding:17px; }
  body.portal .feature { padding:17px; }
  body.portal .pagehead { flex-direction:column; align-items:flex-start; }
  body.portal .fhead { display:none; }
  body.portal .frow,body.portal .trow {
    grid-template-columns:30px minmax(0,1fr); gap:8px 12px;
    padding:14px 0; border-top:1px solid var(--pp-line);
  }
  body.portal .frow > :nth-child(n/**/+3),body.portal .trow > :nth-child(n/**/+3) { display:none; }
  body.portal .feature { grid-template-columns:1fr; }
  body.portal .chead { flex-wrap:wrap; }
  body.portal .pair { grid-template-columns:minmax(0,1fr); }
  body.portal .portal-mobile-nav .mobile-links { right:-47px; }
}
@media (prefers-reduced-motion: reduce) {
  body.portal *,body.portal *::before,body.portal *::after {
    transition-duration:.01ms !important; animation-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Keep the baseline portal navigation available when this optional skin is reused. */
@media(max-width:900px){body.portal:not(:has(.portal-mobile-nav)) header.top nav{display:flex;grid-column:1/-1;flex-wrap:wrap;}}

/* Keep account controls usable beside the compact mobile navigation. */
@media(max-width:600px) {
  body.portal header.top .account { gap:8px; min-width:0; }
  body.portal header.top .account > form { display:none; }
  body.portal header.top .who { padding:0; gap:0; min-width:28px; }
  body.portal header.top .account-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}