/* ==========================================================================
   SDN Support Portal
   Self-contained UI. Everything is scoped to .sdn and resets the theme's
   button/input styling, so the portal doesn't inherit the default
   WordPress / WooCommerce look. Fonts are inherited on purpose, so it
   still adopts the site's typography.
   ========================================================================== */

.sdn {
	--sdn-bg:        #f6f7f9;
	--sdn-surface:   #ffffff;
	--sdn-border:    #e4e7ec;
	--sdn-border-2:  #eef0f3;
	--sdn-text:      #15181e;
	--sdn-muted:     #697586;
	/* Lighter than --sdn-muted on purpose. A placeholder is a hint, not content,
	   and at muted weight it reads as a value already typed into the field. */
	--sdn-placeholder: #9aa4b2;
	--sdn-accent:    #2f5bea;
	--sdn-accent-d:  #2447bd;
	--sdn-radius:    12px;
	--sdn-radius-sm: 8px;
	--sdn-shadow:    0 1px 2px rgba(16, 24, 40, .05);
	--sdn-shadow-md: 0 4px 14px rgba(16, 24, 40, .07);

	font-family: inherit;
	color: var(--sdn-text);
	line-height: 1.55;
	max-width: 1040px;
	margin: 0 auto;
}

.sdn *,
.sdn *::before,
.sdn *::after { box-sizing: border-box; }

/* --- Reset the theme's opinions on controls ------------------------------ */
.sdn button,
.sdn input,
.sdn select,
.sdn textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}
.sdn a { color: var(--sdn-accent); text-decoration: none; }
.sdn a:hover { text-decoration: underline; }
.sdn ul { list-style: none; margin: 0; padding: 0; }

/* --- Typography --------------------------------------------------------- */
.sdn-h2 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 .2em; font-weight: 650; }
.sdn-h3 { font-size: 1rem; margin: 0; font-weight: 650; letter-spacing: .01em; }
.sdn-muted { color: var(--sdn-muted); font-size: .9rem; }
.sdn-big { font-size: 1.5rem; font-weight: 700; }
.sdn-sep { opacity: .5; margin: 0 .35em; }
.sdn-mt { margin-top: 1rem; }
.sdn-hint { color: var(--sdn-muted); font-size: .82rem; margin: .4em 0 0; }
.sdn-empty { color: var(--sdn-muted); padding: 1.25rem 0; margin: 0; text-align: center; }

/* --- Top bar ------------------------------------------------------------ */
.sdn-topbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap; padding: 0 0 1.1rem;
}
.sdn-topbar__id { display: flex; align-items: center; gap: .8rem; }
.sdn-topbar__name { font-weight: 650; font-size: 1.05rem; }
.sdn-topbar__sub { color: var(--sdn-muted); font-size: .85rem; }

/* --- Nav (tabs) --------------------------------------------------------- */
.sdn-nav {
	display: flex; align-items: center; gap: .25rem;
	border-bottom: 1px solid var(--sdn-border);
	margin-bottom: 1.5rem;
}
.sdn-nav__item {
	padding: .65rem .9rem;
	color: var(--sdn-muted);
	font-size: .92rem;
	font-weight: 550;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.sdn-nav__item:hover { color: var(--sdn-text); text-decoration: none; }
.sdn-nav__item.is-active { color: var(--sdn-accent); border-bottom-color: var(--sdn-accent); }
.sdn-nav__item--end { margin-left: auto; }

/* --- Buttons ------------------------------------------------------------
   Written with .sdn prefixes and !important on colour so neither our own
   `.sdn a` link reset (higher specificity than a bare class) nor any theme
   link rule can repaint button text — white-on-blue must never become
   blue-on-blue. */
.sdn .sdn-btn,
.sdn a.sdn-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .6rem 1.1rem;
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius-sm);
	background: var(--sdn-surface);
	color: var(--sdn-text) !important;
	font-size: .92rem; font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.sdn .sdn-btn:hover { background: #f2f4f7; }
.sdn .sdn-btn--primary,
.sdn a.sdn-btn--primary {
	background: var(--sdn-accent);
	border-color: var(--sdn-accent);
	color: #fff !important;
	box-shadow: var(--sdn-shadow);
}
.sdn .sdn-btn--primary:hover,
.sdn a.sdn-btn--primary:hover { background: var(--sdn-accent-d); border-color: var(--sdn-accent-d); }
.sdn .sdn-btn--block { display: flex; width: 100%; }

.sdn-back { display: inline-block; margin-bottom: .9rem; font-size: .88rem; color: var(--sdn-muted); }
.sdn-back:hover { color: var(--sdn-text); }
.sdn-link { font-size: .85rem; font-weight: 550; }

/* --- Cards -------------------------------------------------------------- */
.sdn-card {
	background: var(--sdn-surface);
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius);
	box-shadow: var(--sdn-shadow);
	padding: 1.15rem 1.25rem;
	margin-bottom: 1.1rem;
}
.sdn-card__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: .75rem; margin-bottom: .85rem;
}
.sdn-card--narrow { max-width: 560px; }

