/* uHint.me account pages: one shared stylesheet for both shell variants (contract 1.7, epic 29).
   Sources: webapp-prototypes/assets/*.css and .ai/www/DESIGN.md. Fonts and icons are referenced by
   logical manifest names; the pages application substitutes hashed paths before hashing. */

/* fonts — Manrope 300/400/500 and the three-character Briem Hand ".me" subset; SIL OFL 1.1 */
@font-face{font-family:Manrope;font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/manrope-300.8acf416c55ae3736.ttf") format("truetype")}
@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/manrope-400.a13d9b41b0a471ce.ttf") format("truetype")}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/manrope-500.f433e5d333be1128.ttf") format("truetype")}
@font-face{font-family:"Briem Hand";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/briem-hand-me.47824176fc28cdd0.ttf") format("truetype")}

/* tokens — C1C-blue palette */
:root{color-scheme:light;--canvas:#FFFFFF;--stage:#EAF0F6;--primary:#365E82;--primary-hover:#294B6A;--ink:#252C35;--secondary:#586675;--border:#D0DBE4;--rule:#DFE6ED;--dark:#192F44;--brand-accent:#B33C4E;--brand-accent-hover:#962F3F;--brand-accent-on-dark:#DE7C8B;--on-dark:#F7F9FC;--on-dark-body:#C8D6E3;--on-dark-caption:#A9C3D9;--header-height:80px}

/* base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-height) + 16px)}
body{min-height:100vh;display:flex;flex-direction:column;background-color:var(--canvas);color:var(--ink);font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}

/* header — sticky, translucent, brand left and Sign out right */
.site-header{position:sticky;top:0;z-index:50;flex-shrink:0;width:100%;height:var(--header-height);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
@supports not ((backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px))){.site-header{background:rgba(255,255,255,.96)}}
.site-header-bar{max-width:1180px;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.site-brand-icon{display:block;flex-shrink:0;width:20px;height:20px;background:url("/assets/images/recorder-waveform.aac405f78c5da21a.svg") center/contain no-repeat}
.site-brand-name{display:inline-flex;align-items:baseline;font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.025em}
.site-brand-suffix{font-family:"Briem Hand",cursive;font-style:italic;font-weight:400;font-size:22px;line-height:1;letter-spacing:-.025em;color:var(--brand-accent)}
.header-sign-out{flex-shrink:0}

/* signed-in shell — left navigation rail and content area */
.shell{flex:1;display:flex;gap:32px;width:100%;max-width:1180px;margin:0 auto;padding:40px 24px 64px}
.site-nav{flex-shrink:0;width:180px;padding-right:32px;border-right:1px solid var(--rule)}
.site-nav-list{display:flex;flex-direction:column;gap:4px;list-style:none}
.site-nav-link{display:flex;align-items:center;height:44px;padding:0 16px;border-radius:4px;font-size:14px;line-height:20px;font-weight:500;color:var(--secondary);text-decoration:none;transition:background-color .15s ease-in-out,color .15s ease-in-out}
.site-nav-link:hover{color:var(--ink);background-color:var(--stage)}
.site-nav-link[aria-current="page"]{color:var(--primary);background-color:var(--stage)}
.shell-content{flex:1;display:flex;flex-direction:column;min-width:0;max-width:880px}
.page{min-width:0}
.page-title{font-size:40px;line-height:48px;font-weight:400;letter-spacing:-.025em;color:var(--ink);margin-bottom:28px;overflow-wrap:anywhere}

/* public module — centered compact column */
.public{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;width:100%;padding:96px 24px 64px}
.public-module{display:flex;flex-direction:column;width:100%;max-width:480px}
.page-public .page-title{text-align:center;margin-bottom:32px}

/* footer — Contact, Terms, Privacy; omitted when none is configured */
.site-footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none}
.footer-link{font-size:14px;line-height:20px;color:var(--secondary);text-decoration:none;transition:color .15s ease-in-out}
.footer-link:hover{color:var(--ink)}
.public .site-footer{padding-top:32px}
.public .footer-links{justify-content:center}

/* buttons */
.button-primary,.button-secondary,.button-danger{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:4px;font-family:inherit;font-size:14px;line-height:20px;font-weight:500;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s ease-in-out,border-color .15s ease-in-out}
.button-primary{padding:12px 28px;border:0;color:var(--canvas);background-color:var(--primary)}
.button-primary:hover{background-color:var(--primary-hover)}
.button-secondary{padding:11px 24px;border:1px solid var(--border);color:var(--primary);background-color:var(--canvas)}
.button-secondary:hover{border-color:var(--primary);background-color:var(--stage)}
.button-danger{padding:12px 28px;border:0;color:var(--canvas);background-color:var(--brand-accent)}
.button-danger:hover{background-color:var(--brand-accent-hover)}
.button-primary:disabled,.button-primary:disabled:hover{background-color:var(--primary);opacity:.38;cursor:not-allowed}

/* fields */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
input,select,textarea{font:inherit;color:inherit}
.field input:not([type="checkbox"]),.field select{width:100%;height:48px;padding:0 16px;border:1px solid var(--border);border-radius:4px;background-color:var(--canvas);font-size:16px;line-height:24px;color:var(--ink);transition:border-color .15s ease-in-out}
.field input:not([type="checkbox"]):focus,.field select:focus{border-color:var(--primary)}
.field select{appearance:none;padding-right:40px;cursor:pointer;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23586675" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 14px center}
.field label:has(input[type="checkbox"]){display:flex;align-items:flex-start;gap:12px;font-weight:400;cursor:pointer}
input[type="checkbox"]{flex-shrink:0;width:18px;height:18px;margin-top:1px;accent-color:var(--primary);cursor:pointer}
.readonly{cursor:default}

/* notices — success and error differ by look, not only by role */
.notice{padding:12px 16px;border-radius:4px;border:1px solid var(--border);border-left-width:4px;font-size:14px;line-height:20px;color:var(--ink);overflow-wrap:anywhere}
.notice-success{background-color:var(--canvas);border-left-color:var(--primary)}
.notice-error{background-color:var(--stage);border-color:var(--dark);font-weight:500}

/* message composition — status, error and refusal pages in both variants (spec 29 §4.3) */
.message-panel{display:flex;flex-direction:column;gap:24px;max-width:560px}
.message-panel a:not([class]){color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.message-panel a:not([class]):hover{color:var(--primary-hover)}
.page-public .message-panel{max-width:none}
.page-public .message-panel>p{text-align:center}
.page-public .message-panel>p.notice{text-align:left}
.page-public .message-panel .button-primary{width:100%}

/* focus and motion */
:where(a,button,input,select,[tabindex]):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.button-danger:focus-visible{outline-color:var(--brand-accent)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* responsive — approved 375 px composition; 2×2 navigation below 360 px */
@media (max-width:768px){
.site-header-bar{padding:0 16px}
.button-primary{padding:12px 20px}
.button-secondary{max-width:100%;padding:11px 20px;white-space:normal}
.shell{flex-direction:column;gap:24px;padding:20px 16px 40px}
.site-nav{width:100%;padding:0;border:0}
.site-nav-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.site-nav-link{justify-content:center;padding:0 4px;white-space:nowrap}
.shell-content{width:100%}
.page-title{font-size:32px;line-height:40px;margin-bottom:24px}
.message-panel{max-width:none}
.message-panel .button-primary{width:100%}
.footer-link{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:375px){
.public{padding:64px 16px 48px}
.public .footer-links{gap:0 16px}
}
@media (max-width:359px){
.site-nav-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* signed-in page interiors — approved Account, Sessions, Top up, Download and Delete layouts */
.page-signed-in .section-title{font-size:20px;line-height:28px;font-weight:500;color:var(--ink)}
.account-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;min-width:0}
.account-identity{grid-column:1;grid-row:2;min-width:0}
.account-identity .account-meta{margin-top:8px}
.account-meta,.account-row-info p{font-size:14px;line-height:20px;color:var(--secondary)}
.account-balance{grid-column:1/-1;grid-row:1;background:var(--stage);border-radius:4px;padding:24px 28px;margin-bottom:36px}
.account-balance>.section-title{margin-bottom:12px}
.account-balance-body{display:flex;align-items:center;justify-content:space-between;gap:24px}
.account-balance-info{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;min-width:0}
.balance{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;font-size:14px;line-height:20px;color:var(--secondary)}
.balance-value{font-size:32px;line-height:40px;font-weight:300;color:var(--ink)}
.balance-note,.account-balance-info>p:not(.balance){font-size:14px;line-height:20px;color:var(--secondary)}
.account-balance-body>.button-primary{flex-shrink:0}
.account-settings{grid-column:2;grid-row:2;min-width:0;margin-bottom:36px}
.account-settings>.section-title{margin-bottom:12px}
.account-settings>.notice{margin-bottom:12px}
.account-settings form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
.account-settings .field{grid-column:1;grid-row:1 / span 2}
.account-settings .account-meta{grid-column:1/-1;grid-row:3}
.account-settings button{grid-column:2;grid-row:2;align-self:end}
.account-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;border-top:1px solid var(--rule)}
.account-apps{grid-row:3}
.account-delete{grid-row:4}
.account-row-info{display:flex;flex-direction:column;gap:6px;max-width:560px}
.account-row-info .notice{margin-top:8px}
.account-row form{flex-shrink:0}
.link-danger{font-size:14px;line-height:20px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.link-danger:hover{color:var(--dark)}
.sessions-content{min-width:0}
.sessions-changes{margin-top:36px}
.sessions-changes .section-title{margin-bottom:16px}
.table-container{width:100%;overflow-x:auto;border:1px solid var(--rule);border-radius:4px;background:var(--canvas)}
.table-container:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:20px}
.sessions-table{min-width:640px}.changes-table{min-width:550px}
.data-table th{padding:14px 20px;background:var(--stage);font-weight:500;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap}
.data-table td{padding:14px 20px;border-bottom:1px solid var(--rule);vertical-align:middle}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table td:first-child,.data-table th:first-child{min-width:220px;width:250px}
.data-table td:first-child,.data-table td:nth-child(2),.local-time{font-variant-numeric:tabular-nums}
.table-helper-text{font-size:14px;line-height:20px;color:var(--secondary);margin-top:10px}
.top-up-balance{background:var(--stage);border-radius:4px;padding:24px 28px;margin-bottom:32px}
.top-up-content{min-width:0}
.top-up-info{font-size:16px;line-height:24px;max-width:680px;margin-bottom:24px}
.top-up-info a,.delete-content a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.top-up-info a:hover,.delete-content a:hover{color:var(--dark)}
.platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:36px}
.download-content{min-width:0}
.platform-card{display:flex;flex-direction:column;justify-content:space-between;min-height:144px;padding:24px;background:var(--stage);border-radius:4px;min-width:0}
.platform-header{display:flex;flex-direction:column;gap:4px}
.platform-header p,.platform-status-row p{font-size:14px;line-height:20px;color:var(--secondary)}
.platform-status-row{margin-top:16px}
.platform-status-row p+p,.platform-status-row p+a{margin-top:8px}
.download-instructions .section-title{margin-bottom:16px}
.instruction-list{display:flex;flex-direction:column;gap:12px;margin-left:24px}
.instruction-list li{padding-left:4px}
.participant-notice{margin-top:24px}
.delete-content{max-width:680px}
.warning-intro,.delete-info{margin-bottom:16px}
.delete-consequences{display:flex;flex-direction:column;gap:10px;list-style:disc;padding-left:24px;margin-bottom:28px}
.delete-content>.notice{margin:16px 0}
.delete-form{display:flex;flex-direction:column;align-items:flex-start;gap:24px;border-top:1px solid var(--rule);padding-top:28px;margin-top:16px}
.delete-form .field label{font-size:16px;line-height:24px;font-weight:400}
.delete-form input[type="checkbox"]{accent-color:var(--brand-accent)}
.confirm-content{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:560px}
.confirm-content form{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:100%}
.confirm-content .field{width:min(320px,100%)}
.confirm-content>p{overflow-wrap:anywhere;text-wrap:balance}
@media (min-width:769px) and (max-width:1100px){.account-content{column-gap:28px}.account-settings form{grid-template-columns:minmax(0,1fr)}.account-settings button{grid-column:1;grid-row:4;justify-self:start}.account-row{flex-wrap:wrap}}
@media (max-width:768px){
.account-content{grid-template-columns:minmax(0,1fr)}
.account-balance{grid-column:1;padding:20px;margin-bottom:24px}
.account-balance-body{flex-direction:column;align-items:stretch;gap:16px}
.account-balance-info{flex-direction:column;align-items:flex-start;gap:6px}
.account-balance-body>.button-primary{width:100%}
.account-identity{grid-column:1;grid-row:2;margin-bottom:24px}
.account-settings{grid-column:1;grid-row:3;margin-bottom:24px}
.account-apps{grid-row:4}
.account-delete{grid-row:5}
.account-settings form{display:flex;flex-direction:column;gap:8px}
.account-settings button{width:100%;margin-top:12px}
.account-row{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 0}
.account-row-info{width:100%;max-width:none}
.account-row form,.account-row .button-secondary{width:100%}
.link-danger{display:inline-flex;align-items:center;min-height:44px}
.platform-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.delete-form .button-danger,.confirm-content form,.confirm-content .field,.confirm-content .button-primary,.confirm-content .button-secondary{width:100%}
.data-table th,.data-table td{padding:12px 16px}
.data-table td:first-child,.data-table th:first-child{min-width:0;width:auto;white-space:nowrap}
.top-up-balance{padding:20px}
}

/* public page interiors — approved Sign in, Enter your code, Create account and Account created layouts;
   Account deleted reuses the Account created message (accepted screen-coverage recommendation) */
.page-public>.notice{margin-bottom:24px}
.public-form{display:flex;flex-direction:column;gap:24px;width:100%}
.public-form .button-primary,.public-form .button-secondary,.public-action .button-primary{width:100%}
.public-helper{margin-top:24px;color:var(--secondary);text-align:center}
.public-message{margin-bottom:32px;color:var(--secondary);text-align:center;overflow-wrap:anywhere;text-wrap:balance}
.public-resend{margin-top:16px}
.public-resend .button-secondary{padding-top:12px;padding-bottom:12px}
.public-alternative{margin-top:24px;font-size:14px;line-height:20px;text-align:center}
.public-alternative a,.field-support a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;transition:color .15s ease-in-out}
.public-alternative a:hover,.field-support a:hover{color:var(--primary-hover)}
.page-public .page-title:has(+.registration-intro){margin-bottom:24px}
.registration-intro{margin-bottom:32px}
.field-support{margin-top:4px;font-size:14px;line-height:20px;color:var(--secondary)}
.trial-notice{padding:12px 16px;border-radius:4px;background:var(--stage);font-size:14px;line-height:20px}
.trial-notice strong{font-weight:500}
.terms-field label:has(input[type="checkbox"]){display:block;position:relative;padding-left:30px}
.terms-field input[type="checkbox"]{position:absolute;left:0;top:1px}
.terms-field a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.terms-field a:hover{color:var(--primary-hover)}
.page-public .message-panel>p.notice-success{padding:0;border:0;background:none;font-size:16px;line-height:24px;color:var(--secondary);text-align:center}

/* landing variant — the signed-out Contact page wears the uhint.me site header and footer
   (copied from website/assets/styles.css; nothing is loaded from that site) */
.landing-nav{display:flex;align-items:center;gap:32px}
.landing-nav-link{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.01em;color:var(--secondary);text-decoration:none;transition:color .15s ease-in-out}
.landing-nav-link:hover{color:var(--ink)}
.landing{flex:1 0 auto;width:100%;max-width:1180px;margin:0 auto;padding:64px 24px}
.page-landing{max-width:560px;margin:0 auto}
.landing-footer{padding:64px 0;background:var(--dark);color:var(--on-dark)}
.landing-footer-main{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:48px}
.landing-footer-brand{display:flex;flex-direction:column;max-width:384px}
.landing-footer-brand .site-brand-name{margin-bottom:12px}
.landing-footer-brand .site-brand-suffix{color:var(--brand-accent-on-dark)}
.landing-footer-brand p{font-size:14px;line-height:20px;color:var(--on-dark-body)}
.landing-footer-groups{display:flex;flex-direction:column;gap:48px}
.landing-footer-group h2{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.01em;margin-bottom:12px}
.landing-footer-group ul{display:flex;flex-direction:column;gap:12px;list-style:none;font-size:14px;line-height:20px;color:var(--on-dark-body)}
.landing-footer-group a{text-decoration:none;transition:color .15s ease-in-out}
.landing-footer-group a:hover,.landing-footer-group a[aria-current="page"]{color:var(--on-dark)}
.landing-footer :focus-visible{outline-color:var(--on-dark-caption)}
.landing-footer-note{max-width:1180px;margin:48px auto 0;padding:32px 24px 0;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:12px;line-height:16px;color:var(--on-dark-caption)}
@media (max-width:639px){
.site-header-landing{height:auto}
.site-header-landing .site-header-bar{flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.landing-nav{width:100%;flex-wrap:wrap;column-gap:20px;row-gap:12px}
.landing-nav-link{padding:12px 0}
}
@media (max-width:767px){.site-header-landing .site-header-bar{padding-left:24px;padding-right:24px}}
@media (min-width:640px){.landing-footer-groups{flex-direction:row;gap:64px}}
@media (min-width:768px){
.site-header-landing .site-header-bar,.landing-footer-main,.landing-footer-note{padding-left:64px;padding-right:64px}
.landing{padding:96px 64px}
.landing-footer{padding:80px 0}
.landing-footer-main{flex-direction:row}
}

/* Contact — one form for both variants; the trap field stays out of sight and out of the tab order */
.contact-content{display:flex;flex-direction:column;gap:24px;max-width:560px}
.contact-intro,.contact-alternative{color:var(--secondary)}
.contact-alternative{font-size:14px;line-height:20px}
.contact-alternative a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.contact-alternative a:hover{color:var(--primary-hover)}
.contact-form{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.contact-form .field{width:100%}
.field textarea{width:100%;min-height:200px;padding:12px 16px;border:1px solid var(--border);border-radius:4px;background-color:var(--canvas);font-size:16px;line-height:24px;color:var(--ink);resize:vertical;transition:border-color .15s ease-in-out}
.field textarea:focus{border-color:var(--primary)}
.field input[readonly]{background-color:var(--stage);color:var(--secondary)}
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:768px){.contact-form .button-primary{width:100%}}