Form:Accession/styles.css

/* Form:Accession/styles.css */

.lw-form {

 max-width: 900px;
 margin: 0 auto;
 font-size: 0.95em;

}

/* ── Tier dividers ── */ .lw-tier-header {

 font-size: 1.15em;
 font-weight: 700;
 letter-spacing: 0.3px;
 padding: 0.6rem 1rem;
 margin: 2rem 0 0.25rem 0;
 border-radius: 8px 8px 0 0;
 color: #fff;

}

.lw-tier--1 { background: #2d6a4f; } .lw-tier--2 { background: #d9480f; } .lw-tier--3 { background: #5c4d7d; }

.lw-tier-hint {

 font-size: 0.88em;
 color: rgba(0,0,0,0.55);
 padding: 0.35rem 1rem 0.8rem 1rem;
 margin: 0 0 1rem 0;
 border: 1px solid rgba(0,0,0,0.08);
 border-top: none;
 border-radius: 0 0 8px 8px;
 background: rgba(0,0,0,0.02);

}

/* ── Section cards ── */ .lw-section {

 border: 1px solid rgba(45, 106, 79, 0.15);
 border-radius: 10px;
 margin-bottom: 1.2rem;
 overflow: hidden;
 background: #fff;
 box-shadow: 0 2px 8px rgba(0,0,0,0.04);

}

.lw-section-header {

 background: rgba(45, 106, 79, 0.07);
 padding: 0.6rem 1rem;
 font-weight: 700;
 font-size: 1.0em;
 color: #1b4332;
 border-bottom: 1px solid rgba(45, 106, 79, 0.12);

}

.lw-section-body {

 padding: 1rem;

}

/* ── Field grid ── */ .lw-field-grid {

 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.8rem 1.5rem;
 margin-bottom: 0.5rem;

}

.lw-field {

 display: flex;
 flex-direction: column;
 gap: 0.2rem;

}

.lw-field--wide {

 grid-column: 1 / -1;

}

.lw-field label {

 font-weight: 600;
 font-size: 0.9em;
 color: #1b4332;

}

.lw-label--sub {

 font-size: 0.95em;
 font-weight: 700;
 color: #2d6a4f;
 padding-top: 0.4rem;
 border-top: 1px solid rgba(45, 106, 79, 0.10);
 margin-top: 0.3rem;

}

.lw-hint {

 font-size: 0.82em;
 color: rgba(0,0,0,0.5);
 line-height: 1.35;

}

.lw-req {

 color: #c92a2a;
 font-weight: 700;

}

/* ── PF input styling ── */ .lw-form input[type="text"], .lw-form textarea, .lw-form select {

 border: 1px solid rgba(0,0,0,0.18);
 border-radius: 6px;
 padding: 0.4rem 0.6rem;
 font-size: 0.95em;
 background: #fafafa;
 transition: border-color 0.15s;
 width: 100%;
 box-sizing: border-box;

}

.lw-form input[type="text"]:focus, .lw-form textarea:focus, .lw-form select:focus {

 border-color: #2d6a4f;
 outline: none;
 background: #fff;
 box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.12);

}

.lw-form select {

 max-width: 100%;

}

.lw-form textarea {

 resize: vertical;
 min-height: 60px;

}

/* ── Checkbox groups ── */ .lw-form .checkboxesSpan {

 display: flex;
 flex-wrap: wrap;
 gap: 0.2rem 0.8rem;
 padding: 0.3rem 0;

}

.lw-form .checkboxesSpan label {

 font-weight: 400;
 font-size: 0.9em;
 color: rgba(0,0,0,0.75);
 display: inline-flex;
 align-items: center;
 gap: 0.25rem;
 cursor: pointer;

}

/* ── Datepicker ── */ .lw-form .mw-widget-dateInputWidget {

 max-width: 200px;

}

/* ── Form actions ── */ .lw-form-actions {

 display: flex;
 gap: 0.6rem;
 padding: 1.5rem 0;
 flex-wrap: wrap;

}

.lw-form-actions input[type="submit"], .lw-form-actions input[type="button"] {

 padding: 0.55rem 1.4rem;
 border-radius: 6px;
 font-size: 0.95em;
 font-weight: 600;
 cursor: pointer;
 border: 1px solid rgba(0,0,0,0.15);
 transition: background 0.15s, box-shadow 0.15s;

}

.lw-form-actions input[type="submit"] {

 background: #2d6a4f;
 color: #fff;
 border-color: #2d6a4f;

}

.lw-form-actions input[type="submit"]:hover {

 background: #1b4332;
 box-shadow: 0 2px 6px rgba(0,0,0,0.15);

}

.lw-form-actions input[type="button"] {

 background: #fff;
 color: #1b4332;

}

.lw-form-actions input[type="button"]:hover {

 background: #f5f7f4;

}

/* ── Mobile ── */ @media (max-width: 640px) {

 .lw-field-grid {
   grid-template-columns: 1fr;
 }

 .lw-form-actions {
   flex-direction: column;
 }

 .lw-form-actions input[type="submit"],
 .lw-form-actions input[type="button"] {
   width: 100%;
   text-align: center;
 }

}