/* =====================================================================
   Prairie Bend 311 — Citizen Portal styles
   Used by pages in /citizen-portal/. Loaded after shared.css.

   NOTE: the block below (originally headed "myPrairieBend Portal" and
   "311 Chat Assistant") targets an earlier, more elaborate multi-page
   portal design (.topbar/.nav/.card/.page/.chatbot-*, etc.) that does not
   match the current citizen-portal.html, which ships its own complete
   form styling inline. No page in this project currently uses these
   selectors. They are preserved here (moved, not deleted) per the
   refactor's "do not redesign" instruction — recommend the team confirm
   whether this legacy styling is still needed.
   ===================================================================== */

/* =====================================================================
   myPrairieBend Portal (portal/home.html)
   Reuses the shared tokens from the block above (--navy-900, --paper,
   --ink, --slate, --gold, --gold-soft, --green, etc.) instead of
   redeclaring them. --gold-wash below is the one genuinely new token
   this page needs — a pale background wash for icon chips and badges,
   distinct from --gold-soft (a brighter hover/accent gold).
   ===================================================================== */
:root {
  --surface: #ffffff;
  --surface-2: #ece9df;
  --gold-wash: #f1e6c9;
  --shadow: 0 10px 30px rgba(19, 42, 76, 0.10);
  --radius: 3px;
}

/* button, input, textarea, select { font: inherit; } — already in shared.css, removed here to avoid duplication */

.utility-bar-inner {
  max-width: 1180px;
  margin: 0 auto;
  height: 36px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  height: 70px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-word .name {
  font-family: "Source Serif 4", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}

.brand-word .sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav button {
  border: 0;
  background: transparent;
  color: #475467;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.nav button:hover,
.nav button.active {
  background: var(--gold-wash);
  color: var(--navy-900);
}

.user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e7ecf4;
  font-weight: 700;
  color: #344054;
}

.portal-hero {
  background:
    radial-gradient(circle at 75% 20%, rgba(19,42,76,.11), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  border-bottom: 1px solid var(--border);
}

.portal-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 24px 62px;
  text-align: center;
}

.portal-hero-inner h1 {
  font-size: clamp(34px, 5vw, 52px);
  margin: 0 0 12px;
  letter-spacing: -0.04em;
}

.portal-hero p {
  margin: 0 auto 28px;
  max-width: 650px;
  color: var(--slate);
  font-size: 18px;
  line-height: 1.55;
}

.search-wrap {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.search-wrap input {
  width: 100%;
  padding: 18px 54px 18px 20px;
  border: 1px solid #cfd7e3;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  outline: none;
}

.search-wrap input:focus {
  border-color: #7a93b8;
  box-shadow: 0 0 0 4px rgba(19,42,76,.10), var(--shadow);
}

.search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #667085;
  font-size: 20px;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 42px 24px 70px;
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}

.section-title h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.025em;
}

.section-title p {
  margin: 4px 0 0;
  color: var(--slate);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 4px 18px rgba(31,41,55,.04);
  transition: .18s ease;
}

.card.clickable { cursor: pointer; }
.card.clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #cbd5e1;
}

.card .icon {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: var(--gold-wash);
  color: var(--navy-900);
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  font-family: "Source Serif 4", serif;
}

.card .icon svg {
  width: 22px;
  height: 22px;
}

.card h3 {
  margin: 0 0 7px;
  font-size: 17px;
}

.card p {
  margin: 0;
  color: var(--slate);
  line-height: 1.5;
  font-size: 14px;
}

.articles {
  margin-top: 42px;
}

.list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.article-row {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.article-row:last-child { border-bottom: 0; }
.article-row:hover { background: #fafbfc; }

.article-row small {
  color: var(--slate);
  display: block;
  margin-top: 4px;
}

.btn {
  border: 0;
  border-radius: 3px;
  padding: 11px 16px;
  cursor: pointer;
  font-weight: 650;
}

.btn-primary {
  background: var(--navy-900);
  color: #fff;
}

.btn-primary:hover { background: var(--navy-800); }

.page {
  display: none;
  max-width: 980px;
  margin: 0 auto;
  padding: 42px 24px 70px;
}

.page.active { display: block; }

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 30px;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}

.page-header p { color: var(--slate); margin: 0; }

.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 7px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid #cfd7e3;
  border-radius: 9px;
  padding: 12px 13px;
  outline: none;
  background: #fff;
}

.field textarea { min-height: 130px; resize: vertical; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #7a93b8;
  box-shadow: 0 0 0 3px rgba(19,42,76,.09);
}

.request-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.request-table th,
.request-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
}

