/*
 * cloudscape-lite.css
 *
 * Visual language adapted from the Cloudscape Design System.
 * Source: https://cloudscape.design/foundation/visual-foundation/design-tokens/
 * Capture date: TBD (record at implementation time)
 *
 * License note: Cloudscape is published under the Apache License 2.0. The
 * token VALUES below are derived from the Cloudscape design tokens reference
 * for the default light visual mode. Verify each value against the reference
 * URL above at implementation time. This file does not depend on
 * @cloudscape-design/components or any Cloudscape JavaScript runtime; it
 * expresses the Cloudscape visual language as plain CSS custom properties
 * and component-pattern classes.
 */

/* =====================================================================
 * Section 1: :root token catalogue
 * Requirements 3.1, 3.2, 3.3, 3.4, 7.1, 7.4
 * ===================================================================== */

:root {
  /* ---- Color: surfaces and text ---- */
  --color-background-layout-main:        #f2f3f3;
  --color-background-container-content:  #ffffff;
  --color-text-body-default:             #16191f;
  --color-text-body-secondary:           #5f6b7a;

  /* ---- Color: links ---- */
  --color-text-link-default:             #0972d3;
  --color-text-link-hover:               #033160;

  /* ---- Color: status text ---- */
  --color-text-status-success:           #037f0c;
  --color-text-status-error:             #d91515;

  /* ---- Color: primary button ---- */
  --color-background-button-primary-default:  #0972d3;
  --color-background-button-primary-hover:    #033160;
  --color-background-button-primary-disabled: #d1d5db;
  --color-text-button-primary-default:        #ffffff;

  /* ---- Color: normal (secondary) button ---- */
  --color-background-button-normal-default:   #ffffff;
  --color-background-button-normal-hover:     #f2f3f3;
  --color-text-button-normal-default:         #0972d3;

  /* ---- Color: borders ---- */
  --color-border-divider-default:        #e9ebed;
  --color-border-input-default:          #7d8998;
  --color-border-input-focus:            #0972d3;

  /* ---- Color: alert backgrounds and borders ---- */
  --color-background-status-success:     #f2f8f2;
  --color-background-status-error:       #fff7f7;
  --color-border-status-success:         #037f0c;
  --color-border-status-error:           #d91515;

  /* ---- Typography ---- */
  --font-family-base:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-size-heading-xl: 28px;
  --font-size-heading-l:  20px;
  --font-size-heading-m:  18px;
  --font-size-body-m:     14px;
  --font-size-body-s:     12px;
  --font-weight-heading:  700;
  --font-weight-strong:   700;
  --line-height-heading:  1.25;
  --line-height-body:     1.5;

  /* ---- Spacing scale ---- */
  --space-xxxs:  2px;
  --space-xxs:   4px;
  --space-xs:    8px;
  --space-s:     12px;
  --space-m:     16px;
  --space-l:     20px;
  --space-xl:    24px;
  --space-xxl:   32px;

  /* ---- Border radius ---- */
  --border-radius-button:    20px;
  --border-radius-input:     8px;
  --border-radius-container: 16px;
  --border-radius-alert:     12px;
  --border-radius-badge:     4px;

  /* ---- Focus ring ---- */
  --focus-ring-color:  #0972d3;
  --focus-ring-width:  2px;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  /* ---- Shadow ---- */
  --shadow-container: 0 1px 1px 0 rgba(0, 28, 36, 0.30),
                      1px 1px 1px 0 rgba(0, 28, 36, 0.15),
                     -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
  --shadow-panel:     0 4px 20px 1px rgba(0, 28, 36, 0.10);
}

/* =====================================================================
 * Section 2: Base / reset
 * Requirements 3.1, 3.2
 * ===================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body);
  color: var(--color-text-body-default);
  background: var(--color-background-layout-main);
  /* The originals set body { visibility: hidden; } via inline <style> and the
     inline JS sets visibility:visible after auth resolves. The styled HTML
     preserves that inline rule; cloudscape-lite.css does NOT override it. */
}

/* =====================================================================
 * Section 3: Layout primitives
 * Requirements 4.1, 4.2
 * ===================================================================== */

.cs-page-surface {
  display: block;
  background: var(--color-background-layout-main);
  min-height: 100vh;
}

.cs-container {
  max-width: 1024px;
  margin: var(--space-xxl) auto;
  padding: var(--space-l);
  background: var(--color-background-container-content);
  border-radius: var(--border-radius-container);
  box-shadow: var(--shadow-container);
}

