/* Sign-in, admin portal and client portal. Builds on style.css (fonts,
   colours, .bar). Always amber-led: the flip is for the public homepage. */

.p-shell{ min-height:100vh; display:flex; flex-direction:column; background:var(--black); }

/* In the portals the orange bar scrolls away with the page instead of staying
   pinned: pinned, it covered the top of a page opened from partway down the
   dashboard (title cut off, James 2026-10-01), and it ate a third of a phone
   screen. The public homepage keeps its sticky bar. */
.p-bar{ position:relative; }

/* Top bar: the homepage's own bar and menu (style.css .bar), unchanged, so the
   whole site reads as one place. Only the sign-out button needs styling here:
   it is a form button made to look exactly like the menu links. */
.p-signout{ margin:0; }
.p-signout button{
  background:none; border:0; border-bottom:3px solid transparent; padding:.3rem 0; cursor:pointer;
  font-family:var(--mono); font-size:1rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--black); -webkit-text-stroke:.45px currentColor; transition:border-color .18s;
  /* Buttons default to a tighter line height than links; match the menu
     links so Sign out sits on the same line as the rest. */
  display:block; line-height:inherit;
}
.p-signout button:hover{ border-bottom-color:var(--black); }
.bar__nav a.bar__login[aria-current="page"]{ background:var(--black); color:var(--amber); }
@media (max-width:900px){ .p-signout button{ font-size:.875rem; letter-spacing:.1em; } }
@media (max-width:640px){ .p-signout button{ font-size:.8125rem; letter-spacing:.08em; } }

/* Sign-in pages: one centred card on amber. */
/* Anchored near the top, not centred in the screen: centring left a huge
   empty band above the form on tall phones and desktops (James, 2026-10-01). */
.p-auth{ flex:1; display:grid; justify-items:center; align-content:start; background:var(--amber); color:var(--black); padding:clamp(2rem, 6vh, 4rem) var(--gutter) 3rem; }
.p-auth__card{ width:100%; max-width:30rem; }
.p-auth h1{
  font-family:var(--display); font-variation-settings:"opsz" 72, "wdth" 82, "wght" 800;
  font-size:clamp(2.4rem, 7vw, 3.75rem); line-height:.92; text-transform:uppercase; margin:.4rem 0 1rem;
}
.p-auth p{ margin:0 0 1.25rem; }
.p-auth .field input{ font-size:1.125rem; }
.p-msg{ border:3px solid var(--black); padding:.85rem 1rem; margin:0 0 1.25rem; font-weight:500; }
.p-msg--bad{ border-color:#8C2A18; background:#3A1614; color:#FF9E8F; }
.p-msg--ok{ background:var(--black); color:var(--amber); }
.p-btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  font-family:var(--display); font-variation-settings:"opsz" 32, "wdth" 84, "wght" 800;
  font-size:1.2rem; text-transform:uppercase; letter-spacing:-.01em;
  background:var(--black); color:var(--amber); border:3px solid var(--black); padding:.8rem 1.8rem;
}
.p-btn:hover{ background:transparent; color:var(--black); }
.p-btn--small{ font-size:.95rem; padding:.45rem 1rem; }