.request-table th {
  color: #475467;
  background: #f8fafc;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--gold-wash);
  color: var(--navy-900);
  font-size: 12px;
  font-weight: 700;
}

.success {
  margin-bottom: 18px;
  border: 1px solid #b7dfca;
  background: #effaf4;
  color: var(--green);
  padding: 14px 16px;
  border-radius: 10px;
  display: none;
}

.article-detail {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.article-detail h3 { margin-top: 0; font-size: 26px; }
.article-detail p, .article-detail li {
  color: #475467;
  line-height: 1.7;
}

.back-link {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--navy-900);
  font-weight: 650;
  cursor: pointer;
}

.footer {
  border-top: 1px solid var(--border);
  background: #fff;
  color: var(--slate);
  text-align: center;
  padding: 24px;
  font-size: 13px;
}

.empty {
  background: #fff;
  border: 1px dashed #ccd5df;
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  color: var(--slate);
}

@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .user .user-name { display: none; }
  .utility-links { display: none; }
}

@media (max-width: 600px) {
  .nav { display: none; }
  .grid { grid-template-columns: 1fr; }
  .hero-inner { padding-top: 50px; }
  .request-table th:nth-child(3),
  .request-table td:nth-child(3) { display: none; }
}


/* ---------- 311 Chat Assistant widget (legacy — see note above) ---------- */
   311 Chat Assistant (portal/home.html)
   ===================================================================== */
.chatbot-launcher{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:50%;background:var(--navy-900);color:#fff;border:none;box-shadow:0 10px 26px -8px rgba(19,42,76,.55);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:80;transition:transform .15s}
.chatbot-launcher:hover{transform:translateY(-2px)}
.chatbot-launcher svg{width:24px;height:24px}

.chatbot-panel{position:fixed;right:24px;bottom:92px;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 140px);background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;z-index:80;opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;transition:opacity .18s,transform .18s}
.chatbot-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.chatbot-header{background:var(--navy-900);color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.chatbot-header-title{font-family:"Source Serif 4",serif;font-size:15.5px;font-weight:600}
.chatbot-header-sub{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);margin-top:2px}
.chatbot-close{background:none;border:none;color:rgba(255,255,255,.75);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px}
.chatbot-close:hover{color:#fff}

.chatbot-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}