/* =====================================================================
 * Section 4: Typography
 * Requirements 3.2, 4.4, 4.5
 * ===================================================================== */

h1,
.cs-heading-xl {
  font-size: var(--font-size-heading-xl);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text-body-default);
  margin: 0 0 var(--space-l) 0;
}

h2,
.cs-heading-l {
  font-size: var(--font-size-heading-l);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text-body-default);
  margin: 0 0 var(--space-m) 0;
}

p {
  margin: 0 0 var(--space-m) 0;
}

.cs-text-secondary {
  color: var(--color-text-body-secondary);
}

.cs-text-strong {
  font-weight: var(--font-weight-strong);
}

/* =====================================================================
 * Section 5: Top navigation
 * Requirements 4.3, 5.4
 * ===================================================================== */

.cs-top-nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--color-border-divider-default);
  margin-bottom: var(--space-l);
}

.cs-top-nav__spacer {
  flex: 1 1 auto;
}

.cs-top-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.cs-top-nav__link {
  color: var(--color-text-link-default);
  text-decoration: none;
  font-weight: var(--font-weight-strong);
}

.cs-top-nav__link:hover,
.cs-top-nav__link:focus-visible {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* =====================================================================
 * Section 6: Buttons
 * Requirements 1.7, 4.6, 4.7
 * ===================================================================== */

.cs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-l);
  font: inherit;
  font-weight: var(--font-weight-strong);
  line-height: 1.2;
  border-radius: var(--border-radius-button);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}

.cs-button--primary {
  background: var(--color-background-button-primary-default);
  color: var(--color-text-button-primary-default);
  border-color: var(--color-background-button-primary-default);
}

.cs-button--primary:hover {
  background: var(--color-background-button-primary-hover);
  border-color: var(--color-background-button-primary-hover);
}

.cs-button--primary:disabled,
.cs-button--primary[disabled] {
  background: var(--color-background-button-primary-disabled);
  border-color: var(--color-background-button-primary-disabled);
  color: var(--color-text-body-secondary);
  cursor: not-allowed;
}

.cs-button--normal {
  background: var(--color-background-button-normal-default);
  color: var(--color-text-button-normal-default);
  border-color: var(--color-border-input-default);
}

.cs-button--normal:hover {
  background: var(--color-background-button-normal-hover);
}

.cs-button--normal:disabled,
.cs-button--normal[disabled] {
  background: var(--color-background-button-primary-disabled);
  border-color: var(--color-background-button-primary-disabled);
  color: var(--color-text-body-secondary);
  cursor: not-allowed;
}

.cs-button--inline-retry {
  margin-top: var(--space-s);
}

/* =====================================================================
 * Section 7: Links
 * Requirements 4.8
 * ===================================================================== */

.cs-link {
  color: var(--color-text-link-default);
  text-decoration: none;
}

.cs-link:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

.cs-link:focus-visible {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* =====================================================================
 * Section 8: Form fields
 * Requirements 4.9, 4.10
 * ===================================================================== */

.cs-form-field {
  display: block;
  margin-top: var(--space-l);
}

.cs-form-field__label {
  display: block;
  font-weight: var(--font-weight-strong);
  color: var(--color-text-body-default);
  margin-bottom: var(--space-xxs);
}

.cs-form-field__control {
  display: block;
  margin-top: var(--space-xxs);
}

.cs-form-field__constraint {
  display: inline-block;
  margin-top: var(--space-xxs);
  color: var(--color-text-body-secondary);
  font-size: var(--font-size-body-s);
}

.cs-form-field__error {
  display: block;
  margin-top: var(--space-xxs);
  color: var(--color-text-status-error);
  font-size: var(--font-size-body-s);
}

textarea.cs-textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: var(--space-xs) var(--space-s);
  border: 1px solid var(--color-border-input-default);
  border-radius: var(--border-radius-input);
  background: var(--color-background-container-content);
  color: var(--color-text-body-default);
  resize: vertical;
}

textarea.cs-textarea:hover {
  border-color: var(--color-text-body-default);
}

textarea.cs-textarea:focus-visible {
  outline: none;
  border-color: var(--color-border-input-focus);
  box-shadow: var(--focus-ring-shadow);
}

/* Form row: counter + submit button.
   At >=600px the row is horizontal with the submit on the end side.
   At <600px Section 12's media query stacks them. */
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  margin-top: var(--space-s);
}