/* Admin and client portals: side menu + content. */
.p-main{ flex:1; display:grid; grid-template-columns:15rem minmax(0,1fr); }
.p-nav{ border-right:1px solid rgba(251,250,248,.12); padding:1.5rem 0; }
.p-nav__role{ padding:0 1.5rem 1rem; font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.p-nav ul{ list-style:none; margin:0; padding:0; }
.p-nav a{
  display:block; padding:.6rem 1.5rem; color:rgba(251,250,248,.75); text-decoration:none;
  font-family:var(--mono); font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-left:3px solid transparent;
}
.p-nav a:hover{ color:var(--white); background:rgba(251,250,248,.04); }
.p-nav a[aria-current="page"]{ color:var(--white); border-left-color:var(--amber); background:rgba(251,250,248,.06); }
.p-content{ padding:2rem clamp(1.15rem, 3vw, 3rem) 4rem; min-width:0; }
.p-content h1{
  font-family:var(--display); font-variation-settings:"opsz" 72, "wdth" 82, "wght" 800;
  font-size:clamp(2rem, 5vw, 3.25rem); line-height:.95; text-transform:uppercase; margin:0 0 .5rem;
}
.p-lede{ margin:0 0 2rem; color:rgba(251,250,248,.7); max-width:60ch; }
@media (max-width:760px){
  /* minmax(0,…), not 1fr: a plain 1fr track grows to fit the users table and
     pushed the whole page off the right edge of a phone. */
  .p-main{ grid-template-columns:minmax(0,1fr); }
  /* Rows start at the top. Without this, on a page shorter than the screen
     the grid shared the spare height between rows and the section menu bar
     grew taller (found 2026-10-01 on a short client page). */
  .p-main{ align-content:start; }
}

/* Phone section menu (SectionNav, James 2026-10-01): under the orange bar,
   one black bar naming the current section; tap to drop every section down.
   Desktop keeps the left-hand menu and never shows this. */
.p-drop{ display:none; }
@media (max-width:760px){
  .p-nav{ display:none; }
  .p-drop{ display:block; background:var(--black); border-bottom:3px solid var(--amber); }
  .p-drop summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.8rem; padding:1rem var(--gutter); color:var(--white); }
  .p-drop summary::-webkit-details-marker{ display:none; }
  .p-drop__role{ font-family:var(--mono); font-size:.625rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
  .p-drop__now{ flex:1; font-family:var(--display); font-variation-settings:"opsz" 32, "wdth" 86, "wght" 800; font-size:1.35rem; text-transform:uppercase; }
  .p-drop__chev{ width:.7rem; height:.7rem; border-right:3px solid var(--amber); border-bottom:3px solid var(--amber); transform:translateY(-.2rem) rotate(45deg); transition:transform .2s; }
  .p-drop[open] .p-drop__chev{ transform:translateY(.15rem) rotate(-135deg); }
  .p-drop ul{ list-style:none; margin:0; padding:0 0 .5rem; border-top:1px solid rgba(251,250,248,.14); }
  .p-drop a{ display:block; padding:.95rem var(--gutter); color:rgba(251,250,248,.85); text-decoration:none; font-family:var(--mono); font-size:.9375rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-left:4px solid transparent; }
  .p-drop a:hover, .p-drop a:active{ background:rgba(251,250,248,.06); color:var(--white); }
  .p-drop a[aria-current="page"]{ color:var(--white); border-left-color:var(--amber); background:rgba(251,250,248,.06); }
  /* Sign out: last row of the drop-down, under a divider, in amber so it
     reads as an account action rather than another section. */
  .p-signout-li{ display:none; }
  .p-drop__out{ border-top:1px solid rgba(251,250,248,.14); margin-top:.35rem; }
  .p-drop__out form{ margin:0; }
  .p-drop__out button{
    display:block; width:100%; text-align:left; cursor:pointer; background:none; border:0; border-left:4px solid transparent;
    padding:.95rem var(--gutter); color:var(--amber);
    font-family:var(--mono); font-size:.9375rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  }
  .p-drop__out button:hover, .p-drop__out button:active{ background:rgba(251,250,248,.06); }
}

/* Tiles, tables and forms inside the portal. */
.p-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(14rem, 1fr)); gap:1rem; }
.p-tile{ display:block; border:1px solid rgba(251,250,248,.14); background:#1A1815; padding:1.15rem 1.25rem; color:inherit; text-decoration:none; }
a.p-tile:hover{ border-color:var(--amber); }
.p-tile b{ display:block; font-family:var(--display); font-variation-settings:"opsz" 32, "wdth" 86, "wght" 800; font-size:1.25rem; text-transform:uppercase; margin-bottom:.3rem; }
.p-tile span{ color:rgba(251,250,248,.65); font-size:.9rem; }
.p-tile em{ font-style:normal; font-family:var(--mono); font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }

.p-section{ margin-top:2.5rem; }
.p-section h2{ font-family:var(--display); font-variation-settings:"opsz" 48, "wdth" 84, "wght" 800; font-size:1.5rem; text-transform:uppercase; margin:0 0 1rem; }
.p-table-wrap{ overflow-x:auto; border:1px solid rgba(251,250,248,.14); }
.p-table{ width:100%; border-collapse:collapse; font-size:.9375rem; }
.p-table th{ text-align:left; font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,250,248,.6); padding:.75rem 1rem; border-bottom:1px solid rgba(251,250,248,.14); white-space:nowrap; }
.p-table td{ padding:.85rem 1rem; border-bottom:1px solid rgba(251,250,248,.08); vertical-align:top; }
.p-table tr:last-child td{ border-bottom:0; }
.p-muted{ color:rgba(251,250,248,.55); font-size:.85rem; }
.p-role{ font-family:var(--mono); font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.25rem .5rem; border:2px solid currentColor; white-space:nowrap; }
.p-role--owner, .p-role--admin{ color:var(--amber); }
.p-role--member{ color:var(--blue); }
.p-role--off{ color:rgba(251,250,248,.4); }