.chat-msg{max-width:84%;padding:10px 13px;font-size:13.5px;line-height:1.55;border-radius:10px}
.chat-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--border);color:var(--ink);border-bottom-left-radius:2px}
.chat-msg.user{align-self:flex-end;background:var(--navy-900);color:#fff;border-bottom-right-radius:2px}

.chat-summary-card{margin:10px 0;padding:10px 12px;background:var(--gold-wash);border-radius:6px;font-size:12.5px;line-height:1.7}
.chat-summary-title{font-weight:700;color:var(--navy-900);margin-bottom:2px}

.chat-quick-replies{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start;max-width:84%}
.chat-quick-reply-btn{border:1px solid var(--navy-900);background:#fff;color:var(--navy-900);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.chat-quick-reply-btn:hover{background:var(--navy-900);color:#fff}

.chat-inline-link{background:none;border:none;padding:0;color:var(--navy-900);text-decoration:underline;text-underline-offset:2px;font:inherit;cursor:pointer;font-weight:600}

.chat-upload-wrap{align-self:flex-start;max-width:84%}
.chatbot-upload{display:flex;align-items:center;gap:8px;border:1.5px dashed var(--border);background:#fff;padding:12px 14px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--slate);width:100%}
.chatbot-upload:hover{border-color:var(--gold)}

.chatbot-input-row{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:#fff;flex:0 0 auto}
.chatbot-text-input{flex:1;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font:inherit;font-size:13.5px;outline:none}
.chatbot-text-input:focus{border-color:var(--navy-800);box-shadow:0 0 0 3px rgba(19,42,76,.09)}
.chatbot-send-btn{width:38px;height:38px;border-radius:8px;border:none;background:var(--navy-900);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.chatbot-send-btn:hover{background:var(--navy-800)}

@media (max-width:480px){
  .chatbot-panel{right:16px;left:16px;width:auto;bottom:84px;height:64vh}
  .chatbot-launcher{right:16px;bottom:16px}
}


/* =====================================================================
   File a Service Request — form styles (citizen-portal.html)
   These were previously embedded inline in the page itself so it would
   still render correctly even if the shared stylesheet was out of sync.
   Now that citizen-portal.css loads directly (not via a second copy of
   shared.css), that redundancy is no longer needed — moved here as the
   single source of truth.
   ===================================================================== */
  /* Portal form styles are embedded here (in addition to css/style.css) so this
     page always renders correctly even if the shared stylesheet is out of sync. */
  .portal-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
  .portal-intro p{font-size:13.5px;color:var(--slate);max-width:56ch;margin:0}
  .portal-intro a{color:var(--navy-800);text-decoration:underline;text-underline-offset:2px;font-weight:600;white-space:nowrap}

  .portal-form-card{background:#fff;border:1px solid var(--paper-dim);border-radius:10px;padding:40px;box-shadow:0 1px 3px rgba(19,42,76,.05)}
  .portal-section + .portal-section{margin-top:38px;padding-top:38px;border-top:1px solid var(--paper-dim)}
  .portal-section-head{margin-bottom:24px}
  .portal-section-head .eyebrow{display:block;margin-bottom:5px}
  .portal-section-head h3{font-size:18px;margin:0}

  .portal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
  .portal-form-grid > .portal-field{min-width:0;position:relative;margin:0}
  .portal-field.full{grid-column:1/-1}
  .portal-field label{display:block;font-size:13px;font-weight:650;color:var(--navy-900);margin:0 0 8px}
  .portal-field.required label::after{content:" *";color:var(--gold)}

  .portal-field input,.portal-field select,.portal-field textarea{
    display:block;width:100%;box-sizing:border-box;border:1px solid #d8dade;border-radius:6px;background:var(--paper);
    padding:12px 14px;font:inherit;font-size:13.5px;color:var(--ink);outline:none;
    transition:border-color .15s,background .15s,box-shadow .15s;
  }
  .portal-field input::placeholder,.portal-field textarea::placeholder{color:#9aa2ae}
  .portal-field input:focus,.portal-field select:focus,.portal-field textarea:focus{
    border-color:var(--navy-700);background:#fff;box-shadow:0 0 0 3px rgba(19,42,76,.08);
  }
  .portal-field textarea{resize:vertical;min-height:120px;line-height:1.55;font-family:inherit}
  .portal-field select{appearance:auto;cursor:pointer}
  .portal-field .hint{font-size:12px;color:var(--slate);margin-top:6px}

  .portal-file-drop{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    border:1.5px dashed #c7cbd2;background:var(--paper);border-radius:8px;
    padding:26px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
  }
  .portal-file-drop:hover{border-color:var(--gold);background:#faf7ef}
  .portal-file-drop svg{width:20px;height:20px;flex:0 0 auto;color:var(--slate)}
  .portal-file-drop p{font-size:13px;color:var(--slate);margin:0}
  .portal-file-drop .fname{font-size:13px;color:var(--navy-900);font-weight:650;margin-top:2px}
  .portal-file-input{position:absolute !important;width:1px !important;height:1px !important;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  .portal-ack-row{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--ink);margin-top:6px}
  .portal-ack-row input[type="checkbox"]{width:17px;height:17px;flex:0 0 auto;margin-top:1px;accent-color:var(--navy-900)}
  .portal-ack-row a{color:var(--navy-800);text-decoration:underline;text-underline-offset:2px}

  .portal-submit-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px}
  .portal-submit-row .fine{font-size:12.5px;color:var(--slate);margin:0}
  .portal-submit-row .btn-gold{border-radius:6px}

  .portal-confirm{background:#fff;border:1px solid var(--paper-dim);border-radius:10px;padding:56px 40px;text-align:center}
  .portal-confirm-icon{width:56px;height:56px;border-radius:50%;background:#faf3e2;border:1px solid var(--gold-soft);color:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
  .portal-confirm-icon svg{width:26px;height:26px}
  .portal-confirm h2{font-size:24px;margin-bottom:10px}
  .portal-confirm p{font-size:14px;color:var(--slate);max-width:48ch;margin:0 auto}
  .portal-ref{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;color:var(--navy-900);background:var(--paper);border:1px solid var(--paper-dim);border-radius:6px;display:inline-block;padding:10px 20px;margin:22px 0}
  .portal-next-steps{text-align:left;max-width:420px;margin:26px auto 0;display:flex;flex-direction:column;gap:14px;padding:0}
  .portal-next-steps li{list-style:none;display:flex;gap:12px;font-size:13.5px;align-items:flex-start}
  .portal-next-steps .n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--gold);flex:0 0 auto;padding-top:2px}
  .portal-confirm .btn-outline{border-color:var(--navy-900);color:var(--navy-900);margin-top:28px;border-radius:6px}
  .portal-confirm .btn-outline:hover{background:rgba(19,42,76,.08)}

  @media (max-width:720px){
    .portal-form-grid{grid-template-columns:1fr}
    .portal-form-card{padding:26px 22px}
  }