/* =====================================================================
 * Section 9: Alerts and flashbar
 * Requirements 4.11, 4.12
 *
 * The .cs-alert component is the unified alert pattern. .cs-flashbar
 * is a modifier that pins it as a full-bleed banner above the page.
 *
 * The legacy class names .error and .error-panel are also styled here
 * so the existing inline JavaScript (which renders nodes with those
 * exact class names) does not need to change. Requirement 2.6.
 * ===================================================================== */

.cs-alert {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
  padding: var(--space-m);
  border: 1px solid var(--color-border-divider-default);
  border-left-width: 4px;
  border-radius: var(--border-radius-alert);
  background: var(--color-background-container-content);
  color: var(--color-text-body-default);
  margin-bottom: var(--space-m);
}

.cs-alert__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.cs-alert__body {
  flex: 1 1 auto;
}

.cs-alert--success {
  background: var(--color-background-status-success);
  border-color: var(--color-border-status-success);
  color: var(--color-text-status-success);
}

.cs-alert--error {
  background: var(--color-background-status-error);
  border-color: var(--color-border-status-error);
  color: var(--color-text-status-error);
}

.cs-alert--info {
  background: var(--color-background-container-content);
  border-color: var(--color-text-link-default);
  color: var(--color-text-body-default);
}

.cs-flashbar {
  /* Pinned banner above <header>; full-bleed at top of viewport. */
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
  border-top-width: 0;
  margin-bottom: 0;
}

/* Legacy class names rendered by the inline JS in app/index.html.
   These re-use the alert tokens so the visual is the Cloudscape
   error alert pattern without any JS edits. Requirement 2.6. */

.error {
  display: block;
  padding: var(--space-m);
  border: 1px solid var(--color-border-status-error);
  border-left-width: 4px;
  border-radius: var(--border-radius-alert);
  background: var(--color-background-status-error);
  color: var(--color-text-status-error);
  margin: var(--space-m) 0;
}

.error-panel {
  display: block;
  padding: var(--space-m);
  border: 1px solid var(--color-border-status-error);
  border-left-width: 4px;
  border-radius: var(--border-radius-alert);
  background: var(--color-background-status-error);
  color: var(--color-text-status-error);
  margin: var(--space-m) 0;
}

/* =====================================================================
 * Section 10: Status indicators
 * Requirements 4.14
 * ===================================================================== */

.cs-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-body-secondary);
  font-size: var(--font-size-body-m);
}

.cs-status-indicator--loading {
  font-style: italic;
}

/* Legacy class name rendered by the inline JS as the initial loading
   message inside #content. Re-uses the status indicator visual. */
.loading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-body-secondary);
  font-style: italic;
  margin: var(--space-m) 0;
}

/* =====================================================================
 * Section 11: Recommendations list and transaction id
 * Requirements 4.15, 4.16
 * ===================================================================== */

.cs-list,
.recommendations {
  margin: var(--space-s) 0;
  padding-left: var(--space-l);
  list-style: disc;
}

.cs-list > li,
.recommendations > li {
  margin: var(--space-xxs) 0;
  line-height: var(--line-height-body);
}

.cs-transaction-id,
.transaction-id {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--color-text-body-secondary);
  font-size: var(--font-size-body-s);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The .echo paragraph rendered by the inline JS to repeat the user's
   submitted message. Render as body text on the success surface. */
.echo {
  margin: 0 0 var(--space-s) 0;
  color: var(--color-text-body-default);
}

/* The .empty-state paragraph rendered by the inline JS when no
   recommendations come back. Render as secondary text. */
.empty-state {
  margin: var(--space-s) 0;
  color: var(--color-text-body-secondary);
  font-style: italic;
}

/* =====================================================================
 * Section 12: Focus-ring utility
 * Requirements 3.5, 6.2, 6.3
 *
 * Every interactive element receives a visible focus indicator on
 * :focus-visible. textarea.cs-textarea uses a box-shadow ring (in
 * Section 8) instead of an outline so the input border can change
 * color without the outline drawing outside the rounded corners.
 * Every other interactive element uses a 2px solid outline with a
 * 2px offset.
 * ===================================================================== */

.cs-focusable:focus-visible,
.cs-button:focus-visible,
.cs-link:focus-visible,
a.cs-link:focus-visible,
button.cs-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-width);
}

/* =====================================================================
 * Section 13: Correspondence-display state rules
 * Requirements 1.6, 4.13, 6.7
 *
 * The inline JS sets [data-state] to one of "idle", "sending",
 * "success", or "error". Each non-idle state renders with both a
 * colored background AND a 4px colored left border so state is
 * conveyed by more than color alone (Requirement 6.7).
 * ===================================================================== */