.sdn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.sdn-grid .sdn-card { margin-bottom: 0; }
.sdn-card--wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .sdn-grid { grid-template-columns: 1fr; } }

/* --- Stats -------------------------------------------------------------- */
.sdn-stats {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: .8rem; margin-bottom: 1.1rem;
}
@media (max-width: 760px) { .sdn-stats { grid-template-columns: repeat(2, 1fr); } }
.sdn-stat {
	background: var(--sdn-surface);
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius);
	padding: .9rem 1rem;
	box-shadow: var(--sdn-shadow);
}
.sdn-stat__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.sdn-stat__label { color: var(--sdn-muted); font-size: .82rem; margin-top: .15rem; }
.sdn-stat__note {
	display: inline-block; margin-top: .45rem;
	font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: #92400e; background: #fef3c7; padding: .1rem .4rem; border-radius: 4px;
}

/* --- Ticket list -------------------------------------------------------- */
.sdn-tickets__row {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .8rem .25rem;
	border-bottom: 1px solid var(--sdn-border-2);
	color: inherit;
}
.sdn-tickets li:last-child .sdn-tickets__row { border-bottom: 0; }
.sdn-tickets__row:hover { background: #fafbfc; }
/* Only the subject is a link now, so the underline belongs to it alone. The row
   used to be one big anchor, which underlined the site name and the timestamp
   too — three underlined things per row, one of which went anywhere. */
.sdn .sdn-tickets__title a { color: inherit; text-decoration: none; }
.sdn .sdn-tickets__title a:hover { color: var(--sdn-accent); text-decoration: underline; }
.sdn-tickets__main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sdn-tickets__title { font-weight: 600; }
.sdn-tickets__ref { color: var(--sdn-muted); font-weight: 500; margin-right: .35em; font-variant-numeric: tabular-nums; }
.sdn-tickets__meta { color: var(--sdn-muted); font-size: .82rem; }

/* --- Status pills ------------------------------------------------------- */
.sdn-pill {
	display: inline-flex; align-items: center; gap: .4em;
	padding: .22rem .65rem;
	border-radius: 999px;
	font-size: .78rem; font-weight: 600; white-space: nowrap;
	background: #eef1f5; color: #364152;
}
.sdn-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.sdn-pill--new             { background: #e7efff; color: #1d4ed8; }
.sdn-pill--assessing       { background: #fef3c7; color: #92400e; }
.sdn-pill--awaiting-client { background: #ffe9e3; color: #b4441c; }
.sdn-pill--in-progress     { background: #e6e9ff; color: #3730a3; }
.sdn-pill--with-developer  { background: #f0e8ff; color: #6b21a8; }
.sdn-pill--resolved,
.sdn-pill--closed          { background: #e3f6e9; color: #166534; }
.sdn-pill--active          { background: #e3f6e9; color: #166534; }
.sdn-pill--inactive        { background: #eef1f5; color: #4b5565; }
.sdn-pill--suspended       { background: #ffe4e6; color: #9f1239; }

/* --- Tags --------------------------------------------------------------- */
.sdn-tag {
	display: inline-block; padding: .08rem .45rem; border-radius: 4px;
	font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	background: #eef1f5; color: #475467;
}
.sdn-tag--staff { background: var(--sdn-accent); color: #fff; }
.sdn-tag--warn  { background: #fef3c7; color: #92400e; }

/* --- Ticket header ------------------------------------------------------ */
.sdn-tickethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sdn-tickethead__ref { color: var(--sdn-muted); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sdn-tickethead__meta { color: var(--sdn-muted); font-size: .85rem; }

/* --- Conversation ------------------------------------------------------- */
.sdn-thread { margin-bottom: 1.1rem; }
.sdn-msg {
	display: flex; gap: .8rem;
	background: var(--sdn-surface);
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius);
	padding: 1rem 1.1rem;
	margin-bottom: .7rem;
	box-shadow: var(--sdn-shadow);
}
.sdn-msg--staff { background: #f8faff; border-color: #dbe4fb; }
.sdn-msg--internal { background: #fffbeb; border-color: #fcd982; border-left: 3px solid #f59e0b; }
.sdn-msg__body { min-width: 0; flex: 1; }
.sdn-msg__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.sdn-msg__name { font-weight: 650; font-size: .92rem; }
.sdn-msg__date { color: var(--sdn-muted); font-size: .78rem; margin-left: auto; }
.sdn-msg__text p { margin: 0 0 .6em; }
.sdn-msg__text p:last-child { margin-bottom: 0; }

/* --- Avatar (initials — no external requests) --------------------------- */
.sdn-avatar {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: hsl(var(--sdn-avatar-hue, 220) 55% 46%);
	color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.sdn-avatar--lg { width: 44px; height: 44px; font-size: .95rem; }

/* --- Site list ---------------------------------------------------------- */
.sdn-sitelist__item {
	display: flex; align-items: center; gap: .6rem;
	padding: .55rem .25rem;
	border-bottom: 1px solid var(--sdn-border-2);
}
.sdn-sitelist__item:last-child { border-bottom: 0; }
.sdn-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: 0 0 auto; }

/* --- Definition list ---------------------------------------------------- */
.sdn-dl { display: grid; grid-template-columns: 42% 58%; gap: .5rem 0; margin: 0; }
.sdn-dl dt { color: var(--sdn-muted); font-size: .86rem; }
.sdn-dl dd { margin: 0; font-size: .92rem; }

/* --- Table -------------------------------------------------------------- */
.sdn-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sdn-table th {
	text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
	color: var(--sdn-muted); font-weight: 700; padding: 0 .6rem .5rem 0;
	border-bottom: 1px solid var(--sdn-border);
}
.sdn-table td { padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--sdn-border-2); }
.sdn-table tr:last-child td { border-bottom: 0; }

/* --- Forms -------------------------------------------------------------- */
.sdn-field { margin-bottom: 1rem; }
.sdn-field label,
.sdn-form label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.sdn-form input[type="text"],
.sdn-form input[type="email"],
.sdn-form input[type="password"],
.sdn-form input[type="tel"],
.sdn-form input[type="url"],
.sdn-form input[type="number"],
.sdn-form input[type="search"],
.sdn-form select,
.sdn-form textarea {
	width: 100%;
	padding: .62rem .75rem;
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius-sm);
	background: #fff;
	font-size: .95rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sdn-form textarea { resize: vertical; min-height: 110px; }

/* Placeholders.
   There was no rule for these at all, so they inherited whatever the theme set —
   on a live site that turned out to be near-black, and "e.g. example.com.au/contact"
   read as a value already in the field rather than an example of one.

   opacity:1 is not redundant: Firefox applies its own opacity to placeholders, so
   without it the colour below would be lightened a second time and end up too faint
   in one browser and not another. Setting both keeps every browser identical. */
.sdn-form input::placeholder,
.sdn-form textarea::placeholder {
	color: var(--sdn-placeholder);
	opacity: 1;
}
/* Placeholder-styled first option in a select ("Choose a website…"), which is a
   real option element and therefore untouched by ::placeholder. */
.sdn-form select:invalid,
.sdn-form select .sdn-placeholder-option { color: var(--sdn-placeholder); }

.sdn-form input:focus,
.sdn-form select:focus,
.sdn-form textarea:focus {
	outline: none;
	border-color: var(--sdn-accent);
	box-shadow: 0 0 0 3px rgba(47, 91, 234, .12);
}
.sdn-check { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: .88rem; }
.sdn-check input { width: auto; }

.sdn-optional {
	margin-left: .35em;
	font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	color: var(--sdn-muted);
}

/* --- File input ---------------------------------------------------------
   The browser's native control looks nothing like the rest of the form, so
   restyle the field and its button. */
.sdn-form input[type="file"] {
	display: block;
	width: 100%;
	padding: .55rem .7rem;
	border: 1px dashed var(--sdn-border);
	border-radius: var(--sdn-radius-sm);
	background: #fbfcfd;
	font-size: .88rem;
	color: var(--sdn-muted);
	cursor: pointer;
}
.sdn-form input[type="file"]:focus {
	outline: none;
	border-color: var(--sdn-accent);
	box-shadow: 0 0 0 3px rgba(47, 91, 234, .12);
}
.sdn-form input[type="file"]::file-selector-button {
	margin-right: .8rem;
	padding: .38rem .9rem;
	border: 1px solid var(--sdn-border);
	border-radius: 6px;
	background: #fff;
	color: var(--sdn-text);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.sdn-form input[type="file"]::file-selector-button:hover { background: #f2f4f7; }
/* Older Chrome/Safari */
.sdn-form input[type="file"]::-webkit-file-upload-button {
	margin-right: .8rem;
	padding: .38rem .9rem;
	border: 1px solid var(--sdn-border);
	border-radius: 6px;
	background: #fff;
	color: var(--sdn-text);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
}

/* --- WordPress editor, brought into the design system --------------------
   wp_editor() ships its own admin chrome (Visual/Code tabs, TinyMCE panels).
   Left alone it looks pasted-in, so we restyle the wrapper, tabs and toolbar.
   A few !important flags are unavoidable: TinyMCE sets those properties inline
   and in its own stylesheet. */
.sdn .wp-editor-wrap {
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius-sm);
	background: #fff;
	overflow: hidden;
}
.sdn .wp-editor-wrap:focus-within {
	border-color: var(--sdn-accent);
	box-shadow: 0 0 0 3px rgba(47, 91, 234, .12);
}
.sdn .wp-editor-tools {
	padding: .35rem .4rem 0;
	background: #fbfcfd;
	border-bottom: 1px solid var(--sdn-border);
	display: flex;
	justify-content: flex-end;
	gap: .25rem;
}
.sdn .wp-editor-tools:after { content: none; }
.sdn .wp-editor-tabs { float: none; display: flex; gap: .25rem; }
.sdn .wp-switch-editor {
	float: none;
	margin: 0;
	padding: .3rem .75rem;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	background: transparent;
	color: var(--sdn-muted);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.5;
	box-shadow: none;
	cursor: pointer;
}
.sdn .wp-switch-editor:hover { background: #eef0f3; color: var(--sdn-text); }
.sdn .tmce-active .switch-tmce,
.sdn .html-active .switch-html {
	background: #fff;
	color: var(--sdn-text);
	border-color: var(--sdn-border);
}
/* TinyMCE toolbar */
.sdn .mce-panel { border-color: var(--sdn-border) !important; background: #fbfcfd !important; }
.sdn .mce-toolbar-grp { border-bottom: 1px solid var(--sdn-border) !important; padding: .15rem .2rem; }
.sdn .mce-btn { background: transparent !important; border-radius: 5px; }
.sdn .mce-btn:hover, .sdn .mce-btn.mce-active { background: #eef0f3 !important; }
.sdn .mce-btn button { color: var(--sdn-text) !important; padding: 3px 6px !important; }
.sdn .mce-edit-area { border: 0 !important; }
/* Quicktags ("Code" mode) toolbar + textarea */
.sdn .quicktags-toolbar {
	background: #fbfcfd;
	border-bottom: 1px solid var(--sdn-border);
	padding: .3rem;
}
.sdn .quicktags-toolbar input[type="button"] {
	width: auto;
	padding: .2rem .55rem;
	border: 1px solid var(--sdn-border);
	border-radius: 5px;
	background: #fff;
	font-size: .76rem;
	color: var(--sdn-text);
	cursor: pointer;
}
.sdn .wp-editor-container { border: 0; }
.sdn .wp-editor-area,
.sdn textarea.wp-editor-area {
	border: 0;
	padding: .7rem .75rem;
	font-size: .95rem;
	background: #fff;
	box-shadow: none;
}
.sdn .wp-editor-area:focus { outline: none; box-shadow: none; }
/* The statusbar/resize grip adds visual noise we don't need. */
.sdn .mce-statusbar { border-top: 1px solid var(--sdn-border-2) !important; }

/* Honeypot — hidden from people, visible to bots. */
.sdn-hp { position: absolute; left: -9999px; }

/* --- Alerts ------------------------------------------------------------- */
.sdn-alert {
	padding: .8rem 1rem;
	border-radius: var(--sdn-radius-sm);
	border: 1px solid var(--sdn-border);
	background: #f8f9fb;
	margin-bottom: 1.1rem;
	font-size: .92rem;
}
.sdn-alert--ok    { background: #ecfdf3; border-color: #a6f0c6; color: #05603a; }
.sdn-alert--error { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.sdn-alert ul { margin: 0; padding-left: 1.1rem; list-style: disc; }

/* Red warning — used for the "create a new user for us" advice. */
.sdn-alert--warn {
	display: flex; align-items: flex-start; gap: .6rem;
	background: #fef3f2;
	border-color: #fecdca;
	border-left: 4px solid #d92d20;
	color: #912018;
}
.sdn-alert--warn strong { color: #912018; }
.sdn-alert__icon { font-size: 1rem; line-height: 1.45; flex: 0 0 auto; }

/* Amber caution — secondary to the red warning (used for the 2FA note), so the
   two read as a hierarchy rather than competing. */
.sdn-alert--caution {
	display: flex; align-items: flex-start; gap: .6rem;
	background: #fffaeb;
	border-color: #fedf89;
	border-left: 4px solid #f79009;
	color: #93370d;
}
.sdn-alert--caution strong { color: #93370d; }

/* --- Auth cards (register / sign-in) ------------------------------------- */
.sdn-auth { margin: 1.5rem auto; padding: 1.6rem 1.75rem 1.4rem; }
.sdn-auth .sdn-form .sdn-btn { margin-top: .35rem; }
.sdn-authlinks {
	display: flex; align-items: center; justify-content: space-between;
	gap: .75rem; flex-wrap: wrap;
	margin-top: 1.1rem; padding-top: 1rem;
	border-top: 1px solid var(--sdn-border-2);
	color: var(--sdn-muted); font-size: .88rem;
}
.sdn-auth__done { text-align: center; padding: 1.25rem 0 .75rem; }
.sdn-auth__check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; margin-bottom: 1rem;
	border-radius: 50%;
	background: #ecfdf3; color: #039855;
	font-size: 1.5rem; font-weight: 700;
}

/* --- WordPress login form, tidied ---------------------------------------- */
.sdn-loginform label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.sdn-loginform input[type="text"],
.sdn-loginform input[type="password"] {
	width: 100%; padding: .62rem .75rem;
	border: 1px solid var(--sdn-border); border-radius: var(--sdn-radius-sm);
	margin-bottom: .8rem;
}
.sdn-loginform .login-remember,
.sdn-loginform .login-remember label { font-weight: 400; font-size: .88rem; }
.sdn-loginform input[type="submit"] {
	padding: .6rem 1.1rem; border: 0; border-radius: var(--sdn-radius-sm);
	background: var(--sdn-accent); color: #fff; font-weight: 600; cursor: pointer;
}
.sdn-loginform input[type="submit"]:hover { background: var(--sdn-accent-d); }

/* --- Tasks -------------------------------------------------------------- */
.sdn-tasks__item {
	display: flex; align-items: center; gap: .6rem;
	padding: .55rem .25rem;
	border-bottom: 1px solid var(--sdn-border-2);
}
.sdn-tasks__item:last-child { border-bottom: 0; }
.sdn-tasks__title { flex: 1; font-size: .92rem; font-weight: 550; min-width: 0; }
.sdn-tasks__item.is-done .sdn-tasks__title { color: var(--sdn-muted); }
.sdn-tasks__mins { font-size: .8rem; font-variant-numeric: tabular-nums; }

/* --- Ticket form: access details ---------------------------------------- */
.sdn-secure {
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius);
	background: #fbfcfd;
	padding: 1rem 1.1rem .35rem;
	margin: 0 0 1.1rem;
}
.sdn-secure__head { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; }
.sdn-secure__lock { font-size: 1.1rem; line-height: 1.4; }
.sdn-secure__head p { margin: .25em 0 0; }
.sdn-secure__title {
	font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--sdn-muted);
	margin: 1rem 0 .6rem;
}
.sdn-secure .sdn-alert { margin-bottom: 1rem; }

/* Each login group gets its own colour so the two are never confused. */
.sdn-cred {
	border: 1px solid var(--sdn-border);
	border-left-width: 4px;
	border-radius: var(--sdn-radius-sm);
	padding: .9rem 1rem .1rem;
	margin: 0 0 1rem;
}
.sdn-cred .sdn-secure__title { margin-top: 0; }
.sdn-cred .sdn-form input,
.sdn-form .sdn-cred input { background: #fff; }

/* WordPress admin — blue */
.sdn-cred--wp {
	background: #f4f7ff;
	border-color: #d6e0ff;
	border-left-color: #2f5bea;
}
.sdn-cred--wp .sdn-secure__title { color: #2447bd; }

/* Hosting / cPanel — teal */
.sdn-cred--host {
	background: #f0fdfa;
	border-color: #b7e6de;
	border-left-color: #0e9384;
}
.sdn-cred--host .sdn-secure__title { color: #0b7268; }

/* --- Ticket form: charging + rate --------------------------------------- */
.sdn-charging {
	/* Column: the promise spans the full width, then the rate and the explanation
	   side by side, then the guarantee on its own footing. */
	display: flex; flex-direction: column; gap: 1.15rem;
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius);
	padding: 1.4rem;
	margin: 0 0 1.1rem;
	background: var(--sdn-surface);
	box-shadow: var(--sdn-shadow);
}

/* --- The promise -------------------------------------------------------
   The first thing read in the card and the largest thing in it, because the
   barrier to raising a ticket is never the rate — it is the fear of paying for
   an attempt that goes nowhere. The tick is decoration and is hidden from
   screen readers; the sentence carries itself. */
.sdn-charging__promise {
	display: flex; align-items: baseline; gap: .6rem;
	margin: 0;
	font-size: 1.6rem;
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -.015em;
	color: #05603a;
}
.sdn-charging__tick {
	flex: 0 0 auto;
	font-size: 1.15rem;
	color: #12b76a;
}

/* --- Rate and explanation ---------------------------------------------- */
.sdn-charging__cols {
	display: flex; gap: 1.25rem; align-items: stretch; flex-wrap: wrap;
}
.sdn-charging__rate {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center;
	min-width: 168px; flex: 0 0 auto;
	padding: 1.1rem 1.35rem;
	border-radius: var(--sdn-radius-sm);
	background: linear-gradient(180deg, #f4f7ff 0%, #eaf0ff 100%);
	border: 1px solid #d6e0ff;
}
.sdn-charging__amount {
	font-size: 2.1rem; font-weight: 800; line-height: 1.05; color: var(--sdn-accent-d);
	letter-spacing: -.03em;
	white-space: nowrap;
}
.sdn-charging__label {
	font-size: .78rem; color: var(--sdn-muted); margin-top: .3rem;
}
.sdn-charging__body { flex: 1; min-width: 230px; display: flex; flex-direction: column; justify-content: center; }

/* A section marker, not a heading competing with the promise above it. */
.sdn-charging__eyebrow {
	display: block; margin-bottom: .35rem;
	font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--sdn-muted);
}
.sdn-charging__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--sdn-text);
}

/* --- The guarantee ------------------------------------------------------
   Its own panel because it answers a different question from the price: not
   what will this cost, but what if it does not hold. At hint weight inside the
   body text it read as small print, which is the one thing a guarantee must
   never look like. */
.sdn-charging__guarantee {
	margin: 0;
	padding: .8rem 1rem;
	border-radius: var(--sdn-radius-sm);
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	font-size: .88rem;
	line-height: 1.55;
	color: #14532d;
}
.sdn-charging__guarantee strong { font-weight: 700; }

.sdn-badge-stage2 {
	display: inline-block; margin-top: .5rem;
	font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	color: #92400e; background: #fef3c7; padding: .12rem .4rem; border-radius: 4px;
}

@media (max-width: 560px) {
	.sdn-charging { padding: 1.1rem; }
	.sdn-charging__promise { font-size: 1.3rem; }
	.sdn-charging__cols { flex-direction: column; }
	.sdn-charging__rate { width: 100%; }
}

/* --- Ticket form: terms -------------------------------------------------- */
.sdn-form textarea.sdn-terms {
	font-size: .84rem;
	line-height: 1.6;
	background: #fbfcfd;
	color: var(--sdn-muted);
	min-height: 0;
	resize: vertical;
}

/* --- Attachments --------------------------------------------------------- */
.sdn-attach {
	margin: 0 0 1.1rem 3.1rem;   /* line up with message bubbles, past the avatar */
	padding: .7rem .9rem;
	border: 1px dashed var(--sdn-border);
	border-radius: var(--sdn-radius-sm);
	background: #fbfcfd;
}
.sdn-attach__head {
	font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--sdn-muted); margin-bottom: .4rem;
}
.sdn-attach__list li {
	display: flex; align-items: center; gap: .5rem;
	padding: .2rem 0; font-size: .9rem;
}
.sdn-attach__meta { color: var(--sdn-muted); font-size: .8rem; }
@media (max-width: 560px) { .sdn-attach { margin-left: 0; } }

/* Access details table (staff-only, inside the Credentials card) */
.sdn-access th { text-align: left; white-space: nowrap; padding-right: 1rem; font-weight: 600; }
.sdn-access td { word-break: break-word; }

/* --- Secrets ------------------------------------------------------------ */
.sdn-secrets__item {
	display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
	padding: .55rem .25rem;
	border-bottom: 1px solid var(--sdn-border-2);
}
.sdn-secrets__item:last-child { border-bottom: 0; }
.sdn-secrets__label { flex: 1; font-size: .92rem; font-weight: 550; min-width: 0; }
.sdn-secrets__form { margin: 0; }

.sdn-reveal {
	border: 1px solid #fcd982; background: #fffbeb;
	border-radius: var(--sdn-radius-sm);
	padding: .85rem 1rem; margin-bottom: .9rem;
}
.sdn-reveal__label { font-size: .8rem; font-weight: 700; color: #92400e; margin-bottom: .45rem; }
.sdn-reveal__value {
	/* pre-wrap because a revealed credential is often several lines — a URL, a
	   username, a password. Without it HTML collapses those newlines to spaces and
	   the one-and-only viewing shows a run-on line, which is then what gets copied.
	   Safe here, unlike in message bodies: the value is echoed tight against its
	   tags, so no template indentation can leak in as leading blank space. */
	white-space: pre-wrap;
	display: block; word-break: break-all; user-select: all;
	background: #fff; border: 1px solid #f0d48a; border-radius: 6px;
	padding: .6rem .7rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9rem;
}

.sdn-send { margin-top: .9rem; }
.sdn-send summary {
	cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--sdn-accent);
	list-style: none;
}
.sdn-send summary::-webkit-details-marker { display: none; }
.sdn-send summary::before { content: "＋ "; font-weight: 700; }
.sdn-send[open] summary::before { content: "－ "; }

/* --- Dark mode (only if the theme opts in) ------------------------------- */
@media (prefers-color-scheme: dark) {
	.sdn.sdn--auto-dark {
		--sdn-bg:       #14161a;
		--sdn-surface:  #1b1e24;
		--sdn-border:   #2b3038;
		--sdn-border-2: #23272e;
		--sdn-text:     #e8eaed;
		--sdn-muted:    #97a1b0;
	}
}

/* --- Completion: accept, or say it isn't right ---------------------------- */
/* The objection has to look as legitimate as the acceptance. Hiding it behind
   small grey text is how a complaint becomes a chargeback instead. */
.sdn-complete { border-left: 4px solid var(--sdn-accent, #2563eb); }
.sdn-complete__title { margin: 0 0 .35em; font-size: 1.15rem; }
.sdn-complete__note { margin: 0 0 1em; color: var(--sdn-muted, #5b6472); }
.sdn-complete__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.sdn-complete__form { margin: 0; }
.sdn-complete__object { flex: 1 1 260px; }
.sdn-complete__object > summary {
	cursor: pointer; padding: .55rem .9rem; border-radius: 6px;
	border: 1px solid var(--sdn-line, #d7dbe2); background: #fff;
	font-weight: 600; list-style: none; display: inline-block;
}
.sdn-complete__object > summary::-webkit-details-marker { display: none; }
.sdn-complete__object > summary:hover { border-color: var(--sdn-accent, #2563eb); }
.sdn-complete__object[open] > summary { margin-bottom: .8rem; }
.sdn-complete__warranty {
	margin: 1.1em 0 0; padding-top: .9em; border-top: 1px solid var(--sdn-line, #e6e9ee);
	color: var(--sdn-muted, #5b6472); font-size: .92rem;
}

/* --- Public intake form: the lead-capture surface ------------------------- */
/* A stranger who found us on Google is on the other end of this. Nothing here
   should feel like paperwork, and nothing should ask for a credential. */
.sdn-intake .sdn-card { padding: 2rem; }
.sdn-intake .sdn-h2 { margin-top: 0; }
.sdn-btn--lg { padding: .85rem 1.6rem; font-size: 1.05rem; width: 100%; }
.sdn-intake__note { margin: 1rem 0 0; font-size: .88rem; }
.sdn-intake__done { text-align: center; }
.sdn-intake__done .sdn-check {
	width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #ecfdf3; color: #05603a; font-size: 1.7rem; font-weight: 700;
}
/* The honeypot must be invisible to people but present for bots — so it is
   moved off-screen rather than display:none, which some bots skip. */
.sdn-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* --- Logo -----------------------------------------------------------------
   One block serves the auth screens, the intake form and the portal header.
   Set the URL at Tickets → Setup → Branding; with none set, SDN_SP_Setup
   renders the site name as text instead and these rules style that too, so a
   client never meets a broken image. */
.sdn .sdn-logo {
	display: block;
	text-decoration: none;
	line-height: 1;
}
.sdn .sdn-logo:hover { text-decoration: none; }
.sdn .sdn-logo__img {
	display: block;
	/* FULL SIZE. The logo renders at its own intrinsic dimensions (the Darwin one is
	   250x100) rather than being scaled down to a fixed bar height. Earlier caps of
	   40-52px were rendering it at under half size.

	   height/width auto + max-width:100% is what makes that safe: the image never
	   exceeds its natural size, and shrinks proportionally only when the container is
	   genuinely narrower than the logo. The generous max-height is a backstop for a
	   different site dropping in an oversized file, not a design height -- it is set
	   well clear of anything sensible so it never clips. */
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 140px;
}
.sdn .sdn-logo__text {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--sdn-text);
}

/* On a card: centred above the heading, since the auth cards are centred. */
.sdn-auth .sdn-logo--auth,
.sdn-card .sdn-logo--auth {
	margin: 0 auto 1.35rem;
	text-align: center;
}
.sdn-auth .sdn-logo--auth .sdn-logo__img,
.sdn-card .sdn-logo--auth .sdn-logo__img { margin: 0 auto; }

/* Above the portal chrome, left-aligned with everything else. */
.sdn-brandbar {
	padding: .25rem 0 1.15rem;
}
/* No per-context height override: full size everywhere. Kept as a selector so the
   portal header has an obvious place to differ if it ever needs to. */

@media (max-width: 600px) {
	/* Nothing to shrink: max-width:100% already fits a 250px-wide logo inside a
	   320px screen, and forcing a smaller height here would undo "full size" on
	   exactly the devices where the logo does most of its reassuring. */
}

/* --- Keep me signed in --------------------------------------------------
   Not .sdn-check: that name is already the round tick badge on the intake
   success screen, and reusing it here would be a trap for whoever edits next. */
.sdn-remember {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.1rem;
	font-weight: 500 !important;
	font-size: .9rem !important;
	cursor: pointer;
}
.sdn-form .sdn-remember input[type="checkbox"] {
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}

/* --- Standalone page shell -------------------------------------------------
   Used by templates/portal-page.php, which replaces the theme template on the
   portal pages. See class-sdn-template.php: the live site was rendering both
   Visual Composer's global header/footer AND the block theme's template parts,
   which is why these pages own their frame instead of borrowing one.

   Everything here is scoped to body.sdn-standalone so it can never leak onto a
   normal page of the site. */
body.sdn-standalone {
	margin: 0;
	padding: 0;
	background: var(--sdn-bg, #f6f7f9);
	color: var(--sdn-text, #15181e);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
body.sdn-standalone * { box-sizing: border-box; }

/* Sticky footer: header and footer hug the edges, the form sits in the middle
   even on a short page like "check your email". */
.sdn-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 1.75rem 1.25rem 1.25rem;
}

/* Head, main and foot all share one measure, so the logo, the content and the
   footer line up on the same left and right edges at every width. */
.sdn-shell__head,
.sdn-shell__main,
.sdn-shell__foot {
	width: 100%;
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
}

.sdn-shell__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 1.5rem;
}
/* Full size in the shell header too -- it has the most room of anywhere. */

.sdn-shell__main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* THE ONE THAT BITES.
   .sdn declares `margin: 0 auto` (it has to — it centres itself when the theme
   template is in charge). But an auto margin on the CROSS axis of a flex item
   overrides align-items: stretch, and the item shrink-wraps its content instead
   of filling the column. The result was a portal whose width followed whatever
   happened to be on the page: wide on Overview with its four stat cards, narrow
   on Tickets with one. width:100% puts the measure back under our control, and
   .sdn's own max-width still caps it. */
.sdn-shell__main > .sdn { width: 100%; }

/* Auth and intake use a narrow card. With .sdn now filling the column rather
   than hugging the card, the card has to centre itself — otherwise the sign-in
   form would sit against the left edge of a 1040px column. */
.sdn-shell__main .sdn-card--narrow {
	margin-left: auto;
	margin-right: auto;
}
/* No CSS needed to suppress a duplicate logo: SDN_SP_Setup::inline_logo_html()
   returns nothing at all when this shell is active, so the second copy is never
   rendered rather than rendered-then-hidden. Kept as a note because "why is there
   no rule here" is a fair question. */

.sdn-shell__foot {
	flex: 0 0 auto;
	padding: 2rem 0 .5rem;
	text-align: center;
	color: var(--sdn-muted, #697586);
	font-size: .84rem;
}
.sdn-shell__footline { margin: 0 0 .4rem; }
.sdn-shell__foot a { color: var(--sdn-muted, #697586); text-decoration: underline; }
.sdn-shell__foot a:hover { color: var(--sdn-text, #15181e); }
.sdn-shell__sep { padding: 0 .5rem; opacity: .55; }

@media (max-width: 600px) {
	.sdn-shell { padding: 1.25rem .9rem 1rem; }
	.sdn-shell__head { padding-bottom: 1.1rem; }
	.sdn-shell__foot { padding-top: 1.5rem; }
}


/* --- Client dashboard ------------------------------------------------------
   One row: a single small number, and the websites card taking the rest. The
   four-across stat grid was showing a client four numbers when only one of them
   is theirs to act on. */
.sdn-dash {
	display: grid;
	grid-template-columns: minmax(190px, 1fr) 3fr;  /* ~25% / ~75% */
	gap: 1.1rem;
	align-items: start;
	margin-bottom: 1.1rem;
}
.sdn-dash .sdn-card { margin-bottom: 0; }

.sdn-dash__stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 118px;
}
/* The "/12" half of "1/12" — same line, quieter, so the number that matters
   reads first and the total is context rather than a competing figure. */
.sdn-stat__of {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--sdn-muted);
	margin-left: .1em;
}

/* Count folded into the heading instead of occupying a card of its own. */
.sdn-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px; margin-left: .5em;
	border-radius: 999px;
	background: #eef1f5; color: #364152;
	font-size: .72rem; font-weight: 700; line-height: 1;
	vertical-align: middle;
}

/* Credit, on the rare occasion it is switched on, sits alone rather than
   stretching across four columns. */
.sdn-stats--single { grid-template-columns: minmax(190px, 260px); }

@media (max-width: 760px) {
	.sdn-dash { grid-template-columns: 1fr; }
	.sdn-dash__stat { min-height: 0; }
}

/* --- Chosen files ----------------------------------------------------------
   Rendered by portal.js. The native control shows "3 files" at best and
   nothing at all once you reopen the picker, so the client could not tell
   what was actually attached. Styles are inert without the JS. */
.sdn-files { margin: .6rem 0 0; padding: 0; list-style: none; }
.sdn-files__item {
	display: flex; align-items: center; gap: .6rem;
	padding: .45rem .6rem;
	border: 1px solid var(--sdn-border);
	border-radius: var(--sdn-radius-sm);
	background: #fff;
	margin-bottom: .4rem;
	font-size: .88rem;
}
.sdn-files__name {
	flex: 1 1 auto; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sdn-files__size { flex: 0 0 auto; color: var(--sdn-muted); font-size: .8rem; }
.sdn-files__remove {
	flex: 0 0 auto;
	width: 24px; height: 24px; padding: 0;
	border: 0; border-radius: 50%;
	background: #f2f4f7; color: var(--sdn-muted);
	font-size: 1rem; line-height: 1; cursor: pointer;
}
.sdn-files__remove:hover { background: #fee4e2; color: #b42318; }
.sdn-files__notice {
	margin: .5rem 0 0;
	font-size: .84rem;
	color: #b42318;
}