.p-form{ display:grid; gap:1rem; max-width:40rem; border:1px solid rgba(251,250,248,.14); background:#1A1815; padding:1.5rem; }
.p-form label{ display:block; font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.4rem; color:rgba(251,250,248,.75); }
.p-form input[type=text], .p-form input[type=email], .p-form select{
  width:100%; font:inherit; font-size:1rem; color:var(--white); background:#0B0A09;
  border:1px solid rgba(251,250,248,.25); border-radius:0; padding:.65rem .8rem;
}
.p-form input:focus, .p-form select:focus{ outline:2px solid var(--amber); outline-offset:1px; }
.p-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .p-row{ grid-template-columns:1fr; } }
.p-checks{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; }
.p-checks label{ display:flex; align-items:center; gap:.45rem; margin:0; font-size:.75rem; color:var(--white); cursor:pointer; }
.p-checks input{ accent-color:var(--amber); width:1rem; height:1rem; }
.p-form .p-btn{ background:var(--amber); color:var(--black); border-color:var(--amber); justify-self:start; }
.p-form .p-btn:hover{ background:transparent; color:var(--amber); }
.p-inline{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.p-inline form{ margin:0; }
.p-small-btn{ cursor:pointer; font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:transparent; color:var(--white); border:1px solid rgba(251,250,248,.3); padding:.35rem .6rem; }
.p-small-btn:hover{ border-color:var(--amber); color:var(--amber); }
.p-small-btn--warn:hover{ border-color:#FF7A66; color:#FF7A66; }
/* Read-only line items (estimates/invoices). On phones the Qty and Price
   columns fold into a line under the description, so nothing scrolls sideways. */
.inv-sub{ display:none; }
@media (max-width:560px){
  /* Collapsed to zero width, not removed: removing them left the Total row
     (which spans these columns) wider than the line rows above it. */
  .inv-read .inv-wide{ width:0; max-width:0; padding:0 !important; font-size:0; border:0; overflow:hidden; }
  .inv-read .inv-sub{ display:block; margin-top:.2rem; font-size:.8125rem; color:rgba(251,250,248,.55); font-variant-numeric:tabular-nums; }
  .inv-read td.inv-total{ text-align:left !important; }
  .inv-read .p-table, .inv-read{ table-layout:auto; }
}
.p-note{ border-left:3px solid var(--amber); padding:.25rem 0 .25rem 1rem; color:rgba(251,250,248,.75); max-width:62ch; }
.p-role--warn{ color:#FF7A66; }
.p-form textarea{ width:100%; font:inherit; font-size:1rem; line-height:1.5; color:var(--white); background:#0B0A09; border:1px solid rgba(251,250,248,.25); border-radius:0; padding:.65rem .8rem; resize:vertical; }
.p-form textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; }
.p-form input[type=date], .p-form input[type=url], .p-form input[type=tel], .p-form input[type=number]{
  width:100%; font:inherit; font-size:1rem; color:var(--white); background:#0B0A09;
  border:1px solid rgba(251,250,248,.25); border-radius:0; padding:.6rem .8rem; color-scheme:dark;
}

/* Filter tabs */
.p-tabs{ display:flex; flex-wrap:wrap; gap:.25rem; margin:0 0 1.25rem; border-bottom:1px solid rgba(251,250,248,.14); }
.p-tabs a{ padding:.6rem .9rem; color:rgba(251,250,248,.65); text-decoration:none; font-family:var(--mono); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-bottom:3px solid transparent; margin-bottom:-1px; }
.p-tabs a span{ opacity:.6; margin-left:.25rem; }
.p-tabs a:hover{ color:var(--white); }
.p-tabs a[aria-current="page"]{ color:var(--white); border-bottom-color:var(--amber); }

/* Clickable rows */
.p-list{ list-style:none; margin:0; padding:0; border:1px solid rgba(251,250,248,.14); }
.p-list li + li{ border-top:1px solid rgba(251,250,248,.1); }
/* Only a link that IS the row (li > a). Links inside a row's text keep their
   normal inline look; the broad `.p-list a` padded and indented file names. */
.p-list > li > a{ display:block; padding:1rem 1.15rem; color:inherit; text-decoration:none; }
.p-list > li > a:hover{ background:rgba(251,250,248,.04); }
.p-list p{ margin:.35rem 0 .5rem; color:rgba(251,250,248,.72); font-size:.9375rem; }
.p-list__top{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; flex-wrap:wrap; }

/* Detail pages */
.p-back{ margin:0 0 .75rem; font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; }
.p-back a{ color:rgba(251,250,248,.65); text-decoration:none; }
.p-back a:hover{ color:var(--amber); }
.p-two{ display:grid; grid-template-columns:minmax(0,1fr) 18rem; gap:1.75rem; align-items:start; }
@media (max-width:960px){ .p-two{ grid-template-columns:minmax(0,1fr); } }
.p-message{ white-space:pre-wrap; border-left:3px solid var(--amber); background:#1A1815; padding:1.1rem 1.25rem; margin:0 0 1.5rem; font-size:1.0625rem; line-height:1.6; }
.p-side{ border:1px solid rgba(251,250,248,.14); background:#1A1815; padding:1.15rem 1.25rem; }
.p-dl{ margin:0 0 1.15rem; display:grid; gap:.15rem; }
.p-dl dt{ font-family:var(--mono); font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,250,248,.5); margin-top:.6rem; }
.p-dl dt:first-child{ margin-top:0; }
.p-dl dd{ margin:0; overflow-wrap:anywhere; }
.p-dl a, .p-content a:not([class]){ color:var(--amber); }
/* Whole-row links and the back link keep their own colours. */
.p-content .p-list > li > a{ color:inherit; }
.p-content .p-back a{ color:rgba(251,250,248,.65); }
.p-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; }
.p-stack form{ margin:0; }
.p-stack .p-btn{ background:var(--amber); color:var(--black); border-color:var(--amber); }
.p-stack .p-btn:hover{ background:transparent; color:var(--amber); }
.p-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.p-pill{ display:inline-block; font-family:var(--mono); font-size:.625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.2rem .45rem; background:rgba(251,250,248,.08); color:rgba(251,250,248,.8); }
.p-pill--amber{ background:var(--amber); color:var(--black); }
.p-steps{ display:flex; gap:4px; margin:.5rem 0 0; }
.p-steps i{ flex:1; height:6px; background:rgba(251,250,248,.12); }
.p-steps i.on{ background:var(--amber); }

/* Review form (/review, 2026-10-29). Amber page like Log in; stars are plain
   radio buttons, so it works with no script. Reversed in the markup (5 first)
   and flipped back with row-reverse so "this star and every one before it"
   lights up with the sibling selector. */
.p-auth__card--wide{ max-width:38rem; }
.p-review__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.p-stars{ border:0; padding:0; margin:0 0 1.25rem; }
.p-stars legend{ font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.35rem; padding:0; }
.p-stars__row{ display:inline-flex; flex-direction:row-reverse; gap:.15rem; }
.p-stars__row input{ position:absolute; opacity:0; width:1px; height:1px; }
.p-stars__row label{ font-size:2.6rem; line-height:1; cursor:pointer; color:rgba(17,17,17,.22); padding:.1rem; min-width:44px; text-align:center; transition:color .12s; }
.p-stars__row input:checked ~ label,
.p-stars__row label:hover, .p-stars__row label:hover ~ label{ color:var(--black); }
.p-stars__row input:focus-visible + label{ outline:3px solid var(--black); outline-offset:2px; }
.p-review__two{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
@media (max-width:560px){ .p-review__two{ grid-template-columns:1fr; } }
.p-review__consent{ display:flex; gap:.6rem; align-items:flex-start; margin:.25rem 0 1.25rem; font-weight:500; cursor:pointer; }
.p-review__consent input{ width:1.25rem; height:1.25rem; margin-top:.15rem; accent-color:var(--black); flex:none; }
.p-review__human input{ max-width:8rem; }

/* Admin reviews list: rows hold buttons, not one link, so they carry the
   padding a link row would. */
.p-stars-show{ color:var(--amber); letter-spacing:.1em; }
.p-list > li.p-list__row{ padding:1rem 1.15rem; }