#correspondence-display {
  margin-top: var(--space-l);
}

#correspondence-display[data-state="idle"] {
  /* No chrome: the section is empty in the idle state. */
}

#correspondence-display[data-state="sending"] {
  display: block;
  padding: var(--space-m);
  border: 1px solid var(--color-border-divider-default);
  border-left: 4px solid var(--color-text-body-secondary);
  border-radius: var(--border-radius-alert);
  background: var(--color-background-container-content);
  color: var(--color-text-body-secondary);
  font-style: italic;
}

#correspondence-display[data-state="success"] {
  display: block;
  padding: var(--space-m);
  border: 1px solid var(--color-border-status-success);
  border-left: 4px solid var(--color-border-status-success);
  border-radius: var(--border-radius-alert);
  background: var(--color-background-status-success);
  color: var(--color-text-body-default);
}

#correspondence-display[data-state="error"] {
  display: block;
  padding: var(--space-m);
  border: 1px solid var(--color-border-status-error);
  border-left: 4px solid var(--color-border-status-error);
  border-radius: var(--border-radius-alert);
  background: var(--color-background-status-error);
  color: var(--color-text-status-error);
}

/* =====================================================================
 * Section 14: Responsive media query (mobile)
 * Requirements 5.1, 5.2, 5.3, 5.4
 *
 * At <600px the top nav stacks (column layout, hidden spacer, full-
 * width actions), the textarea and submit button go full width, and
 * the container reduces its horizontal padding.
 * ===================================================================== */

@media (max-width: 599px) {
  .cs-container {
    margin: var(--space-l) auto;
    padding: var(--space-m);
    border-radius: var(--border-radius-input);
  }

  .cs-top-nav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .cs-top-nav__spacer {
    display: none;
  }

  .cs-top-nav__actions {
    width: 100%;
    justify-content: stretch;
  }

  .cs-button,
  .cs-button--primary,
  .cs-button--normal,
  .cs-top-nav__actions > .cs-button,
  textarea.cs-textarea,
  #correspondence-submit {
    width: 100%;
  }

  .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  h1,
  .cs-heading-xl {
    font-size: 24px;
  }
}

/* =====================================================================
 * Section 15: Inline SVG icon sprite (canonical reference)
 * Requirements 6.7, 4.11, 4.12, 4.13, 4.14
 *
 * The two styled HTML files (Styling_update/Resources/index.html and
 * Styling_update/Resources/app/index.html) embed the following SVG
 * sprite at the top of <body> inside a hidden <svg> with
 * width="0" height="0" style="position:absolute" aria-hidden="true".
 *
 * Each <symbol> uses currentColor for stroke so the alert variant's
 * text color drives the icon color. The sprite is well under 1 KB.
 *
 * --- BEGIN canonical sprite (copy/paste into each styled HTML file) ---
 *
 * <svg width="0" height="0" style="position:absolute" aria-hidden="true">
 *   <defs>
 *     <symbol id="icon-success" viewBox="0 0 16 16">
 *       <path d="M3 8.5l3 3 7-7" fill="none" stroke="currentColor"
 *             stroke-width="2" stroke-linecap="round"
 *             stroke-linejoin="round"/>
 *     </symbol>
 *     <symbol id="icon-error" viewBox="0 0 16 16">
 *       <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor"
 *               stroke-width="2"/>
 *       <path d="M8 4v5M8 11.5v.5" stroke="currentColor"
 *             stroke-width="2" stroke-linecap="round"/>
 *     </symbol>
 *     <symbol id="icon-info" viewBox="0 0 16 16">
 *       <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor"
 *               stroke-width="2"/>
 *       <path d="M8 7v5M8 4.5v.5" stroke="currentColor"
 *             stroke-width="2" stroke-linecap="round"/>
 *     </symbol>
 *     <symbol id="icon-loading" viewBox="0 0 16 16">
 *       <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor"
 *               stroke-width="2" stroke-dasharray="6 24"
 *               stroke-linecap="round">
 *         <animateTransform attributeName="transform" type="rotate"
 *                           from="0 8 8" to="360 8 8" dur="1s"
 *                           repeatCount="indefinite"/>
 *       </circle>
 *     </symbol>
 *   </defs>
 * </svg>
 *
 * --- END canonical sprite ---
 *
 * Sizes:
 *   16px in inline alerts and form-field error messages
 *   24px in the flashbar variant for #config-error
 * ===================================================================== */